Юзабилити-аудит сайта: чек-лист с примерами

Юзабилити-аудит — это проверка сайта на удобство работы с ним. В ходе анализа обычно выявляют и описывают проблемы в навигации, дизайне страниц и элементов, текстовом и визуальном контенте, а также функционале ресурса или проработке путей пользователей.

В результате юзабилити-аудита обычно составляется документ, где подробно разъясняются проблемы на сайте и предлагаются их решения, а также для примера приводятся лучшие практики. Чтобы приоритезировать задачи на улучшение, важно сразу обозначать критичность проблемы (высокая, средняя или низкая). В дальнейшем список юзабилити-ошибок может стать основной для баг-листа или бэклога.

01

Проверить данные в системах аналитики — Google Analytics и "Яндекс.Метрика".

Полезно будет знать:

Пути пользователей по сайту.

•

Проблемные страницы — те, где высокий процент отказов или нет конверсий.

•

Самые популярные страницы, откуда и по каким запросам пользователи попадают на них.

•

•

Куда пользователи кликают на страницах и их поведение (на записях сессий).

•

С каких устройств заходят чаще всего.

02

Проанализировать пути пользователей по сайту: где и почему возникают барьеры, как их преодолеть. Здесь как раз очень пригодятся данные из систем аналитики.

Оценить сайт взглядом эксперта. В этом случае специалист по юзабилити на основе собственных знаний и опыта изучает сайт и описывает его проблемы.

04

Проверить ресурс по 10- и эвристикам Нильсена — они помогут выявить общие проблемы юзабилити интерфейсов.

03

В этой статье расскажем, как качественно провести юзабилити-аудит сайта, и подробно рассмотрим 10 эвристик Нильсена. Чуть ниже ищите подробный чек-лист с лучшими примерами юзабилити.

10 эвристик Якоба Нильсена — один из самых распространенных способов проверки интерфейса на наличие недостатков. Они были описаны еще в 90-х годах и, на мой взгляд, сегодня не позволяют выявить всех проблем в юзабилити сайта. Эвристики больше похожи на некие общие стандарты-правила, которые следует учитывать при разработке сайта и для его улучшения. Подходят для быстрого поверхностного анализа сайта на удобство пользования.

Сайт всегда должен держать пользователя в курсе происходящего: своевременно давать обратную связь.

Сайт должен быть понятным пользователям: использовать знакомые им слова и фразы, избегать специальной терминологии.

У пользователей должна быть возможность отменить совершенные действия.

Одни и те же элементы на сайте должны иметь одинаковые наименования. Не нужно на одной странице называть кнопку «Войти», а на другой — «Личный кабинет». Придерживайтесь единообразия.

Даже самые понятные сообщения об ошибках не так хороши, как продуманная логика работы сайта, в котором вероятность их возникновения близка к нулю.

Пользователь не должен искать важную информацию и запоминать ее расположение, перемещаясь по сайту. Всегда размещайте ее так, чтобы она была на виду и «под рукой».

У пользователей должна быть возможность совершать часто повторяющиеся действий как можно быстрее и с наименьшими усилиями.

На сайте не должно быть бесполезной или устаревшей информации. Каждая лишняя единица усложняет восприятие интерфейса.

Сообщения об ошибках на сайте должны быть написаны простым языком, точно указывать на проблему и давать варианты ее решения.

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

Самостоятельно провести юзабилити-аудит сайта вам поможет наш чек-лист с примерами. В нем мы подробно описали основные и особенные моменты, на которые стоит обратить внимание, если вы хотите улучшить свой сайт и сделать его максимально понятным для пользователей. Проверьте ресурс на удобство — внимательно пройдитесь по контрольным пунктам.

На сайте установлен SSL-сертификат.

•

Сайт загружается за 1–2 секунды. Специалисты Google выяснили, что если сайт на мобильных устройствах загружается более трех секунд, то 53% пользователей покинут его сразу. Проверить скорость загрузки можно на PageSpeed или Test My Site.

•

Сайт адаптивен, корректно отображается на мобильных устройствах и на больших разрешениях экрана. Отсутствуют горизонтальные полосы скролла. Узнать популярные разрешения экранов пользователей сайта можно в системах аналитики.

•

•

Информация на главной странице считывается быстро, пользователь сразу понимает куда он попал – что это за сайт, из какой отрасли, что на нем предлагают и т.д.

При открытии сайта корректно определяется регион пользователя (если информация на сайте меняется в зависимости от региона). Есть быстрая возможность сменить регион.

•

•

Есть уникальный favicon, чтобы пользователь мог легко найти нужную вкладку браузера среди других.

Для каждой страницы прописаны тайтлы, описывающие ее содержание.

•

Есть проработанная 404-страница. На странице обязательно размещены ссылки на основные разделы сайта и / или поиск.

•

Можно зарегистрироваться или войти с помощью соцсетей, если на сайте есть личный кабинет.

•

Нет пустых, незаполненных страниц.

•

Шапка, подвал, меню

В шапке размещено основное навигационное меню по сайту, ссылки на верхнеуровневые разделы дублируются в подвале.

•

Номер телефона и e-mail размечены как ссылки с параметрами «tel:» и «mailto:». Пример:

<a href="tel:+79999999999"> +7 999 999-99-99</a>
<a href="mailto:email@company.com"> email@company.com</a>

•

По клику на логотип открывается главная страница. На главной странице логотип некликабелен.

•

•

В меню — ограниченное количество ссылок на основные разделы. Рекомендуется размещать до 7–8 ссылок.

Ссылка на раздел, в котором находится пользователь, выделена в меню и неактивна — не реагирует на наведение и нажатие.

•

Пункты меню названы понятно и привычно для пользователей. Примеры:

Авторизация → Вход
Наше предприятие → Компания
Расположение → Контакты

•

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

•

Навигация по страницам

На всех внутренних страницах есть кликабельные «хлебные крошки», чтобы пользователь всегда мог в одно действие перейти в родительские разделы. На мобильных — ссылка «Назад».

•

В начале каждой страницы есть заголовок H1, который понятно доносит до пользователя содержание страницы.

•

На очень длинных страницах (больше 5−6 экранов) есть плавающая кнопка возврата к началу страницы. Кстати, сейчас вы должны видеть такую кнопку в левом нижнем углу.

•

На всех страницах сайта в браузере работает кнопка «Назад», которая возвращает пользователя на предыдущую просмотренную страницу. Если пользователь задавал на странице какие-то параметры (например, фильтр товаров), то все они восстанавливаются при возврате.

•

•

Нет «тупиковых» страниц — с каждой страницы должна быть возможность перейти на другую страницу. Например, быстрые ссылки или блок с рекомендуемыми товарами в интернет-магазине.

Поиск

На сайте есть поиск, и он хорошо заметен — размещен в шапке.

•

Поиск автоматически подсказывает результаты, пока пользователь вводит запрос. При вводе список обновляется достаточно быстро.

•

Поиск по сайту запускается как по клику на кнопку, так и по нажатию клавиши «Enter» в поисковой строке.

•

Поиск умеет исправлять ошибки и предлагает пользователю варианты запроса. Особенно важно для интернет-магазинов и каталогов с множеством продуктов / услуг.

•

На странице поиска выводится количество найденных результатов, есть возможность отсортировать их. Для сайтов с большим количеством страниц предусмотрена фильтрация результатов по категориям / темам / разделам сайта.

•

Если ничего не найдено, предлагаются альтернативные варианты или какое-то полезное действие.

•

Общие моменты

Применяются следующие правила:

— Теория близости: «объекты, расположенные близко друг к другу, воспринимаются связано».
— Правило внутреннего и внешнего: «Внутреннее ≤ внешнее».

Внутреннее — расстояние между буквами, внешнее — между словами.
Внутреннее — расстояние между словами, внешнее — между строками.
Внутреннее — расстояние между строками, внешнее — между абзацами или поля вокруг текста.

•

Все страницы сайта выглядят единообразно. Например, на всех есть неизменная шапка или подвал.

•

Все используемые в интерфейсе иконки однозначно понятны для пользователей.

•

Текстовый контент на сайте представлен в виде текста, а не изображений.

•

•

Общие элементы сайта размещены в привычных местах. Например, логотип — сверху слева, иконка корзины — справа. Подробнее: Закон Якоба.

•

Все элементы легко считываются на странице — между элементами достаточно «воздуха», нет нагромождения элементов в рамках экрана.

•

Контент размещен слева-направо по значимости (так, как мы читаем).

•

Пользователю очевидно, что элементы, с которыми он может взаимодействовать, кликабельны.

•

Все кликабельные элементы достаточно крупные, чтобы пользователь легко мог попасть по ним. Подробнее: Закон Фиттса.

Все кликабельные элементы имеют несколько состояний: по умолчанию, по наведению курсора, по клику, в фокусе и неактивное. Все они заметно отличаются друг от друга.

•

На первом экране видно, что ниже на странице присутствует еще контент. Это актуально, когда в начале страницы размещаются большие баннеры или полноэкранные видео.

•

Вид курсора меняется, если навести его на кликабельные элементы.

•

Длина текстовых строк — 60−80 символов.

Слишком короткие строки усложняют чтение длинных текстов, но их можно использовать для коротких лидов / абзацев. Длинные строки разрушают ритм, так как читателю сложно найти взглядом следующую строку текста.

•

Доступность

Очень важно проверить доступность сайта для всех категорий пользователей, особенно, если у вас — какой-то массовый сервис или интернет-магазин.

По сайту можно перемещаться с помощью клавиатуры. Элементы в фокусе должны быть хорошо заметны.

•

Элементы сайта контрастны. Для проверки можно использовать плагин Color Contrast Analyzer (для Chrome). Участки экрана с хорошим контрастом будут выделены белым, а области с плохим контрастом — бледными и малозаметными. Для некоторых отраслей наличие на сайте версии для слабовидящих — требования законодательства.

•

•

Комфортные для чтения размеры шрифта. Для основного текста рекомендуется использовать минимум 16px.

Кнопки, CTA

Все ключевые конверсионные элементы хорошо заметны на страницах, контрастны по отношению к другим элементам.

•

Выделено одно основное ключевое действие, если всего их — несколько.

•

На каждой коммерческой странице сайта есть возможность совершить целевое действие.

•

Названия кнопок однозначно говорят пользователю о том, что произойдет по нажатию. Для обозначения действий используется глагол в начальной форме (отвечает на вопрос «что сделать?»).

•

Ссылки

Все ссылки на сайте выглядят одинаково и заметно отличаются от основного текста — выделены цветом и подчеркнуты. Ссылки, по которым пользователь переходил ранее, меняют свой цвет на странице.

•

Ссылки используются по прямому назначению — для переходов между страницами. Если нужно запустить какое-то действие (например, открыть форму), то лучше использовать кнопку.

•

Если у ссылки пунктирное подчеркивание, значит по клику будет совершено действие без перезагрузки страницы (например, открытие модального окна или прокрутка до определенного блока). Такие ссылки называются «псевдоссылками».

•

Текст ссылки дает однозначное понимание, что откроется при нажатии. Если ссылка стоит в тексте, то текст не должен терять смысла без ссылки. Хорошо описано в Ководстве.

•

Ссылки не ведут на текущую страницу.

•

Ссылки, которые ведут на альтернативные сценарии взаимодействия, открываются в новой вкладке браузера и отмечаются иконкой. Пример альтернативного сценария: пользователь во время оформления покупки в интернет-магазине кликнул по ссылке на страницу с описанием условий доставки. Основной сценарий здесь — оформление покупки, альтернативный — изучение информации о доставке.

•

•

Если текстовая ссылка используется вместе с иконкой, оба элементы должны быть кликабельными.

Чекбоксы

При клике с выбранного чекбокса снимается выделение.

•

Кликабельны полностью — и сам чекбокс, и его название.

•

Используются по назначению — для выбора элемента из списка или выбора каких-то параметров.

•

•

Группу чекбоксов из более трех вариантов всегда рекомендуется располагать в один столбец.

Если в группе — более пяти чекбоксов, рекомендуется добавлять ссылки / кнопки для выбора (и снятия выбора) сразу всех чекбоксов.

•

Радиокнопки

Одновременно может быть выбрана только одна радиокнопка из всей группы.

•

Рекомендуется использовать для групп до пяти значений. Если значений больше — используется выпадающий список или комбинированный список.

