Интернет-магазин с нуля. Полное пошаговое руководство

Кнопка «Купить» и ее важность

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

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

Для этой кнопки нельзя использовать цвета, которые хороши для привлечения внимания (красный, например). Цветовосприятие никто не отменял, поэтому допускается использование нейтральных и теплых цветов. Оптимальный – это зеленый, синий или в крайнем случае желтый. А вот если вы используете красный цвет, то просто теряете клиентов, потому что кто-то не кликнет уже на подсознательном уровне. Это все протестировано, и нужно это учитывать. Также ваша кнопка должна выглядеть именно как кнопка, она должна быть «вкусной» (чтобы на нее хотелось нажать).

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

Кнопка должна вести себя как кнопка: меняться при наведении и клике (посмотрите за поведением любой кнопки в Windows, и вы поймете, о чем я), курсор мышки так же должен меняться на «руку» при наведении. Это все без проблем реализуется с помощью современных технологий при верстке сайтов. Основная проблема – когда кнопка вообще никак себя не выдает, иногда даже не меняется курсор мыши.

Эти, казалось бы, мелочи очень сильно влияют на конверсию. Когда мы у себя изменили кнопку (у нас какое-то время висела красная кнопка на желтом фоне, о ужас!), конверсия процентов на 40 стала выше, в то время это было два-три дополнительных заказа в день.

Только представьте: обычная замена кнопки позволила увеличить прибыль на несколько тысяч рублей в день! Мы в течение нескольких месяцев теряли порядка 30–50 тысяч рублей из-за одной лишь кнопки! Вы все еще не уделяете кнопке «Купить» должного внимания? Тогда мы идем к вам!