Как оценить интерфейс на соответствие эвристикам юзабилити: руководство

Эвристики юзабилити — фундаментальные принципы UX, которые были разработаны Якобом Нильсеном еще в 1994 году. И, как ни удивительно, они до сих пор актуальны.

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

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

Что такое эвристическая оценка?

Nielsen Norman Group: Эвристическая оценка — это метод выявления проблем в интерфейсах. Эксперты оценивают дизайн на соответствие набору руководящих принципов (или эвристик), которые делают системы простыми в использовании.

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

Какой подход выбрать?

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

В этой статье мы остановимся на самом распространенном подходе: 10 эвристик юзабилити Якоба Нильсена.

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

Оригинальные эвристики Нильсена были разработаны еще в 90-х, но сегодня они так же актуальны, как и тогда. Почему? В основе этих принципов лежит психология, а не технологии. Юзабилити — то, насколько интерфейс отвечает нашим психологическим потребностям: от согласованности и контроля до обратной связи и гибкости. Так что принципы, которые делали систему удобной в 1994 году, по-прежнему применимы в 2024 году.

Мы можем использовать их для оценки веб-сайтов, мобильных приложений, AR/VR-продуктов, голосовых помощников на основе AI и т.д.

Эвристическая оценка на примере прототипа

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

Давайте же пройдемся по всем эвристикам Нильсена и разберем, насколько прототип соответствует каждой из них.

1. Видимость состояния системы

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

Результат

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

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

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

2. Соответствие системы реальному миру

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

Результат

• Заголовки написаны доступным языком («Найдите жилье для своего отпуска»).
• Четкие и понятные подписи на кнопках («Продолжить», «Оплатить сейчас»).
• Некоторые концепции, например, вход в систему, представлены изображениями (на картинке ниже). Они наглядно показывают пользователям, как работает та или иная функция.

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

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

3. Пользовательский контроль и свобода

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

Результат

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

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

Добавить кнопки «Закрыть»/«X» для открытых карточек, отображающих дополнительную информацию.

4. Согласованность и стандарты

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

Результат

• Прототип соответствует отраслевым стандартам, и следовательно, будет знаком и понятен пользователям (закон Якоба).
• Элементы управления выглядят и функционируют согласованно на всех экранах, например, все кнопки «Назад» имеют одинаковый дизайн, как и кнопки «Продолжить» (внутренняя согласованность).
• Хедер соответствует общепринятым паттернам: логотип расположен слева, а для поиска и навигации используются стандартные иконки — лупа и гамбургер (внешняя согласованность).

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

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

5. Предотвращение ошибок

Хороший дизайн предотвращает ошибки.

Результат

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

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

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

6. Распознавание вместо необходимости вспоминать

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

Результат

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

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

Добавить раздел «Вы искали...» на экране результатов поиска. Да, он займет дополнительное место, но это того стоит.

7. Гибкость и эффективность использования

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

Результат

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

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

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

8. Эстетичный минималистичный дизайн

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

Результат

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

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

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

9. Помощь пользователям в распознавании, диагностике и исправлении ошибок

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

Результат

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

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

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

10. Справочные материалы и документация

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

Результат

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

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

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

Заключение

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

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

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

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

Помните:

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