Эвристики юзабилити

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

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

Что такое эвристики юзабилити?

Эвристики юзабилити, или эвристики Нильсена, — это 10 универсальных правил, которых мы придерживаемся при проектировании пользовательских интерфейсов. Разработанные Якобом Нильсеном ещё в 1994 году, они по-прежнему актуальны и широко используются UX-дизайнерами и исследователями.

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

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

Видимость состояния системы

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

Понимание состояния системы даёт пользователям контроль над происходящим и помогает им понять, где они находятся и что могут сделать дальше. Адекватная обратная связь даёт понять, что действие пользователя (например, нажатие кнопки) получено и обрабатывается. В противном случае пользователи теряются и путаются: «Я точно нажал на кнопку? Мне нужно нажать ещё раз? Загрузка файла идёт или что-то пошло не так?»

Самые распространённые примеры обратной связи системы включают изменение цвета, анимированный индикатор прогресса, звук, лёгкую вибрацию (на мобильных устройствах) или уведомление. Например, после того как пользователь заполнил все поля формы, кнопка «Отправить» меняет состояние с неактивного на активное — так пользователь понимает, что форму можно отправлять.

Немедленная обратная связь на интерактивные действия позволяет пользователям быстрее обнаруживать ошибки, устранять их или даже предотвращать. Например, встроенное сообщение об ошибке в поле пароля «Caps Lock включён» помогает пользователю сэкономить время ещё до того, как он нажмёт кнопку «Сохранить» и получит сообщение об ошибке.

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

Соответствие системы реальному миру

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

• Язык: Интерфейс должен использовать слова и выражения, которые пользователи понимают без необходимости искать определения или переводы (особенно если интерфейс не поддерживает несколько языков). Простой язык полезен для всех: экспертов, международных пользователей и людей, использующих английский как второй язык (ESL).
• Внешний вид и взаимодействия: Цифровые объекты и взаимодействия должны напоминать реальные. Это демонстрирует эмпатию и уважение к пользователю. Дизайнеры могут использовать универсальные иконки, внедрять взаимодействия, которые пользователи встречают в реальном мире (например, перелистывание страниц или нажатие кнопок), и размещать элементы там, где пользователи ожидают их увидеть естественным образом.

Контроль и свобода пользователя

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

Возможность быстро исправить ситуацию даёт пользователям ощущение контроля и свободы и побуждает продолжать пользоваться продуктом. В противном случае пользователь испытывает разочарование и может покинуть продукт.

Вот несколько элементов управления в UI, которые можно использовать, чтобы помочь пользователю вернуться к предыдущему состоянию системы:

• Кнопка Undo/Redo — позволяет отменить или повторить последние действия пользователя
• Кнопка Back — позволяет вернуться на предыдущую страницу или экран
• Кнопка Cancel — позволяет отменить выполнение задачи
• Кнопка Close — позволяет закрыть текущий вид/экран

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

Совет! Не заменяйте кнопку Cancel иконкой X только ради экономии места. Если кнопка выхода выполняет функции и закрытия, и отмены, используйте понятную текстовую метку (например, Cancel) или предупреждающий диалог о том, что изменения не будут сохранены после нажатия.

Согласованность и стандарты

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

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

Согласованность должна поддерживаться на нескольких уровнях:

• Визуальная: Иконки, символы и изображения должны быть оформлены в едином стиле.
• Расположение: Кнопки и ссылки, выполняющие одинаковые действия, должны находиться на одинаковых местах на всех страницах.
• Сбор данных: Формат ввода информации, такой как дата, номер телефона или местоположение, должен быть одинаковым во всём продукте.

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

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

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

Это можно реализовать с помощью следующих приёмов:

