Введение в юзабилити. Логичный структурированный контент

Доброго дня вам, уважаемые читатели моего блога. Популярным инструментом продаж услуг и товаров в интернете является сайт. Как сделать так, чтобы пользователи не просто заходили полюбоваться красивыми картинками, но делали именно то, что вам нужно: совершали покупки, оформляли подписку на материалы?

Поведением пользователя на сайте можно управлять. Для этого существует юзабилити, основные принципы которого мы рассмотрим в статье.

Но даже если у вас нет своего сайта, понимание основ юзабилити можно превратить в источник неплохих денег. Интересно? Тогда читайте дальше.

Проблема большинства владельцев сайтов одинакова. В веб-разработку вложены большие деньги, но инструмент не работает!

Пользователи не совершают тех действий, которые ждет от них продавец. Не покупают, не подписываются на обновления, быстро уходят, низкий процент повторных обращений. В чем дело?

А ответ на поверхности – сайт для пользователя неудобный!

Что это значит? Например, чтобы найти информацию об оплате и доставке пользователю нужно пролистать несколько страниц. Никто не хочет тратить лишние усилия на поиски. Поэтому нужно предлагать простые решения.

Принципы юзабилити в интерфейсе

Есть несколько важных правил в дизайне, которые нужно учитывать при его разработке.

Первое правило носит название «Правило 7». Основано оно на особенностях работы человеческой кратковременной памяти.

Охватить вниманием человек способен от 5 до 9 объектов, в среднем это Не нужно перегружать страницы обилием объектов среди которых легко потеряться, ограничьтесь семью.

Второе правило – это правило двух секунд. Никто не хочет ждать пока прогрузится сложная, забитая графикой и флеш-заставками страница. Поэтому стоит подумать много раз, прежде чем так поступать.

Возможно, это сделает сайт визуально более привлекательным, но пользоваться им не будут.

Следующее правило звучит как правило трех кликов. Это значит, что пользователь должен совершить максимум три перехода до того момента, как найдет нужную информацию. Такие сайты любят не только посетители, но и поисковые роботы.

Правило Фиттса. Суть его в том, что не нужно делать крупные предметы еще более крупными, человек их и так заметит.

Принцип перевернутой пирамиды . Это значит, что посетитель должен сначала получать самую важную информацию и постепенно переходить к менее значимой. Такой подход экономит время на поиски, что вызывает у пользователей положительные эмоции.

Тестирование интерфейса

Даже если вы уверены в том, что выполнили все правильно, интерфейс нуждается в обязательном тестировании. Для этого нужно собрать группу людей, которые будут принимать участие в тесте и подготовить список самых востребованных задач, которые пользователь должен решить при помощи вашего сайта.

Допустим, найти товар, оформить заказ, оплатить, поменять товар в корзине, получить информацию о доставке и другие.

Все всплывающие в ходе тестов ошибки нужно фиксировать письменно, даже самые незначительные. Устранить все недочеты. Шаги повторять до тех пор, пока не будет получен необходимый результат.

Чужими руками или самостоятельно?

Разработка интерфейса может быть выполнена самостоятельно или руками привлеченных специалистов.
Например, на этой бирже weblancer.net можно заказать услуги по разработке дизайна и верстке сайта. Вложенные средства окупятся очень быстро.

Также вы можете пройти обучение мастерству создания работающих сайтов. Например, здесь вы найдете много качественных, работающих курсов.

Эти программы могут быть полезны не только владельцам сайтов, но и людям, которых интересует хорошо оплачиваемая работа в интернете.
Пройдя обучение, вы становитесь специалистом, который может помочь качественно в интернете, сделать его более прибыльным.

Такие специалисты востребованы на рынке труда и могут рассчитывать на хорошую оплату.

Обучающие курсы содержат видеоматериалы от ведущих специалистов российского интернета, практические материалы, чек-листы и интеллект-карты. Изучить информацию вы можете в удобное для вас время.

Например, на курсе «Проведение аудита юзабилити сайтов » вы научитесь видеть и исправлять ошибки, которые приводят к потере больших сумм денег, сможете обеспечить попадание в топ-10 только за счет того, что исправите эти ошибки.

Принципы юзабилити контента

Говоря о юзабилити, не стоит упускать из виду важность контента. Каким бы удобным ни был сайт с точки зрения дизайна, главное, зачем приходит человек – это качественная информация, контент.

Признаки качественного контента:
логичность информации;
простота подачи;
наличие структуры.

Текст, написанный простыней, не воспринимается. Такие статьи закрывают, даже не пытаясь в них вчитываться. Поэтому в любой статье должна быть четкая структура: подзаголовки, списки, врезки, выделенные основные мысли.

