Подсказки в приложении как называются

Обновлено: 07.01.2025

Примечание. Функция доступна не на всех языках. Ознакомьтесь со списком поддерживаемых языков.

Установите приложение Gboard на смартфон или планшет Android.
Откройте любое приложение, в котором можно набирать текст, например Gmail или Google Keep.
Нажмите на текстовое поле.
Начните вводить слово. В верхней части клавиатуры появятся подсказки:
- Увидев нужное слово, нажмите на него.
- Если предложенное слово не подходит, нажмите и удерживайте его, а затем переместите в корзину .

Как добавить слово в словарь

На устройстве Android откройте любое приложение, в котором можно набирать текст, например Gmail или Keep.
Нажмите на текстовое поле.
Введите слово, которое вы хотите добавить.
Коснитесь слова, подчеркнутого красным цветом.
Нажмите Добавить в словарь.

Примечание. Все опечатки при наборе текста могут исправляться автоматически. Чтобы отменить исправления, нажмите "Стереть" .

Как изменить тип подсказок

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

На устройстве Android откройте любое приложение, в котором можно набирать текст, например Gmail или Keep.
Нажмите на текстовое поле.
Коснитесь значка "Открыть меню" в верхней части клавиатуры.
Нажмите на значок "Ещё" "Настройки" Исправление текста.
Выберите тип подсказок.

Как включить умный ввод (только на английском языке в США)

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

На устройстве Android откройте любое приложение, в котором можно набирать текст, например Gmail или Keep.
Нажмите на текстовое поле.
Коснитесь значка "Открыть меню" в верхней части клавиатуры.
Нажмите на значок "Ещё" "Настройки" Исправление текста.
В разделе "Подсказки" включите функцию Умный ввод.

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

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

Принцип работы

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

Подсказки окружают нас везде: в супермаркетах, у банкоматов, на вокзале, за рулем автомобиля, в приложении. В интерфейсах тултипы отображаются при наведении мышкой на определённый объект. К примеру, если пользователь установил приложение для мониторинга новостной сводки, всплывающие подсказки могут использоваться для виртуального тура.

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

Tooltip — важный элемент навигации, который незаслуженно ушёл на второй план. При проектировании интерфейса специалисты концентрируются на стандартных компонентах, вроде навигации. Они добавляют нестандартную анимацию, экспериментируют с градиентами и предлагают идеи по добавочной ценности UI. Вот только без уведомлений работа может оказаться бесполезной. Пользователи не поймут, как заполнить форму заявки или подписки на обновления по электронной почте. В этом будет виноват дизайнер, ведь он отвечает за то, как аудитория взаимодействует с интерфейсом.

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

Когда использовать тултипы

Мы разобрались, что подсказки являются частью user experience, поэтому их обязательно нужно добавлять в сложные интерфейсы, которые состоят из десятка экранов. Особенно если UI создаётся для решения бизнес-целей. Конверсию можно получить только если человек сможет пройти все этапы самостоятельно.

Запомните: тултипы не являются главным элементом в UI. Не надо переоценивать их значение. Они всего лишь помогают пройти по маршруту. Дизайнеру надо придерживаться этой концепции и не выходить за рамки.

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

Объяснение функций

Самый распространённый вариант использования tooltip — поясняющие комментарии. Пользователь наводит мышкой на поле формы или кнопку, возникает подсказка и становится понятно, что надо делать.

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

Анонс новинок

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

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

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

Виртуальный тур по системе

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

Тултипы могут фокусировать внимание на определённых элементах и подталкивать к выполнению целевых действий. В идеале, уведомления должны появляться только когда в них есть необходимость.

Контекстная помощь

Если человек никогда не открывал Photoshop или Figma, ему пригодится виртуальный наставник. Когда приложение состоит из нескольких экранов для отправки формы или отображения списка покупок, тултипы не нужны. А вот если предстоит изучить сложный инструмент с большой экосистемой — без продуманной навигации не обойтись.

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

Упрощение структуры

Некоторые элементы UI иногда выходят за рамки привычного использования. Тултипы не обязательно должны быть маленькими и незаметными. Иногда они помогают сделать интерфейс более простым и обеспечить комфортное восприятие контента.

Вывод данных

Интерактивное взаимодействие

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

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

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

Чтобы убедиться, что люди не пропустят важную функцию, покажите уведомление. В случае с блоком форматирования можно в первый раз отобразить подсказку «Наберите текст и выделите его мышкой для применения тегов форматирования».

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

