Чек-лист юзабилити сайта

С чего начать проверку юзабилити: персоны и пользовательские сценарии

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

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

• Демографическую информацию: возраст, пол, профессия, образование, место проживания и т.д.

• Психографическая информация: установки, интересы, мнения, ценности, образ жизни.

• Профессиональная картина: должностные обязанности, опыт, навыки, задачи на работе.

• Цели: чего и как они хотят достичь.

• Болевые точки: с какими трудностями или барьерами они сталкиваются при достижении своих целей? Что им мешает?

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

В создании сценариев помогут следующие вопросы:

• Чего хочет достичь клиент? Какова его конечная цель?

• В каких обстоятельствах он использует продукт? Где находятся? В какое время? Какое устройство использует?

• Какие шаги должен предпринять пользователь, чтобы выполнить задачу?

• Что чувствует человек на каждом шаге? Разочарован ли он, удовлетворен, растерян?

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

UI аудит: чек лист по дизайну интерфейса

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

Компоненты для проверки:

1. Макет и структура

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

2. Согласованность дизайна

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

3. «Воздух»

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

4. Визуальная иерархия

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

5. Типографика

Оцените разборчивость, читабельность текста, используемого в продукте. Проверьте размеры, цвет, стиль шрифтов, межстрочные интервалы, чтобы обеспечить удобство при изучении информации на странице.

6. Цвета

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

7. Графика, иллюстрации, видео

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

8. Отзывчивость

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

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

Информационная архитектура

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

Основные принципы:

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

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

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

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

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

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

Дизайн взаимодействий

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

При UX аудите нужно проверить:

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

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

3. Использование интерактивных элементов: к ним относятся кнопки, ссылки, слайдеры, поля, формы. Они должны вести себя так, как ожидают посетители. Их дизайн с расположением на экране должны давать подсказки о том, как с ними взаимодействовать.

4. Обратная связь: обеспечение реакции на действия улучшает опыт. Как пример — визуальные подсказки или вибрации, которые информируют об успешном выполнении или предупреждают об ошибке. Это может быть простая кнопка, меняющая цвет при нажатии, или сообщение об успехе после отправки формы.

5. Микровзаимодействия: это небольшие, тонкие взаимодействия, которые выполняют одну задачу. Например, когда вы ставите «лайк» в социальных сетях, значок может изменить цвет или анимироваться. Эти мелкие детали, которые кажутся незначительными, могут в разы улучшить опыт.

Чек лист юзабилити сайта по главным элементам

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

Макет и структура

• Согласован ли макет на разных страницах?

• Правильно ли выровнены и расставлены элементы?

• Отзывчив ли дизайн ко всем разрешениям экрана?

Навигация

• Доступно ли главное меню? Понятно, где оно?
• Четко ли обозначены пункты меню — легко ли их понять?
• Есть ли простой способ вернуться на главный экран?
• Поток навигации логичен и предсказуем?
• Добавлены ли «хлебные крошки» для многоуровневой навигации?
• Структура логична, интуитивно понятна?
• Для выпадающих разделов меню достаточно ли велика область клика?
• Удобна ли навигация для мобильных устройств?

Типографика

• Являются ли шрифты разборчивыми, читаемыми?
• Согласована ли типографика во всем приложении?
• Четко ли разграничены заголовки с подзаголовками?
• Удобна ли длина строк, межстрочный интервал, размер шрифта?

Цвета

• Согласована ли цветовая схема во всем интерфейсе?
• Достаточно ли контрастны оттенки для обеспечения читабельности текстов? 
• Используется ли цвет для обозначения активного/неактивного состояния?

Кнопки

• Являются ли кнопки различимыми, интуитивно понятными для нажатия?
• Достаточно ли велика область касания интерактивных элементов?
• Содержание кнопок — текст или иконка — четкое, описательное?

Формы, поля ввода

• Четко ли обозначены поля формы?
• Имеется ли надлежащая валидация формата, полезные сообщения об ошибках?
• Логично ли сгруппированы поля ввода?
• Есть ли четкий призыв к действию, например, «Отправить» или «Далее»?

Изображения

• Высокого ли они качества и соответствующего размера?
• Есть ли alt-текст для изображений для доступности?
• Не мешает ли графика восприятию контента?

Обратная связь, уведомления

• Реагирует ли интерфейс, когда пользователь выполняет действие, например, нажимает на кнопку или поле ввода?
• Являются ли сообщения об ошибках понятными? Подсказывают ли они, что делать?
• Не слишком ли навязчивы уведомления? Повышают ли они удобство использования?

Доступность

• Все ли элементы доступны для людей с ограниченными возможностями?
• Предусмотрена ли версия для слабовидящих? Интерфейс остается аккуратным при увеличении шрифтов в браузере?
• Все ли функции можно выполнить с помощью одной лишь клавиатуры?
• Предоставляются ли субтитры для видеоконтента?

Микровзаимодействия

• Есть ли тонкая анимация или изменения, когда пользователь взаимодействует с определенным элементом, например, при наведении курсора на кнопку?
• Улучшают ли эти микровзаимодействия впечатления посетителей?
• Производительность
• Страницы и функции загружаются быстро?
• Есть ли недочеты, которые замедляют работу?
• Можно ли оптимизировать изображения, видео, графические компоненты для ускорения работы?

Кнопки

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

Ссылки

• Можно ли по цвету, подчеркиванию или другим визуальным подсказкам определить, какой текст является кликабельным?
• Имеют ли они наведенные и активные состояния?
• Если ссылки вставлены в основной текст, не нарушают ли они читабельность?

Поля ввода

• Достаточно ли они велики, чтобы легко нажать на них или коснуться?
• Хорошо ли видны границы полей ввода?
• Если есть ограничение по количеству символов, оно указано?
• Текстовые подсказки в полях заметны, полезны?

