UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Проблемы с подсказками (tooltips), как их разрешить
Редакція
Редакція

Опубліковано

Проблемы с подсказками (tooltips), как их разрешить

#ux

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

Затем, когда пользователь убирает курсор с элемента, они исчезают.

Различные всплывающие подсказки.

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

Сейчас я объясню некоторые из недостатков всплывающих подсказок и как с ними справится.

1. Их трудно заметить

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

2. Иногда, подсказки требуют усилий

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

Раскрытие дополнительного контента требует усилий.

3. Подсказки заслоняют экран

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

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

Часть экрана перекрыта всплывающей подсказкой.

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

4. На маленьких экранах окошки подсказок могут быть обрезаны

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

Окошки всплывающих подсказок могут быть обрезаны.

5. Подсказки плохо взаимодействуют с функцией распознавания речи

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

Трудно создавать иконки, с ориентированным программным обеспечением для распознавания речи.

Представьте себе иконку колокольчика. Неясно, должны ли пользователи произнести «Нажать на звонок», «Нажать на уведомление» или что-то еще, чтобы активировать иконку.

6. Раскрытие контента при наведении на значок недоступно

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

Во-вторых, зависание - это не всегда намерение активировать управление. Пользователь может провести курсором возле всплывающей подсказки, что случайно активирует ее.

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

В-четвертых, пользователи которые используют функцию "Лупа" не могут перемещать область просмотра под увеличением, не скрывая подсказку.

Ну и наконец, пользователи не могут выбирать или взаимодействовать с контентом при открытой подсказке.

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

Какая альтернатива всему этому

1. Вы должны проделать тяжелую работу, ради удобства своих пользователей

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

Если вы используете значок для передачи смысла, лучше используйте вместо этого текст или иконки и текст вместе.

Вверху: просто значок (плохо). Посередине: просто текст (хорошо). Внизу: текст и иконка (хорошо).

Если у вас есть один сложный вопрос, подумайте, можете ли вы упростить его, задав несколько коротких вопросов?

В любом случае, усердно потрудитесь, чтобы сделать все максимально простым и удобным для вашей аудитории.

2. Просто добавьте пояснения в сам контент

Если вам действительно нужно предоставить пользователям дополнительные разъяснения, просто сделайте их частью контента.

Вверху: содержание во всплывающей подсказке (плохо). Внизу: содержание в строке (хорошо)

Дайте пользователям то, что им нужно, и когда нужно.

3. Используйте шаблон переключения контента

Если эти два варианта вам не подходят, используйте встроенный компонент переключения (toggle component).

Компонент переключения

Компонент переключения - самый удачный вариант, потому что:

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

Подведем итоги

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

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

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

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


Перевод статьи Adam Silver

Найновіші коментарі (0)