Как правильно применять тултипы в UI дизайне

Как правильно применять тултипы в UI дизайне

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

Реализация тултипа на сайте Dribbble

 

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

Как это работает?

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

1-tzq6rcw9ahtplrywtlg9yw

Быть тултипу или не быть?

Когда их использовать:

  • У элемента нет текстовой метки. Если кнопка или иконка настолько маленькая, что нет места для ее описания, то всплывающая подсказка будет полезна

2lpn62dsxec

  • Когда в тултипе можно уместить очень много информации, убирая потребность в написании информации об объекте

vnftewu3xya

Когда не стоит использовать

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

edygbdkilta

Правильное проектирование тултипа

Легко обнаружить

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

Содержит полезную информацию

Хороший тултип содержит краткую и полезную информацию:

  • Всплывающие окна подходят для коротких предложений

_g1pi8tssba

  • Как не стоит делать: широкие подсказки нечитабельны

vctcettbwwa

  • Гораздо легче читать текст, когда он занимает меньше места на экране

Не содержит динамическую информацию 

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

blunxyfgvai

lcp-riqkjfy

Размещать там, где его ожидают увидеть

9b1mhbg1coa

Но при этом не закрывайте подсказкой сам объект

uwh6q0qwari

Размещайте ее чуть ниже, но чтобы было понятно к какому объекту относится подсказка

Тултип призван упростить юзеру пользование сайтом или программой, поэтому не бойтесь использовать эти подсказки, но при этом их нужно использовать с умом.

Больше полезного:

6 новых инструментов для типографики

Видео: Дизайнер vs Клиент

Веб-дизайн: учиться самому или платить за курсы?

comments powered by HyperComments
comments powered by HyperComments

Теги

Мы Вконтакте

Яндекс.Метрика