Прокачайте ваш онбординг
с навигатором интерфейсов Experrto
Выберите категорию

Как онлайн-магазины используют подсказки, чтобы подтолкнуть к покупке

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

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

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

Содержание статьи

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

Находите способы вовлечь и удержать даже случайных посетителей

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

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

На многих сайтах есть функция «Избранное»/«Сохранить» — она здорово вовлекает пассивных покупателей и заставляет их возвращаться (благодаря созданию профиля и email-рассылке). 

Вот как магазин Overstock использует тултипы, чтобы рассказать о подобном функционале:

Нравится этот товар? Сохраните его в список, чтобы вы в любое время могли его найти!

Нравится этот товар? Сохраните его в список, чтобы вы в любое время могли его найти!

А вот пример с сайта Wayfair’s:

Заинтересованы в товаре? Сохраните на доску, чтобы вернуться к нему позже

Заинтересованы в товаре? Сохраните на доску, чтобы вернуться к нему позже

Похожая функция реализована в декор-магазине Chairish (появляется как на страницах отдельных товаров, так и в общем каталоге):

Видите что-то, что вам понравилось? Нажмите на сердечко, чтобы отслеживать товар

Видите что-то, что вам понравилось? Нажмите на сердечко, чтобы отслеживать товар

Все примеры просты и уместны. Подсказки легко закрыть — это позволяет покупателям просматривать товары, не отвлекаясь.

Мобильное приложение Amazon по-иному использует ту же концепцию. Хотя всплывающая подсказка прекрасно передает нужное послание, она не побуждает к действию напрямую, полагаясь вместо этого на пустое пространство (white space):

Текст подсказки: «Расскажите нам, что вам нравится, поставив сердечко товарам и вернувшись к просмотру других интересных находок». Текст в пустом поле: «Вы упускаете все интересные находки»

Текст подсказки: «Расскажите нам, что вам нравится, поставив сердечко товарам и вернувшись к просмотру других интересных находок». Текст в пустом поле: «Вы упускаете все интересные находки»

Интерактивные подсказки: как вывести онбординг на новый уровень

Предлагайте акции и апсейлы в течение всего покупательского пути  

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

Amazon использует всплывающую подсказку, указывающую на URL-строку, чтобы проинформировать о дополнительном адресе, где есть возможность пожертвовать на благотворительные цели. Эта всплывающая подсказка имеет базовый дизайн, доносит простые вещи и дает потребителям понять, что они будут периодически видеть данное уведомление.

Вы находитесь на сайте www.amazon.com. Перейдите на smile.amazon.com, если хотите поддержать Code.org. Чтобы это сделать: 1. Введите «smile.amazon.com» в адресной строке своего браузера. 2. Выберите товары и оформите заказ. 3. Amazon сделает за вас пожертвование. Мы будем периодически показывать вам это уведомление. (Не показывайте мне это снова.)

Вы находитесь на сайте www. amazon. com. Перейдите на smile.amazon. com, если хотите поддержать Code. org. Чтобы это сделать: 1. Введите «smile.amazon. com» в адресной строке своего браузера. 2. Выберите товары и оформите заказ. 3. Amazon сделает за вас пожертвование. Мы будем периодически показывать вам это уведомление. (Не показывайте мне это снова.)

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

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

У вас есть одна БЕСПЛАТНАЯ доставка! Доставка первого заказа — за наш счет. Получите то, что вам нужно доставить, сегодня! 

У вас есть одна БЕСПЛАТНАЯ доставка! Доставка первого заказа — за наш счет. Получите то, что вам нужно доставить, сегодня! 

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

Пользователи Yelp могут получить 10%-ный кэшбек здесь и в тысячах других ресторанов

Пользователи Yelp могут получить 10%-ный кэшбек здесь и в тысячах других ресторанов

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

Tooltips: как использовать этот маленький, но мощный UI-паттерн

Приближайте покупателей к финишу

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

Сайт дизайнерской обуви и одежды Gilt использует тултип, чтобы указать на разницу между двумя призывами к действию: «Купить сейчас» и «Добавить в корзину». Одного текста тут недостаточно. Из минусов — всплывающая подсказка балансирует на грани между полезной и раздражающей, потому что она не исчезает, когда пользователи пытаются получить доступ к кнопкам за ней (им приходится специально закрывать подсказку).

Купите этот товар сейчас, перейдя напрямую к оформлению заказа! Другие товары продолжат ждать вас в вашей корзине

Купите этот товар сейчас, перейдя напрямую к оформлению заказа! Другие товары продолжат ждать вас в вашей корзине

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

Быстро продается! Проверьте наличие вашего размера

Быстро продается! Проверьте наличие вашего размера

Как изменить пользовательское поведение? Объедините UX-дизайн и психологию!

Помогайте людям находить именно то, что им необходимо

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

Интернет-магазин одежды Grana подчеркивает один из своих принципов — прозрачность. К распроданным товарам Grana применяет подсказку, появляющуюся над кнопками выбора размера. Довольно благоразумно, потому что людей раздражает, когда сайты не сообщают покупателям о статусе товара, пока не будет сделан окончательный выбор. К тому же посетители учатся различать предупреждения о закончившемся товаре.

Надпись над выделенным кружочком с размером: «Распродано» 

Надпись над выделенным кружочком с размером: «Распродано» 

Небольшая подсказка для деликатного мотивирования 

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

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

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

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

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

Прокачайте свой онбординг!

По материалам: appcues.com Источник картинки: pexels.com

Прокачайте ваш онбординг
с навигатором интерфейсов Experrto