23 сентября 2019

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

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

Алексей Андреев

ux-специалист

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

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

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

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

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

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

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

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

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

Эвристики Нильсена

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

Первая: видимость состояния сайта

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

Информация после завершения заказа в интернет-магазине

Вторая: схожесть между сайтом и реальным миром

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

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

Третья: свобода действий

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

В Gmail можно отменить удаление письма

Четвертая: последовательность и стандартизация

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

Пятая: предотвращение ошибок

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

Примеры помогают избежать ошибок в заполнении полей формы

Шестая: на виду, а не в памяти

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

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

Седьмая: гибкость и эффективность использования

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

В поиске Google не нужно вручную печатать весь запрос, он сам предложит подходящие варианты

Восьмая: эстетика и минимализм

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

Так выглядит интерфейс, где нет ничего лишнего

Девятая: помощь пользователям в распознавании ошибок

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

В этой форме сразу понятно, как исправить ошибки

Десятая: помощь и документация

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

Обычно во всех сервисах есть раздел Help

Чек-лист для юзабилити-аудита

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

Основное

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

Очевидно, что на этом сайте нам предлагают страховку

А здесь мы можем заказать литую заготовку

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

Яркий и узнаваемый favicon очень полезен в таких случаях

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

Title на странице нашей услуги «Разработка»

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

Отличный пример у Squarespace — тут тебе и меню по сайту с CTA, и блок с промо-предложением, и рекомендуемые ссылки

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

По клику на логотип открывается главная страница. На главной странице логотип некликабелен.
Номер телефона и 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 ссылок.

У «Сбербанка» в главном меню — 11 ссылок, считывается довольно тяжело

На сайте «Тинькофф» ссылок всего 6 и гораздо легче найти нужную

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

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

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

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

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

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

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

Поиск

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

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

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

На Asos поиск работает очень быстро

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

И сам исправляет ошибку в запросе

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

На корпоративных сайтах крупных корпораций освещается множество событий, поэтому фильтр новостей по категории просто необходим

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

На Airbnb, когда ничего не найдено, предлагают перейти по быстрым ссылкам или посмотреть конкретные предложения

Дизайн и UI

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

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

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

Здесь все пункты преимуществ слились в один большой блок, непонятно, куда относятся иконки

В этом примере за счет дополнительного «воздуха» между пунктами четко виден каждый пункт

Текстовый контент на сайте представлен в виде текста, а не изображений.
Все используемые в интерфейсе иконки однозначно понятны для пользователей.
Все страницы сайта выглядят единообразно. Например, на всех есть неизменная шапка или подвал.
Общие элементы сайта размещены в привычных местах. Например, логотип — сверху слева, иконка корзины — справа. Подробнее: Закон Якоба.
Все элементы легко считываются на странице — между элементами достаточно «воздуха», нет нагромождения элементов в рамках экрана.
Контент размещен слева-направо по значимости (так, как мы читаем).
Пользователю очевидно, что элементы, с которыми он может взаимодействовать, кликабельны.
Все кликабельные элементы достаточно крупные, чтобы пользователь легко мог попасть по ним. Подробнее: Закон Фиттса.

Крупные кнопки на этом сайте — это часть дизайн-концепции, но все равно может быть примером следования Закону Фиттса

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

Картинка из гайдов Material Design

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

На первом экране сайта аэропорта Стамбула видно, что ниже есть табло рейсов

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

Доступность

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

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

Кнопки, CTA

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

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

Две кнопки целевых действий с разным приоритетом в середине экрана

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

Блок с формой в конце описания сервиса для инвестирования

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

Конкретная формулировка «Открыть банковский счет» вместо банального «Зарегистрироваться»

Ссылки

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

Ссылка в тексте не очень резко выделяется, но в то же время хорошо заметна

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

Номер телефона в шапке подчеркнут пунктиром, потому что по клику совершается звонок

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

Чекбоксы

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

В горизонтальном списке все сливается в одну линию

А так все хорошо считывается

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

Радиокнопки

Используются по назначению — для выбора одного значения из нескольких.
Рекомендуется использовать для групп до пяти значений. Если значений больше — используется выпадающий список или комбинированный список.
Одновременно может быть выбрана только одна радиокнопка из всей группы.
Кликабельны полностью — и сама радиокнопка, и ее название.
При клике на выбранную радиокнопку с нее не снимается выделение.
Группы из более трех радиокнопок всегда рекомендуется располагать в один столбец.
В форме для заполнения ничего не должно быть выбрано по умолчанию, если выбор пользователя неочевиден.
Если какой-то пункт выбран по умолчанию (например, на странице настроек в личном кабинете), то он стоит первым в списке.

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

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

А если всего два значения, то лучше использовать радиокнопки

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

Поле слишком короткое — в списке много длинных значений

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

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

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

Таблицы

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

Для разграничения строк используется пустое пространство — ничего лишнего

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

Широкая таблица перестраивается в несколько последовательных мини-таблиц

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

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

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

Главный офис отображен на карте.
Представительства компании можно посмотреть как в списке, так и на карте (если много представительств в разных странах / регионах).
Если представлены контакты конкретных сотрудников, то желательно указывать их ФИО, должность и размещать фото для повышения доверия.

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

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

Кнопка чата в стилистике сайта не отвлекает от контента

Формы

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

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

Группировка полей заголовками на странице размещения объявления

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

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

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

Форма разбита на шаги, сверху — прогресс заполнения

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

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

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

Поле в фокусе выделено черной рамкой

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

Название поля отображается всегда: и в пустом поле, и в заполненном поле, и при его заполнении

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

В «Тинькофф» даже при вводе ФИО предлагаются значения для выбора

Проверяется корректность заполненных данных. Например, для e-mail, даты или числовых полей.
Если в поле нужно ввести более пяти слов, то всегда используется многострочное поле ввода.
Многострочные поля заметно отличаются от однострочных (рекомендуется делать в три раза больше по высоте). При вводе длинного сообщения увеличиваются в размерах или внутри появляется полоса прокрутки.
Если по названию поля неочевидно, что нужно заполнить, то около поля размещается подсказка с объяснениями. Если у пользователя запрашиваются специфичные данные, то объясняется зачем это нужно.

ВКонтакте объясняют зачем нужно указывать дату рождения

Заполнение, валидация, отправка

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

Модальные окна

Четко видно, что открылось модальное окно. Чаще всего реализуется с помощью затемнения фона.
Есть заметная кнопка закрытия.
Закрываются, когда пользователь кликает вне области окна.

Контент

Текст

Информативные заголовки, которые объясняют, что пользователь увидит под ними.
Заголовки легко различимы между собой за счет размера. Однозначно можно ответить, где H1, а где H2.
Человеческий текст, который понятен и интересен пользователю, а не только «заточен» под поисковые запросы. Краткость в изложении, отсутствие «воды» — пользователи не любят читать большие объемы текста. Длинные тексты разбиты на абзацы, комфортные для чтения.
Отсутствие орфографических, грамматических, пунктуационных ошибок. Текст оттипографирован — правильно используются тире, дефисы, кавычки.
Длинные тексты разбиты на абзацы, комфортные для чтения. Расстояние между абзацами больше, чем междустрочный интервал.
Используются подзаголовки, маркированные и нумерованные списки. Большие текстовые блоки разбавлены графическим контентом.
Важная для пользователя информация в тексте выделяется жирным.
Цифры больше 4−5 знаков отбиваются разрядами для удобства считывания, например:

2409 → 2 409
20409 → 20 409

Таблицы

Корректное выравнивание значений в таблице: текстовые данные — по левому краю, числовые — по правому, заголовки — в соответствии с данными.
Единицы измерения не повторяются в каждой ячейке, а вынесены в первую строку.

Изображения

Все используемые изображения высокого разрешения и качества.
У всех изображений прописаны alt и title.
Если можно увеличить изображение, оно реагирует на наведение. Увеличенные изображения открываются в модальном окне, а не в новой / текущей вкладке браузера.

Заключение

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

Человек, который занимается проверкой сайта, должен быть достаточно компетентен в вопросах юзабилити, чтобы правильно трактовать пункты чек-листа, замечать и описывать ошибки.
У каждого сайта — своя аудитория, и проверяющий специалист не всегда будет думать и действовать так же, как ваши настоящие пользователи, поэтому есть вероятность, что не все проблемы им будут замечены.
К сайтам из разных отраслей предъявляются разные требования. Для корпоративных сайтов они одни, а для интернет-магазинов — совсем другие. То же самое касается устройств: что хорошо работает на десктопе, может плохо функционировать на смартфоне.

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

Не стоит останавливаться на проверке юзабилити сайта по чек-листу. Чтобы сделать ваш ресурс максимально дружелюбным к пользователям, обратитесь к A/B-тестам и юзабилити-тестированиям. Это тема для другой статьи.

Читайте по теме

Мобильный UX: как разработать удобный сайт онлайн-медиа. Часть 1

Мобильный UX: как разработать удобный сайт онлайн-медиа. Часть 2

Мобильный UX: как разработать удобный сайт финансовой компании

Как провести бесплатный SEO-аудит сайта. Чек-лист