Все это позволяет пользователю экономить время на поиске нужной информации.
Где брать такие тексты? Можно писать их самостоятельно, привлекать для работы профессиональных копирайтеров или покупать готовый контент на бирже, например, здесь — textsale.ru

Юзабилити (от английского usability - "удобство использования) - это качественная оценка простоты и комфорта работы с сайтом. Пользователь должен без труда находить нужную информацию, не теряясь в функционале и многочисленных страницах, и при этом получать эстетическое удовольствие от работы с ресурсом.

Почему важно соблюдать принципы юзабилити сайтов?

• Конверсия. Правильно продуманная навигация подтолкнет пользователя выполнить целевое действие: позвонить в компанию, скачать прайс-лист, заказать товар, воспользоваться услугой и т.д. Важно грамотно выстроить повествование и структуру, ведь если посетитель задумается хотя бы на несколько секунд или не сразу поймет, что делать дальше - можно его потерять. К примеру, если, попав на главную страницу, он с первых же строк не узнает о сфере работы компании, не сориентируется, где находится и что делать дальше - он без сожалений закроет вкладку. Если он не найдет развернутых ответов на интересующие вопросы в виде статьи, видео, графики - произойдет то же самое.
• Посещаемость. Пользователь вернется на сайт только в том случае, если ему понравится с ним работать. А потому ресурс должен быть удобным и понятным со всех позиций: текст, навигация, интерфейс, последовательность действий и т.д. Благодаря обилию выбора современному потребителю не приходится долго разбираться в тонкостях работы с сайтом: сложно здесь - он перейдет к конкурентам, у которых понятнее и проще.

Принципы юзабилити web-ресурса

Разработка юзабилити сайта базируется на главном правиле: «чем проще - тем лучше». Чем более привычную структуру и интерфейс видит пользователь - тем легче ему сориентироваться и тем меньше времени он потратит, чтобы найти нужный раздел, т.к. будет чувствовать себя более уверенно.

1. Дизайн - залог доверия к сайту

Не перегружайте визуальную часть множеством деталей, цветов и динамичных элементов. Пользователя ничего не должно отвлекать от восприятия информации. А при длительном нахождении на ресурсе он не должен уставать от обилия контраста, плохой читабельности текста, разноплановой графики. Упор - на минималистичный дизайн: в сумме с уникальностью следует продумать сочетание цветов фона и шрифта, число и вид изображений.

Еще один важный момент: грамотно продуманный «внешний вид» сайта - залог доверия со стороны потребителя, попавшего к вам впервые. Простота и доступность использования, цветовые сочетания, стиль, подходящие вашей целевой аудитории картинки, качество контента, отсутствие ошибок - все это влияет на расположение к ресурсу.

Пример сайта, перенасыщенного графикой. Дизайн пестрит рассеивающими внимание цветовыми сочетаниями, обилием картинок.

2. Логичный структурированный контент

Один из главных факторов юзабилити - удобное восприятие текстов. Структура, оформление, информативность, логическая разбивка, оптимизация, отсутствие ошибок - все эти параметры важно учитывать при написании статьи. Если это длинный текст-руководство - сделайте оглавление в виде ссылок, чтобы пользователь мог быстро найти нужный раздел.

Согласно отчетам компаний Clicktale и CX Partners, длина страницы не влияет на то, будет ли пользователь изучать контент ниже или нет. Важнее грамотно продуманная структура графики и текста: выделение приоритетной информации, последовательность расположения.

3. Важная информация - в левом углу

Посетители просматривают web страницу по F-образному шаблону: внимание концентрируется в верхнем левом углу и ограничивается первыми несколькими абзацами текста в убывающем порядке. Потому при распределении важной информации использование такой схему увеличит вероятность того, что посетитель быстро найдет нужные данные, увидит самое важное, бегло пробежавшись по разделу взглядом.

4. Общение с пользователем

Успешная регистрация, принятый заказ, несуществующая страница - человек должен быть всегда в курсе происходящего. Причем во всех подробностях. Если он зарегистрирован в системе - расскажите, что делать дальше, если заказ принят: укажите номер, время ожидания звонка, контактные данные; если попал на страницу 404 - как найти нужную информацию или куда вернуться.

Попав на такую страницу 404, пользователь не растеряется и, скорее всего, не сразу покинет ресурс.

5. Отмена действия

У человека должна быть возможность передумать. К примеру, социальная сеть ВКонтакте позволяет восстановить страницу после ее удаления. Некоторые интернет-магазины - изменить или удалить заказ после его оформления, откорректировать способ доставки и оплаты. Все это - составные части юзабилити веб сайта.

6. Ненавязчивое предложение помощи

Не нужно настаивать на общении. Большие выскакивающие окна с предложением помочь в выборе, цветная полоска с номером телефон, занимающая треть экрана - подобные элементы не только смотрятся навязчиво, отталкивают посетителя, но и закрывают часть функционала. В примере ниже - форму подбора товара. Окно помощи должно легко скрываться, потому крестики и другие подобные значки нужно делать заметными, а не полупрозрачными или сливающимися с фоном.

Лучше, чтобы изначально данная форма была в свернутом состоянии, но при этом заметной - к примеру, в виде яркой боковой вкладки. И при этом не перекрывала часть контента на странице. Последнее относится и к кнопкам социальных сетей.

7. Разговор на понятном языке

Не делайте упор на специализированные термины - говорите проще, чтобы пользователю не пришлось тратить время на толкование непонятного слова. Если без узких понятий, пояснений не обойтись - разрабатывайте всплывающие окна. Это же касается заполнения форм: если вы диктуете определенные условия в виде длины имени, пароля, формата телефона, допустимой географии - укажите это в виде подсказок.

8. Отказ от резких перемен

Это касается пунктов меню, названия и вида кнопок, их расположения. Представьте перестановку в любимом супермаркете: после года ежедневных покупок вы вдруг замечаете, что руководство решило поменять местами отделы, товары, сделать редизайн. И теперь молоко стоит на прилавке для сметаны, каши - там, где раньше были масла, а вместо замороженной вишни вы находите свиные почки. Указатели стали красивее, но совершенно другими - как и привычные значки скидок. Итог: вы теряетесь и тратите намного больше времени, чем обычно, чтобы изучить новое оформление и сориентироваться, заново привыкнуть.

То же самое относится к веб-дизайну: пользователь не только потратит больше времени, но и разочаруется, заметив, что вместо значка корзины теперь - «Добавить товар», вместо «Каталог» - «Продукция», а привычные объемные кнопки обтекаемой кнопки стали плоскими и рублеными. Потому задумав «перестановку», не шокируйте посетителя - изменения должны быть постепенными и не менять кардинально привычную структуру.

9. Все возможности - на виду

Удачное решение - когда пользователь видит все разделы, в которые может перейти, т.к. в любой момент может быстро сориентироваться, где находится и как вернуться обратно. Если на сайте планируется много контента - резонно предусмотреть горизонтальное верхнее, вертикальное меню (и то, и другое - возможно, с подразделами), а также «подвал». Если речь идет о минималистичной «визитке» или landing page - достаточно только верхнего горизонтального меню.

Если категорий очень много - добавьте пункт «Карта сайта», который позволит пользователю сориентироваться, какие разделы содержит ресурс и как ему туда попасть. Не стоит пренебрегать «хлебными крошками» - навигационной цепочкой в верхней части блока контента, которая подсказывает, по какой схеме человек попал на страницу.

Пример удачной карты сайта

10. Форма регистрации и заказа: чем лаконичнее - тем лучше

Чем больше полей для заполнения - тем меньше пользователю хочется тратить на это время. Причем компоновка полей, надписей, подбор шрифтов могут быть идеальными, а вот длина - отталкивающей. Современные основы юзабилити заставляют веб-разработчиков сокращать длину этих форм до минимума, нещадно выкидывая вопросы об образовании, уровне дохода, профессии и т.д. Но! Сравните две формы: несмотря на наличие всего пары дополнительных полей, заполнять первую хочется меньше, чем вторую. Не говоря уже о требовании обязательно указать номер телефона.

11. Заметное длинное поле поиска

Соответствующая кнопка - лучший помощник посетителя. Особенно если речь идет о крупном ресурсе. Строку поиска пользователь должен обнаружить без труда. Чтобы при первом знакомстве он не тратил на обнаружение соответствующей строки даже несколько секунд.

Еще один важный момент - длина поля поиска. Согласно исследованию Якоба Нильсена, в среднем туда вмещается 18 символов, а оптимальная длина - 27 символов. В 90% случаев сюда поместится даже длинный запрос, чтобы пользователь его полностью увидел и исправил при надобности. Для установки нужной ширины используйте относительную единицу «em», равную размеру используемого шрифта.

Строка поиска - не в шапке сайта, а под презентацией, внизу страницы. Не самый удобный вариант, учитывая, что пользователь автоматически ищет эту опцию в верхней части сайта.

12. Больше свободного пространства

Сайт можно сравнить с жилой комнатой: если каждый квадратный метр чем-то занят - человек будет чувствовать себя неуютно. Аналогично и здесь: если страница будет переполнена полезными блоками, разделами, ремарками и прочей информацией - посетитель потеряется и не поймет, куда устремить внимание в первую очередь. Современный дизайн склонен к минимализму: на странице - только самое важное.

Множество блоков с практически незаметными рамками, обилие разнообразной графики, отсутствие выделения приоритетной информации не дают понять, на что обращать внимание в первую очередь при попадании на сайт.

После того как все принципы юзабилити учтены, переходят к тестированию, которое проводится постоянно, т.к. любая ошибка может оттолкнуть потенциального клиента.

Тестирование юзабилити

Новый интерфейс оценивается с двух позиций:

• Качественная. В данной категории анализируется функциональность ресурса, целевая направленность, грамотность составления структуры и подготовки контента, а также другие параметры, перечисленные в предыдущем разделе. Важно проверить сайт на ошибки: битые ссылки, редиректы, внешний вид страницы 404 и т.д.
• Количественная. Здесь оценивается скорость загрузки страниц, время отклика, перехода между страницами, поиска нужного раздела или кнопки.

Тестирование проводится самостоятельно либо при помощи специальных сервисов - к примеру, Яндекс.Метрика. Чтобы оценить юзабилити своими силами, нужно потратить немного времени: набрать группу из 5-6 человек из категории целевых пользователей, подготовить для них задания и вопросы по работе ресурса, сделать выводы из полученных результатов, исправить найденные ошибки. После внесенных изменений следует заново собрать фокус-группу.

Важно применять правила юзабилити не в самый последний момент: чем раньше разработчик начнет планировать структуру и внешний вид будущего ресурса - тем больше аспектов продумает, более качественный результат получит и сможет без спешки внести все коррективы. Предварительно следует проанализировать сайты конкурентов, выявив их слабые и сильные стороны, а также оценить предыдущий ресурс при его наличии, обнаружив моменты, требующие улучшения.

Статью подготовила Виктория Закирова.

Доброго времени суток, уважаемые читатели. Думаю все из вас слышали такое слово, как юзабилити. Многие даже знают, что это такое, а какая-то часть только думает, что знает.

Так получилось, что мне в своей практике пришлось очень тесно столкнуться не просто с понятием юзабилити, а именно проанализировать сайт, высказать свое мнение и дать рекомендации по улучшению. Причем анализировала я не с точки зрения веб-дизайна, а с точки зрения эффективности сайта, как инструмента бизнеса.

Самым сложным в этой ситуации для меня оказалось не выявление проблемных моментов на сайте, а сами объяснения, почему это считается проблемным.

Естественно, я не собираюсь претендовать на глубокие знания в юзабилити сайтов и не собираюсь конкурировать с профильными ресурсами по данной теме. Те несколько публикаций, которые я посвящу юзабилити, будут в большей степени для упорядочивания моих знаний, закрепления темы и шпаргалки на будущее.

Также обращаю внимание, что я рассматриваю данную тему не столько с точки зрения веб-разработчика и веб-дизайна, сколько с точки зрения интернет-маркетолога.

Именно поэтому в предыдущей статье я поделилась , которой объясняется и описанный ниже взгляд на юзабилити.

Хотелось бы начать с того, что большая часть информации о юзабилити в различных блогах о веб-дизайне – это только верхушка айсберга. Это обусловлено несколькими причинами, и одна из них заключается в том, что юзабилити – это не какое-то там удобство пользования сайтом, которое может придумать любой веб-дизайнер, это отдельное масштабное направление в разработке программного обеспечения, на службе которого трудятся настоящие профессионалы – юзибилити-инженеры.

Немного из истории возникновения юзабилити

Из всех определений, что я встретила в интернете, по сути ни одно из них не являлось определением. т.е. нельзя сказать, что юзабилити – это наука о…., или юзабилити – это комплекс мер….

Из всего многообразия определений я пока решила остановиться на определении международного стандарта ISO 9241-11, согласно которому:

Юзабилити – это степень , с которой продукт может быть использован определёнными пользователями при определённом контексте использования для достижения определённых целей с должной эффективностью, продуктивностью и удовлетворённостью.

Но решила поискать и другие определения, из-за чего я углубилась в истоки возникновения, и выяснила, что юзабилити является частью микроэргономики, которая в свою очередь, является одним из разделов эргономики. Наконец-то я встретила понятное для меня слово, при этом имеющее научную основу и терминологию.

В прошлой жизни я должна была стать художником-дизайнером и в процессе обучения получила знания о том, что такое эргономика – наука, изучающая взаимодействие человека с окружающими предметами (может определение не самое научное, но суть передает).

Вы когда-нибудь задумывались, почему ступеньки в вашем подъезде ровно той высоты, какой есть? Дверные проемы никогда не бывают у же определенного размера, как и односпальная кровать. Все размеры предметов являются следствием науки эргономики, даже не смотря на то, что появились несколькими тысячелетиями раньше неё самой.

Любая современная разработка, во-первых, всегда разрабатывается с учетом размеров среднестатистического человека, во-вторых, проходит тщательное тестирование на предмет удобства использования.

С развитием техники в эргономике выделилось направление – микроэргономика, одним из направлений в которой является проектирование интерфейсов. Вот тут то и возникло такое слово, как юзабилити.

Как уже сказала выше, я не просто так опубликовала прошлую статью о интернет-маркетинге, в которой поделилась своими видением этой темы. И рассуждая на тему юзабилити с точки зрения интернет-маркетинга, я пришла к такому выводу, что в большей степени юзабилити является аналогом нашего слова "качество", т.е. фразы: юзабилити сайта и качество сайта по сути являются равноценными.

Я уже затрагивала такую тему, что для любого бизнеса . Чем более качественным будет ваш инструмент, тем лучших результатов вы сможете добиться.

Т.е. качественный инструмент тот, который выполняет свою функцию: для интернет-магазина это будут продажи; для сайта дизайн студии – прямые заказчики; для блога – подписчики.

Соответственно, с сайтом постоянно взаимодействует пользователь, и чем легче и проще происходит взаимодействие, тем более качественным является ваш инструмент - сайт, значит, тем лучше юзабилити вашего сайта.

Самое главное, почему я столько времени уделила своим размышлениям и поискам, чтобы вы усвоили для себя, что юзабилити не просто "удобное меню на сайте", а мера качества всего сайта с точки зрения использования его человеком.

Результатом взаимодействия является удовлетворение нужд и потребностей интернет-пользователя (), что в итоге приносит прибыль компаниям, которые развивают свой бизнес посредством интернета.
И ещё раз...

нельзя сказать о сайте - "у сайта хорошее юзабилити" до тех пор, пока вы не получите реальное подтверждение тому, что этот сайт приносит пользу пользователю. Соответственно, в зависимоти от сайта пользой является - получение информации, осуществление покупки и т.п., т.е. все то, что приводит к удовлетворению нужд и потребностей интернет-пользователя.

Казалось бы, выводы все сделаны, теперь должно быть все более понятно, но не тут то было. Ведь все люди разные, и у каждого свое мерило качества. Для одних пользователей будет удобным одно, другим – другое. Но юзабилити сайта, как и качество сайта невозможно измерить, все это является относительными величинами. Осталось только понять, относительно чего? Ответ - относительно того, что было или имеется изначально.

И это вторая причина, почему многие о юзабилити имеют самые поверхностные знания. Как я уже сказала – юзабилити – это огромный пласт исследовательской, статистической и аналитической информации в разработке программного обеспечения, в том числе и в веб-разработке.

Для ответа на все возможные вопросы проводятся исследования, опросы, тестирование и анализ данных. Для этого над вопросом юзабилити работают целые группы исследователей и разработчиков, а в тестировании участвуют тысячи пользователей. Но, к сожалению, позволить себе такие масштабные исследования могут только крупные компании. Но, естественно, это не освобождает каждого владельца сайта думать о юзабилити своего ресурса, проводить собственные мини-исследования и тестирования. Для этого нам нужно знать основы юзабили и уметь пользоваться инструментами, с помощью которых можно протестировать ресурс.

Основы юзабилити

Юзабилити строится на основных пяти принципах, в сети вы встретите, что их называют факторами или составляющими юзабилити. На мой взгляд, слово "принципы" более точно передает их сущность.

Принцип первый – обучаемость . Это конечно больше касается сложных интерфейсов, очень актуально для администраторских панелей CMS, аккаунтов в различных биржах, системах статистики.

Например, часто жалуются на интерфейс Google Analytics, что в нем сложно разобраться или, как сложен для многих твитер. Это яркий пример первого принципа юзабилити, когда пользователь испытывает сложности, впервые зарегистрировавшись на каком-нибудь сайте.

Хотя, на мой взгляд, пример не самый удачный, т.к. по моим личным наблюдением сложность заключается не столько в юзабилити, сколько в не самой удачной русификации иностранных ресурсов, ну и частично в менталитете. Для сравнения, интерфейс Яндекс Метрики, на мой взгляд, намного удобнее, и сразу схватываешь на лету, где и что находится, и без проблем начинаешь пользоваться системой.

И тут начинает действовать второй принцип юзабилити - эффективность . Я, как пользователь, могу с уверенностью сказать, что я эффективно использую Яндекс Метрику, единожды обучившись с ней работать. Значит разработчики хорошо справились со вторым принципом юзабилити. Также, единожды разобравшись в твитере, понимаешь, что он очень простой и начинаешь его эффективно использовать. Чего совсем я не могу сказать о Google Analytics, когда я, вроде бы, все изучила, все поняла, но при этом уверена, что не использую его возможности даже на половину.

А каждый раз, когда начинаю с ней работать, обязательно пару раз кликну не туда, куда мне нужно или долго перебираю все меню, чтобы найти нужный мне отчет. Эта ситуация полностью зависит от выполнения третьего принципа юзабилити – запоминаемость . Например, мне, в приведенном примере, плохо удается запомнить, где какой отчет находится. Одни отчеты нахожу быстро и без проблем, а на поиск других трачу время. Что это, моя проблема или проблема разработчиков? На самом деле нельзя дать однозначный ответ, и этот вопрос я рассмотрю в следующей публикации.

Четвертый принцип юзабилити – ошибки . Тут, я думаю, в расчет берутся и такие ошибки, как бесполезные лишние клики, т.е. сам пользователь ошибается из-за плохой обучаемости и запоминаемости, так и серверные ошибки, например, та же является ошибкой сервера и ее отсутствие может повлиять на лояльность пользователя к ресурсу.

Последний, пятый принцип юзабилити – это удовлетворенность . Причем, стоит отметить, что я могу быть удовлетворенной или нет, как процессом использования, так и результатом . И если, например, для меня процесс использования Google Analytics сложен, то результатом взаимодействия с этой системой аналитики я полностью довольна, при этом, в зависимости от поставленных задач, я могу быть удовлетворена в значительно большей степени, чем от использования Яндекс Метрики.

Справляется Google Analytics со своей задачей, когда обучаемость, эффективность и запоминаемость не ахти, но пользователь получает удовлетворенность? Я считаю, что справляется.

Таким образом, разобравшись со всеми основополагающими принципами юзабилити, я возвращаюсь к тому, что юзабилити сайта и качество сайта – это синонимы, которые определяют степень (меру) удовлетворения пользователя сайтом и как следствие – выполнение функций сайта. А как мы с вами уже знаем, выполнение сайтом своих функций сулит хозяину сайта увеличение прибыли.

К слову, из принципов очень ясно видно, что изначально юзабилити не использовалось для веб-ресурсов и видны все проблемы, с которыми сталкивается пользователь именно при работе с интерфейсом программ. С другой же стороны, я привела наглядные примеры тому, что современные веб-ресурсы обладают сложнейшими интерфейсами и очень важно, чтобы разработчики не забывали об основных принципах юзабилити.

Учитывая вышесказанное, чтобы наше представление о юзабилити для веб-сайтов было более полным и понятным, в следующей статье я расскажу, какие правила действуют при разработке качественного сайта. Эти правила будут более ориентированы на веб-сайты и расширяют сами принципы юзабилити.

Оставайтесь на связи и удачи в продвижении.

Юзабилити сайта – это такой этап разработки, которым в Рунете почти никогда и никто не занимается. Ни верстальщик, ни программист, ни дизайнер. И только если владелец сайта перед разработкой задастся вопросом удобства своего будущего проекта и опишет пожелания в техническом задании – иногда получится что-то приличное. Но, это скорей исключения, т.к. владелец сайта в 100% случаев полагается на интуицию, а она очень часто подводит.

У меня каждую неделю несколько стандартных писем: «разработчики сделали сайт, рекламщики запустили рекламу, клики есть – продаж нет. Почему?».

В этой статье я не буду рассматривать случаи технической невозможности эффективной рекламы, когда товар или услуга невостребованна вообще или имеет малый спрос в интернете или тема в контексте заоблачно дорогая для начинающего и т.д.

Гораздо чаще, причины неуспеха сайта в более простых вещах: например, если пользователь не увидел в правой части шапки контакты фирмы – владелец теряет около 20% возможной прибыли. Если забыли в главном экране (без прокрутки) указать, чем конкретно фирма занимается (это не фантастика, такие случаи сплошь и рядом) – отминусуйте ещё 20 процентов прибыли. Несколько таких косяков в оформлении и все усилия по разработке сайта пошли прахом. Большинство принципов юзабилити для простого сайта-визитки предельно просты, просто почти никто про них не знает.

Потому я постараюсь написать кратко и просто, а Вы пройдитесь по своему сайту и сверьтесь, что на нём есть, а чего нет:).

