Usability чеклист

Небольшой и полезный чеклист по usability. Проверьте свой ресурс перед тем как перейти к юзер-тестированию. Не претендует на «столп usability», которому необходимо следовать, но здесь собраны довольно полезные вещи.

User experience

• Персонализация. Валюта, язык, специфичные для определенных стран моменты, налоги и опции доставки должны меняться в зависимости от того откуда пользователь. Геолокация по IP не должна быть включена без разрешения пользователя.
• Регистрация несет за собой смысл. Например кнопка «бесплатный период использования» (free trial) несет вполне ощутимый толк, а вот просто ссылка на форму регистрации нет.
• «Прозрачное ценообразование». Цена сразу видны, нет никаких «подводных камней» аля мелкие ценники внизу, звездочки, сноски и т.д.
• Страница сами не обновляются. Пользователь может быть крайне удивлен, если, например, на новостном сайте вдруг сверху выскочит новость.
• Информация на вашем ресурсе достоверная. Нет битых ссылок, ссылки на соответствующие тематике ресурсы, рабочие контакты, правильное и достоверное расположение (геолокация), на сайте размещены фото реальных людей (которые действительно имеют отношение к тематике сайта или его функционированию). Ну и не забывайте про качественный дизайн (напомню, статья не про дизайн, а про usability).
• Изображения должны доносить всю необходимую информацию: должна быть возможность увеличить изображение и рассмотреть детали.

Домашняя страница

Тут стоит конечно же упомянуть разногласия в названиях этого пункта. «Домашняя страница», она же в большинстве случаев «Landing Page» (хотя и не всегда), «стартовая страница» так же относится к этой странице. Хорошая статья на Хабре. ^[1]

• Ясный и четкий призыв к действию (англ. call for action). Пользователь знает, что делать дальше и какую выгоду это ему принесет. Четко выражена цель и назначение сайта.
• Имя авторизованного пользователя отображается на странице. К примеру, не просто «добрый день сэр», а «добрый день Иван».
• Все основные изменения анонсируются на домашней странице.
• Контактная информация и информации о компании (расположение) должна быть легко доступна с домашней страницы.
• Политика конфиденциальности. Если ваш сайт собирает информацию пользователей, об этом должно быть сказано на домашней странице.
• Все изображения и видео несут за собой вполне определенный смысл и цель. Никаких непонятных стоковых фото топ-моделей. Только высококачественные фото и видео, относящееся к вашей деятельности. Видео и звуковые эффекты не должны автоматически проигрываться, если только пользователь не ожидает этого (уведомите посетителя о начале видео или мелодии).
• URL должен работать без приставки www.

Доступность

• Alt атрибуты должны быть прописаны для нетекстовых блоков, таких как изображения и карты. Подписи и транскрипции желательны для аудио и видео элементов.
• Цвет сам по себе не используется для передачи информации.
• Текст остается читаемым после отключения стилей. Полезная ссылка ^[2] для проверки.
• Доступная навигация. По сайту возможно перемещаться без мышки, используя только клавиатуру. Все специальные клавиатурные сочетания используемые для навигации не скрыты от пользователя.
• Избегайте использования Flash, на данный момент можно обойтись и без него (надеюсь на правильное понимание этого пункта).
• Ссылки, кнопки, чекбоксы кликаются без труда. Например, пользователь может отметить чекбокс путем нажатия на текст, относящийся к этому пункту.

Навигация

• Важные ссылки не размещены в динамических (крутящихся, вертящихся) элементах.
• Избегайте сортировки по алфавиту, где это возможно. Используйте группировку по категориям или другим важным параметрам. Хорошая статья ^[3] по этому поводу (на английском).
• Пользователь должен знать где он находится, на какой именно странице, в каком разделе. Тут помогают, всеми любимые, хлебные крошки.
• Навигация всегда постоянна, не меняется от страницы к странице.
• Ссылка содержательна и указывает, куда именно она ведет исходя из темы и содержания. Не просто «тырц» или «нажмите сюда»
• Описание сайта есть в title окна, тем самым сайт легко добавить в закладки и не забыть о чем он.
• URL сайта легко запоминаем. Ну и конечно всегда стоит использовать Человекоподобные УРЛ.

Поиск

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

Ссылки

• Важные действия обозначены кнопками, а не ссылками. К примеру, «купить» или «оплатить» должны быть кнопками, а не ссылками.
• Ссылки не открываются в новом окне браузера, ну или вкладке, если это конечно не pdf файл (хорошая статья ^[4]на английском по этому поводу).
• Ссылки легко узнаваемы. По их виду понятно, что они кликабельные. Другие элементы не должны выглядеть, как ссылки, к примеру, следует избегать подчеркнутого текста.
• Уже посещенные ссылки отображаются отличным от непосещенных ссылок цветом.
• Не должно быть битых ссылок (проверить можно на этом ресурсе ^[5]).

Layout aka разметка

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

Процесс

• Система отслеживания ошибок (Issue tracker). необходим для решения спорных моментов в области Usability/UX.
• Юзер тестирование проведено на целевых группах и на разных стадиях проекта. Желательно не вовлекать в юзер тестирование тех людей, которые участвовали в разработке вашего ресурса.
• Приоритет. Изменения вносятся в соответствии с их приоритетом. Не забыть учесть такие важные моменты, как цели проекта, бюджет, сроки, состав исполнителей и т.д.
• ROI ^[6] (окупаемость инвестиций) измнений. Считаем стоимость сайта до начала процесса создания и после.

Формы

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

Контент

• Контраст. Фон и текст на нем должны контрастировать. Можно воспользоваться вот этим сервисом ^[7] для проверки.
• Контент разделим, четко видны отступы между абзацами и частями текста, заголовки легко читаемы.
• Контент написан понятным для пользователя языком, нет перегрузки предложений. Интересный сервис на заметку — www.read-able.com/ ^[8]
• Контактная информации компании хорошо читаема и различима. Клик по email не открывает приложение для почты (Outlook и тому подобные) автоматически.
• Контент действительно полезен и отвечает на основные вопросы пользователя, он так же должен быть актуален. Нет никаких длинных инструкций и приветственных сообщений аля «Добро пожаловать на наш сайт».
• Использование верхнего регистра внутри текста крайне нежелательно.

Прошу сделать отметку о том, что данный топик является переводом. Спасибо ресурсу userium.com ^[9]

Автор: LeDantu

Источник ^[10]