Чтобы закрепить знания, перечислим ситуации, в которых пригодится tooltip:

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

Дизайн ради дизайна — тупик. Всплывающие уведомления нужны только в определённых ситуациях. К примеру, если пользователь установил приложение для составления семейного дерева и ему нужно заполнить анкету, они пригодятся. Можно дать советы по правильному вводу данных.

Не надо использовать уведомления если:

Придётся взаимодействовать с содержимым подсказки. Обычно блок показывается только при наведении мыши. Как только курсор уйдёт в сторону, область пропадёт.
Не продумали механизм работы на сенсорных экранах. На смартфонах и планшетах используется управление жестами, события «наведение» здесь нет. Можно настроить отображение по клику, но не все поймут, что надо делать.
Хочется украсить интерфейс. Tooltip не входит в число декоративных элементов. Он даёт полезную информацию, а не развлекает.

5 правил разработки эффективных подсказок

При правильном использовании тултипы улучшат интерфейс. Это возможно только если соблюдать простые рекомендации и протестировать отображение на разных устройствах.

Найдите идеальное место

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

Ещё один пример использования tooltip как средства визуализации. Пользователи понимают, что для просмотра цифры надо навести курсор на закрашенную область.

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

Дайте полезную информацию

Идеальная подсказка предоставляет необходимую информацию и экономит время. Если человеку надо заполнить большую форму с нестандартными полями, он рассчитывает на помощь. Расскажите, что файлы больше 1,5 МБ загружать нельзя, и поддерживаются только определённые форматы. Иначе получите негативный отзыв, когда пользователь внесет информацию во все поля, а после отправки появится ошибка и данные придётся вносить заново.

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

Посмотрите на решение приложения по поиску электрозаправок. Владелец автомобиля открывает доступ к местоположению и смартфон показывает станции поблизости. При нажатии на маркер отображается время в пути и расстояние. Логика работы полностью соответствует ожиданиям.

Отображайте прогресс

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

Благодаря продуманной структуре можно закрыть подсказку, вернуться к предыдущей или переключиться на следующую. Юзер чувствует, что контроль над ситуацией в его руках. Никто не заставляет читать уведомления.

Предоставьте выбор

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

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

Добавьте короткий текст

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

В примере идеально всё: структура контента, ссылка в виде стрелочки, гармоничные цвета.

Мы в IDBI знаем, как важно для бизнеса завоевать доверие клиентов. Свяжитесь с нами, если хотите получить идеальный интерфейс для своих проектов.

Роман Шелехов, руководитель группы развития корпоративных электронных каналов в Банке ВТБ и магистр Гильдии вольных проектировщиков, специально для «Нетологии» адаптировал статью Grzegorz Oksiuta об адаптации пользователя как об одном из важнейших элементов приложений.

Адаптация пользователя (Onboarding/Онбординг) – ключевой элемент любого приложения. Зачастую именно простота использования определяет, будут ли пользоваться приложением или нет.

Адаптация пользователя — это большее, чем просто экранные заставки и подсказки в пользовательском интерфейсе. В этой статье описаны наиболее яркие примеры хорошей адаптации.

Сосредоточьтесь на целях пользователя

Начнем с простых вопросов. Какая у пользователя главная цель? Почему он выбрал именно наше приложение? Например, цель WhatsApp — упростить общение с семьёй, друзьями и коллегами.

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

Описывайте цикл взаимодействия с клиентом

Следующий шаг — создание последовательности действий (цикла), которые пользователь предпринимает для достижения своей цели.

Airbnb наглядно проиллюстрировал цикл взаимодействия

Опыт перелёта от LEGO

Опыт заказа мобильного телефона от Jessica Tien

Отбросьте лишнее

Для каждого шага необходимо минимизировать количество вводимых данных. Также необходимо доступно объяснить пользователю, для чего необходима запрашиваемая информация и какая её часть обязательна. Все остальное должно быть доступным к заполнению и обновлению в будущем.

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

Обычно регистрация/вход в приложение требуются для того, чтобы связать вводимые данные с профилем для использования на различных устройствах. Но если это не предполагается, то зачем вообще регистрироваться?

Appear.in создает видеоконференции без регистрации и даже указания имени

Аватар, местоположение, рост или вес — вся эта информация абсолютно не важна в начале использования приложения (исключения бывают, когда приложение завязано на эти данные: например, такси (местоположение), фитнестрекер (рост/вес) или приложение по созданию красивых аватарок – прим. перев.).

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

Своевременно рассказывайте о новых функциях

