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

Обсудим «насущные» вопросы про кнопки оформления заказа в интернет-магазине.

Что лучше писать на кнопке «Купить»?

Совет, который сэкономит вам массу времени — не заморачивайтесь. Если 4-5 лет назад еще было сколько-то важно, что написано на этой кнопке, то сейчас вы можете на ней вообще ничего не писать, только показать пиктограммку с корзиной и этого будет достаточно.

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

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

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

Есть мнение, что кнопка «Купить» менее конверсионная чем кнопка «Добавить в корзину», поскольку «Купить» — это уже принятое решение, а «Добавить в корзину» — пока еще только процесс, не требующий решения прямо сейчас. Спорить нет смысла, возможно, это так. Но нужно определиться, что считать в данном случае конверсией. Если добавление товара в корзину – это желанная конверсия, то кнопку нужно называть именно так, но потом не удивляться брошенным корзинам. Если за конверсию считать оформленный заказ, то не нужно бояться писать «Купить».

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

Можно писать просто «В корзину», убрав слово «добавить». Найдутся противники такого упрощения, скажут, что без глагола хуже call to action (призыв к действию). Выбор за вами.

Кнопка «Заказать», не будет вызывать вопросов, если в интернет-магазине товары есть как в наличии, так и под заказ. Тогда на товарах «в наличии», ставим кнопку «Купить», а на тех что только под заказ — «Заказать».

Еще эта кнопка подойдет для сайтов заказа еды. Раз уж принято говорить «давай закажем пиццу» то на соответствующем сайте вполне можно использовать кнопку «Заказать» вместо «Купить». Но и кнопки «Купить» и «В корзину» тоже будут работать не хуже.

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

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

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

«Положить в корзину», «Добавить в корзину», «Отправить в корзину», просто «В корзину», «Купить», «Заказать» — один хрен (растение семейства Капустные).

С текстом кнопки разобрались, переходим к цвету.

Идеальный цвет кнопки «Купить»

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

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

Тестировать цвет кнопки применительно к целевой аудитории — такой же бред как тестировать текстуру кнопки.

Как вы думаете, много ваших потенциальных клиентов не заметят синюю кнопку «В корзину» на белом фоне? А если вы сделаете ее зеленой, сколько из тех кто не купили с синей кнопкой подумают:

«О! У этих парней кнопка зеленого цвета, я чувствую спокойствие, зеленый цвет мне сигнализирует, что покупать у них безопасно».

Вы всерьез считаете что цвет кнопки «Купить» — это единственная последняя преграда, которая мешает посетителям сделать покупку? Исправьте сначала другие важные проблемы, а потом приступайте к таким мелочам. Я писал об этом в статья про неверные приоритеты при работе с магазином. Прочитайте, вдруг там ваш случай.

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

Белая кнопка с белым текстом на белом фоне — работает хуже чем кнопка любого цвета, контрастного с фоном — к гадалке не ходи (хоть тестируй, хоть нет). :-)

Если серьезно, то красная кнопка будет работать хуже, когда рядом с ней есть зеленая кнопка. Думаю, не надо объяснять почему. 

Зеленая и красная кнопка рядом. На какую нажмете?

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

То же самое, если одна кнопка, например, красная, а другая рядом серая и называние кнопки написано серым – серая будет выглядеть как «Disable» — неактивная, неработающая, соответственно кликать на нее будут меньше.

Серая кнопка, выглядит как будто не активная

Пример серой кнопки. Стали бы вы на нее нажимать?

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

Некоторые животные притворяются мертвыми, чтобы их не заметили и не съели. Точно так же серые кнопки с серым текстом притворяются неактивными, чтобы по ним никто не кликал.

Если хотите чтобы кнопки кликали, не делайте таких кнопок в интернет-магазине:

Disable кнопка в интерфейсе ОС к которой все привыкли

Недоступная для нажатия кнопка в ОС, к которой все привыкли

Если кнопка «Купить» достаточно большая и контрастная, то ее цвет почти не важен. Почти потому что есть исключения, два таких я привел выше. Наверняка можно привести еще.

Поэтому когда магазины проводят А-Б тестирование у них получаются разные результаты. У одних лучше жмут красную кнопку, у других зеленую и т. д. Дело не в продаваемом товаре, не в аудитории, а в дизайне магазина и контексте вокруг кнопки.

Когда нужна кнопка «Заказ в один клик» или «Быстрый заказ»?

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

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

А вот если в заказе обычно больше одного товара, то эту кнопку можно не делать. Если акцент на нее в дизайне будет выше, чем на основную, этот функционал может сократить среднюю сумму чека (поскольку «Заказ в один клик» подразумевает оформление заказа, а не отправку товара в корзину) и усложнит работу менеджеров — им придется больше времени проводить на телефоне, уточняя данные покупателя.

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

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

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

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

Когда кнопка «В корзину» нужна только на карточке товара, а когда еще и в списке товаров?

