UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Как использовать и спроектировать полезную всплывающую подсказку (tooltip)
Редакція
Редакція

Опубліковано

Как использовать и спроектировать полезную всплывающую подсказку (tooltip)

#ui

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

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

Что такое всплывающая подсказка

Подсказка — это компонент, который предоставляет пользователю дополнительную информацию.

Почему всплывающая подсказка помогает пользователю

Целью всплывающих подсказок является предоставление пользователям некритической или дополнительной информации.

Как появляются всплывающие подсказки?

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

Типы всплывающих подсказок

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

Текстовая подсказка (стандартная подсказка)

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

Подсказка для иконки

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

Подсказка для иконки

Копирование в буфер обмена

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

Скопировать в буфер обмена

Усеченный текст

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

Усеченный текст

Альтернативный текст

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

Альтернативный текст (Фото KOBU Agency с Unsplash)

Иконка информации

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

Иконке информации

Подсказка для визуализации данных

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

Подсказка для визуализации данных

Подсказка слайдера

Она может помочь пользователю выбрать точное значение на слайдере.

Подсказка слайдера

Всплывающая подсказка, раскрывающая значение

Подсказки можно использовать для описания слова, которое пользователь может не до конца понять.

Всплывающая подсказка, раскрывающая значение слова

Новая функция

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

Новая функция

Суперподсказка

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

Суперподсказка (Фото Jonathan Borba с Unsplash)

Интерактивная подсказка

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

Интерактивная подсказка

Визуальный дизайн

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

Используйте стрелку

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

Подсказка со стрелкой и без нее

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

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

Разные варианты расположения подсказки

Взаимодействие

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

Ряд рекомендаций

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

Подсказка с важной информацией

Используйте короткие всплывающие подсказки

Две всплывающие подсказки, одна короткая, а другая широкая

Не используйте непрозрачность

Не забудьте прочитать больше материалов по теме

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

Зачем?

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

Ссылки на сообщество Figma

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

Ресурсы (ENG)

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

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


Перевод статьи uxplanet.org

Топ коментарі (0)