Главная страница

Эвристики Нильсена для решения проблем пользовательского интерфейса

Jevristiki Nil'sena.png
 

В 1990 году Якоб Нильсен совместно с Рольфом Моличем сформулировал десять эвристик — правил, которым должен соответствовать удобный пользовательский интерфейс.

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


В оригинале статьи не говорится о сайтах или интерфейсах. Нильсен употребляет более широкое понятие — система. В нашем случае мы понимаем под системой именно рабочий веб-проект или его прототип.

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


Правило
1 Видимость статуса системы
2 Равенство между системой и реальным миром
3 Пользовательский контроль и свобода действий
4 Последовательность и стандарты
5 Предотвращение ошибок
6 Узнавание, а не воспоминание
7 Гибкость и удобство использования
8 Эстетика и минималистичный дизайн
9 Помощь в распознавании, диагностике и исправлении ошибок
10 Помощь и документация

1. Видимость статуса системы

Пользователь всегда должен понимать, что происходит. Задача системы — вовремя информировать пользователя о происходящем.


Пример — индикатор загрузки при работе с Яндекс.Диском.

indikator zagruzki.png

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


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

2. Равенство между системой и реальным миром

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


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

Ikonki delajut punkty menju intuitivno ponjatnymi.png

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


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

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

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


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

vozmozhnost' redaktirovanie zapisi.png

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

4. Последовательность и стандарты

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


Эта эвристика имеет прямое отношение к пользовательским паттернам: чем привычнее и понятнее для посетителя модель взаимодействия с проектом, тем выше вероятность, что он сможет решить свои задачи.


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

interfejsy jelektronnoj pochty.png

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

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

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


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

zapolnenija i otpravki form.png

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

6. Узнавание, а не воспоминание

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


Идеальная иллюстрация — иконки и общепринятые обозначения, которые позволяют быстро сориентироваться и обозначают конкретный сценарий действий.

ikonki.png

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

7. Гибкость и удобство использования

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


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

adaptivnost'.png

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

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

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


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


Пример простого интерфейса, который не отвлекает в интернет-магазине от оформления заказа.

prostoj interfejs dlja oformlenija zakaza.png

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

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

Если пользователь что-то сделал не так — сообщите об ошибке и покажите, как ее исправить.


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


Пример сервисного сообщения от системы Яндекс.Деньги для тех, кто при переводе забыл проставить сумму:

Primer servisnogo soobshhenija ot sistemy.png

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

10. Помощь и документация

Даже если все просто — инструкция никогда не будет лишней.


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

instrukcija dlja pol'zovatelej.png

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

Подводя итоги по вопросу проблем пользовательского интерфейса

  • Хотя эвристики Нильсена были сформулированы почти 30 лет назад, они по-прежнему актуальны при проектировании интерфейсов и сценариев взаимодействия.
  • Эвристики можно использовать как базовый чек-лист на этапе создания и запуска проекта, чтобы изучить, насколько он удобен для пользователей.
  • Адаптированные принципы Нильсена могут быть заложены в основу глубокого исследования юзабилити проекта на любом этапе.

Подпишитесь на обновления, чтобы быть в курсе!

Оцените статью:

( 9 оценок, средняя: 4.01 из 5 )

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

Адрес подписки уже существует. Пожалуйста укажите другой адрес.

Указать другой

На ваш почтовый адрес отправлено письмо для подтверждения подписки.

Если вы ещё не являетесь пользователем AskUsers,
но хотите улучшить свой сайт, то просто зарегистрируйтесь.

Хочу попробовать