Бесплатная школа UX/UI-дизайна с наставником

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

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

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

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

“Всплывающие подсказки" впервые появились в старых приложениях Microsoft (Microsoft Word 95). Там были панели инструментов с иконками — когда пользователи наводили на них курсор мыши, на экране появлялось краткое описание функционала соответствующего инструмента. В последнее время всплывающие подсказки используются в различных частях интерфейса, а не только в панелях инструментов.

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

Подсказки работают в браузере, открываются стилусом на Samsung Galaxy Note, карандашом Apple на Ipad или любым смартпеном (умным пером) на планшете. В мобильных операционных системах всплывающая подсказка отображается при длительном касании и удержании элемента.

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

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

Советы

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

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

Если же все очевидно, например, есть кнопка с текстом “Добавить друга”, а вы используете подсказку с описанием: "Нажмите, чтобы добавить друга", она не имеет никакой ценности для пользователя.

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

2. Добавляйте четкие, краткие описания

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

3. Не прерывайте своих пользователей

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

4. Всплывающие подсказки не должны закрывать другой важный контент

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

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

8 типов всплывающих подсказок в UI-дизайне

1. Информационные

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

Информационная всплывающая подсказка: “Пароль должен содержать не менее 8 символов”.
2. Контекстные

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

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

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

Навигационная всплывающая подсказка: “Вы можете импортировать данные в формате CSV и добавить несколько записей в вашу коллекцию за один раз.”
4. Точки данных

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

Всплывающая подсказка, прикрепленная к точке данных: “Количество посетителей сократилось на 50%”.
5. Оповещения

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

Всплывающая подсказка-оповещение (github.com): “Быстрее возвращайтесь в недавно открытые репозитории, проектные доски и команды, кликнув по панели поиска или с помощью шортката “/”.
6. Встроенные панели инструментов текстового редактора

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

Встроенная панель инструментов текстового редактора (medium.com)
7. Изображение / аватар

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

Всплывающая подсказка изображения / аватара
8. Первичный онбординг

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

Всплывающая подсказка как часть первичного онбординга: “Добро пожаловать! Это краткий туториал, который поможет вам познакомиться с базовыми функциями приложения”.

Резюме

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

Спасибо, что дочитали до конца.

Источник
и
:
arrow