Юзабилити эвристики Джейкоба Нильсена
Сервисы, которыми мы пользуемся, становятся сложнее — в них много сценариев. Например, Телеграм сначала был мессенджером, потом в нём появились каналы и боты — и он стал похож и на соцсеть, и на интернет-магазин. Теперь в Телеграме появилась криптовалюта, которую можно в нём же покупать и продавать. Получается, теперь это ещё и биржа. А чем сложнее сервис — тем сложнее поддерживать удобство в каждом сценарии для всех пользователей.
Нужно постоянно исследовать, чтобы знать слабые места продукта и работать над ними, а для этого нужна экспертиза и работа всей команды. Можно проводить юзабилити тестирования, следить за метриками и читать обращения и отзывы, но есть инструмент, который поможет провести аудит сайта или приложения, найти критичные ошибки в дизайне и работе — это 10 юзабилити эвристик Джейкоба Нильсена.
В этой статье разберёмся, что такое эвристики, какие они бывают и как их применять. Она будет полезна дизайнерам, UX-исследователям, аналитикам, фронтендерам и другим членам команды, которые занимаются развитием интерфейса.
Что такое эвристики и для чего они нужны?
Эвристики — это набор приёмов и принципов, которые помогают решать сложные исследовательские и практические задачи быстрее.
Эвристики Джейкоба Нильсена — это десять конкретных приёмов и принципов, которые помогают оценить удобство и функциональность сайта или приложения.
Дизайн — это не то, как предмет выглядит, а то, как он работает (с) Стив Джобс
Впервые эвристики Джейкоба Нильсена опубликовали почти 30 лет назад и с того момента их использовали для сайтов, интернет-магазинов, банковских приложений и видеоигр.
Про понятность и простоту
1 — Наглядный статус системы
Давайте пользователям обратную связь на их действия
Пользователи выполняют много разных действий на сайтах и в приложениях — регистрируются, вводят данные и оплачивают покупки. Обратная связь даёт понять, что всё работает и ожидания пользователя выполняются. Если же обратной связи нет, то кажется, что ничего не работает — нужно писать в техподдержку и разбираться. Например, когда кнопка не нажимается или неактивна без причины.
Обратная связь на действия пользователей может быть:
- единоразовой — например, уведомление об успешной оплате, когда пользователь нажал «Оплатить»;
- долгосрочной — например, показывать прогресс определённого действия в системе.
Пример
Если пользователи заполняют анкету — покажите прогресс-бар или чекпоинты.
2 — Инструкция, справка или FAQ
Дайте пользователям возможность разобраться самим
Здорово, когда не нужно учиться пользоваться сервисом и разбираться в том, как он работает. Но не всегда дизайн может объяснить пользователю, из чего состоит сайт или приложение и с чего начать — у всех пользователей разный опыт и уровень знаний.
Пример
Составьте список часто задаваемых вопросов и опишите решения и ответы на них. Так пользователи смогут сами разобраться и повысить свой уровень.
Если вы создаёте сервис для узких специалистов, например, для архитекторов или инженеров, то инструкции и справки будут важным элементом дизайна.
Госуслуги, конечно, не сложный сервис для узких специалистов, но в нём можно заказать услуги и документы, оплатить налоги и сохранить свои данные — очень много сценариев. На главной странице, ещё до регистрации, есть строка поиска с ассистентом и кнопка «Помощь».
3 — Эстетика и минимализм
Оставляйте только самое нужное
Интерфейсы сайтов и приложений состоят из кнопок, ссылок, иконок и указателей — и все они борются за внимание пользователя. Любой элемент отвлекает на себя внимание и усложняет выполнения задачи.
Пример
Посмотрите на юзабилити метрики основных сценариев вашего сервиса и записи юзабилити тестирований. Если пользователи не могут найти пункт меню, кнопку или поле, чтобы продолжить сценарий, и отвлекаются на второстепенные элементы — то это повод почистить интерфейс.
Про ошибки
4 — Право на ошибку и исправление
Давайте пользователям возможность отменить действие или вернуться назад
Пользователи могут попасть не в ту часть сервиса — случайно нажать кнопку, ссылку или по-своему понять элемент сервиса. Если у них не будет возможности вернуться назад, то придётся закрывать сервис и входить заново.
Примеры
Используйте стрелку «←», кнопку «Отменить» или «Историю», где можно найти все свои действия и вернуться к конкретном шагу.
Ещё один хороший способ навигации в сервисе — «хлебные крошки». Можно перемещаться по вложенным страницам не только на шаг назад, но и через два-три уровня.
5 — Предотвращение ошибок
Исключайте ошибки, с которым пользователи могут столкнуться
Пользователи могут промахнуться или неверно понять сервис. И хорошо, когда сообщение об ошибке написано на языке пользователя и предлагает варианты решений, но ещё лучше, когда пользователь не сталкивается с ошибкой вообще.
Тестируйте прототипы перед релизом сложных фич, чтобы любой вариант выполнения сценария не мог завести пользователя в тупик — привлекайте тестировщиков и запускайте пилоты. Если вы нашли ошибку, с которой сталкивается много много пользователей, то сообщения об ошибке недостаточно — сделайте так, чтобы пользователь с ней не сталкивался.
Пример
Контур Компас — сервис по поиску новых клиентов. В нём отделы продаж с помощью фильтров собирают себе базы для звонков и рассылок, а маркетологи анализируют клиентов и генерируют гипотезы.
Когда пользователь выбрал подходящие фильтры, то в верхнем правом углу он видит количество компаний, которые подходят под портрет. Именно столько компаний попадёт в экспорт.
Плюс, можно посмотреть все выбранные фильтры и убедиться, что всё сделано верно.
6 — Гибкость и эффективность
Ускоряйте работу пользователей
Пользователи ценят эффективность сайтов и приложений. Когда они только начинают пользоваться новым сервисом, то он помогают экономить время — выполнять сложные задачи быстрее. Но если пользоваться ими достаточно часто, то интерфейс запоминается настолько хорошо, что эффективность и скорость работы перестают расти.
Пример
- Опытным пользователям помогут сочетания клавиш и жесты на сенсорном экране и с помощью мыши, которые ускорят частые и повторяющиеся действия.
- Новичкам же поможет простой онбординг и понятные пункты меню с иконками и подписями.
Поддерживайте не только опытных, но и новичков.
В Windows можно сделать скриншот области экрана сочетанием клавиш — Win + Shift + S.
7 — Осознание и исправление ошибок
Помогайте пользователям продолжать работу
Пользователи могут сталкиваться с ошибками. И когда сообщения о них написаны сложно, и в них нет вариантов решений — то пользователи не могут продолжить и получить желаемые результаты. Даже если сервис сложный, помогите пользователю.
Пример
Уберите из сообщения об ошибке коды, добавьте советы, которые чаще всего даёт техподдержка в таких ситуациях. Предложите заказать обратный звонок, оставьте ссылку на чат с техподдержкой или инструкцию и ответы на часто задаваемые вопросы.
Про стандарты и лучшие практики
8 — Соответствие между системой и реальным миром
Говорите с пользователями в сервисе на одном языке
Исследования и обратная связь помогают понять не только потребности пользователей, но и их жизнь — о чём они думают и как говорят.
Пример
- Если вы занимаетесь продуктом для узкой профессиональной аудитории, то используйте знакомые слова, выражения и метафоры в интерфейсе. Они донесут мысль и направят пользователя. Например, в сервисе для бухгалтеров будет много аббревиатур, потому что у налоговых форм и отчётов длинные названия. Их проще запомнить, чем каждый раз называть. И в интерфейсе они занимают меньше места.
- Если вы создаёте непрофессиональный сервис, например, приложения для онлайн-книг — используйте примеры из повседневной жизни. Например, в приложении My Book подборки книг пользователя называются «Полками».
Это касается не только языка, которым вы общаетесь с пользователем, но и элементов — вёрстки страниц и иконок.
Подписывайте элементы в интерфейсе. Исследования показывают, что очень небольшая часть пользователей может распознать иконки — даже самые популярные
9 — Системность и стандарты
Используйте схожие слова и символы для схожих сценариев
Люди пользуются разными сайтами и приложениями в интернете — и их очень много. Скорее всего, всеми остальными решениями они пользуются чаще, чем только вашим. Например, соцсети, поисковики и новостные ленты создают паттерны и ожидания. Если их нарушать, то пользователю придётся учиться заново. Это неудобно и требует времени.
Пример
Истории Инстаграма повлияли на банковские приложения и интернет издания.
10 — Знакомое, а не забытое
Снижайте мыслительную нагрузку пользователей
Пользователи не должны вспоминать, где находится раздел сервиса или кнопка на странице. Вся важная информация и объекты для задачи должна быть на виду — чтобы не нужно было скролить или открывать вложенные панели и меню. Сделайте элементы, действия и параметры заметными.
Пример
В таск-менеджере YouTrack кнопка редактирования текста карточки находится в самом верху страницы, а кнопка сохранения изменений — в самом низу. Если в карточке много текста и отредактировать нужно, например, самое начало, то приходится листать до конца содержания, чтобы сохранить изменения.
Вывод
В этой статье я объединил эвристики по трём темам, из которых можно вывести три основных принципа удобства и простоты использования продукта:
- Помогать пользователю избегать и исправлять ошибки.
- Переиспользовать паттерны, которые уже были созданы и успешно работают.
- Убирать лишнее и выделять важное, чтобы снижать мыслительную нагрузку пользователей.
Эвристики Джейкоба Нильсена — универсальный инструмент, но в разных сферах они применяются по-разному: в сложных сервисах нужно больше инструкций и обучения, в простых — больше общепринятых элементов и минимализма. Помните об этом, когда будете анализировать сайты и приложения.
Больше интересного про исследования в телеграм-канале «Сдоба»
