Небольшой и полезный чеклист по 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
ссылка на оригинал статьи http://habrahabr.ru/post/178867/
Добавить комментарий