Что такое юзабилити сайта?

Для посетителя - это удобство в достижении цели, с которой он пришел на сайт. А для хозяина сайта - это увеличение посещаемости и конверсии, один из ключевых факторов, влияющих на поведение пользователя сайта. Мало того, юзабилити оценивается даже поисковыми системами и влияет на место в выдаче. Давайте рассмотрим, что именно делает сайт удобным.

Удобство или красота?

Начнем с очевидных вещей, которые, однако, нужно сказать. Просто великолепно, если ваш сайт и удобен, и красив одновременно, но, если для улучшения юзабилити сайта требуется пожертвовать красотой и дизайнерским замыслом, - ими следует пожертвовать. Пользователь всегда предпочтет красивому сайту удобный.

Корректная верстка

Если вы смотрите на сайт, и он прекрасно выглядит и работает, это, увы, еще не значит, что так будет у всех. Существует множество людей, которые всегда будут пользоваться Internet Explorer, а также фанатичные любители любого другого браузера. Потому сайт абсолютно необходимо протестировать для них всех, иначе, какими бы прекрасными услугами и товарами вы его не наполнили, кто-то просто не сможет ими воспользоваться.

F-образный шаблон – один из главных «секретов» юзабилити

Исследования говорят, что приходя на сайт, человек осматривает страницу по F-образному шаблону. Наибольшее внимание концентрируется в левом верхнем углу, а тому, что расположено в правом нижнем, его уделяется минимум. Посетитель просматривает информацию слева направо, потом переводит взгляд вниз, потом снова слева направо и так далее. Получается траектория похожая на букву F.

