Tooltip vs Popover: подскажи мне понятно, но неназойливо

Не к месту всплывающие компоненты — проблема, несущая вред продукту и пользователю. Мы в Т1 изучили множество общепризнанных дизайн-систем, проектов и практик и делимся выводами на основе мирового и собственного опыта, как применять эти инструменты во благо продукту и пользователям.

Про компоненты Tooltip и Popover рассказывают дизайнеры интерфейсов T1 CRM Анастасия Егорова, Татьяна Максимова и Константин Шпаков.

Поговорим:

• о тонкостях отличий Tooltip и Popover;

• о примерах;

• о нашем опыте реализации и оптимизации компонентов Tooltip и Popover в Figma.

Инструмент всплывающих подсказок не новый: он появился в 1990-x годах в старых приложениях Microsoft. Одним из ярких примеров стал виртуальный помощник Clippy из приложения Microsoft Office, который выдавал всплывающие подсказки пользователям. Его историю можно почитать здесь.

Tooltip — короткая всплывающая подсказка, появляющаяся при наведении, клике мыши на элемент или при выделении с клавиатуры. Как правило, Tooltip может содержать в себе небольшую информацию, заголовок, ссылки.

В развитие концепции всплывающих подсказок внесла свой вклад компания Apple, представив новый компонент Popover. С ним можно ознакомиться в HUG.

Popover — всплывающее окно с дополнительным контентом, связанное с определённым элементом на странице. Popover используется для отображения временного содержимого, такого как меню, параметры, дополнительные действия. Tooltip и Popover появляются поверх содержимого на странице.

Применение Tooltip

1. Подсказка для контекстной помощи. Используется для пояснения значения иконок, кнопок, ссылок и т.д. Например, подсказки объясняют функцию иконки, непонятную пользователям при наведении на неё.

2. Подсказки-объяснения. Применяются для интерактивных пошаговых руководств. Знакомство с новой программой или сайтом, для обзора нового функционала.

3. Напоминалки. Применяются для напоминания пользователям о функционале или обновлении информации. Про это рассказывают в статье про использование Tooltip.

Примечание. Не используйте для объяснения общей картины интерфейса, важной информации, которая нужна для выполнения задачи.

Ещё больше примеров, как надо и не надо использовать Tooltip, можете почерпнуть из статьи «Почему всплывающие подсказки ужасны и как их лучше оформить» (на английском).

Применение Popover

1. Для вынесения в Popover дополнительных функций.

2. Для онбординга пользователя по новому продукту. Не забудьте показать, сколько шагов в онбординге, как перейти к следующему шагу и как завершить его в любой момент.

Примечание. Не размещайте более одного основного действия в Popover.

Toggletip и Нint

Ещё два термина, которые связаны с всплывающими подсказками, — Toggletip и Hint.

Toggletip редко встречающийся компонент в дизайн-библиотеках. Название состоит из двух терминов toggle и tooltip, что переводится как «подсказка», «переключатель». Toggletip открывается по клику на активный элемент и содержит дополнительную информацию или объяснение. Его особенностью является то, что он открывается при клике на иконку, у которой нет другого функционала. О Toggletip можно узнать подробнее в блоге Хейдона Пикеринга про инклюзивные компоненты и в дизайн-системе Carbon.

Ещё можно встретить Hint и Infotip — альтернативные названия Tooltip. Например, в гайдлайнах Контур выделяют Hint и Tooltip для разных размеров подсказок.

Pop-up, Pop-under и Popper

Это термины, связанные с всплывающими окнами.

Pop-up — всплывающее окно, которое, как правило, появляется автоматически поверх всего содержимого интерфейса и может блокировать его. Pop-up используется для подтверждения действия, рекламных предложений, подписки, оповещений, cookies и т.п.

Pop-under — всплывающее окно, которое появляется под основным окном на заднем плане. Пользователь увидит его после закрытия верхнего окна. Они появляются, когда пользователь закрывает активное окно, что затрудняет определение того, какой веб-сайт их выдал.

