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

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

usability

1. Основное

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

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

  • Контент разделён и структурирован
  • Пользователю всегда понятно, в каком разделе сайта он находится (подсветка активного пункта меню, хлебные крошки)
  • Важные пути по сайту (такие как покупка, подписка и пр. в зависимости от бизнес-целей сайта) предельно просты
  • Важная информация легко доступна со всех страниц сайта
  • По заголовку категории, страницы, блока можно понять их содержимое
  • Логотип является ссылкой на главную на всех страницах
  • Главное меню есть на всех страницах, в одном и том же месте (исключение может составлять процесс покупки)
  • Пункты меню расположены в порядке убывания их значимости
  • Используется не более двух подуровней меню
  • Пункты, содержащие подменю, отличаются от остальных пунктов
  • Названия пунктов меню начинаются с заглавной буквы
  • 3. Структура страниц сайта

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

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

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

    5. Текст

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

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

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

    7. Формы

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

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

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

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

    052214_1422_7

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

    test-usability