Иногда для не самых приметных возможностей мы показываем людям интерфейсные подсказки, чтобы привлечь к ним внимание или легко рассказать о том, что это вообще такое. Это удобно для небольших фич, когда у вас появилась удобная кнопка, а о ней очень хотелось бы донести информацию.
Этот тултип служит для ознакомительных целей. То есть показывать его надо один раз, запоминая факт показа между сессиями. Рекомендуется показывать тултип сразу после того, как нуждающийся в нём элемент появился в зоне видимости. Это значит, что если, например, до элемента нужно скроллить, то показывать тултип нужно не сразу при попадании на страницу, а именно в момент, когда пользователь доскроллил до элемента.
Важно: на странице не может быть два одновременно показанных тултипа. Они всегда должны показываться последовательно: следующий — при закрытии текущего и так до конца.
Скрытие видимого тултипа происходит по тапу в любом месте экрана.
Интерфейсные тултипы не стоит путать со Snackbar(снекбар, feedback-уведомление о результате определённого действия) и всплывающими модальными окнами, у которых одна из целей —донести необходимую информацию о возможностях.
Логика использования
Существует два типа подсказок, которые по факту лишь отличаются по оформлению: есть белые и есть синие.
Как определять, какие использовать, как и где?
— Используйте белые подсказки тогда, когда на фоне вашей гарантированно будет изображение. Идеальным примером использования подсказок белого цвета считается фотопросмотрщик, просмотр историй и видеоплеер. Для всех остальных случаев вам идеально подходит подсказка синего цвета.
— Не используйте подсказки после того, как показали пользователям всплывающее модальное окно, где уже донесли информацию о функциональности.
— Стремитесь не показывать такие подсказки сразу после интро, если это не обучающий сценарий.
— Делите пользователей на тех, кто с вами давно и тех, кто пришёл недавно. Решите, нужна ли эта подсказка новой аудитории.
Что насчёт акцентов?
Их есть у нас. Если вы хотите акцентировать внимание на конкретной кнопке, то эти подсказки умеют затемнять фон надо всем, кроме элемента, который вам необходим. Этим не следует злоупотреблять и вообще лучше использовать крайне редко. Всё потому, что такие подсказки блокируют взаимодействие с интерфейсом. В итоге пользователь может просто сбросить состояние этого экрана, так и не прочитав необходимый совет.
Если вы всё же решились использовать такие подсказки, то эти правила помогут сделать это лучшим образом:
— У элементов в сетках допустимо использовать акценты(пример: сетки стикеров).
— Согласуйте с дизайнером, ответственным за соответствующий продукт.
Примеры
Формулировки
Важным моментом при использовании подсказок являются компактно написанные тексты для них. Всегда стоит помнить о том, что место на девайсах ограничено и получившаяся подсказка явно не должна занимать половину экрана. Вы тоже пользователи и такая объёмная подсказка, вероятно, вызвала бы и у вас неоднозначное впечатление. Ничего, кроме негатива, это не вызовет.
Краткость — сестра таланта, поэтому имеет смысл доносить самое важное в коротких формулировках. Здесь стоит пренебрегать продающими эпитетами и донести лишь цель.
В подсказках текст необязательно будет единым полотном, он может делиться на заголовок и описание. Достаточно прислать необходимые параметры в методе API. Если вам необходимо такое деление, то стремитесь писать в заголовок цель либо название фичи в двух-трёх словах, а всё остальное —в описании. В большинстве случаев достаточно использовать один параметр и не делить на заголовок и описание.
Важно: мелочи являются частью нашего комфортного дома. Не забывайте о висящих предлогах, которые возникают, то там, то тут. Эти«крохи» часто вызывают визуальный дискомфорт, поэтому не забывайте ставить неразрывные пробелы после союзов и предлогов. Стремитесь к тому, чтобы объёмы текста ваших тултипов не превышали двух-трёх строк текста.
Логика использования
Как определять, какие использовать, как и где?
Что насчёт акцентов?
Примеры
Формулировки