Кнопка «В корзину»: привлекаем максимум внимания

При хорошем раскладе, кнопка «В корзину» должна быть самым востребованным интерактивным элементом вашего интернет-магазина. Чем чаще посетители кликают ее, тем лучше. Можно, конечно, рассуждать о конверсии, незавершенных заказах/брошенных корзинах, средних чеках, специфике товарных групп, особенностях целевой аудитории и т.п. Суть эти рассуждения изменить не могут: чем чаще ваши посетители кликают «В корзину», тем успешнее ваш интернет-магазин. Утверждение кажется вам спорным? Высказывайтесь в комментариях. А перед тем, как изложить свои аргументы, ознакомьтесь с тремя советами, которые касаются создания такой кнопки «В корзину», которая поможет вам привлечь максимум внимания посетителей.

Цвет

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

Вместо того, чтобы присоединяться к сторонникам того или иного цвета, сделайте кнопку «В корзину» контрастирующей с общей цветовой гаммой страниц интернет-магазина. Так вы сможете визуально выделить ее, привлечь к ней внимание с первых же секунд. А чтобы найти тот самый контрастирующий цвет для кнопки «В корзину», используйте цветовой круг. Контрастирующие цвета в таком круге расположены напротив друг друга. Например, если страницы вашего интернет-магазина выполнены в синих тонах, сделайте кнопку «В корзину» желтой/оранжевой. Ранее мы описывали эволюцию блока «В корзину» интернет-магазина Amazon.com, и там сочетание цветов фона и кнопки именно такое: синий (фон) и желтый (кнопка).

Размер и окружение

Знаете фразу «Чем больше, тем лучше»? Она вполне применима к кнопке «В корзину». В рамках разумного, конечно. Большая кнопка привлекает больше внимания. Не в половину страницы, но такого размера, чтобы она выделялась на фоне остального контента. Ориентируйтесь на размеры шрифтов и превью фото товара на странице: кнопку «В корзину» следует делать такой, чтобы она не затмевала собой эти блоки, но в то же время заметно от них отличалась. Кроме того, «привлекательность» кнопки можно повысить с помощью пустого пространства вокруг нее.

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

Украшательства

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

Интересный факт: ряд кейсов подтверждает эффективность стрелки на кнопке «В корзину». Видимо, причина в том, как эта стрелка влияет на восприятие всего процесса потребителем: без нее клик по «В корзину» воспринимается как некое окончательное решение, с ней – как переход к следующему шагу, практически не накладывающему никаких обязательств. Так что рассмотрите возможность размещения стрелки на кнопке «В корзину» вашего интернет-магазина, а также ознакомьтесь с материалом «Уникальная кнопка «В корзину», в котором рассматривается еще один интересный кейс.

На основе материала How to Build a Better Add to Cart Button

Автор: Vyacheslav Vityuk

Подписаться на новости

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

Пять объединяющих особенностей тысячи самых успешных посадочных страниц современности

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

далее →

Когнитивные особенности проектирования интерфейсов

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

далее →

Какие изображения повышают конверсию сайта: на основе тестов

Изображения повышают конверсию сайта. На эту тему написано много статей. В основном приводят примеры сайтов из США. Мы решили на своем опыте протестировать разные изображения. Чтобы понять, когда конверсия выше.

далее →

Как избежать 10 ошибок в работе с цветом на сайте

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

далее →

18 апреля / Комментарии

Правила оформления шапки интернет-магазина

Известно, что шапка является одной из главных составляющих интернет-магазина. Зачастую именно на нее посетитель обращает взгляд в первую очередь. В этой статье эксперты сервиса AskUsers поделятся приемами правильной компоновки шапки, расскажут как добиться того, чтобы посетитель обратил внимание на самую важную информацию, а не задавался вопросом “где тут вообще что?”.

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook