10 эвристических правил юзабилити для дизайна пользовательского интерфейса

В начале 1990-х Якоб Нильсен разработал 10 основных принципов проектирования взаимодействия с пользователем, основываясь на результатах анализа 249 проблем юзабилити. Эти принципы также известны как «эвристики», поскольку представляют собой общие эмпирические правила, а не конкретные указания по обеспечению удобства и простоты использования. Они остаются неизменными вот уже более 27 лет и до сих пор сохраняют свою актуальность.

Правило #1: Видимость статуса системы

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

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

Советы

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

Правило #2: Соответствие между системой и реальным миром 

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

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

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

Советы

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

#3: Контроль и свобода действий пользователя 

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

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

Советы

  • Предоставьте пользователям возможность отменить и повторить отмененные действия.
  • Четко укажите путь выхода из текущего взаимодействия с системой, например, в виде кнопки «Отмена».
  • Убедитесь в том, что запасной выход четко обозначен и легко заметен.
Пример применения эвристического правила #3:
Быстрый доступ к «запасным выходам» является обязательным атрибутом как цифровых, так и физических пространств.

#4: Последовательность и соответствие стандартам

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

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

Советы

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

Правило #5: Предотвращение ошибок

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

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

Советы

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

Правило #6: Распознавание вместо припоминания

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

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

Советы

  • Обеспечьте возможность распознавания размещенной в интерфейсе информации, избавив пользователей от необходимости вспоминать ее по памяти («припоминать»).
  • Давайте пользователям контекстные подсказки, не вынуждайте их заучивать длинные инструкции и руководства.
  • Сократите объем информации, которую должны запоминать пользователи.
Пример применения эвристического правила #6:
Большинству людей распознавать столицы стран гораздо проще, чем запоминать их. Они с большей долей вероятности правильно ответят на вопрос «Является ли Лиссабон столицей Португалии?», а не на вопрос «Как называется столица Португалии?»

Правило #7: Гибкость и эффективность использования

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

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

Советы

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

Правило #8: Эстетичный и минималистский дизайн

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

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

Советы

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

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

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

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

Советы

  • Используйте традиционные визуальные элементы в сообщениях об ошибках (например, текст, выделенный жирным или красным шрифтом).
  • Объясните пользователям, что именно пошло не так, на доступном им языке – избегайте употребления технического жаргона.
  • Предложите пользователям решение проблемы (например, инструмент быстрого доступа, который мгновенно устранит проблему).
Пример применения эвристического правила #9:
Дорожный знак «Въезд запрещен» сообщает водителям о том, что они движутся в неправильном направлении, и просит их остановиться. 

Правило #10: Предоставление помощи и документации

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

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

Советы

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

Перевод со статьи: https://www.nngroup.com/articles/ten-usability-heuristics/