Тултипы или всплывающие подсказки в интерфейсе
Привет! Я Владимир Белов — продуктовый дизайнер в Group-IB. Веду телеграм-канал «Заметки дизайнера», где делюсь полезными ссылками, интересными продуктами для собственного анализа и статьями.
Вступление
В этой статье я расскажу про тултипы или всплывающие подсказки в интерфейсе. Тултипы являются одним из самых полезных элементов для обучения и понимания вашего интерфейса и того, как с ним взаимодействовать.
Как это работает
Пользователь наводит мышкой на элемент для отображения всплывающей подсказки. В ней может написан текст, который поясняет то или иное действие, описание объекта или взаимодействие.
Dribbble shot: React UI kit for Figma
Когда необходимо использовать тултипы
Кнопка без текста
Когда пользователь взаимодействует с кнопкой без пояснительного текста и требуется краткое описание, всплывающая подсказка в этом поможет. Проблема заключается в том, что чаще всего подобрать метафору иконки к кнопке довольно не просто, поэтому многие в интерфейсе добавляют подсказку для полного понимания, но я во время проектирования вставляю подсказки к каждой кнопке с иконкой.
Где чаще всего используется:
- Навигация
- Текстовый редактор
- Таблица
- Формах
Dribbble shot: Collapsing Sidebar
Горячие клавиши
Использование горячих клавишей ускоряет работу. Во всплывающую подсказку можно отобразить их для перехода или действия. С каждым разом пользователь запоминает часто используемые горячие клавиши, но, кроме этого, необходимо добавить раздел в Help Center со всем списком клавиш с пояснением. Не рекомендую использовать большое количество клавиш в интерфейсе на каждое действие, так как физически и когнитивно сложно запомнить их. На примере потрясающий продукт linear.app, и они на каждое окно, кнопку, поле добавили разные горячие клавиши с комбинациями.
Product linear.app
Пояснение
Всплывающую подсказку используют, когда необходимо дать пояснение пользователю, почему он не может использовать ту или иную функцию в интерфейсе. Это помогает дать обратную связь, нежели просто заблокировать кнопку или поле, чтобы пользователь самостоятельно разбирался, искал это в Help Center или писал в техподдержку.
Dribbble shot: Form fields
Требования
Чаще всего это используется в формах, когда требуется дать подсказку пользователю по пароль. Это помогает сразу придумать или сгенерировать пароль таким образом, чтобы по несколько раз не вводить из-за невыполнения требований.
Dribbble shot: Password reset
Дополнительная информация
Всплывающую подсказку можно использовать для отображения данных, а не короткого текста. Здесь важно учитывать, какие данные вы даёте, их полезность. Проведите анализ и исследование для того, чтобы понять какие данные необходимо выдавать, какие можно вставить, а какие проигнорировать. Если вы показываете подсказку на пол экрана, то явно совершаете ошибку.
Dribbble shot: Unamo SEO
Рекомендации
Вам необязательно следовать этим рекомендациям, так как это зависит от того, в какой сфере вы проектируете, что вы проектируете и на какие носители проектируете. Весь список написан опираясь на мой весь опыт.
- Плавность. Во время прототипирования и общения с вашими front-разработчиками обсудите плавность появления подсказок. Достаточно использовать стандартный transition 0.3s для приятного восприятия.
- Задержка. Используйте задержку появления подсказки в том случае, когда объекты находятся между собой рядом. Иначе это будет игра на «фортепиано» с подсказками.
- Иконка к тексту. В интерфейсе сталкивался с терминами, которые нужно коротко пояснить, чтобы не подчёркивать, как ссылку, то я добавляю иконку ? или i, на которую наводит пользователь и появляется подсказка.
Dribbble shot: Upgrade your account
- Минификация. В случае вынужденного сокращения, например, состояния загрузки файла или выдачи ошибки, можно реализовать статусы в виде кнопки или иконки, где при наведении появляется подсказка. Здесь ключевое слово «вынужденного», а не использовать всегда.
Сайт • Инстаграм • Телеграм-канал • Ютуб-канал
Подкаст «Заметки дизайнера»:
Apple Podcast • Яндекс.Музыка • Google Podcasts