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

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

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

Правила:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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