Когда я работала дизайнером, часто сталкивалась с проблемой — не понятно какой элемент использовать для подсказки и как его правильно назвать, чтобы не опозориться перед другими членами команды. Разбираясь в этом, я прочла довольно много различных статей и документаций. Здесь собраны мои знания о подсказках, которые я бережно собирала в своих заметках.

Tooltip

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

Поведение

В веб интерфейсе вызов tooltip обычно происходит по наведению или фокусу. В мобильной и планшетной версии это поведение адаптировано — вызов tooltip осуществляется длительным тапом.

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

Можно изменить способ вызова на клик, но это не универсально. Клик на иконке часто бывает занят другим действием. Рассмотрим на примере иконки “Добавить в избранное”. По ховеру будет всплывать подсказка, по клику будет происходить действие добавления в избранное.

Расположение

Tooltip может появляться сверху, снизу или сбоку элемента-родителя. По умолчанию он появляется по центру под элементом, однако это не всегда возможно (например, если нужная иконка расположена в самом низу экрана). При проектировании нужно не забыть предусмотреть все тонкости поведения.

Внешний вид

Tooltip можно кастомизировать: настроить размер и цвет текста, цвет подложки, скругление углов, тень.

Ширина элемента должна быть комфортной для чтения, поэтому если подсказка длинная, то лучше разместить текст в 2 или 3 строки.

Использование

Tooltip можно встретить в сложных интерфейсах, когда нужно уместить большое количество функционала в рамках одного экрана. Яркий пример — интерфейс Jira. Jira использует большое количество кнопок, которые не содержат текста, только иконку. Для привыкшего пользователя это не представляет проблемы, но для новичка значение таки кнопок может быть не понятным.

Popover

Popover — это короткое сообщение для демонстрации справочной информации. Часто существует в связке с пиктограммой знака вопроса.

Popover, в отличии от tooltip, содержит справочную информацию которая не относится к иконке на прямую. Иконка нужна просто для того чтобы вызвать popover. Он может содержать больше текста, иметь более сложную структуру. Внутри popover может быть заложена иллюстрация, ссылка, кнопка и т.п.

В официальных гайдах материала его я не нашла, но он при этом используется довольно часто .

Поведение

Как правило, появление popover происходит по клику. Можно переписать это поведение и сделать появление по ховеру, однако это не универсально. Вам придется дополнительно предусматривать поведение на тач устройствах.

Закрытие popover (в случае если он открывается по клику) происходит по клику на любое место вне элемента. Внутрь можно добавить закрывающий крестик, но это не обязательно.

Расположение

Popover обычно появляется сверху или снизу родительского элемента, но есть и другие варианты. Например, на Медузе подсказки появляются справа от текста (видимо, чтобы не мешать читать текст)

Внешний вид

Popover можно кастомизировать: настроить размер и цвет текста, цвет подложки, скругление углов, тень. Popover может содержать уголок, который помогает понять к какому элементу относится подсказка.

Использование

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

Очень часто можно встретить неправильное применение компонента. Прежде всего задайте себе вопрос: является ли информация критически важной для выполнение задачи пользователя? Если да, то popover использовать не рекомендуется. Он нужен для предоставления справочной информации, необходимой лишь некоторым пользователям, которые находятся в нестандартной для себя ситуации.

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

Snackbar

Я долго сомневалась включать ли этот компонент в статью. Причина моих сомнений — это не совсем подсказка. Однако все же он тут, потому что мне есть что сказать по поводу этого компонента.

Снэкбар (snackbar) — это короткое уведомление, которое сообщает пользователю о произошедшем событии. Через заданный промежуток времени элемент пропадает.

Поведение

Появление snackbar является следствием какого-либо действия со стороны пользователя или системы, то есть происходит во время взаимодействия пользователя в интерфейсом. Закрытие snackbar происходит автоматически через определенный интервал времени (он может быть разный и зависит от задачи)

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

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

Так же snackbar может содержать внутри отменяющее действие. Например, если пользователь удалил папку, ему может быть предложено отменить удаление. Такое дополнение часто бывает полезным.

Внешний вид

Уведомления в snackbar носят разный характер, поэтому обычно этот элемент имеет несколько цветовых схем. Я выделяю четыре: для уведомлений об ошибках, предупреждениях, успехе и нейтральный.

Часто в snackbar добавляют вспомогательную иконку, которая соответствует теме сообщения.

Использование

Я почти никогда не использую этот элемент в своих интерфейсах, поэтому мне сложно его где-либо советовать. И вот почему:

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

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