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

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

Цвет

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

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

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

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

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

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

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

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

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

Автор: Vyacheslav Vityuk

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

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

25 октября / Комментарии

11 принципов веб-дизайна, которые повышают конверсию

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

далее →

26 сентября / Комментарии

Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год

Изначально статья планировалась как одно целое, где я хотел рассмотреть возможные ошибки в юзабилити топа российских интернет-магазинов. Но после нескольких дней обзора, понял, что каждый сайт заслуживает отдельного разбора. Кроме того, мне захотелось не только осветить проблему, но и предложить своё видение ее решения. В связи с этим вся статья строится по схеме: Гипотеза о проблеме > Причина и Обоснование > Решение.
Поскольку статья начата еще в ноябре 2015 года, а закончена только сейчас, Ulmart успел исправить часть проблем,  обозначенных в статье. Об этом я дополнительно говорю в примечаниях . И сейчас мы можем отследить те преобразования, которые были сделаны.

далее →

6 сентября / Комментарии

Комфорт покупателей как залог успешного бизнеса. Основные ошибки в юзабилити интернет-магазинов

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

далее →

11 августа / Комментарии

Чек-лист юзабилити интернет-магазина

По-настоящему проверить удобство интернет-магазина без подтверждения данными веб-аналитики, не получится. Контекст взаимодействия; задачи, опыт и мотивы пользователей; устройства, с которых пользователи просматривают магазин — всё это влияет на конверсию и не может быть оценено чек-листом.
При составлении чек-листа, я ориентировался на исследования института Baymard, Юзабилити Лаб, Mastercart и студии Сибирикс + некоторые собственные наблюдения.

далее →

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

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

далее →

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