10 эвристик usability для дизайна пользовательского интерфейса — правила от Якоба Нильсена
Рассказываем об основе UX/UI дизайна — 10-ти общих принципах проектирования, выведенных Якобом Нильсеном в 1990 году.
Слыша о 10 правилах Якоба Нильсена, многие задаются вопросом — почему эвристики? И что это вообще такое? На самом деле, все очень просто. Эвристика, как наука, имеет несколько сложных для понимания формулировок, которые вряд ли нам помогут. Но вот что действительно важно: эвристики — это общие эмпирические (то есть те, что были выведены в процессе наблюдения и исследований) правила, которые не несут в себе конкретных рекомендаций, но рассказывают, как должно быть. Именно для этого и существуют эвристики Якоба Нильсена. Они не имеют конкретных инструкций для каждой ситуации, но описывают принципы дизайна в целом. В этой статье мы кратко расскажем о каждой из 10 эвристик. Но если же вы хотите ознакомится с каждой из них отдельно, то у нас на сайте есть целый раздел, посвященный эвристикам usability.
1. Видимость состояния системы
Дизайн должен информировать пользователей о том, что происходит на экране, давая соответствующую обратную связь в течение определенного времени.
Когда пользователи знают, в каком состоянии находится система прямо сейчас, они понимают, как связаны предыдущие взаимодействия с текущим состоянием, и как на это повлияли их прошлые действия. Если результаты взаимодействия понятны и предсказуемы — это формирует определенный уровень доверия к продукту.
Пример эвристики юзабилити №1:
Часто на картах торговых центров можно найти индикаторы «Вы находитесь здесь». Они нарисованы не просто так, и призваны показывать людям, где они находятся. Это помогает понять, куда идти дальше.
Индикаторы на картах торговых центров показывают людям, где они сейчас находятся
Советы по использованию этой эвристики:
- Четко информируйте пользователей о состоянии системы. Если действие имеет последствия для человека, интерфейс должен обязательно об этом проинформировать.
- Пользователь должен получать отклик от системы как можно быстрее (в идеале — сразу).
- Общение интерфейса и человека — ключ к пониманию продукта.
2. Сходство системы и реального мира
Дизайн должен говорить на языке пользователей. Именно поэтому откажитесь от жаргонов и технической терминологии и подавайте информацию с помощью простых слов и понятий.
Помните, что термины, формулировки или иконки, которые понятны вам, как дизайнерам, и вашим коллегам, как, например, программистам, могут быть совершенно непонятными для ваших пользователей. Говорите на человеческом языке, и максимально упрощайте ваш интерфейс.
Когда элементы управления интерфейса названы, показаны или расположены в соответствии с привычными паттернами из реальной жизни, пользователям легче изучить и запомнить принцип работы интерфейса. Это и лежит в основе позитивного пользовательского опыта.
Пример эвристики юзабилити №2:
Помните свою плиту на кухне? Когда её элементы управления соответствуют расположению конфорок, можно быстро понять, что к чему относится.
Когда элементы управления плитой соответствуют расположению нагревательных элементов, пользователи могут легко сориентироваться
Советы по использованию этой эвристики:
- Убедитесь, что пользователи могут понять смысл, не углубляясь в поиск определения слова. Поход в Google нам ни к чему!
- Не думайте, что очевидное для вас будет очевидным для пользователя.
- Чтобы понять пользователя, проводите исследования их поведения и уровня понимания. Это поможет сделать систему внутри интерфейса похожей на реальный мир.
3. Контроль и свобода
Пользователи часто выполняют ошибочное действие вследствие человеческого фактора. Именно поэтому им нужен чётко обозначенный «аварийный выход», чтобы избежать негативных последствий и отменить нежелательное действие.
Когда людям легко отменить действие или прервать нежелательный процесс, это вселяет ощущение, что они могут контролировать интерфейс. “Аварийные выходы” позволяют людям избегать разочарований.
Пример эвристики юзабилити №3:
В жизни часто можно увидеть аварийные выходы. Из домов, транспорта и т.д. Интерфейсам тоже нужны такие!
Цифровым пространствам нужны быстрые аварийные выходы
Советы по использованию этой эвристики:
- Проектируйте функционал отмены действия и его восстановления.
- Пользователю необходим чёткий и понятный способ выйти из текущего состояния. Например, через кнопку «отмена».
- Убедитесь, что «аварийный выход» легко найти.
4. Согласованность и стандарты
Пользователи не должны обдумывать, означают ли разные кнопки, формулировки или другие элементы одно и то же.
Закон Якоба говорит нам о том, что люди проводят большую часть своего времени на других сайтах (или приложениях), а не на вашем. И именно использование других продуктов, а не вашего, формирует ожидания людей. Если согласованности не будет, это может увеличить когнитивную нагрузку на пользователей, заставляя их изучать что-то новое. А человек в современном цифровом мире этого очень не любит. Помните «правило банана»? Человек не думает, с какой стороны от открывается, это и так интуитивно понятно. Здесь примерно то же самое.
Пример эвристики юзабилити №4:
Стойки регистрации всегда расположены у входа в отель, а не на его заднем дворе. Это соответствует ожиданиям клиентов.
Стойки регистрации обычно расположены в передней части отелей, что соответствует ожиданиям клиентов
Советы по использованию этой эвристики:
- Поддерживайте согласованность в рамках одного продукта (одинаковые кнопки не могут отвечать за разные действия).
- Соблюдайте паттерны, которые сформировались в цифровом мире (например, кнопка входа на сайт всегда находится в правом верхнем углу).
5. Предотвращение ошибок
Правильные и понятные сообщения об ошибках должны быть, но в идеале свести вероятность возникновения проблем и ошибок до минимума. Это можно сделать двумя способами: либо устраните условия, которые могут их спровоцировать, либо дайте людям возможность проверять и подтверждать свои (особенно критические) действия.
Ошибки в интерфейсе можно поделить на 2 типа: промахи и просчеты. Промахи — это ошибки, которые пользователь совершил неосознанно. Например, из-за невнимательности или быстрого нажатия. Просчеты — это сознательные ошибки. Например, если человек ожидал другого отклика интерфейса на его действие.
Пример эвристики юзабилити №5:
Опасные серпантины часто имеют ограждения, чтобы избежать ситуаций падений водителей с обрыва.
Ограждения на извилистых горных дорогах не позволяют водителям падать со скал
Советы по использованию этой эвристики:
- В первую очередь акцентируйте внимание на критических ошибках (удаление, потеря прогресса и т.д.) и сделайте все, чтобы пользователь их не совершал.
- Хороший механизм для минимизации промахов — разумные ограничения и хорошие значения по умолчанию.
- Информационные сообщения могут уменьшить количество просчётов в разы.
6. Распознавание, а не припоминание
Минимизируйте нагрузку на память пользователя. Критическая информация должна быть видимой, даже в том случае, если человек переходит от одной части интерфейса к другой.
Кратковременная память людей — ограничена. Интерфейсы, которые нужно распознавать, а не запоминать, уменьшают количество когнитивных усилий.
Пример эвристики юзабилити №6:
Большинству людей проще узнать столицу страны или ее расположение на карте, вместо того, чтобы запоминать каждую столицу и каждую точку. Люди с большей вероятностью правильно ответят на вопрос, является ли Мадрид столицей Испании, а не как называется столица Испании.
Большинству людей легче узнавать столицы стран, вместо того, чтобы запоминать их
Советы по использованию этой эвристики:
- Позвольте пользователям распознавать информацию вместо того, чтобы запоминать ее.
- Предлагайте помощь сразу же, в случае необходимости, а не давайте длинные руководства, которые стоит изучить, прежде чем начать пользоваться интерфейсом.
7. Гибкость и эффективность использования
Параметры и свойства, скрытые от начинающих пользователей, могут ускорить взаимодействие для опытных пользователей. Таким образом, дизайн может удовлетворить как одних, так и других.
Если процесс внутри интерфейса является гибким, нужно дать людям возможность выбирать тот метод взаимодействия с ним, который им больше подходит.
Пример эвристики юзабилити №7:
На картах городов часто могут указываться маршруты. Например, к туристическому месту. Но у местных жителей могут быть свои маршруты, которые они считают более удобными и быстрыми.
Обычные маршруты указаны на картах, но местные жители знают, где срезать путь
Советы по использованию этой эвристики:
- Предоставьте пользователям ускорители, такие как горячие клавиши и сенсорные жесты (там, где это возможно).
- Старайтесь обеспечить максимальную персонализацию, чтобы пользователи могли настроить продукт под себя. Самый яркий пример — темная или светлая тема. Кстати, недавно на YouTube-канале Пижамной Академии вышло видео, в котором мы детально разобрали, как правильно спроектировать темную тему.
8. Эстетичный и минималистичный дизайн
Интерфейсы не должны содержать информацию, которая не является актуальной или редко используется. Каждая лишняя единица информации смещает на себя внимание и забирает внимание у той информации, которая является действительно важной.
Нет, не обязательно использовать «сухой» дизайн, где только текст и картинки. Важно, чтобы UI был сосредоточен на главном, визуальные элементы не мешали достижению основных целей пользователя. Безусловно, нельзя забывать про эффект эстетики в usability, о котором мы уже рассказывали ранее. Но все должно быть в меру!
Пример эвристики юзабилити №8:
Представьте себе декоративный чайник. Он очень красив, но много ли будет пользы, если красота станет следствием неудобной ручки?
Богато украшенный чайник часто непрактичен
Советы по использованию этой эвристики:
- Сосредоточьте внимание на самом главном в содержании и визуальном дизайне. Не позволяйте второстепенным или вовсе ненужным элементам отвлекать пользователей от важной информации.
- Всегда определяйте приоритетность контента. Это поможет правильно расставить акценты.
9. Помощь для пользователя в случае ошибок
Сообщения об ошибках должны быть написаны простым человеческим языком (без кодов ошибок и профессионального жаргона). Их цель и смысл — точно указать на проблему и предложить вариант решения.
Чтобы сообщение было легко заметить и распознать, оно должно быть четко выражено и не сливаться со всем остальным дизайном.
Пример эвристики юзабилити №9:
Дорожный знак «Въезд запрещён» напоминает водителям, что они движутся в неправильном направлении. Он ярко выражен, его не спутаешь с другими дорожными знаками.
Знаки на дороге предупреждают водителей, что они движутся в неправильном направлении, и просят их остановиться
Советы по использованию этой эвристики:
- Полужирный красный текст или красная подложка — хороший вариант, чтобы выделить сообщение об ошибке.
- Сообщите пользователям об ошибке на понятном им языке. Технический жаргон никак не поможет решить проблему.
10. Справка и документация
Идеальная система — та, которая не нуждается в дополнительных пояснениях. Однако сложные сервисы все таки могут потребовать наличие документации, чтобы помочь пользователям решить свои задачи.
Содержимое документации (или блока ответов на самые популярные вопросы) должно быть удобным для поиска и ориентированным на задачу пользователя. Будьте краткими и последовательными. Перечисляйте конкретные шаги, которые необходимо выполнить. Это же касается и onboarding-а. Если функционал, который вы разрабатываете, сложный по своей сути, есть смысл ввести пользователя в курс дела сразу и показать, что где лежит. Наша статья о том, как влюбить человека в продукт через onboarding, поможет вам в этом!
Пример эвристики юзабилити №10:
В аэропортах есть справочные стойки. Их легко заметить, и также легко получить необходимую информацию.
Информационные киоски в аэропортах легко узнаваемы и решают проблемы клиентов в контексте и немедленно
Советы по использованию этой эвристики:
- Убедитесь, что страницу или блок с документацией легко найти.
- Если документация может понадобиться человеку в процессе выполнения задачи, дайте ему нужную ссылку.
- Хорошая документация — это список конкретных шагов, которые нужно выполнить.
Источник: NNGroup