Popper — библиотека JavaScript, которая помогает интерактивно позиционировать всплывающие окна, Tooltip и другие компоненты интерфейса относительно активного элемента или контейнера. Посмотреть, как это работает, можно на сайте popper.js.org.

Tooltip во многих дизайн-системах идентичен в создании. Компонент состоит из указателя и контейнера с текстом в таких дизайн-системах, как Ant Design, Central Design System, Material Design, Yandex UI Kit, Taiga UI by Tinkoff. В этих дизайн-системах отсутствуют ссылки и кнопки, только текст.

В дизайн-системе T1 CRM Tooltip состоит из двух элементов: 1 — указатель и 2 — контейнер. Для примера анатомии можно ознакомиться с дизайн-системой Spectrum.

Указатель вынесен в отдельный компонент. Контейнер — это поле с текстом, собранное в Auto layout.

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

В нашей дизайн-системе компонент Tooltip имеет несколько свойств: фиксированная и не фиксированная ширина контейнера, разное выравнивание и размещение указателя. Выбор ширины компонента используется для удобства и ускорения работы над макетами и зависит от длины текста внутри Tooltip. Фиксированная ширина ограничивает длину текста в Tooltip и подходит для предложений. А не фиксированная ширина позволяет подогнать ширину компонента под текст и подходит для одного или нескольких слов. Например, если длина текста превышает 400 px в компоненте, то дизайнер выбирает фиксированную ширину компонента.

Из дополнительных настроек у Tooltip с фиксированной шириной можно включить заголовок. Цвет Tooltip — чёрный с прозрачностью. При разработке необходимо учитывать невидимую область Tooltip, которая будет удобна для пользователя при перемещении с элемента на Tooltip.

Рекомендации для Tooltip

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

• Tooltip не рекомендуется применять для важной информации, которая нужна для работы с интерфейсом.

• Если Tooltip открывается при наведении на элемент, то он не должен пропадать при перемещении с элемента на Tooltip. Чтобы Tooltip не мелькал в интерфейсе, нужно делать появление с задержкой. Оптимальное значение задержки варьируется в диапазоне от 100 до 500 миллисекунд в зависимости от контекста использования.

• Размещая Tooltip, не стоит перекрывать контент или элемент, который может быть полезен для пользователя. Расположите Tooltip самым оптимальным способом.

Более подробно с рекомендациями можете ознакомиться в статье от Nielsen Norman Group.

Popover во многих дизайн-системах собран по-разному. Например, в дизайн-системе Ant Popover имеет 12 видов расположения с шапкой и текстом в контейнере.

В дизайн-системе HSE всего четыре состояния Popover, пустой контейнер для текста и указатель.

В нашей дизайн-системе Popover также состоит из 1 — указателя и 2 — контейнера.

Контейнер собран без наполнения (без текста, заголовков) для того, чтобы дизайнерам было удобно добавить своё содержание в Popover.

Popover имеет четыре состояния: Bottom, Left, Top, Right. При переносе содержания дизайнеры удаляют блок внутри самого фрейма и настраивают сам указатель как им необходимо по направлениям Left, Start, End. Popover имеет белый цвет без прозрачности.

Рекомендации для Popover

• В Popover можно использовать кнопки «Ясно», «Отменить» или «Сохранить», чтобы пользователю было понятно, что делать. Например, выход с сохранением или без сохранения изменений.

• Показывайте только один Popover, чтобы не загромождать интерфейс и не вызывать путаницу.

• Не делайте Popover большим, он не должен занимать много места. Если у вас объёмная информация, можно использовать модальное окно.

• Не используйте Popover для предупреждений, для этого лучше подойдут оповещения.

Вот файл Figma, где можно посмотреть эти компоненты.

Инструменты Tooltip и Popover — простые и эффективные компоненты для улучшения пользовательского опыта и упрощения взаимодействия с интерфейсом, если ими не злоупотреблять.