В большинстве случаев пользователи фокусируются на одной функции. Что же делать, если так и хочется объяснить несколько функций сразу? Рассмотрим подробнее приложение Medium. Есть основная функция — чтение статей. В тоже время Medium позволяет публиковаться.

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

Medium рассказывает о форматировании текста, когда вы начинаете писать статью

Youtube рассказывает о прямых трансляциях только в специальной вкладке Творческой студии

Делайте подсказки интерактивными

Очень часто подсказки для адаптации пользователя отделены от самого приложения. Статический текст — это наименее привлекательный способ пояснения. Всегда старайтесь максимально задействовать механику приложения.

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

Trello демонстрирует функции сервиса с помощью собственной механики карточек

Объясняйте пользу

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

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

GetResponse четко поясняет, для чего требуется вводимая информация

Хорошее объяснение, почему дата рождения важна при регистрации Apple ID

Дайте возможность пользователям разбираться самостоятельно

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

Убедитесь, что в приложении можно пропустить подсказки. Это позволит таким «исследователям» получить больше удовольствия от использования приложения, а вернувшимся пользователям упростит взаимодействие.

Обучающий тур по обучению иностранным языкам от duolingo

Дополнительный инструмент по сохранению идей от Pinterest

Практикуйте индивидуальный подход к различным задачам пользователей

Такой подход широко применяется в геймдизайне: некоторые функции, предназначенные для продвинутых пользователей, поясняются только им. Однако это совсем не означает, что они не должны быть доступны для всех (например, обучение новым возможностям персонажа при достижении нового уровня – прим. перев.).

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

Evernote определяет цель пользователя, задавая конкретный вопрос

Используйте пустые экраны

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

Стартовая страница сервиса для прототипирования интерфейсов

Стартовая страница Instagram

Говорите с вашим пользователем один на один

Заключительный, но не менее важный принцип — общайтесь с вашим пользователем! Делайте это как можно чаще. Нет лучшего источника информации, чем разговор один на один с человеком, чьи задачи вы решаете.

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

Подводя итог

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

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

Итерационное исправление ошибок — неотъемлемая часть проектирования и с каждой итерацией вы будете видеть реальные улучшения, а это самая лучшая мотивация.

Успехов и удачи!

От редакции

Чтобы как можно качественнее и полнее понимать запросы целевой аудитории и создавать приложения с максимально эффективным онбордингом, «Нетология» запустила курс «UX-аналитика: исследования пользователей и здравый смысл».

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

Записывайтесь! Старт занятий 30 июня.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Подсказка , также известная как InfoTip или намек , является общим графическим пользовательским интерфейсом элементом , в котором, при наведении на элемент экрана или компонента, текстовое поле отображает информацию о том элементе, например, описание функции кнопки в то , что аббревиатуре обозначает точную абсолютную отметку времени относительно относительного времени («… назад»). Всплывающая подсказка отображается постоянно, пока пользователь наводит курсор на элемент.

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

Подсказка URL-адреса в браузере Kiwi , производном от Google Chromium , открывается с помощью стилуса на Samsung Galaxy Note 4 .

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

Распространенный вариант всплывающих подсказок, особенно в старых версиях программного обеспечения, - это отображение описания инструмента в строке состояния . Функция всплывающих подсказок Microsoft, содержащаяся в документации для конечных пользователей, называется всплывающими подсказками . Функция всплывающих подсказок Apple, содержащаяся в документации для разработчиков, называется тегами справки . Классический Mac Операционная система использует функцию всплывающих подсказок, хотя и в несколько ином пути, известная как воздушный шар помощь . Некоторое программное обеспечение и приложения, такие как GIMP , предоставляют пользователям возможность отключить некоторые или все всплывающие подсказки. Однако такие возможности оставляются на усмотрение разработчика и часто не реализуются.

СОДЕРЖАНИЕ

Источник

Термин « всплывающая подсказка» первоначально пришел из старых приложений Microsoft (например, Microsoft Word 95 ). Эти приложения будут иметь панели инструментов, на которых при наведении указателя мыши на значки панели инструментов отображается краткое описание функции инструмента на панели инструментов. В последнее время эти всплывающие подсказки используются в различных частях интерфейса, а не только на панелях инструментов.

Примеры

CSS , HTML и JavaScript , а также другие системы кодирования позволяют веб-дизайнерам создавать настраиваемые всплывающие подсказки.

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

Abbr Шаблон является примером использования подсказки внутри Википедии, в котором шаблон показывает всплывающую подсказку и текст. Другой способ - использовать >.

Читайте также: