Action Tooltip
Вид тултипа, который используется при наведении курсора на кнопку. Обычно содержит объяснение или дополнительную информацию о действии, которое совершится после клика на кнопку. Часто используется для кнопок с одной иконкой, чтобы пользователи однозначно понимали, какое действие за ней скрывается.
Структура
- Заголовок (Title) – основной и обязательный элемент тултипа, кратко описывает основное действие по клику на кнопку. Рекомендуется формулировать текст заголовка так, чтобы он помещался в одну строку.
- Описание (Description) – опциональный элемент тултипа, дополнительная информация, которая объясняет заголовок.
- Горячие клавиши (Shortcut) – опциональный элемент тултипа, комбинация клавиш, нажатие на которые запускает описанное действие в интерфейсе. Используется для обучения пользователя быстрым действиям и ускорению его взаимодействия с сервисом.
Варианты
- Только заголовок – самое частый в использовании вариант, в тултипе кратко описывается только само действие. Рекомендуется формулировать текст так, чтобы в нём было не более 5 слов.
- Заголовок и горячие клавиши – если действию присвоена комбинация клавиш, лучше показать её для помощи пользователю.
- Заголовок и описание – если действие сложное и заголовок не получается сформулировать ёмко и однозначно понятно, рекомендуется добавить описание, чтобы предоставить дополнительную информацию.
- Заголовок, описание и горячие клавиши – максимальный набор для компонента, для случаев когда все элементы необходимы пользователю для принятия решения в интерфейсе.
Размеры
В варианте с одним заголовком или заголовком и горячими клавишами ширина тултипа будет подстраиваться под текст, а в вариантах с описанием его ширина фиксированная и составляет 300 px.
Отступы во всех вариантах: слева и справа – 12px, сверху и снизу – 8px.
В варианте с горячими клавишами расстояние между заголовком и лейблом составляет 8px.
В варианте с описанием (независимо от того, есть горячие клавиши или нет) расстояние между заголовком и описанием составляет 2px.
Положение
Основное положение тултипа относительно кнопки – снизу и по центру, с расстоянием 4px между элементами.
Если кнопки располагаются у левого или правого края страницы, тултип выравнивается по соответствующему краю кнопки.
Если кнопки расположены внизу экрана, тултип отображается сверху в том положении, которое соответствует расположению кнопки – по левому краю, по центру или по правому краю.
Тайминг
Задержку появления и исчезновения тултипа по наведению на кнопку можно регулировать в зависимости от его цели. Чаще всего задержка на появление тултипа отсутствует или имеет небольшое значение – до 250ms, а исчезает тултип мгновенно после того, как пользователь убрал курсор с кнопки.
Если вы предполагаете, что большинство пользователей поймут кнопку без подсказки и тултип в таком случае показывается для тех, кто испытал затруднения, задержку появления можно увеличить, чтобы не раздражать пользователей ненужными элементами.
Примеры использования
