Студия Турум-бурум

Дизайн карточки товара и микро конверсия: KPI, о котором забывают

Дизайн карточки товара и микро конверсия: KPI, о котором забывают
869

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

Что такое микро конверсия в карточке товара?

Микро конверсии — это путь и действия посетителя перед покупкой товара. Каждая совершенная микро конверсия приближает посетителей на один шаг к целевому действию.

Согласно Nielsen Norman Group, «микро конверсии помогают измерить влияние дополнительных улучшений пользовательского опыта. Часто эффект отдельных небольших изменений не виден в масштабах макро конверсии». 

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

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

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

Каким должен быть дизайн карточки товара, чтобы обеспечить высокую микро конверсию?

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

1. Используйте высококачественные изображения и видео обзоры товара

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

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

2. Добавьте социальное доказательство

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

  • Почти 95% покупателей читают онлайн-обзоры перед покупкой.
  • Товары, у которых было 5+ отзывов, покупали на 270% чаще, чем товары без отзывов. 
  • 72% клиентов не предпринимают никаких действий, пока не прочитают отзывы.
  • 84% людей доверяют обзорам, которые они читают в Интернете, не меньше, чем личным рекомендациям.

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

Так для интернет-магазинов из ниши детских товаров, блок с отзывами — это must-have. Для молодых родителей важно понять и перенять опыт других пользователей. Давая возможность оставить или прочитать отзыв о товаре, вы повышаете доверие к товару и бренду.

Пример социального доказательства в интернет-магазине Pampik
Пример социального доказательства в интернет-магазине Pampik

3. Продумайте иерархию элементов в карточке товара

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

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

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

Чтобы избежать основных ошибок в дизайне карточки товара:

  • Оставьте только самую актуальную и важную информацию о товаре;
  • Рационально используйте пространство, чтобы блоки информации четко считывались;
  • Четко расставьте приоритеты между целевыми действиями. Разместите одну контрастную кнопку CTA (call to action) и сделайте ее доступной при скролле страницы.

А вот хороший пример оформления карточки товара в интернет-магазина Mon Amie. Тут ничего не отвлекает пользователя от товара. Главными акцентами a дизайне являются: большое фото, цена и единственная кнопка призыва к действию (CTA).
А вот хороший пример оформления карточки товара в интернет-магазина Mon Amie. Тут ничего не отвлекает пользователя от товара. Главными акцентами a дизайне являются: большое фото, цена и единственная кнопка призыва к действию (CTA).

4. Увеличьте скорость загрузки сайта

Исследование Google показало, что 90% мобильных пользователей покидают сайт, загрузка которого занимает более трех секунд. А по данным отчета MachMetrics, время загрузки большинства сайтов составляет от 8 до 11 секунд, т.е. они теряют потенциальных покупателей. 

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

Чтобы страница товара и веб-сайт в целом загружались быстрее:

  • Уменьшите количество HTTP-запросов, которые происходят на вашем сайте.
  • Сжимайте файлы и изображения сайта.
  • Исправьте неработающие ссылки.
  • Убедитесь, что сайт оптимизирован для мобильных устройств, это можно сделать с помощью Mobile Friendly Test.
  • С помощью Google PageSpeed Insights проверьте скорость сайта, а затем определите и устраните любые дополнительные причины медленной загрузки.

5. Сделайте конверсии с мобильных устройств приоритетом

Согласно данным Statista, ожидается, что в 2021 году 72,9% всего рынка e-commerce будет генерироваться через m-commerce. Поэтому, если вы хотите повысить коэффициент конверсии, то необходимо в первую очередь оптимизировать карточку товара для мобильных устройств.

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

Пример дизайна карточки товара на сайте 966.ua с редизайном по принципу mobile-first

Пример дизайна карточки товара на сайте 966.ua с редизайном по принципу mobile-first

Так, при проектировании дизайна, стоит двигаться по принципу mobile-first, а также следовать паттернам мобильных приложений, то есть взаимодействие с сайтом должно быть похожим на взаимодействие с мобильным приложением.

  • Используйте свайпы.

Пример свайпа в интернет-магазине Dicentra
Пример свайпа в интернет-магазине Dicentra

Используйте прилипающее кнопки CTA, чтобы пользователь мог положить товар в корзину в любой момент.

Пример прилипающих кнопок CTA на сайте Pampik

Пример прилипающих кнопок CTA на сайте Pampik

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

6. Используйте cross-sale и upsell инструменты

Именно в карточке товара cross-sale и upsell инструменты наиболее эффективны. Добавьте раздел «с этим товаром также покупают» или «товары этой же серии», «другие пользователи покупают», и так далее.

Пример upsell блока на сайте интернет-магазина Intertop

Пример upsell блока на сайте интернет-магазина Intertop

7. Используйте приемы nudge-маркетинга

Побудить пользователя к покупке может ограниченное количество товара на складе или факт того, что продукт пользуется спросом. Добавьте сообщения типа «Этот товар купило более 100 человек на этой неделе.», «На складе осталось N штук», «Сейчас этот товар просматривают N человек», и т.д. Это примеры Nudge-маркетинга, которые как-бы подталкивают к совершению покупки. 

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

Пример nudge-маркетинга
Пример nudge-маркетинга
 

Почему стоит оптимизировать микро конверсии в карточке товара?

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

Оптимизируйте дизайн карточки товара с учетом микро-действий, и вы увеличите конвертацию пользователей и тем самым улучшите KPI интернет-магазина.




Оставьте номер и мы перезвоним
Спасибо!
Мы скоро свяжемся с Вами.
Напишите нам
Выберите направление:
    Спасибо!
    Мы скоро свяжемся с Вами.