Формы

• В форме нет лишних полей?
• Разбиты ли опросники на удобные для восприятия разделы?
• Может ли пользователь легко отличить обязательные пункты от необязательных?
• Навигационные кнопки, например, «вперед» или «следующее» заметны, легко идентифицируемы, правильно расположены?
• Обеспечивает ли форма проверку в реальном времени с понятными сообщениями об ошибках?

Чекбоксы, радиокнопки

• Размер позволяет легко нажать на них или коснуться?
• Являются ли надписи рядом с чекбоксами понятными и кликабельными?

Выпадающие окна

• Понятно ли, что это интерактивные элементы?
• В выпадающем меню видны все варианты?
• Если это длинный список, вы облегчаете выбор с помощью функции поиска?

Слайдеры, бегунки

• Легко ли ими манипулировать, особенно на сенсорных устройствах?
• Ясно ли выбранное значение или диапазон?

Иконки

• Являются ли они интуитивно понятными и общепризнанными?
• Если функция значка не так очевидна, есть ли сопроводительный текст?

Всплывающие окна, подсказки

• Предоставляют ли они полезную дополнительную информацию?
• Их расположение не заслоняет важное содержимое страницы?
• Понятно ли, как их закрыть и вернуться к основному содержанию?

Индикаторы загрузки и прогресс

• Эффективно ли они сообщают о том, что система работает?
• Посетители могут определить прогресс при длительных операциях?

Карточки, блоки

• Имеют ли они четкую иерархию информации?
• Очевидны ли интерактивные элементы внутри карточки?

Каталог интернет-магазина

• Категоризация продуктов логична, интуитивно понятна?
• Пользователи могут сортировать или фильтровать товары по разным признакам — ценам, популярности, рейтингу и другим параметрам?
• Изображения товаров однородные? Фотографии отображают их реальный вид?
• Добавлена ли функция быстрого просмотра информации о продукте?

Карточки товаров

• Указаны ли все необходимые детали товара — размеры, цвета, характеристики, наличие?
• Интерфейс позволяет увеличить фотографии, чтобы ближе рассмотреть продукт?
• Доступны ли отзывы покупателей, оценки, рейтинги?

Корзина

• Могут ли пользователи легко добавлять, удалять товары на странице?
• Четко ли указана общая стоимость с учетом налогов с доставкой?
• Можно откладывать или сохранять товары на потом?

Оформление заказа

• Процесс простой, упорядоченный, с минимальным количеством шагов?
• Можно оформить заказ без создания учетной записи с гостевым доступом? 
• Доступны ли разные варианты оплаты?
• Как происходит подтверждение заказа? Покупатели видят сообщения?
• После оплаты есть страница «спасибо»?

Функциональность поиска

• Легко искать товары в каталоге?
• Есть ли функция автоматического поиска или исправления опечаток?
• Результаты поиска релевантны? Хорошо ли организована выдача?

Поддержка клиентов

• Покупатели смогут быстро найти окошка с помощью, если она им понадобится? 
• Собран ли FAQ с частыми вопросами?
• На страницах есть чат-бот или контактная информация?
• Ясно ли изложена политика возврата/обмена?

Избранное

• Могут ли пользователи легко добавлять товары в избранное?
• Можно поделиться этим списком желаний?
• Создание и управление учетной записью
• На сайте легко зарегистрироваться? Что для этого нужно?
• Могут ли пользователи легко управлять данными своей учетной записи, просматривать историю заказов, отслеживать отправления?

Безопасность

• Хорошо ли видны значки безопасности, особенно во время оформления заказа?
• Безопасно ли обрабатываются данные пользователей — пароли, данные кредитных карт, персональная информация?

Рекомендации

• Предоставляются ли персонализированные рекомендации по товарам на основе истории просмотров или покупок?

Ошибки при проведении анализа юзабилити

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


№1. Нет четкой цели
Перед началом работы необходимо определить, чего вы хотите достичь, будь то рост конверсии, снижение числа отказов или повышение общей удовлетворенности пользователей.
№2. Игнорирование перспективы пользователя
Иногда аудиторы слишком много внимания уделяют бизнес-целям, упуская точку зрения клиентов. Нужно постоянно держать в голове, что цель юзабилити — это улучшение пользовательского опыта.
№3. Отсутствие плана или контрольного списка
Без чек-листа легко пропустить важные элементы. Используйте список из этой статьи или создайте свой на его основе. Главное — охватить все параметры, которые вы хотите изучить.
№4. Не учитываются все сегменты ЦА
Не все пользователи одинаковы. У них разные навыки, опыт и потребности. Хороший аудит учитывает разные сегменты потенциальных покупателей, которые могут взаимодействовать с продуктом.
№5. Игнорирование мелких деталей
Иногда внимание сосредотачивается на значительных проблемах, а мелкие, но важные части упускаются из виду. Помните, что даже несерьезные раздражители могут накапливаться и влиять на пользовательский опыт.
№6. Полагаться только на количественные данные
Цифры могут рассказать о многом, но не обо всем. Качественные данные, полученные в интервью или опросах, могут обеспечить контекст, более глубокое понимание поведенческих паттернов.
Резюме
Глубокий и систематический анализ продукта позволяет выявить потенциальные проблемы, оценить текущий пользовательский опыт, обнаружить области для улучшения. Ключ к эффективном аудиту юзабилити — тщательная проверка. Важна каждая деталь: от персоны пользователя до дизайна взаимодействия, от элементов интерфейса до конкретных компонентов веб-приложений или интернет-магазинов. Даже такие мелкие элементы, как кнопки, ссылки и поля форм, могут значительно повлиять на общий опыт.

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