TGViewer
UX Notes UX Notes @uxnotes · 23.7K subscribers
Post #913 6.11K
Егор Камелев и Эдвард Чечик написали (отдельно друг от друга) о проектировании тултипов. О всплывающих подсказках недавно было, так что эта заметка дополнит и на какое-то время закроет тему.

— Тултип может отображаться также при фокусе на элементе интерфейса с помощью клавиатуры, длительном нажатии на него (на мобильных устройствах) и разглядывании (в VR-шлеме с трекингом взгляда);
— В нём можно показывать обратную связь, например, что нажатие на контрол привело к копированию текста в буфер обмена;
— Примеры дополнительной информации, которую часто показывают в тултипах: числовые значения для отдельных частей графика или диаграммы; значение, выбираемое с помощью ползунка; ответ на вопрос «что это за непонятное число»;
— Стрелка тултипа указывает на связанный с ним элемент интерфейса. Полезно, когда таких элементов много рядом;
— Не размещайте в тултипе важную информацию;
— Поповер ≠ тултип. Поповер появляется при нажатии на элемент и может включать несколько абзацев текста, ссылки и кнопки;
— Если вы не используете фреймворк вроде Бутстрапа, то при создании тултипа надо будет ответить на не самые очевидные вопросы (примеры ниже);
— Если два элемента стоят рядом, и пользователь сместил фокус с одного на другой, как должны вести себя тултипы (например, меняются мгновенно, игнорируя правило задержки)?
— Где должен появиться тултип, если связанный с ним элемент находится близко к краю экрана?
— Максимальный объём текста в тултипе и максимальная ширина контейнера?
— Как отделить тултип от остального интерфейса? Цвет (в Бутстрапе по умолчанию белый текст на чёрном фоне), прозрачность, тень;
— Не стоит уменьшать размер текста в тултипе и усложнять его читаемость (борьбы за пространство в этом сценарии нет), да и в целом добавлять ради него новый стиль.
  • 👍 19
  • 👎 1
More from @uxnotes
  1. Oct 2, 2026Сархан Громов написал о проблеме связи брендинга и интерфейса. Фирменные приёмы могут отли…
  2. Oct 1, 2026Post #1813
  3. Sep 30, 2026Александр Краснобаев написал об а/б-тестах на малом трафике. • Нельзя выбирать один из вар…
  4. Sep 27, 2026Елена Плинер написала о юзерфлоу. — User flow — это блок-схема пользовательского пути в ра…
  5. Sep 23, 2026Ночной UX — цифровая вечеринка от Сбера Необычные решения, творчество и ошибки делают нас…
  6. Sep 17, 2026Анастасия Ефанова написала, как сокращение количества пушей в 2,5 раза повысило конверсию…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →