Загрузка...
+7 495 638-52-67 +7 495 950-57-99
Всплывающие подсказки в дизайне интерфейсов – используем их правильно

Всплывающие подсказки в дизайне интерфейсов – используем их правильно

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

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

Что такое tooltip, и как он работает?

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

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

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

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

Когда лучше использовать всплывающие подсказки?

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

Итак, использовать на сайте тултипы правильно, если необходимо:

Подсказки в виде пояснений

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

Анонсирование изменений

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

Обзор сайта или его возможностей

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

Акцент на важном

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

Скрытие блоков

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

Помощь в освоении контекста

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

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

Не следует добавлять подсказки в следующих случаях:

5 правил установки всплывающих подсказок

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

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

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

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

5. Составляйте короткие тексты. Оптимальный вариант – 1-3 лаконичных и действительно полезных предложений по существу. При этом не стоит увлекаться анимацией.

Возврат к списку

Заполните форму
Ваше имя*
Ваш E-mail*
Сообщение*
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке*