Подсказка в интерфейсе – это вспомогательный текстовый или графический элемент, который помогает пользователю понять назначение функции, правила заполнения поля или способ взаимодействия с элементом. Она появляется в момент, когда пользователь наводит курсор на элемент, фокусирует внимание на поле или совершает определенное действие.
| Что разберем | Что это даст |
| Как подсказка отличается от других элементов справки | Сможете правильно называть элементы и не путать подсказку с подписью или ошибкой |
| Основные виды подсказок и их назначение | Поймете, какую подсказку использовать в каком случае |
| Практические примеры в реальных интерфейсах | Сможете распознать подсказку в интерфейсе и понять ее функцию |
| Частые ошибки при создании подсказок | Не будете делать подсказки, которые путают вместо того, чтобы помогать |
Чем подсказка отличается от похожих элементов
Подсказку часто путают с тремя близкими по функции элементами: подписью, плейсхолдером и сообщением об ошибке. Хотя они выглядят похоже и работают рядом, они решают разные задачи.
Подпись – это постоянный текст, который находится рядом или выше элемента и видна всегда. Она называет элемент и не исчезает при взаимодействии. Например, слово “Пароль” слева от поля ввода пароля.
Плейсхолдер – это текст внутри поля, который исчезает, как только пользователь начинает печатать. Он показывает формат или пример заполнения. Например, “dd.mm.yyyy” в поле даты.
Подсказка – это вспомогательный текст, который появляется при наведении, клике или фокусе на элемент и исчезает при убирании внимания. Она дает дополнительную информацию, которая не критична для базового использования, но помогает при сомнении. Например, при наведении на поле “Номер телефона” появляется текст “Можно вводить с кодом страны или без него”.
Сообщение об ошибке – это текст, который появляется только если пользователь ошибся при заполнении или взаимодействии. Оно исчезает, когда ошибка исправлена. Например, “Пароль должен содержать минимум 8 символов”.
Правильное различие важно, потому что каждый элемент решает свою задачу, и если вы используете подсказку там, где нужна подпись, пользователь может не найти нужную информацию.
Основные виды подсказок
Tooltip (всплывающая подсказка)
Это самый распространенный вид. Небольшой текстовый блок появляется при наведении курсора на элемент. Обычно находится выше или рядом с элементом в виде небольшого окошка.
Используется для:
- Кратких объяснений функции кнопки (например, при наведении на иконку “?”, “⚙”, “✕”)
- Расшифровки сокращений (например, “API” → “Интерфейс программирования приложений”)
- Уточнения формата ввода (например, “Телефон: только цифры, без пробелов и дефисов”)
- Информации о ограничениях (например, “Максимум 255 символов”)
Пример: в Яндекс.Метрике при наведении на иконку рядом с названием метрики появляется всплывающее окно с объяснением, что эта метрика считает и как ее использовать.
Inline hint (встроенная подсказка)
Это текст, который находится прямо под полем или рядом с ним и видна всегда или появляется при клике на поле. Она не исчезает при убирании внимания, как tooltip, а остается видна до завершения взаимодействия.
Используется для:
- Уточнения правил заполнения (например, под полем “Пароль”: “Используйте заглавные буквы, цифры и спецсимволы”)
- Объяснения зачем нужна информация (например, под полем email: “Мы пришлем код подтверждения на этот адрес”)
- Примеров правильного ввода (например, под полем “Сумма”: “Пример: 1500 или 1500.50”)
- Информации о конфиденциальности или безопасности (например, “Ваши данные не будут переданы третьим лицам”)
Пример: в Google Forms под полем для ввода email часто видна встроенная подсказка “Мы используем это для отправки результатов”.
Contextual help (контекстная справка)
Это развернутое объяснение, которое появляется при клике на иконку помощи или вопроса рядом с элементом. Обычно это не просто одна строка, а целый блок текста, иногда с примерами или шагами.
Используется для:
- Сложных функций, которые требуют подробного объяснения
- Описания алгоритма работы или логики (например, “Как считается коэффициент конверсии”)
- Инструкций по заполнению (например, “Как правильно заполнить поле ‘Источник трафика'”)
- Ссылок на дополнительные ресурсы (например, “Подробнее в справке”)
Пример: в CRM-системах при клике на иконку “?” рядом с полем открывается панель с подробным объяснением и примерами заполнения.
Popover (всплывающая панель)
Это расширенная версия tooltip. Появляется при клике или наведении и может содержать не только текст, но и кнопки, ссылки, чек-боксы или другие элементы. Обычно больше по размеру, чем простой tooltip.
Используется для:
- Выбора между несколькими вариантов (например, при клике на кнопку “Поделиться” появляется popover с вариантами соцсетей)
- Быстрого редактирования или действия без открытия отдельной страницы
- Информации, которая требует взаимодействия, а не просто чтения
Пример: в Slack при клике на реакцию эмодзи появляется popover с поиском и выбором нужного эмодзи.
Где подсказки встречаются в реальных интерфейсах
Формы регистрации и входа
Когда пользователь заполняет форму, ему часто нужна информация о формате пароля, требованиях к email или правилах ввода номера телефона. Подсказка здесь помогает избежать ошибок заполнения.
Пример: при регистрации на Авито в поле пароля под полем видна inline-подсказка “Минимум 6 символов, хотя бы одна буква и цифра”. При наведении на иконку замка рядом может появиться tooltip с объяснением требований к безопасности.
Фильтры и поиск
В интерфейсах с множеством фильтров подсказки помогают понять, что означает каждый параметр и как его использовать.
Пример: в фильтре цены на Авито при наведении на иконку рядом может появиться tooltip “Укажите минимальную и максимальную стоимость товара”.
Аналитические и управленческие системы
В Яндекс.Метрике, Google Analytics, CRM-системах подсказки объясняют сложные метрики, алгоритмы расчета и правила использования данных.
Пример: при наведении на название метрики “Bounce Rate” появляется tooltip с объяснением, что это процент сеансов, в которых пользователь совершил только одно действие.
Настройки и конфигурация
Когда пользователь настраивает сложный функционал, подсказки помогают понять, какие параметры нужно менять и к чему это приведет.
Пример: в настройках email-рассылки при наведении на поле “Время отправки” может появиться tooltip “Письмо отправится в указанное время по часовому поясу получателя”.
Навигация и кнопки действий
Иконки кнопок часто требуют пояснения, особенно если они не очевидны.
Пример: при наведении на иконку “⋯” в приложении появляется tooltip “Еще опции”, при наведении на иконку “↗” появляется tooltip “Открыть в новой вкладке”.
Частые ошибки при создании подсказок
Подсказка дублирует подпись
Если в поле есть подпись “Email”, а подсказка говорит “Введите ваш email”, она не добавляет новую информацию. Пользователь уже знает, что нужно вводить.
Неправильно: Подпись “Номер карты” + tooltip “Введите номер вашей карты”
Правильно: Подпись “Номер карты” + tooltip “16 цифр без пробелов, указаны на передней части карты”
Подсказка слишком длинная
Tooltip не предназначена для развернутых объяснений. Если информация займет больше двух строк, это уже не подсказка, а справка, и ее место либо ниже поля (inline hint), либо в отдельном окне (contextual help).
Неправильно: Tooltip с тремя абзацами объяснения алгоритма расчета комиссии.
Правильно: Tooltip “Комиссия 2.9% + 30 рублей” + ссылка “Подробнее” на страницу с полным объяснением.
Подсказка содержит критически важную информацию
Если информация в подсказке критична для правильного использования интерфейса, она не должна быть скрыта в tooltip. Пользователь может ее не заметить.
Неправильно: Информация “Это поле обязательно” только в tooltip при наведении.
Правильно: Визуальный маркер обязательного поля (например, красная звездочка) + опциональная подсказка в tooltip для дополнительного уточнения.
Подсказка не появляется на мобильных устройствах
Tooltip при наведении не работают на сенсорных экранах. Если вы используете tooltip как единственный способ передачи важной информации, мобильные пользователи ее не увидят.
Неправильно: Важная информация только в tooltip при наведении.
Правильно: Информация либо видна всегда (inline hint), либо доступна при клике на иконку помощи, которая работает и на мобильных.
Подсказка слишком техническая или непонятная
Если пользователь должен понять подсказку, чтобы использовать элемент, она должна быть написана на его языке, а не языке разработчиков.
Неправильно: Tooltip “Используйте regex для фильтрации по паттерну”.
Правильно: Tooltip “Поддерживаются подстановочные символы: * (любые символы), ? (один символ). Пример: user_*” или ссылка на справку с примерами.
Подсказка появляется в неудачный момент
Если tooltip появляется при наведении, но пользователь пытается кликнуть на элемент, подсказка может помешать или закрыть нужную информацию.
Неправильно: Tooltip появляется и накрывает кнопку, которую нужно кликнуть.
Правильно: Tooltip появляется в стороне от элемента или исчезает, как только пользователь начинает взаимодействие с соседними элементами.
Ограничения и особенности подсказок
Tooltip не видны на мобильных при наведении. Сенсорные устройства не поддерживают наведение курсора. Если вы используете tooltip как способ передачи информации, убедитесь, что на мобильных есть альтернатива: либо информация видна всегда, либо доступна при клике на иконку помощи.
Пользователи могут не заметить подсказку. Если информация находится в tooltip, есть риск, что пользователь ее просто не увидит, особенно если он в спешке или не привык наводить курсор на элементы.
Подсказка не заменяет хороший дизайн. Если интерфейс спроектирован плохо и элементы непонятны, подсказка только замаскирует проблему, но не решит ее. Сначала нужно сделать элемент понятным визуально, а подсказка – это дополнение.
Слишком много подсказок перегружают интерфейс. Если почти каждый элемент имеет tooltip, интерфейс выглядит сложным и недружелюбным. Подсказки нужны только там, где действительно есть неоднозначность или нужна дополнительная информация.
Подсказка работает по-разному в разных браузерах и устройствах. Время появления, размер, позиция, стиль tooltip могут отличаться. Если вы разрабатываете интерфейс, нужно протестировать подсказки на разных платформах.
Как правильно использовать подсказки при проектировании
Проверьте, действительно ли нужна подсказка. Если элемент понятен без дополнительной информации, подсказка не нужна. Спросите себя: пользователь не будет ли в замешательстве без этой информации?
Выберите правильный вид подсказки. Если информация – одна короткая фраза, используйте tooltip. Если это правила заполнения или формат, используйте inline hint. Если это сложное объяснение, используйте contextual help.
Напишите подсказку на языке пользователя. Избегайте технических терминов, используйте примеры, будьте конкретны. Пользователь должен понять подсказку с первого прочтения, без гугления.
Убедитесь, что подсказка видна на всех устройствах. Если вы используете tooltip при наведении, добавьте возможность открыть ее при клике на мобильных. Если информация критична, сделайте ее видной всегда или легко доступной.
Не прячьте критическую информацию в подсказках. Если пользователь должен знать что-то для правильного использования интерфейса, это не должно быть скрыто. Используйте визуальные маркеры, обязательные поля, валидацию, но не только подсказки.
Коротко о главном
Подсказка – это вспомогательный элемент интерфейса, который помогает пользователю понять назначение функции или правила заполнения. Она появляется при наведении, клике или фокусе и исчезает, когда внимание убрано.
Основные виды: tooltip (всплывающая), inline hint (встроенная), contextual help (контекстная справка) и popover (всплывающая панель). Каждый вид решает свою задачу в зависимости от объема и типа информации.
Подсказка отличается от подписи (постоянный текст рядом с элементом), плейсхолдера (текст внутри поля) и сообщения об ошибке (текст при неправильном вводе).
Главные ошибки: дублирование информации, слишком длинный текст, прячут критическую информацию в подсказках, забывают о мобильных устройствах, используют слишком техническую формулировку.
Подсказка работает, когда интерфейс в целом хорошо спроектирован, информация в ней понятна и доступна на всех устройствах, а критически важные данные не спрятаны за наведением курсора.
