Что такое Tooltip

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

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

Всплывающие подсказки могут быть прикреплены к любому активному элементу на странице. Например, иконкам, текстовым ссылкам, кнопкам и т. д. Они содержат описания или пояснения к сопряженному элементу. Таким образом, всплывающие подсказки контекстны и специфичны, они не объясняют общую картину или весь ход выполнения задачи.

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

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

Всплывающие подсказки решают несколько важных задач:

1. Повышают юзабилити

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

2. Облегчают обучение

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

3. Повышают конверсию

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

Существует несколько базовых принципов, которых стоит придерживаться:

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

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

2. Предоставляйте краткое и полезное содержание внутри tooltip

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

3. Поддерживайте наведение курсора как с помощью мыши, так и с помощью клавиатуры

Всплывающие подсказки, которые появляются только при наведении мыши, недоступны для пользователей, использующих клавиатуру для навигации. Будьте инклюзивны в дизайне и убедитесь, что всплывающие подсказки доступны с клавиатуры.

4. Используйте стрелки во всплывающих подсказках, когда рядом находится несколько элементов

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

5. Убедитесь, что всплывающие подсказки выделяются на общем фоне

Пользователи обычно смотрят туда, куда нажимают или наводят курсор. Но все равно важно обеспечить контраст, чтобы люди хорошо видели текст в tooltip. Кроме того, пользователям с нарушениями зрения будет особенно трудно читать белую страницу со светло-серыми всплывающими подсказками.

6. Располагайте tooltip так, чтобы они не блокировали связанный контент

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

7. Последовательно используйте tooltip на всем сайте

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

Если только некоторые элементы нуждаются в дополнительных пояснениях, то используйте поп-ап для этих элементов.

Помимо этого есть еще ряд частных моментов, которые стоит учесть в ходе проектирования всплывающих подсказок:

• Через какое время после наведения появляется tooltip;
• Через сколько исчезает после того, как с него был снят курсор;
• Будет ли реализована анимация плавного появления и исчезания всплывающих подсказок;
• Если два элемента стоят рядом и пользователь перевел курсор с одного на другой, как должны вести себя подсказки и т.д.

Ключевая задача tooltip — помочь пользователю своевременно показать важную и полезную информацию. Их можно использовать в самых разных контекстах, чтобы улучшить пользовательский опыт и стимулировать освоение продукта.

Вот несколько популярных вариантов использования:

При знакомстве с продуктом

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

Всплывающие подсказки значительно улучшают онбординг.

Обрывающийся текст

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

Контекстный tooltip

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

1. Подразумевается взаимодействие с контентом подсказки

Tooltip призван сделать интерфейс комфортнее и понятнее. При этом, если пользователь не заметит или не прочитает подсказку, он не пропустит ничего важного. Поэтому не стоит размещать в подсказке важную информацию, для этого существуют другие дизайн-решения.

2. Для пояснения очевидных элементов интерфейса

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

3. Дублирование информации

На некоторых сайтах в подсказках просто повторяют информацию, которая уже написана на кнопке или возле нее. Это не имеет смысла.

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