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

Обновлено: 23 декабря, 2021

Основные моменты

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

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

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

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

    Текст

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

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

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

  • Внешний вид сайта адаптируется под разные устройства.
  • Если мобильная версия сайта имеет ограниченный функционал, то имеется возможность перейти на полную версию.
  • Клик по номеру телефона должен начинаться звонок.
  • Телефон, режим работы, email в шапке сайта.
  • Все блоки сайта расположены и перегруппированы таким образом, чтобы пользователь мог прочесть текст и выполнить все действия без дополнительного увеличения зон.
  • Рейтинг автора
    Автор статьи
    Юрий
    SEO-аналитик, программист (PHP, Ajax, Delphi, MySQL).
    Написано статей
    268
    10 оценок, среднее: 4,90 из 510 оценок, среднее: 4,90 из 510 оценок, среднее: 4,90 из 510 оценок, среднее: 4,90 из 510 оценок, среднее: 4,90 из 5 (10 оценок, среднее: 4,90 из 5)
    Для того чтобы оценить запись, вы должны быть зарегистрированным пользователем сайта.
    Загрузка...
    Понравилась статья? Поделиться с друзьями:
    Блог Программиста
    Добавить комментарий

    13 + 10 =