.webp)
.webp)
.svg)
Информационные подсказки – полезные небольшие сообщения, которые появляются при нажатии или наведении курсора на значок вопроса (?) или информации (i) – могут помочь пользователям быстрее принимать решения и повысить понятность элементов пользовательского интерфейса. Но на практике они часто используются чрезмерно, неправильно или перегружены ненужным контентом. Когда подсказки скрывают важные инструкции или перегружают пользователей избыточными объяснениями, они создают путаницу, а не ясность.
В этой статье:
- Что такое информационная подсказка?
- Отображение информационных подсказок в пользовательских интерфейсах
- Проблема с информационными подсказками
- Ошибки плохих информационных подсказок
- Ошибка № 1: потеря времени пользователей
- Ошибка № 2: скрытие важной информации, помогающей в выполнении задачи
- Ошибка № 3: прерывание выполнения задачи
Что такое информационная подсказка?
Информационная (инфо) подсказка – это краткое контекстное сообщение, предназначенное для предоставления дополнительной информации об определенном элементе интерфейса или этапе рабочего процесса.
Обычно она активируется при наведении курсора или щелчке по небольшой иконке – часто это строчная буква «i» или вопросительный знак – и привязана к определенному элементу интерфейса (например, текстовому полю, иконке, кнопке, метке).
При наведении курсора на значок «?» в форме появляется всплывающее окно с текстом: «Рекомендуется выбрать пол, указанный в большинстве других юридических документов, таких как водительские права или карта социального страхования. Введенная информация используется только для целей подачи заявления на получение льгот и требуется перевозчиками для регистрации».
Подсказки могут отображаться двумя основными способами:
- Подсказки, которые появляются при наведении курсора мыши или нажатии клавиши на десктопной версии сайта
- Подсказки, которые активируются при нажатии или касании связанного с элементом значка
Оба типа служат одной и той же основной цели: предоставить дополнительный контекст тем, кто нуждается в дополнительных разъяснениях или рекомендациях, не перегружая интерфейс текстом.
Отображение информационных подсказок в пользовательских интерфейсах
Значок «i»: общая информация
Значок «i» в кружке широко понимается как обозначение дополнительной полезной информации.
В ходе нашего исследования, посвященного значкам, участники интерпретировали значок «i» в первую очередь как обозначение опции «дополнительная информация» и ожидали, что он будет отображать дополнительную информацию, такую как:
- Определения
- Дополнительные детали или краткие пояснения
- Условия рекламных акций
Это делает значок «i» подходящим для общей информации или полезных рекомендаций, но не для срочного контента или контента, связанного с ошибками. Это надежный выбор для представления информационных подсказок, которые помогают пользователям понять контекст, не прерывая рабочий процесс.
Значок «?» – помощь и поддержка
Значок с вопросительным знаком в кружке («?») также часто используется для вызова подсказок. В нашем исследовании он ассоциировался в большей степени с помощью и поддержкой, чем с общей дополнительной информацией.
Люди ожидали, что этот значок приведет к:
- Часто задаваемым вопросам
- Контактной информации службы поддержки клиентов
- Содержанию справки или учебным материалам
Однако, когда значок «?» размещен непосредственно рядом с конкретным элементом интерфейса (например, с меткой поля формы в приведенном выше примере), он также эффективно вызывает контекстную справку по конкретному элементу. Ключевым моментом является близость: когда значок находится рядом с тем, к чему он относится, пользователи интерпретируют справку как локальную и релевантную, а не глобальную или общую.
Проблема с информационными подсказками
К сожалению, подсказки часто используются в качестве «костыля» в интерфейсе для следующих целей:
- втискивания объяснений, которые должны были быть заложены в дизайн пользовательского интерфейса;
- скрытия важных инструкций под предлогом «чистоты» интерфейса;
- перекладывания ответственности за плохую маркировку или UX-копирайтинг на пользователя.
Информационные подсказки не являются универсальным решением для упорядочивания интерфейса путем перемещения важной информации в скрытый слой. Их также не следует использовать для скрытия больших объемов информации, которые нарушают рабочий процесс пользователей при появлении – это то, что мы называем сценарием «пугающего скачка», когда пользователь ожидает короткой подсказки, но вместо этого получает целый модальный экран или экран, занимающий весь экран.
Но подсказки не являются плохими сами по себе. При правильной реализации они предоставляют лаконичную, полезную и контекстную информацию, которая улучшает удобство использования, не загромождая интерфейс.
Хорошо продуманные подсказки могут:
- разъяснять жаргонные или технические термины
- объяснять, почему запрашиваются определенные данные
- помогать пользователям находить нужную информацию
- успокаивать пользователей по поводу использования данных
Однако хорошим правилом является предположение, что большинство пользователей никогда не увидят информационные подсказки. Те, кто имеет дополнительную мотивацию для их поиска, находятся в замешательстве, застряли или нуждаются в разъяснениях или успокоении. Вот почему подсказки должны предоставлять четкие, актуальные рекомендации, которые напрямую поддерживают текущую задачу пользователя.
Ошибки плохих информационных подсказок
Неправильное использование подсказок обычно делится на три категории:
- Потеря времени пользователей: отображение очевидной, избыточной или нерелевантной информации.
- Скрытие важной информации: скрытие важных инструкций или ограничений, которые необходимы большинству пользователей на начальном этапе.
- Прерывание выполнения задачи: использование навязчивых элементов, таких как модальные окна или наложения, которые отвлекают пользователей от выполняемой задачи.
Ошибка № 1: потеря времени пользователей
Каждое взаимодействие с информационными подсказками – даже один клик или наведение курсора – влечет за собой небольшие, но реальные затраты на взаимодействие. Избыточные или очевидные подсказки тратят время пользователей и подрывают доверие.
Не используйте подсказки для:
- Маркетинговой информации
- Повторения видимого контента или инструкций
- Повторного объяснения очевидного
Значки информационных подсказок, такие как «i» или «?», сигнализируют пользователям, что что-то может быть неясным или требует разъяснения. Когда же они раскрывают подсказку и видят общие маркетинговые фразы, пользователи могут почувствовать себя обманутыми и разочарованными.
Информационные подсказки также тратят время, когда повторяют то, что и так совершенно ясно из интерфейса. Эти подсказки создают иллюзию наличия дополнительных объяснений, но на самом деле являются лишь повторением.
Ошибка № 2: скрытие важной информации, помогающей в выполнении задачи
Всплывающие подсказки не должны использоваться для сокрытия важных инструкций, ограничений или юридической информации. Это превращает важные рекомендации в игру в прятки и в некоторых случаях может даже стать приемом обмана.
Избегайте использования всплывающих подсказок для:
- Ограничений или правил
- Ограничений полей форм (например, ограничений по количеству символов)
- Юридические соглашения или отказы от ответственности
- Сложные инструкции или объяснения
Сложные инструкции, помогающие пользователям принимать решения, должны быть видны, а не скрыты в подсказке. Людям необходимо обращаться к этим объяснениям во время выполнения задач, а не прерывать свой рабочий процесс или текущий просмотр для поиска рекомендаций.
Всплывающее окно рядом с именем на сайте Find a Grave гласит: «Эта запись может соответствовать кому-то из вашего родословного дерева. Оцените вероятность этого, просмотрев информацию о записи на этой странице. Выберите «Да», если она соответствует тому, что вы знаете об этом человеке, чтобы получить более подробную информацию и сохранить запись. Выберите «Нет», если она не относится к человеку в вашем древе, и подсказка будет игнорирована. Выберите «Возможно», если вы не определились, и подсказка будет сохранена для последующей оценки».
Вместо того, чтобы скрывать сложные инструкции в подсказке, более эффективно отображать ключевую информацию на основной странице. Когда пользователи должны взвесить несколько вариантов или сделать тонкий выбор, отображение этих рекомендаций на странице позволяет быстро сравнить варианты, не прерывая выполнение задачи.
Кроме того, любые ограничения, правила или ограничения для ввода должны отображаться на первичном уровне.
Ошибка № 3: прерывание рабочего процесса
Люди ожидают, что при нажатии на значок информации откроется краткое полезное сообщение, которое они смогут использовать в контексте своего текущего рабочего процесса, а не модальное окно или полностраничный текст.
Не удивляйте пользователей:
- Слишком сложным и многословным контентом
- Модальные окна или наложения, которые блокируют их задачу
- Новые страницы, которые отвлекают их от рабочего процесса
По возможности, убедитесь, что информационные подсказки отображаются в строке или рядом с соответствующим элементом. Затемнение текущего шага или вида интерфейса затрудняет пользователям связь подсказки с выполняемой задачей.
Модальные окна и полноэкранные наложения выглядят неуместно, когда используются для подсказок. Размещение подсказок рядом с элементом, к которому они относятся, позволяет пользователям сохранять контекст и лучше понимать актуальность информации.
Еще более мешает запуск совершенно новой страницы из того, что выглядит как простой значок с подсказкой. Такой подход не только скрывает контекст, но и заставляет пользователей отказаться от выполнения своей задачи.
Вывод: используйте информационные подсказки с умом
Подсказки могут повысить ясность, если они предлагают своевременные дополнительные рекомендации в контексте текущего рабочего процесса.
Что нужно делать:
- Используйте информационные подсказки для дополнительного контента
- Сделайте их краткими, контекстными и легко закрываемыми
- Обозначьте их знакомыми значками (i или ?)
- Предполагайте, что пользователи, которые их активируют, нуждаются в быстрой и актуальной информации
Не делайте:
- Не скрывайте важную или часто используемую информацию
- Не используйте подсказки в качестве «костылей» при плохой навигации или сложных макетах
- Не запускайте всплывающие окна или наложения, которые отвлекают внимание пользователя или прерывают его работу
При грамотном использовании информационные подсказки снижают путаницу и повышают уверенность пользователей. Но они всегда должны служить целям пользователя, а не желанию дизайнера любой ценой избавиться от лишнего.
