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

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

Цвет

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

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

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

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

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

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

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

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

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

Автор: Vyacheslav Vityuk

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

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

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

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

Эксперты сервиса AskUsers разобрались, что это значит, как работает и каким образом скомпоновать элементы интерфейса так, чтобы они соответствовали принципам теории.

далее →

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

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

далее →

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

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

далее →

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

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

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

далее →

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

Как психология цвета может увеличить конверсию вашего сайта

Пользователю хватает всего 90 секунд, чтоб сформировать в голове решающее мнение о продукте. Как достучаться до него за такой короткий промежуток времени? Понятно, что красочное описание чудодейственной функциональности продукта, удачный нейминг и прочие маркетинговые фишки эффективны, но как сыграть на эмоциях клиента? Цвет – вот что мотивирует (или демотивирует) пользователя – в 62-90% случаев цвет становится главным аргументом в пользу совершения покупки!

далее →

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