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

10 общих принципов проектирования взаимодействия по Якобу Нильсену.

Они называются "эвристиками", потому что это общие эмпирические правила, а не конкретные рекомендации по удобству использования.

# 1: видимость состояния системы

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

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

Советы

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

Пример эвристики юзабилити №1:

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

Узнать больше

# 2: сходство системы и реального мира

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

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

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

Советы

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

Пример эвристики юзабилити №2:

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

Узнать больше

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

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

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

Советы

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

Пример эвристики юзабилити №3:

Цифровым пространствам, как и физическим пространствам, нужны быстрые «аварийные выходы».

Узнать больше

# 4: согласованность и стандарты

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

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

Советы

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

Пример эвристики юзабилити №4:

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

Узнать больше

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

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

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

Советы

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

Пример эвристики юзабилити №5:

Защитные ограждения на серпантинах предотвращают падение водителей с обрыва.

Узнать больше

# 6: распознавание, а не воспоминание

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

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

Советы

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

Пример эвристики юзабилити №6:

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

Узнать больше

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

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

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

Советы

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

Пример эвристики юзабилити №7:

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

Узнать больше

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

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

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

Советы

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

Пример эвристики юзабилити №8:

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

Узнать больше

3-минутное видео: эстетический и минималистский дизайн

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

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

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

Советы

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

Пример эвристики юзабилити №9:

Дорожный знак "Въезд запрещен" напоминает водителям, что они движутся в неправильном направлении, и просят их остановиться.

Узнать больше

2-минутное видео: Как помочь пользователям преодолеть ошибки

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

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

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

Советы

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

Пример эвристики юзабилити №10:

Стойки информации в аэропортах легко узнаваемы и мгновенно решают проблемы пассажиров.

Узнать больше

Примечание от Якоба

Первоначально я разработал принципы для эвристической оценки в сотрудничестве с Рольфом Молихом в 1990 году [Molich and Nielsen 1990; Nielsen and Molich 1990]. Четыре года спустя я уточнил эвристики на основе факторного анализа 249 проблем юзабилити [Nielsen 1994a], чтобы вывести набор эвристик с максимальной объяснительной силой, в результате чего появился этот пересмотренный набор эвристик [Nielsen 1994b].

В 2020 году мы обновили эту статью, добавив дополнительные пояснения, примеры и ссылки. Хотя мы немного изменили язык определений, сами 10 эвристик остаются актуальными и неизменными с 1994 года. Если что-то остается верным на протяжении 26 лет, это, скорее всего, будет применимо и к будущим поколениям пользовательских интерфейсов.

Больше классных проектов в uprock.design

Источник:

nngroup.com