Юзабилити (usability)

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

О том, что это такое, юзабилити сайта, простыми словами – читайте далее.

Определение

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

Ее оценивают по пяти главным параметрам. Выявляют, насколько:

• новым посетителям просто ориентироваться в приложении или на веб-ресурсе;

• пользователю площадки легко совершить целевое действие, допустим, просмотреть видеоролик или заказать услугу, не запутавшись в интерфейсе;

• человек может быстро разобраться в структуре сайта через некоторое время;

• пользователь нередко допускает ошибки, работая с интерфейсом, и оперативно выявляет неточность своих действий;

• посетитель в целом доволен площадкой.

Сайт поисковой системы Яндекс

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

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

Зачем юзабилити сайту

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

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

Плюсы. Вот что дает хорошее usability сайта:

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

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

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

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

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

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

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

Интерфейс маркетплейса OZON очень похож на интерфейсы других онлайн-магазинов, к примеру Wildberries:

На главной странице маркетплейса Озон «Корзина» и личный кабинет расположены в правом верхнем углу

На главной странице маркетплейса Wildberries «Корзина» и личный кабинет тоже находятся в правом верхнем углу

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

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

Современный и удобный дизайн

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

Минималистичный дизайн сайта LG не отвлекает пользователя от просмотра каталога, а презентация продуктов в центре страницы привлекает внимание

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

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

В разделах ситуация не лучше

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

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

На этом сайте «Корзина» находится там, где ей положено, а также дублируется с левой стороны

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

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

Бывают площадки, на которых «Корзина» находится в центре страницы, а порой и теряется среди обилия картинок. Это не очень удобно для пользователей.

Пример сайта, где маленькая иконка «Корзины» теряется на фоне эффектной рекламы. Мы выделили ее оранжевым цветом

Еще один пример. Значок «Корзины» расположен нетипично — внизу страницы

Простая и логичная навигация

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

Чаще всего главные навигационные элементы помещают в верхней части экрана либо на боковой панели слева и в «подвале».

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

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

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

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

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

На сайте клуба DNS навигация находится в левой части экрана

В «подвал» помещают ссылки на разделы и информацию для посетителей.

На этом сайте в «подвале» оказались ссылки на акции, бонусную программу, контакты, доставку и информацию для сотрудников

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

Структурированный и качественный контент

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

Пример страницы интернет-магазина «Рембыттехника». Товар видно со всех сторон. Фотографии качественные

Желательно указать в карточке товара все его характеристики и добавить фотографии в большом разрешении.

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

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

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

На сайте компании размещен текст, в котором важные моменты выделены жирным шрифтом. Есть подзаголовки и маркированные списки

Поддержка пользователей сайта и обратная связь

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

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

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

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

Если действие сложное, то желательно добавить небольшие подсказки или ненавязчиво предложить помощь специалиста.

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

Определенные вопросы по работе веб-ресурса посетители создают чаще всего. На них можно заранее дать ответы, составив разделы: FAQ, «Помощь», «Справка».

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

Чаще всего в онлайн-магазинах есть чаты, через которые пользователь может задать интересующие вопросы

Быстрота загрузки страниц

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

Страницы весят больше, если на них много графики и вставок, работающих на Flash.

Чтобы узнать скорость загрузки площадки, можно использовать специальные инструменты, допустим, PageSpeed Insights от Google. Он не только покажет значения, но и даст рекомендации.

Отчет по сайту dzen.ru. Чтобы получить данные, достаточно ввести URL площадки в верхнюю строку

Ближе к концу страницы идут рекомендации, направленные на улучшение скорости загрузки

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

Адаптивность сайта под разные виды устройств

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

Вот как можно адаптировать веб-ресурс под мобильные телефоны:

• сделать динамическую подстановку контента;

• разработать и внедрить мобильную версию;

• применить адаптивный дизайн.

Основы юзабилити Якоба Нильсена

Знаменитый специалист по интерфейсам Якоб Нильсен в конце XX столетия придумал 10 правил юзабилити сайта, которые не утратили значимости и сегодня. Они легли в основу принципов пользовательского интерфейса.

Вот эти правила:

1. Видимость состояния системы. Пользователи должны знать о результатах взаимодействия с сайтом. После каждого действия надо давать обратную связь.

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

3. Свобода посетителя сайта. Пользователи иногда ошибаются в своих действиях, поэтому надо дать им шанс их отменить (создав специальную кнопку).

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

5. Предупреждение ошибок. Надо создать такой дизайн, чтобы минимизировать риск ошибок пользователей, например, внедрить текстовые подсказки.

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

7. Эффективность и гибкость. На качественной площадке есть опции, полезные и новым, и бывалым пользователям.

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

9. Помощь с ошибками. Если человек совершил действие, которое завершилось ошибкой, надо показать ему неточность и предложить способ ее устранения.

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

Анализ юзабилити сайта

Для анализа usability можно воспользоваться несколькими способами:

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

Учитывают такие показатели:

• процент отказов;

• конверсию;

• время нахождения посетителей на веб-ресурсе и его страницах;

• быстроту загрузки;

• сколько страниц пользователь пролистал за сеанс.

Для анализа юзабилити сайта можно использовать сервис Яндекс Метрика. В нем находится инструмент «Карта кликов». Правда, потребуются хотя бы базовые знания аналитики.

Заключение

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

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