• Подсказки: Например, при вводе текста в поисковую строку можно предлагать пользователю варианты автозаполнения. Это снижает количество действий и помогает избежать опечаток и страницы без результатов.
• Уведомления: Вместо того чтобы сообщать об ошибке после нажатия кнопки Submit, лучше заранее показать, что, например, включён Caps Lock при вводе пароля.
• Умолчания: Значения по умолчанию предотвращают ошибки и ускоряют выполнение задач. Например, в Google Календаре по умолчанию установлено уведомление за 10 минут до события — это наиболее распространённый выбор среди пользователей.
• Гибкий формат ввода: Поля, запрашивающие числовую информацию, часто требуют определённого формата. Чтобы снизить когнитивную нагрузку, позвольте пользователю вводить данные в любом удобном формате, а система автоматически подстроит и распознает его.

Распознавание вместо запоминания

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

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

Это можно реализовать с помощью:

• Истории поиска и недавно просмотренного контента. Например, на главной странице Netflix отображаются незаконченные фильмы или сериалы, чтобы пользователи могли легко вернуться к просмотру.
• Подсказок и обучающих материалов. Если вы внедряете новую функцию, подсказки могут помочь пользователям запомнить её и распознать при следующем посещении страницы.

Гибкость и эффективность использования

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

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

Дизайнеры должны стремиться к созданию гибкой и эффективной системы, которая:

• Позволяет выполнять задачу разными способами. Например, на e-commerce сайтах пользователь может найти товар через строку поиска, в каталоге или в персональных рекомендациях.
• Позволяет настраивать интерфейс под свои нужды. В Photoshop, например, пользователь может добавлять нужные панели и инструменты и скрывать те, которыми не пользуется.
• Предоставляет ускорители. Жесты на мобильных устройствах и горячие клавиши на десктопе помогают опытным пользователям быстрее получать доступ к функциям.
• Поддерживает макросы. Макросы — это набор команд, выполняемых одним действием, которые помогают автоматизировать рутинные задачи с предсказуемыми шагами.

Эстетика и минимализм в дизайне

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

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

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

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

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

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

Хорошее сообщение об ошибке должно соответствовать следующим критериям:

• Простой, понятный язык. Основная задача сообщения об ошибке — проинформировать пользователя, а не произвести впечатление сложными формулировками. Технические термины можно использовать только в том случае, если вы уверены, что ваша аудитория в них разбирается. В остальных случаях используйте повседневный язык.
• Вежливость. Убедитесь, что сообщение не звучит обвинительно и не намекает на вину пользователя.
• Ясность. Сообщение должно чётко объяснять причину ошибки.
• Конструктивные советы. Недостаточно просто сообщить о проблеме — важно объяснить, как пользователь может быстро и легко её решить.
• Снижение нагрузки на пользователя. Например, дайте пользователю возможность исправить только те поля, в которых возникла ошибка, а не заполнять всю форму заново.

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

Справка и документация

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

Система может предлагать два типа помощи:

• Проактивная помощь: Направлена на предотвращение ситуаций, в которых пользователи могут столкнуться с трудностями. Всплывающие подсказки и onboarding-сценарии обеспечивают такую помощь.
• Реактивная помощь: Предоставляется в тот момент, когда пользователь уже столкнулся с проблемой. Туториалы, видео и документация помогают пользователю, отвечая на вопросы и предоставляя подробную информацию для тех, кто хочет углубиться в использование продукта.

В зависимости от типа помощи дизайнеры должны обеспечивать следующее:

• Краткий onboarding и контекстные подсказки: Они должны быть короткими, информативными и легко закрываться, если пользователь не нуждается в них. Подсказки, связанные с текущей задачей, наиболее полезны.
• Полная документация и обучающие материалы: Их стоит сопровождать изображениями и видео — это особенно важно для пользователей, которые лучше воспринимают визуальную информацию.
• Категоризированная справочная документация: Документацию следует разбивать на релевантные категории по темам, чтобы пользователям было проще её просматривать. При необходимости добавьте строку поиска, чтобы пользователь мог сразу перейти к нужному разделу.
• Контекстные подсказки или документация: Они должны быть легко доступны и обнаружимы. Пользователь может проигнорировать полезную подсказку во время первого знакомства с продуктом, но вспомнить о ней позже, столкнувшись с проблемой.

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