Единство дизайна и понятность интерфейса — зачастую чуть ли не единственные факторы, убеждающие людей остаться на странице или продолжить использование сервиса. И из всех современных инструментов, обеспечивающих оба этих качества, наиболее эффективными являются хотспоты (hot spots, «горячие точки») и тултипы (tooltips, всплывающие подсказки).
В этой статье мы поговорим о том, как горячие точки и всплывающие подсказки могут помочь сделать ваш UX более доступным и удобным.
Содержание статьи
Как горячие точки и всплывающие подсказки улучшают UX?
Как использовать хотспоты и тултипы на вашем сайте?
1. Горячие точки для карточек товаров
2. Всплывающие подсказки для описания товара
3. Горячие точки для набора продуктов
4. Всплывающие подсказки при онбординге
5. Горячие точки для инфографики
Как горячие точки и всплывающие подсказки улучшают UX?
Удобство пользовательского опыта — один из главных приоритетов любого сайта. Иначе зачем беспокоиться?
Среди множества визуальных элементов, которые сглаживают пользовательский опыт и делают его привлекательным, горячие точки и всплывающие подсказки обладают наибольшим потенциалом.
И вот почему:
- Хотспоты позволяют дополнить сайт интерактивными точками, содержащими контекстно-зависимую информацию. Например, обозначение различных мест на картах и отображение некоторой статистической информации. Другой хороший пример — добавление ссылок на разные товары на одном изображении. Помимо чисто информативной роли горячие точки могут использоваться для стимулирования конверсии пользователей с помощью продающих текстов.
- Тултипы показывают информацию о выбранных элементах в небольшом контейнере поверх всего остального содержимого, когда курсор находится на месте. Например, чтобы описать назначение конкретной кнопки.
Как видите, оба инструмента служат для отображения дополнительной информации. Разница в том, как они делают пользовательский интерфейс более доступным и удобным. Цель горячих точек — сбалансировать пространство и расширить контент. За хотспотами на изображении или элементе и можно скрыть много информации. В то же время представление этой информации будет сбалансированным и упорядоченным. С другой стороны, всплывающие подсказки — это преимущественно вспомогательный инструмент. Его основная цель — объяснить некоторые аспекты интерфейса или сайта без излишнего навязывания.
Как использовать хотспоты и тултипы на вашем сайте?
1. Горячие точки для карточек товаров
Презентация продукта — одна из самых больших проблем онлайн-магазинов. Как сделать продукт более привлекательным для пользователя? Как привлечь к нему внимание? Одним из решений является добавление горячих точек к изображениям товаров.
Вот почему это работает:
- нет перегруженности информацией на странице;
- ключевые точки на изображении содержат всю необходимую информацию.
2. Всплывающие подсказки для описания товара
Описание товара — отличное место для использования всплывающих подсказок. Стандартная страница интернет-магазина часто выглядит как нагромождение вещей. Пользователь должен перейти в карточку продукта, чтобы увидеть детали. Это может быть чересчур утомительно. Поэтому немного интерактивности может быть действительно полезно.
Всплывающие подсказки для хранения важной информации на расстоянии вытянутой руки. В контексте интернет-магазинов использование подсказок приводит к тому, что покупатель может рассмотреть продукт с самого начала.
Это может быть что угодно — от in-app уведомления о новом продукте до некоторых технических характеристик продукта (например, количество места на жестком диске).
3. Горячие точки для набора продуктов
Универсальность — одна из причин, почему горячие точки так хорошо работают в электронной коммерции. Помимо демонстрации функций продукта, вы также можете представить наборы продуктов с горячими точками, которые будут содержать ссылки на страницы конкретных товаров.
Есть три способа, чтобы упорядочить горячие точки для наборов продуктов:
- Комбинации продуктов, то есть подход «приобретай образ». В этом случае есть одна горячая точка, которая включает информацию обо всех товарах на картинке.
- Ассортимент товаров. В том случае, если на картинке изображен один товар или тип товара, отсортированный по некоторому признаку. Хорошо сочетается с типами товаров, которые имеют различные вариации, такие как размер, цвет, длина.
- Перекрестные продажи. Пользователь нажимает на один товар и через горячие точки получает предложение о связанных товарах («люди также покупают»).
Объединение горячих точек работает как упрощенная сетка изображений. Но вместо сетки вы получаете одно изображение с несколькими интерактивными элементами.
Горячие точки для набора продуктов занимают гораздо меньше места на странице. Кроме того, позволяют создать целую страницу вокруг определенного набора продуктов, сгруппированных по теме или другим атрибутам (например, набор рождественских подарков или подарков на день рождения).
4. Всплывающие подсказки при онбординге
Первое посещение сайта или первый логин в системе имеет решающее значение для пользователя. Некоторые понимают суть сразу, однако большинству требуется помощь, чтобы привыкнуть к интерфейсу. Эта помощь называется онбординг, и с ней лучше всего справляются всплывающие подсказки:
Тултип при наведении хорошо работает как справка. С его помощью вы можете объяснить пользователю назначение каждого элемента интерфейса.
Другой способ использовать всплывающую подсказку при адаптации к продукту — это руководства. В этом случае вы можете сделать обучение более наглядным.
Онбординг при помощи тултипов, созданных на платформе Experrto
Фактически, всплывающая подсказка может полностью изменить онбординг и позволит представить его в виде последовательности тултипов с комментариями.
5. Горячие точки для инфографики
Диаграммы и инфографика — хороший способ объяснить сложные вещи цифрами и фактами. Для визуализации данных можно использовать специализированные пакеты типа D3. Но в большинстве случаев этого не требуется.
Вместо этого вы можете использовать горячие точки с аналогичным эффектом. Реализация горячих точек для инфографики — идеальный способ интерактивной визуализации элементов, когда использование полностью интерактивного пакета визуализации данных не оправдано.
Как UX влияет на адаптацию к продукту, удержание и рост
В заключение
Мы перечислили наиболее эффективные способы использования тултипов и хотспотов на вашем сайте. Каждый пример показывает, как именно горячие точки и всплывающие подсказки улучшают пользовательский опыт и делают посещение сайта более интересным.
Если вы хотите самостоятельно проверить, на что способны горячие точки и всплывающие подсказки, — попробуйте наш новый плагин для браузера Experrto. Пока что он дает возможность создавать только тултипы, но в скором времени мы планируем добавить хотспоты в функционал. Благодаря визуальному интерфейсу создание подсказок превращается в приятный творческий процесс без кода.
Подписывайтесь на нашу группу в фейсбуке и канал в телеграм, чтобы следить за обновлениями.
Прокачайте ваш онбординг!
По материалам: crocoblock.com Изображение: freepik.com
