Как улучшить всплывающие подсказки?


11.10.2021 Время чтения - 3 минуты 671

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

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

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

Изображение Адама Сильвера

Проблемы подсказок

Хотя подсказки позволяют втиснуть дополнительную информацию на экран, у них есть ряд проблем.

№1. Их трудно обнаружить: некоторые пользователи не заметят подсказки, а значит, существует высокий риск того, что они никогда не увидят и контент на них.

№2. Они заслоняют экран: вы не можете прочитать подсказку и использовать остальную часть экрана одновременно.

№3. Могут быть разрезаны маленькими экранами: так как всплывающие подсказки перекрывают экран, они могут быть разрезаны меньшими окнами.

№4. Недоступен просмотр содержимого при наведении: наведение курсора не всегда является целью запуска подсказки. Иногда пользователь может просто навести курсор на предложение, которое случайно запускает его.

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

Возможные компоненты

  • Текст: всплывающие подсказки могут включать заголовок и основной текст – или просто основной текст. Для небольших всплывающих подсказок пропускайте формальности и переходите сразу к основному тексту.
  • Выход: когда пользователь закрывает всплывающую подсказку. Это может быть просто кнопка «x» или «закрыть», или она может быть активирована при взаимодействии с определенным элементом.
  • Прогресс-бар: всплывающие подсказки, которые являются частью мульти-продукта, могут включать индикатор прогресса. Они дают пользователям знать, на каком этапе те находятся.
Изображение из ReallyGoodUX

4 простых правила для лучшего UX

  • Относитесь к каждой всплывающей подсказке как к чему-то неприятному – вы просите своих пользователей что-то прочитать, поэтому убедитесь, что они сразу же получают пользу от этой информации. Еще обратите внимание на текст. Сделайте его ясным, кратким и актуальным для каждого этапа пользовательского пути.
  • Объясняйте только то, что неотличимо от интерфейса/дизайна.
  • Делайте подсказки как можно более контекстными – запускайте их на основе действий пользователя и показывайте наиболее отзывчивой группе пользователей. Кроме того, убедитесь, что они доступны для людей, которые перемещаются по вашему веб-сайту с помощью клавиатуры и программы чтения с экрана.
  • Выводите их по одной и не показывайте более 3-4 подряд. Пользователи быстро устают, и им нужно время, чтобы использовать/усвоить новую информацию. Как и все остальное, анализируйте и тестируйте подсказки!
Источник изображения

Стилизуйте их с помощью CSS

Предварительный просмотр

Добавить простую всплывающую подсказку на страницу или в приложение несложно. Можно легко найти много плагинов JavaScript и сценариев всплывающих подсказок, которые будут нормально работать. Но чистый CSS часто оказывается лучшим вариантом, из-за чего стал предпочтительным выбором многих веб-дизайнеров.

Полная статья.

Заключение

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

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