Вообще, правая сторона привлекает пользователя намного меньше, чем левая. Если речь, конечно, идет о человеке, который пишет слева направо (создавая сайт, например, на арабском, эти рекомендации следует читать с точностью до наоборот). Потому важные смысловые элементы не должны размещаться в правой колонке.

Если же по центру страницы разместить яркое и крупное изображение (например, фото товара), то первоначально взгляд посетителя будет привлечен именно им. В дальнейшем он начнет сканировать страницу по той же F-образной траектории, но информация левого верхнего угла будет уже безвозвратно пропущена. Если в левой колонке вы расположили какие-то важные элементы, лучше, чтобы яркое изображение находилось выше них.

Ну и конечно, целевое действие страницы - например, кнопка заказа услуги или отправления товара в корзину - должно находиться на траектории просмотра.

Ориентация на местности

Посетитель далеко не всегда начинает просмотр сайта с главной страницы. Очень многие приходят с поисковых серверов или с рекламы. Потому никогда не надо думать, что с какой-то информацией пользователь уже ознакомился раньше, информация, важная для понимания о том, где он находится, должна дублироваться на каждой странице.

Обязательные элементы:

• логотип компании
• название компании
• слоган, хотя бы частично поясняющий, что на этом сайте предлагается
• контактные данные компании
• цепочка ссылок до главной страницы («хлебные крошки») – возможно, но необязательно

В 95% случаях, когда я делаю аудит юзабилити – на сайтах отсутствует один или несколько из вышеперечисленных элементов. А это очень важно для эффективных конверсий.

Для юзабилити сайта очень важно сочетание цветов

На этот счёт есть простые и чёткие принципы юзабилити. О них можно прочитать в статье

Прокрутка (скроллинг)

Горизонтальной прокрутке просто следует отказать. Огромная часть посетителей, столкнувшись с ней, покинет сайт сразу.

Вертикальная же прокрутка не раздражает, но на первом видимом экране непременно должно быть что-то, что заинтересует пользователя. Он не должен покинуть сайт, даже не начав прокручивать.

Поля и отступы

Они должны быть обязательно. Текст без полей будет прочитан быстрее, но его смысл во многом ускользнет от посетителя - он будет просмотрен «по диагонали».

Шапка

Не стоит делать ее огромной, ведь кто-то просматривает ваш сайт с небольшого экрана нетбука или планшета. Да и на полноценном мониторе это редко выглядит красиво. Большинство посетителей, увидев одну шапку вместо контента, уже не станут его искать.

Кроме того есть стандартная информация, которую человек ожидает здесь увидеть - как минимум все те же логотип, название и контактные данные. Кстати, все также привыкли, что логотип является ссылкой, ведущей на главную страницу сайта.

Меню - горизонтальное или вертикальное?

Меню - основной инструмент навигации по сайту, потому оно не должно быть сложным. Идеальное меню - горизонтальное и одноуровневое.

Безусловно, огромное количество сайтов использует вертикальное меню. И это хороший выбор, если вам жизненно необходимо использовать в нем множество пунктов, и особенно, если количество этих пунктов будет увеличиваться. Но нередко можно увидеть вертикальное меню из трех-четырех пунктов в левой колонке. Место под ним тогда, зачастую, используют под рекламу. Делая так, вы отдаете рекламе самое ценное место своего сайта. Если вы не планируете расширять меню, лучше сделать его горизонтальным, а вместо левой колонки сразу начать знакомить пользователя с контентом, на котором вам нужно удержать его внимание.

Также, вместо вертикального, можно использовать и такой интересный вариант оформления меню, когда основные ссылки выделяются более ярким и крупным шрифтом, а второстепенные располагаются под ними.

Выпадающее меню тоже вполне можно использовать, но было бы неплохо предупредить посетителя об этом: внезапное мельтешение на экране, когда ничего не предвещало, может раздражать. Лучше всего обозначить это простым маркером вроде треугольника острием вниз около соответствующего пункта меню.

Если предполагается, что содержимое страницы будет длинным и пользователю придется прокручивать его, то горизонтальное меню для ускорения навигации можно продублировать в футере. С вертикальным меню такой номер не пройдет.

