tooltips 1160x620 - Проблемы с подсказками (tooltips), как их разрешить
Изображение https://dribbble.com/davidtjpowell

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

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

Проблемы с подсказками (tooltips), как их разрешить
Различные всплывающие подсказки.

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

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

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

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

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

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

Проблемы с подсказками (tooltips), как их разрешить
Раскрытие дополнительного контента требует усилий.

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

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

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

Проблемы с подсказками (tooltips), как их разрешить
Часть экрана перекрыта всплывающей подсказкой.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Оригинал: Adam Silver

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Как упростить свой дизайн, большое руководство

Свыше 20 понятных иллюстрированных примеров Компании постоянно стремятся создавать простые и полезные…

Модальность – одна из концепций UX, которую большинство дизайнеров не до конца понимают

В этой статье мы собираемся изучить общий стандарт модальности в пользовательских интерфейсах.

5 способов сделать кнопку призыва к действию интуитивно понятной

Нажать или не нажать – это вопрос, который приходит в голову пользователю,…