Что означает слово usability?

Главная сложность при работе над этим параметром — субъективность восприятия. То, что удобно для одних пользователей, может оказаться нелогичным и сложным для других. Задача UX/UI-дизайна — найти решения, которые будут устраивать каждый сегмент ЦА. Для этого нужно понять, из чего состоит юзабилити, и провести аудит всех компонентов. Как это сделать — разберем в статье.

Что такое юзабилити

Usability — это параметр, который используется для оценки эффективности сайта. Простыми словами — это удобство интерфейса. Понятие строится на пяти принципах:

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

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

Чек-лист юзабилити: как проверить сайт

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

• Шапка сайта

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

• Главная страница

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

• Каталог

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

• Корзина

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

• Карточки товаров

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

• Футер

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

• Информационные разделы

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

Анализ юзабилити на примере маркетплейса Ozon

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

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

Из чего состоит шапка:

1. Кликабельный логотип в виде баннера, который при нажатии ведет на главную страницу. Дизайн блока показывает, что на него можно кликнуть.

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

3. 
   

4. Строка поиска так же выделяется на фоне остальных элементов. Контрасты важны для юзабилити, они направляют действия пользователей.

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

6. Под шапкой — быстрые ссылки. Распродажа отмечена красным цветом для привлечения внимания. Ozon Fresh — зеленый, что говорит о том, что раздел приоритетный, но сейчас он не так важен, как скидки. Порядок ссылок — не случайный, они расположены с учетом значимости для коммерческих целей компании.

7. В шапке мы видим адрес доставки — это тоже важная информация для человека, поэтому она закреплена. Он дублируется в карточках товаров и при оформлении доставки, чтобы пользователь не допустил ошибки в заказе.

8. 
   

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

Для юзабилити интернет-магазина важна структура. Это можно увидеть на содержании главной страницы маркетплейса: здесь есть блоки с акциями, которые с одного клика приведут в раздел со скидками; сезонные актуальные товары; популярные предложения. Всё это нацелено на быстрые конверсии.

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

• Под названием видны оценки и отзывы — это социальный триггер.
• В верхней части изображения есть скидка на красном фоне — это стимул срочности и выгоды.
• Товар отмечен ярлыком «бестселлер» — это повышает доверие.

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

Следующий этап взаимодействия с маркетплейсом — корзина:

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

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

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

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

Частые ошибки в юзабилити сайта

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

• Низкая скорость загрузки страниц или изображений;
• Проблемы в отдельных браузерах или на устройствах;

Пример Ozon: в браузере Safari проблемы с расстояниями между элементами.

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

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

Резюме

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