Пункты меню

Люди всегда хорошо реагируют на знакомые и привычные элементы интерфейса. Приходя на сайт, он ожидает увидеть в меню что-то вроде «О нас», «Услуги», «Контакты» и так далее. Если такие повсеместно используемые пункты меню будут названы иначе, посетитель просто может не обратить на них внимание.

Форма поиска, входа, регистрации и тому подобное

Как правило, такие формы располагаются вверху справа, и это, опять-таки, привычно для посетителя. Не следует заставлять его искать их по всей странице. Все эти второстепенные формы лучше размещать именно там, связывая с остальными элементами навигации.

(Но, конечно, не стоит полагаться на поиск, как на замену обычной навигации по сайту. Если пользователь не может найти что-то через меню, в большинстве случаев он этого вообще никогда не найдет.)

Ссылки должны быть выделены цветом и подчеркнуты при наведении, чтобы они не сливались с остальным контентом. Лучше, если посещенные и непосещенные ссылки будут разных цветов, - никому не нравится по ошибке ходить по ссылкам несколько раз. Приоритетный цвет ссылок синий и, если цветовая гамма сайта позволяет, стоит использовать для ссылок именно его.

Анимация

В общем случае, анимация имеет право на жизнь, но ей не следует злоупотреблять. Не стоит развешивать по всему сайту падающие снежинки и мерцающие звезды. Слайдер непременно привлечет внимание посетителя, но излишнее мельтешение вызовет только головную боль и желание немедленно покинуть страницу. В любом случае лучше ограничиться одним анимированным объектом на странице.

