Пользовательский интерфейс современных веб-сайтов и приложений может содержать множество элементов. Упростить и одновременно улучшить пользовательский опыт помогают всплывающие подсказки. Они дают возможность более детально проработать UI составляющую, при этом не требуя сложных манипуляций со стороны посетителя ресурса. Разработчики также получают преимущества. Они могут эффективнее использовать доступное пространство.
Что такое тултип
Всплывающие подсказки или тултипы – это инструмент, с помощью которого разработчики могут помочь юзеру разобраться с тем или иным элементом интерфейса. Проще говоря, при необходимости пользователь обращается к небольшой подсказке. Благодаря ей появляется возможность более гибко работать с размерами экрана и создавать интуитивно понятные интерфейсы.
Тултипы должны быть максимально эффективными и полезными. В них следует помещать только самую важную информацию. Если подсказки были некорректно спроектированы, они могут вызывать чувство раздражения у пользователей, что негативно скажется на репутации всего сервиса.
Как работает тултип
Особенность тултипов заключается в их отображении. Чтобы увидеть подсказку, необходимо навести курсор на элемент. После того, как курсор сдвигается, информация через несколько секунд исчезает. Кроме этого, вызвать тултип можно с помощью клавиатуры. Обычно для этого требуется нажать клавишу «TAB», после чего на нужном объекте возникнет фокус.
Когда нужно использовать тултип
Использовать тултипы рекомендуется в следующих ситуациях:
- отсутствие текста – когда кнопки, иконки и прочие элементы не содержат текстового описания, им требуется небольшое пояснение, из которого станет понятно предназначение объекта;
- редко используемые элементы – в интерфейсе могут встречаться опции, которые по тем или иным причинам не пользуются популярностью у юзеров, но полностью избавляться от них нельзя. Чтобы пользователь понимал, как работать с таким объектом, применяются подсказки;
- обилие текста – некоторые элементы могут содержать достаточно много информации, которая перегружает интерфейс и заставляет пользователя постоянно отвлекаться. Ее можно «спрятать» в тултипы, тем самым освободив место на экране.
Как правило, подсказками снабжаются инструменты на панели управления и наиболее важные командные кнопки. Важно учитывать, что текст не должен полностью приковывать к себе внимание пользователя. Тултип играет вспомогательную роль, поэтому он лишь дополняет UI.
Когда не нужно использовать тултип
При создании пользовательских интерфейсов, важно соблюдать одно простое правило: если при взаимодействии с элементом пользователю нужны подсказки, то такой элемент, чаще всего, является примером плохого дизайна и его необходимо переработать. Кроме этого, отказаться от использования тултипов рекомендуется в следующих ситуациях:
- подразумевается взаимодействие с контентом самой подсказки – реализовать такой сценарий просто невозможно, поскольку после смещения фокуса, окно с информацией исчезнет. Для подобных целей лучше использовать модальные окна;
- работа с веб-ресурсом с мобильного устройства – тултипы плохо адаптированы под смартфоны и планшеты. Разумеется, можно создать подсказку, которая будет появляться после нажатия, однако это не лучшее решение.
Если элемент интерфейса требует демонстрации большого количества информации, рекомендуется использовать специальное подчеркивание. Обычно оно выполнено в виде нескольких точек. Такое обозначение даст понять пользователю о вариативности взаимодействия. Кроме этого, объект перестанет восприниматься в качестве гиперссылки.
Как создать качественный тултип
Создание качественного тултипа требует соблюдения определенных рекомендаций. Как правило, большинство проблем с этим элементом вызвано некорректным визуальным представлением. На многих ресурсах, подсказка никак не выделяется, при наведении на нее не меняется даже тип курсора.
При взгляде на элемент интерфейса юзер должен понимать, что он содержит подсказку. Лучше всего подобные объекты оформлять в единой стилистике. Это улучшит пользовательский опыт и увеличит предсказуемость. Также можно организовать последовательную демонстрацию тултипов, но необходимо следить за тем, чтобы они не занимали весь экран.
Появление подсказок в пользовательском интерфейсе должно быть полностью оправдано. В них не стоит помещать очевидную информацию. Размещенный контент должен быть полезным и лаконичным. Одним из способов представления тултипа является попап. В него можно поместить, как одно предложение, так и небольшой текст.
Иногда можно встретить примеры, где в подсказках размещается перефразированный заголовок элемента или дублирование контента, отображаемого на экране. Подобные варианты использования тултипов недопустимы. Во-первых, они бесполезны, во-вторых – ведут к ухудшению пользовательского опыта. Обилие повторяющейся информации может оттолкнуть посетителя.
Пользователи привыкли к тому, что в подсказках находится исключительно статический контент, поэтому размещать динамически меняющуюся информацию в них не стоит. Единственное исключение – центр уведомлений. Расположенные в нем иконки отвечают за отображение статусов, которые могут часто меняться.
Кроме этого, стоит обратить внимание на расположение тултипов. Обычно они стоят перед или после элемента. Принципиальной разницы нет, самое главное, чтобы интерфейс выглядел целостно и не содержал лишних объектов.
