Usability чеклист

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

User experience

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

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

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

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

Доступность

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

Навигация

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

Поиск

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

Ссылки

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

Layout aka разметка

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

Процесс

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

Формы

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

Контент

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

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