Звук

Лучше вообще не использовать: кто-то музыку слушает, у кого-то дети спят, а кому-то начальник голову оторвет. При необходимости можно вставить на страницу плеер, который посетитель сможет включать и выключать самостоятельно.

Мне кажется это, в целом, довольно несложные рекомендации. Тем не менее, соблюдение этих простых правил может очень помочь вам в деле достижения хорошей конверсии вашего проекта.

Вкратце : Что такое юзабилити? Как, когда и где можно его улучшить? Почему вас вообще это должно волновать? Данная статья дает ответы на эти основные вопросы.

Что

Юзабилити это качественный признак , который определяет, насколько интерфейс пользователя легок в использовании. Слово "юзабилити" также обозначает набор методов, служащих для улучшения интерфейса во время процесса его разработки.

У юзабилити есть пять количественных составляющих:

• Обучаемость : насколько легко пользователи могут выполнить основные задачи, впервые встретившись с незнакомым им интерфейсом?
• Эффективность : после того, как пользователи ознакомятся с дизайном, как быстро они могут выполнить то же задание?
• Запоминаемость : После того, как пользователь снова вернется к интерфейсу через определенный промежуток времени, насколько легко ему будет восстановить свои навыки работы с данным интерфейсом?
• Ошибки : сколько ошибок делает пользователь, насколько серьезны эти ошибки, насколько легко пользователь может исправить эти ошибки?
• Удовлетворенность : насколько пользователю приятно пользоваться данным интерфейсом?

Помимо юзабилити существует еще множество других важных качественных признаков дизайна. Один из ключевых - полезность , который описывает функциональность дизайна и отвечает на вопрос: является ли интерфейс тем, что пользователю нужно? Юзабилити и полезность одинаково важны: какой толк в программе, пусть даже и удобной в использовании, если она не делает то, что вам нужно? Плоха и та программа, которая гипотетически делает то, что вам нужно, но вы не можете с ней работать из-за ее сложного интерфейса. Для изучения полезности программы вы можете пользоваться теми же методами, что и при изучении качества ее юзабилити.

Почему

В Web-е юзабилити является необходимым условием выживания. Если с веб-сайтом трудно работать, посетители просто уходят с него. Если главная страница сайта не заявляет четко и ясно, чем занимается компания, и что какие задачи сайт позволяет выполнить, посетители уходят . Если сайт запутанный, посетители уходят . Если информация на сайте трудна для восприятия и не отвечает на ключевые вопросы посетителей, они уходят . Уловили мысль? Не бывает таких посетителей, которые внимательно изучают "справочное руководство по работе с сайтом" или тратят свое время на освоение его интерфейса. В Web-е полным полно других сайтов, поэтому уйти с сайта - первое побуждение, возникающие у посетителей, когда они наталкиваются на трудность.