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

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

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

01

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

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

•

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

•

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

•

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

•

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

•

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

02

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

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

04

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

03

В этой статье расскажем, как качественно провести юзабилити-аудит сайта, и подробно рассмотрим 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, когда ничего не найдено, предлагают перейти по быстрым ссылкам или посмотреть конкретные предложения

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

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

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

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

•

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

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

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

•

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

•

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

•

•

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

•

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

•

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

•

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

•

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

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

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

•

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

•

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

•

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

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

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

•

Доступность

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

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

•

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

•

•

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

Кнопки, CTA

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

•

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

•

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

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

•

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

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

•

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

Ссылки

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

•

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

•

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

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

•

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

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

•

•

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

•

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

•

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

Чекбоксы

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

•

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

•

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

•

•

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

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

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

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

•

Радиокнопки

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

•

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

•

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

•

•

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

•

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

•

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

•

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

•

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

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

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

•

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

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

•

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

•

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

•

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

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

•

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

•

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

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

•

Таблицы

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

•

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

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

•

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

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

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

•

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

•

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

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

•

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

•

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

•

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

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

•

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

•

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

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

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

•

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

•

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

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

•

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

•

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

•

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

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

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

•

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

•

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

•

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

•

•

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

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

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

•

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

•

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

•

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

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

•

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

•

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

•

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

Многострочные поля заметно отличаются от однострочных (рекомендуется делать в три раза больше по высоте). При вводе длинного сообщения увеличиваются в размерах или внутри появляется полоса прокрутки.

•

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

•

Проверяется корректность заполненных данных. Например, для e-mail, даты или числовых полей.

•

•

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

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

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

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

•

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

•

•

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

•

После отправки данных выводится сообщение об успешной отправке и описание дальнейших шагов.

Есть заметная кнопка закрытия.

•

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

•

•

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

Текст