•

Используются по назначению — для выбора одного значения из нескольких.

•

•

Кликабельны полностью — и сама радиокнопка, и ее название.

•

При клике на выбранную радиокнопку с нее не снимается выделение.

•

Группы из более трех радиокнопок всегда рекомендуется располагать в один столбец.

•

В форме для заполнения ничего не должно быть выбрано по умолчанию, если выбор пользователя неочевиден.

•

Если какой-то пункт выбран по умолчанию (например, на странице настроек в личном кабинете), то он стоит первым в списке.

Выпадающие списки

Используются, когда нужно выбрать что-то из 5−20 значений. Если значений больше, используется комбинированный список.

•

Оптимальная ширина списков — когда текст всех или большинства значений при выборе умещается полностью.

•

В списке вариантов должно быть какое-то общее значение, которое позволит отменить выбор конкретного значения. Например, «Любой» или «Все».

•

Если по умолчанию ничего не выбрано, в поле отображается вспомогательный текст. Например, «Выберите цвет».

•

Список вариантов должен закрываться, если пользователь кликает в любое другое поле страницы.

•

Значения в списке должны быть отсортированы по какому-то признаку. Например, по алфавиту.

•

Комбинированные списки

Используются, когда нужно выбрать что-то из более чем 20-ти значений.

•

Таблицы

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

•

Таблицы корректно адаптируются под мобильные устройства. Как минимум, появляется горизонтальная полоса прокрутки. Несложные таблицы адаптируются в списки.

•

Контакты и обратная связь

Контакты разбиты на смысловые блоки с понятными названиями, если их много. Например, указаны отделы компании или вопросы, по которым можно обращаться.

•

Номер телефона указан в правильном формате с кодом региона.

•

Представительства компании можно посмотреть как в списке, так и на карте (если много представительств в разных странах / регионах).

•

Главный офис отображен на карте.

•

•

Если представлены контакты конкретных сотрудников, то желательно указывать их ФИО, должность и размещать фото для повышения доверия.

Онлайн-консультант не перекрывает контент сайта, не мельтешит перед глазами пользователя, ненавязчив.

•

На сайте легко найти форму обратной связи — она размещена в привычном месте. Например, вызывается по клику на кнопку в шапке сайта или находится на странице с контактами.

•

Структура формы

Поля формы организованы в логичном порядке. Похожая информация сгруппирована с помощью отступов и / или заголовков.

•

Формы содержат необходимый минимум полей — запрашивается только то, что действительно нужно в данный момент, чтобы увеличить вероятность заполнения и сократить время на это.

•

Поля в длинных формах размещены в одну колонку для удобства восприятия.

•

Форма организована как предложение, где заголовок формы — подлежащее, кнопка отправки — сказуемое, а поля для заполнения — другие члены предложения.

•

Длинные формы разбиты на шаги или показан прогресс заполнения.

•

Содержание формы, поля

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

•

В форме указано, что произойдет после отправки данных.

•

Поля формы имеют отдельное состояние, когда они в фокусе (курсор установлен в поле).

•

В полях не устанавливаются значения по умолчанию, если нет уверенности, что около 90% пользователей выберут именно этот вариант. Например, не нужно по умолчанию выбирать за пользователя чекбокс с отметкой пола, если полностью не уверены, кто будет заполнять форму.

•

Все поля формы, которые могут быть заполнены автоматически, заполняются при открытии формы. Например, это местоположение пользователя (определение геолокации) или его телефон, если он уже указан в личном кабинете.

•

Форма поддерживает возможность перемещения между полями клавишей Tab. Перемещение по полям происходит последовательно, фокус не уходит за пределы формы.

•

При открытии формы фокус автоматически падает в первое поле формы.

•

•

У полей в длинных формах всегда отображается название (может быть вынесено над полем или размещено внутри него). Полезно, если внутри полей также приводится пример заполнения.

В полях есть шаблон ввода. Например, при вводе номера телефона автоматически форматируется значение — появляются скобки, дефисы.

•

У всех полей формы прописан корректный тип вводимых данных. Например, для ввода телефона: <input type="tel">. При вводе данных в данное поле с мобильных устройств на них сразу откроется числовая клавиатура.

•