Тултипы (tooltips). Что это такое и как их проектировать
Тултип, от английского tooltip. Это такая короткая всплывающая подсказка, появляющаяся при наведении курсора на элемент. Или при фокусировании на элементе с помощью клавиатуры. Или при длительном разглядывании элемента, если вы в шлеме виртуальной реальности с трекингом глаз.
Привет, меня зовут Егор Камелев. Я занимаюсь проектированием интерфейсов с 2006 года. Сегодня хочу поделиться чек-листом вопросов, связанных с проектированием тултипов.
Тултипы чаще всего используются для следующих разъсянений:
Что обозначает та или иная иконка в интерфейсе?
Что же там, в обрезанном тексте?
Что это за непонятное число?
В приведённых примерах вряд ли удалось бы отказаться от тултипов без вреда для интерфейса. И это первый вопрос, которым я задаюсь во время проектирования: «Можно ли здесь обойтись без тултипа и не навредить пользователям?» Если можно, то лучше всё-таки не прятать важную информацию под тултип, а размещать её в виде текста рядом с нужным элементом.
Следующий вопрос звучит так: «Здесь точно нужен тултип, а не что-нибудь другое?» Возможно, подойдёт один из похожих элементов: поп-овер или модальное окно.
Поп-овер появляется при клике на элемент и представляет собой более сложную подсказку, в которой может быть несколько абзацев текста, ссылки и кнопки. Чаще всего используется для разъяснения неочевидных и не самых важных вещей и прячется под отдельную иконку. А ещё поп-овер можно использовать в интерфейсах, где навестись на элемент невозможно из-за отсутствия клавиатуры и мыши. Например, в мобильных приложениях или терминалах.
Модальные окна перекрывают собой весь остальной интерфейс и не позволяют взаимодействовать с ним до тех пор, пока не будут закрыты. Хорошо подходят в сценариях, когда для работы с элементом необходимо заполучить 100% внимания пользователя.
Во время работы я стараюсь быть последовательным в применении тултипов. Не стоит использовать тултип для одной непонятной иконки и при этом забыть его для другой, соседней (хотя это всё же лучше, чем вообще оставлять пользователей без подсказок).
Если проект изначально ограничен фреймворком, например Бутстрапом, то мне повезло. Можно почитать документацию и использовать эти знания, их будет достаточно. Если же тултипы придётся проектировать и описывать с нуля, то нужно задаться ещё несколькими вопросами.
Например, важно ли пользователям видеть, что находится за тултипом, в момент его отображения? Если важно, то придётся размещать тултип рядом с элементом, а не поверх него.
Есть ли рядом другие элементы с тултипами? Расположены ли они достаточно близко, что при появлении тултипа можно запутаться, к какому из них относится тултип? Если да, то придётся использовать стрелочки, указывающие на элемент. Либо рассчитывать на то, что элемент, на который пользователь навёлся, выделен среди остальных.
Если не используется фреймворк (а иногда даже когда фреймворк используется), то для передачи задачи в разработку приходится описывать всю необходимую логику, отвечающую на вопросы:
Через сколько миллисекунд после наведения тултип появляется?
Через сколько исчезает после того, как с него снят фокус?
Если два элемента стоят рядом и пользователь сместил фокус с одного на другой, как должны вести себя тултипы (например, тултипы меняются мгновенно, игнорируя правило задержки)?
Нужна ли анимация плавного появления и исчезания? Если нужна, то какая и сколько она должна занимать по времени?
Где должен появиться тултип относительно курсора мыши или элемента, на который навёлся пользователь?
Где должен появиться тултип, если элемент, на который навёлся пользователь, находится слишком близко к краю экрана? Если использовать решение со стрелочками, торчащими из тултипа, то задача по проектированию и описанию логики размещения элементов серьёзно усложняется;
Какая максимальная длина текста может быть в тултипе?
Можно ли отображать тултип с пустым контентом (в Бутстрапе по умолчанию нельзя)?
Можно ли показывать тултипы для скрытых элементов (в Бутстрапе по умолчанию нельзя)?
Не забыл ли я указать в тултипе информацию о сочетании клавиш, с помощью которых можно выполнить действие, связанное с элементом, на который навёлся пользователь?
На этом UX-составляющая вопросов проектировщика заканчивается и можно приступать к UI. Здесь будут свои вопросы.
Каким цветом отделить тултип от остального интерфейса (в Бутстрапе по умолчанию это белый текст на чёрном фоне)?
Нужны ли дополнительные инструменты для такого отделения, помимо цвета подложки? Прозрачность тултипа, обводка контейнера, отбрасывание тени?
Не нагородил ли я нового стиля там, где можно было использовать существующий?
Какой будет максимальная ширина контента до переноса строки и почему?
Например, для дизайн-системы моего проекта, генератора посадочных страниц lp151.com, необходимо использовать дополнительные инструменты, т.к. не существует ограничений по цветам, поверх которых может оказаться тултип в том или ином участке редактора лендингов.
Глядя на работы коллег по дизайну, часто замечаю стремление уменьшить размер и начертание шрифта для тултипов. В корне с этим не согласен. Не стоит усложнять читаемость тултипов. Борьбы за пространство в этом сценарии нет. А визуально тултипы уже и так жёстко отделены от остального интерфейса.
Иногда можно встретить тултипы, которые занимают всю ширину экрана и уходят далеко за его границы, не позволяя прочесть содержимого. От этого стоит избавляться ещё на этапе дизайна.
Наконец, проектировщик может помочь верстальщику, написав в сопроводительной документации пару строк о требованиях к доступности интерфейса (accessibility). Если среди целевой аудитории проекта есть слабовидящие люди, использующие скрин-ридеры, то тултипы должны быть свёрстаны с соблюдением двух принципов:
Скрин-ридерам доступен контент тултипов и они в состоянии его воспроизвести;
Контент этот находится в нужных частях интерфейса. Например, подсказку о том, какое поле сейчас заполняет пользователь, лучше размещать до поля, а не после него (возможно, в комментариях вы придумаете гораздо более удачный пример, чем этот).
На моей практике ещё не встречалось проекта, где тултипам уделялось бы много внимания в начале разработки. И это вполне разумно: не тратить лишних ресурсов на столь незначительные элементы. Поэтому у меня качественные знания о тултипах появились лишь после того, как я стал шлифовать собственный проект через три года после его запуска. И оказалось, что знания эти не такие уж и сложные и что проектирование тултипов и грамотная их реализация с первой версии продукта не такая уж и ресурсоёмкая. Этой заметкой хотелось бы помочь тем, кто забивает на тултипы так же, как это делал я, пока обстоятельства не научили работать с ними.