Всплывающие подсказки (Tooltips) — это сообщения, активируемые пользователем, которые предоставляют дополнительную информацию об элементе страницы или функции. Всплывающие подсказки не являются новинкой в вебе, однако они часто реализуются неправильно.
Всплывающие подсказки — не новы, но их часто используют неправильно.
В этой статье:
- Определение всплывающих подсказок (Tooltips)
- Всплывающие подсказки vs. Всплывающие подсказки (Popup Tips)
- Рекомендации по использованию всплывающих подсказок
- Дополнительные рекомендации
- Заключение
Определение всплывающих подсказок (Tooltips)
Всплывающая подсказка (Tooltip) — это краткое информационное сообщение, которое появляется, когда пользователь взаимодействует с элементом в графическом пользовательском интерфейсе (GUI). Обычно всплывающие подсказки активируются одним из двух способов: с помощью наведения курсора мыши или наведения с клавиатуры (клавиатурного наведения).
(Если вам интересно, что такое клавиатурное наведение: для доступа к активным элементам на странице пользователи могут либо навести на них курсор мыши, либо переходить между ними с помощью клавиши Tab на клавиатуре. Клавиатурное наведение означает удержание фокуса клавиатуры на одном элементе в течение более длительного времени.)
Всплывающие подсказки могут быть привязаны к любому активному элементу на странице (иконкам, текстовым ссылкам, кнопкам и т.д.). Они предоставляют описание или пояснение для связанного с ними элемента. Таким образом, всплывающие подсказки носят контекстный и специфический характер и не объясняют общую картину или весь процесс выполнения задачи.
Важный аспект всплывающих подсказок заключается в том, что они активируются пользователем. Поэтому сообщения, которые появляются на страницах для информирования о новых функциях или о том, как использовать определенную функциональность, не являются всплывающими подсказками.
Так как всплывающие подсказки активируются при наведении, они могут использоваться только на устройствах с мышью или клавиатурой. Обычно они недоступны на сенсорных экранах. (В будущем всплывающие подсказки могут быть активированы на устройствах с поддержкой отслеживания взгляда, когда взгляд пользователя задерживается на элементе интерфейса в течение определенного времени.)
Всплывающие подсказки (Tooltips) vs. Всплывающие советы (Popup Tips)
Хоть всплывающие подсказки в основном ограничены использованием на настольных компьютерах и ноутбуках, у них есть "сестринский" элемент, который часто встречается на устройствах с сенсорными экранами: всплывающие советы (Popup Tips). И всплывающие подсказки, и всплывающие советы преследуют одну и ту же цель: дать полезную дополнительную информацию. В следующей таблице показаны ключевые сходства и различия между всплывающими советами и всплывающими подсказками.
Оба типа подсказок полезны, но их использование должно быть адаптировано под контекст и тип устройства, чтобы обеспечить удобство для пользователя.
Рекомендации по использованию всплывающих подсказок (Tooltip-Usage Guidelines)
1. Не используйте всплывающие подсказки для информации, которая важна для выполнения задачи.
Пользователи не должны искать всплывающую подсказку, чтобы завершить задачу. Всплывающие подсказки лучше всего подходят для предоставления дополнительных пояснений к полям формы, которые могут быть незнакомы некоторым пользователям, или для объяснения неочевидных запросов. Помните, что всплывающие подсказки исчезают, поэтому инструкции или другая информация, требующая действий (например, требования к полям), не должны находиться в них. (Если в подсказке будет такая информация, то пользователям придется запоминать ее)
2. Предоставьте краткое и полезное содержимое для всплывающей подсказки.
Всплывающие подсказки с очевидным или избыточным текстом не приносят пользы пользователям. Если вы не можете придумать действительно полезное содержание, не добавляйте всплывающую подсказку. В противном случае вы просто добавите информационный шум в ваш интерфейс и потратите время пользователей, которые случайно активируют такую подсказку.
Слишком длинное содержание перестает быть «подсказкой», поэтому старайтесь быть краткими. Всплывающие подсказки — это микроконтент, то есть короткие текстовые фрагменты, которые должны быть самодостаточными. Текст может состоять из одной или нескольких строк, главное, чтобы он был релевантным и не перекрывал связанный контент.
3. Поддерживайте наведение как мышью, так и клавиатурой.
Всплывающие подсказки, появляющиеся только при наведении курсора мыши, недоступны для пользователей, которые полагаются на клавиатуру для навигации. Будьте инклюзивны в своем дизайне и убедитесь, что ваши всплывающие подсказки доступны с помощью клавиатуры.
4. Используйте стрелки всплывающих подсказок, когда рядом находится несколько элементов.
Стрелки полезны для четкого определения, с каким элементом связана всплывающая подсказка. Когда рядом находится несколько элементов, эти стрелки помогают избежать путаницы.
5. Используйте всплывающие подсказки последовательно на всем сайте.
Всплывающие подсказки трудно обнаружить, потому что они часто не имеют визуальных подсказок. Если всплывающие подсказки отображаются беспорядочно на вашем сайте, люди могут никогда их не увидеть. Важно быть последовательным и предоставлять всплывающие подсказки для всех элементов вашего дизайна, а не только для некоторых. Если только отдельные элементы нуждаются в объяснении, используйте всплывающие подсказки (pop-up tips) для этих элементов.
Дополнительные рекомендации
- Добавляйте всплывающие подсказки для иконок без текстовых заголовков.
Большинство иконок имеют некоторую степень неоднозначности, поэтому мы рекомендуем добавлять текстовые заголовки ко всем иконкам. Если вы категорически не хотите добавлять заголовки к иконкам на вашем сайте, как минимум предоставьте пользователям описывающие их всплывающие подсказки. - Обеспечьте умеренный контраст всплывающих подсказок с фоном. Пользователи обычно смотрят туда, куда они кликают (или наводят курсор). Так как всплывающие подсказки не имеют четких границ, умеренный контраст важен для того, чтобы пользователи могли легко прочитать текст в подсказке. Кроме того, для пользователей с нарушениями зрения белая страница со светло-серыми подсказками особенно трудна для восприятия.
- Располагайте всплывающие подсказки так, чтобы они не перекрывали связанный контент
Когда всплывающие подсказки перекрывают контент, к которому они относятся, это заставляет пользователей повторять действия (например, перемещать курсор, чтобы убрать подсказку, снова читать информацию или поле, наводить курсор для отображения подсказки). Проверяйте позиционирование подсказок, чтобы они не перекрывали другую информацию, важную для достижения цели пользователя.
Заключение
Всплывающие подсказки часто являются запасным вариантом для пользователей, когда они не могут понять какую-либо функцию. Многие случаи использования всплывающих подсказок можно было бы исключить, если бы люди следовали другим принципам проектирования (например, добавлять заголовки иконкам). Важная информация всегда должна быть на странице, поэтому всплывающие подсказки не должны использоваться для задач, которые пользователи должны выполнить на вашем сайте.
Чем больше мы стремимся к минимализму, тем больше всплывающих подсказок нужно использовать и тем больше работы появляется у наших пользователей. В следующий раз, когда вы задумаетесь о всплывающей подсказке, спросите себя: необходима ли информация во всплывающей подсказке пользователям для выполнения задачи? Если ответ «нет», всплывающая подсказка подходит. В противном случае информация должна присутствовать на экране.
Источник: Nielsen Norman Group