Это еще один популярный вопрос про кнопку «купить» .Тут примерно так же как в случае с кнопкой «Быстрый заказ» — зависит от товаров, которые продает магазин. Если перед покупкой, у товара нужно выбирать несколько параметров, которые не получается выводить в списке товаров (размер, цвет, вес и т. п.), то кнопку «В корзину» в список товаров не добавляют. 

Согласитесь, странно будет выглядеть, если кнопка «В корзину» будет в магазине одежды, а размер одежды и цвет выбрать будет нельзя. А если даже можно, то будет ли тут же возможность посмотреть таблицу соответствия европейских размеров российским и т. п. важную для выбора информацию?

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

Кнопка «Оформления заказа» в корзине

Раз начали про главные кнопки интернет-магазина, давайте затронем и корзину.

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

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

Ненужно чтобы кнопка в малой корзине и в карточке товара были одинаковыми

Разные по функционалу кнопки называются одинаково — это неправильно. 

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

Шаг в корзине

Название кнопки

1.

Корзина

Оформить заказ

2.

ФИО, телефон, емейл

Указать адрес доставки

3.

Адрес доставки

Выбрать способ доставки и оплаты

4.

Способ доставки и оплаты

Завершить заказ (или отправить заказ, кому как нравится)

5.

Thank you page

Оплатить заказ (или Перейти к оплате)

6.

Страница Робокассы с оплатой

 

Такие пошаговые корзины в современных магазинах редкость, но все еще встречаются и вполне неплохо работали  и работают.

Сейчас корзина обычно состоит всего из одной страницы, на которой и список товаров в корзине, и поля для оформления заказа. Например, в стандартной реализации магазина в 1С-Битрикс сделано именно так.

Правило здесь то же, что и в примере выше. Надпись на кнопке должна сообщать о действии, которое будет совершено по ее нажатии. Если вдруг у вас каждая кнопка называется «Далее», то под ней обязательно должна быть подсказка, куда эта кнопка ведет.

Если в магазине одностраничная корзина, то кнопка в ней должна называться или «Отправить заказ», (если у вас есть промежуточная страница Thank you page) или «Перейти к оплате», если нет Thank you page.

Кнопка «Добавить драматизма»

Конечно баян, но если вы не видели то будет интересно.


Статьи по теме

 

Комментарии

Андрей, 29.04.2015#
Вам нужно авторизоваться, чтобы голосовать0 Вам нужно авторизоваться, чтобы голосовать0

Добрый день, Юрий. Лично я вообще убрал эти кнопки с каталога, там и так есть кликабельная ссылка в названии товара. Вот можно посмотреть для наглядности Disneyka.ru, не сочтите за рекламу, тут все равно нет для меня целевых покупателей:)) Вот когда клиент переходит уже в саму карточку товара, то да, стоит зелененькая кнопка "добавить в корзину".

P.S. Юрий, подскажите, где можно взять бесплатный скрипт "Заказать обратный звонок", буду Вам очень благодарен!
Добрый день, Юрий. Лично я вообще убрал эти кнопки с каталога, там и так есть кликабельная ссылка в названии товара. Вот можно посмотреть для наглядности Disneyka.ru, не сочтите за рекламу, тут все равно нет для меня целевых покупателей:)) Вот когда клиент переходит уже в саму карточку товара, то да, стоит зелененькая кнопка "добавить в корзину". P.S. Юрий, подскажите, где можно взять бесплатный скрипт "Заказать обратный звонок", буду Вам очень благодарен!


Юрий Кудренко
Юрий Кудренко, 29.04.2015#
Вам нужно авторизоваться, чтобы голосовать0 Вам нужно авторизоваться, чтобы голосовать0

Андрей, здравствуйте. Если бы ваш сайт был на Битриксе, я бы мог посоветовать посмотреть скрипты "Обратный звонок" в маркетплейсе Битрикса. Даже если и платные то не сильно дорогие. А так, к сожалению не подскажу.
Комментарий был изменен 29.04.2015 в 15:03
Андрей, здравствуйте. Если бы ваш сайт был на Битриксе, я бы мог посоветовать посмотреть скрипты "Обратный звонок" в маркетплейсе Битрикса. Даже если и платные то не сильно дорогие. А так, к сожалению не подскажу.


Андрей, 29.04.2015#
Вам нужно авторизоваться, чтобы голосовать0 Вам нужно авторизоваться, чтобы голосовать0

Спасибо за ответ. Интересный у Вас блог, узкотематический. Я думаю интернет-магазинчики полюбят Ваш блог.
Юрий, а не могли бы вы написать отдельную статью о правильном расположении меню для ИМ. Какие важные пункты стоит включать в главное горизонтальное меню, сайдбар, подвал и т.д.
Спасибо за ответ. Интересный у Вас блог, узкотематический. Я думаю интернет-магазинчики полюбят Ваш блог. Юрий, а не могли бы вы написать отдельную статью о правильном расположении меню для ИМ. Какие важные пункты стоит включать в главное горизонтальное меню, сайдбар, подвал и т.д.



Ваше имя:

Электронная почта:

Комментарий :


Введите код с картинки:

CAPTCHA