Подсказки, которые объясняют, не мешая
Как создавать всплывающие подсказки, которые помогают: краткая дополнительная информация, доступ при наведении и клавиатуре, сенсорные альтернативы и почему важные инструкции никогда не помещаются во всплывающую подсказку.
Главное
Всплывающие подсказки — это краткие сообщения, которые появляются при наведении курсора мыши или фокусировке клавиатуры и содержат дополнительную информацию, например о том, что означает метрика. Делайте их короткими, никогда не помещайте в них важные инструкции, делайте их доступными с помощью клавиатуры, предоставляйте альтернативу сенсорным экранам, основанную на касании, и не размещайте внутри ссылки или кнопки.
Что такое всплывающая подсказка
Nielsen Norman Group определяет всплывающую подсказку как краткое информативное сообщение, которое появляется, когда пользователь взаимодействует с элементом, инициируемое наведением курсора мыши или клавиатуры (удерживая фокус клавиатуры на элементе). Поскольку всплывающие подсказки зависят от наведения, они обычно недоступны на сенсорных экранах.
Дополнительный, но не существенный
NN/g дает наглядный пример ошибки: сайт, который включил требования к паролю во всплывающую подсказку. Информация, необходимая людям для выполнения задачи, должна быть на экране. Всплывающие подсказки соответствуют определениям, объяснениям того, почему запрашивается поле, и меткам для кнопок, состоящих только из значков.
Доступность
Сделайте всплывающие подсказки доступными для всех:
- Открыть при фокусе клавиатуры и при наведении курсора.
- Позвольте людям отклонить это с помощью Escape, не перемещая фокус.
- Держите его открытым, пока указатель перемещается на него.
- Подключите его к триггеру, чтобы средства чтения с экрана объявляли об этом.
- Не помещайте внутрь интерактивный контент; вместо этого используйте всплывающее окно.
Подсказки на сенсорных устройствах
Наведения не существует на касании. Используйте видимый значок информации, который открывает небольшое всплывающее окно при нажатии, или отображайте встроенное объяснение. Для сложных корпоративных показателей значок информации рядом с меткой является привычным шаблоном на каждом устройстве.
Движение и время
Небольшая задержка перед показом позволяет избежать мерцания всплывающих подсказок при прохождении указателя над элементами; как только один из них открыт, соседние всплывающие подсказки могут появиться сразу же. Быстрое затухание или небольшой масштаб срабатывания триггера помогают людям увидеть, откуда он взялся. Держите его около 150 миллисекунд.
Ключевые принципы
- Подсказки краткие и дополнительные.
- Никогда не скрывайте важные инструкции во всплывающей подсказке.
- Поддержка фокусировки клавиатуры и Escape
- Используйте нажимаемый значок информации на сенсорных устройствах
- Нет интерактивного контента внутри всплывающих подсказок.
Частые вопросы
Источники
- Tooltip Guidelines — Nielsen Norman Group