Usability чеклист

в 12:51, , рубрики: usability, web, Веб-разработка, чеклист, метки: , ,

image

Небольшой и полезный чеклист по 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

Автор: LeDantu

Источник

Поделиться

* - обязательные к заполнению поля