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

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

1. Основное

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

2. Структура сайта, навигация

3. Структура страниц сайта

• Логотип расположен в одном и том же месте на всех страницах сайта
• Слоган четко описывает цели сайта (он краткий и расположен рядом с логотипом)
• Самые важные блоки расположены на первом экране (в любом случае выше менее важных)
• Соблюдается баланс между информационными блоками и пустым пространством, что способствует восприятию сайта пользователями
• Понятные и заметные заголовки, правильное использование цветов фона, рамок и пустого пространства позволяет визуально разделять страницу на заметные и логичные информационные блоки
• Каждый блок можно охватить одним взглядом
• Все кликабельные элементы выглядят очевидно кликабельными, а курсор мыши видоизменяется при наведении на них
• Все некликабельные элементы выглядят некликабельными и курсор мыши не видоизменяется при наведении на них
• «Цена — рядом с товаром»: все связанные элементы находятся рядом друг с другом
• Значение иконок и графических элементов интуитивно понятно
• Элементов, привлекающих внимание, мало (анимация, крупные, цветные тексты и прочее)

4. Поиск (при необходимости)

• Поле поиска доступно на любой странице сайта
• Поле поиска находится в ожидаемом месте
• На странице одно поле поиска
• В поле поиска работает подсказка
• Поиск проверяет орфографические ошибки и ищет синонимы
• Результаты поиска легко воспринимаются, отсортированы по релевантности\дате\алфавиту
• Если поиск дал нулевой результат, то пользователю подсказываются
  идеи о том, как можно отредактировать запрос
• Пользователю показывается количество результатов поиска
• Поиск охватывает весь сайт целиком, если не предусмотрен
  поиск по определенным разделам сайта
• В результатах поиска выводится основная информация о найденных объектах

5. Текст

• Изложение соответствует принципу перевернутой пирамиды: сначала важное, потом остальное
• Текст лаконичен, без «воды»
• Текст структурирован: заголовки, подзаголовки, абзацы, таблицы
• Кегль основного текста для чтения — 16px (достаточно крупный)
• Выравнивание крупного абзаца — только по левому краю
• Заголовок ближе к «своему» абзацу, чем к предыдущему
• Заголовки — подсказывают «о чем дальше»
• Кегль заголовка тоже больше кегля подзаголовка в ~1,5 раза
• Кегль подзаголовка больше кегля текста в ~1,5 раза
• Верхний регистр используется по минимуму или не используется
• Шрифты единообразны на всех страницах, читабельны и контрастны
• Ссылки легко различимы среди текста по цвету или форме (подчеркиванием)
• Разнообразие цветов должно быть оправданным
• Для улучшения восприятия длинные числа разбиваются на разряды неразрывным пробелом (или точкой)

6. Ссылки и кнопки (речь идет не о реализации в HTML, а о восприятии пользователем)

• Текст ссылки (анкор) или около ссылочный текст обозначает объект, к которому она ведёт
• Все ссылки визуально отличаются от остального текста
• Скриптовые ссылки (которые не перезагружают страницу) подчеркнуты пунктиром
• Ссылки достаточно длинные, чтобы по ним было легко кликнуть
• Ссылки для скачивания файлов визуально отличаются от ссылок на другие страницы (например, иконками)
• Кнопки используются для действий (заказать, купить, войти, положить в корзину и т.д.)
• Кнопки похожи на кнопки: форма, цвет, текст, реакция на курсор
• Кнопка с целевым действием только одна на странице или она очень явно выделена по сравнению с другими (т. н. call-to-action)
• Текст на кнопке — призыв к действию: текст в инфинитивной форме глагола (пример: найти), а не другую часть речи либо форму глагола (пример: готово)
• Активная область кнопки совпадает с ее видимым размером или больше
• Между кнопками, стоящими рядом, есть пустое пространство, щелчок по которому не вызывает действий
• По наведению на кнопку меняется ее отображение, это призывает пользователя сделать клик
• Недоступные кнопки и ссылки не исчезают с экрана, а становятся заблокированными

7. Формы

• Формы максимально лаконичны
• В целевых формах (таких как регистрация, оформление заказа) есть только обязательные поля
• Если полей много, они группируются по смыслу; у групп есть подзаголовки
• При открытии страницы с формой, курсор перемещается в первое поле
• Поле, в котором находится фокус, визуально выделено
• Если заполнение формы разделено на несколько шагов, показано на каком шаге он находится сейчас и сколько осталось шагов
• Данные сохраняются в полях до того, как пользователь окончил процесс заполнения формы (если пользователь случайно ушел со страницы)
• Текст результирующей кнопки соответствует цели заполнения (например “Зарегистрироваться”, “Получить бонус” и пр.)
• Поля, заполнение которых может вызвать вопросы, снабжены подсказками (например, даты, номера телефонов и пр.)
• Обязательные поля явно отличаются от необязательных
• Подписи полей соответствуют смыслу полей
• Наиболее вероятные значения некоторых полей формы по умолчанию заполнены
• Подписи полей и других элементов единообразны (либо все с двоеточием в конце, либо все без двоеточия)
• У пользователя есть возможность вернуться на шаг назад, чтобы откорректировать введенные данные
• Проверка на правильность введенных данных происходит без перезагрузки страницы, сразу после ввода данных
• Сообщения об ошибках информативны (плохо: “Вы не заполнили все обязательные поля”; хорошо: “Укажите, пожалуйста, электронную почту”)
• Сообщение об ошибке располагается рядом с полем, в котором совершена ошибка

8. Адаптация по устройства

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

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

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