- Статьи
- 2 мин на чтение
- 20
Почему стоит отображать тултипы в тёмном режиме
Повышаем удобство использования всплывающих подсказок
Тултипы — полезные компоненты, которые предоставляют пользователю контекстную информацию, необходимую для выполнения задач. Однако есть одна распространённая проблема — зачастую их просто не замечают, потому что они сливаются с фоном.
Большинство фонов содержат много контента. Наложение тултипа на насыщенный фон затрудняет его видимость. Эту проблему поможет решить отображение тултипа в тёмном режиме.
Когда вы показываете ваши всплывающие подсказки в тёмном режиме, они будут хорошо контрастировать со светлым фоном. В результате пользователи будут всегда замечать тултип, независимо от того, насколько перегружен фон. Тёмный тултип также обеспечивает лучший фокус на информации без отвлекающих элементов.
Кроме того, вам не придётся дополнительно стилизовать всплывающую подсказку. Обратите внимание, как в плохом примере тултипа дизайнеры используют обводку и тень. Это излишняя стилизация требует дополнительных настроек контрастности, чтобы выделить тултип. В хорошем примере в дизайне тултипа нет обводки или тени, потому что в этом нет необходимости. Пользователи без труда увидят его без применения дополнительных стилей.
Скрытые тултипы легче обнаружить, когда они спроектированы в тёмном режиме. Пользователи не всегда знают, есть ли у элемента всплывающая подсказка. Иногда они могут перемещать мышь по странице и случайно вызывать тултип. В таком случае они быстрее заметят тёмный тултип, так как он контрастирует с светлым фоном.
Если интерфейс находится в тёмном режиме, тултипы следует отображать в светлом режиме. Здесь работает тот же принцип, но с противоположной цветовой полярностью. Тултип в светлом режиме лучше контрастирует с тёмным фоном. Обратите внимание на пример: слева — плохо различимый тултип, справа — хороший пример дизайна тултипа, который просто невозможно не заметить.
Применяйте общее правило, согласно которому тултипы всегда следует отображать в режиме, противоположном цветовой теме интерфейса. Их не всегда легко обнаружить. Когда они появляются, они должны привлекать внимание пользователя. Единственный способ — сделать их контрастными на перегруженном фоне.
Перевод статьи How to Fix Apple’s Illegible White Button Labels из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
