Чтобы, посетители совершали больше покупок, кнопка «Добавить в Корзину» на вашем сайте должна становиться как можно более заметной и привлекательной. Сегодня, я постараюсь рассказать вам о том, как правильно должна выглядеть эта кнопка, чтобы она выделялась среди других элементов и привлекала больше кликов.
Что должен сделать каждый посетитель, который решился у вас купить что-нибудь?
Правильно: нажать всем известную кнопку «добавить в корзину».
Хотя, эта деталь кажется очень незначительной, на самом деле эта кнопка может сыграть ключевую роль в успешности вашего магазина. Вы будете удивлены тому, насколько сильно незначительные изменения дизайна могут повлиять на уровень конверсии и опыт взаимодействия с вашим интернет-магазином в целом.
Итак, как же можно научиться создавать самые лучшие и эффективные кнопки «добавить в корзину»? Данное руководство рассчитано на новичков в этом деле, и в нем приводится 3 простых совета о том, как увеличить показатели продаж:
1. Используйте такой цвет и контраст, чтобы кнопка выделялась.
Уже было довольно много разговоров о том, какой цвет лучше всего подходит для таких кнопок. С одной стороны есть привержены красного цвета, однако с другой стороны, есть и те, кто утверждает, что эффективнее всего использовать зеленый цвет, который вызывает доверие и позволяет добиться лучшей конверсии. Однако реальность в том, что и те, и другие ошибаются. Не существует такого цвета, который подошел бы подо все случаи.
Вместо этого, вам важно подбирать такой цвет, который бы контрастировал с вашим дизайном. Цвет с лучшей конверсией – это цвет, который выделяется среди остальных элементов и фона дизайна. К примеру, если в вашей цветовой схеме используется много красного, но кнопку «добавить в корзину»лучше раскрасить в зеленый цвет, чтобы она контрастировала с дизайном и привлекала внимание.
Взгляните на кнопки, в дизайне представленных ниже магазинов, и вы поймете, о чем я говорю:
В первом примере кнопка ужасно сливается с другими элементами дизайна, представьте себе, такой магазин реально существует!
Однако во втором примере она отчетливо видна и выделяется. Во втором примере показан именно тот подход, которого вам следует придерживаться при разработке собственного дизайна для сайта
Совет:
Чтобы быстрее определить контрастирующие цвета, воспользуйтесь колесом цветов:
Цветовое колесо показывает все три основные цвета, а также связанные с ними оттенки и противоположные им. К примеру, наиболее контрастирующий синему цвету – оранжевый, и именно поэтому оранжевая кнопка так отчетливо видна среди элементов дизайна, оформленных в синей цветовой схеме.
2. Ваша кнопка должна быть достаточно крупной и вокруг нее должно быть достаточно пространства.
Знаете поговорку: «Чем больше, тем лучше?». Она отлично подходит к делу касающемуся кнопки «Добавить в Корзину». По сути, чем больше кнопка, тем больше вероятность, что пользователи заметят ее и кликнут по ней. Это не значит, что ваша кнопка должна занять всю страницу. Она просто должна быть достаточно крупной, чтобы выделяться среди остальных элементов на странице.
Если на ваших страницах с товарами используются крупные шрифты и изображения, то кнопка «добавить в корзину» должна быть еще больше обычных размеров на традиционных сайтах. К тому же, желательно очистить пространство вокруг этой кнопки, — это поможет эффективнее сосредоточить внимание посетителей.
Чтобы увидеть этот подход в действии, я представляю вам следующие примеры. Два хороших примера расположения кнопки «Добавить в корзину/Купить»:
А вот плохой вариант:
Я думаю, все согласятся, что первые два варианта явно в выигрыше. Они больше и им не приходится пробиваться сквозь море остальных элементов, как третьем скриншоте.
Совет:
Эффективность оформления кнопок можно проверить при помощи теста “одной секунды”. Взгляните на вашу страницу товаров, и задайтесь вопросом: на что вы обращаете внимание в первую же секунду посещения?
Если применить подобный тест ко второму представленному примеру, то ваше внимание точно устремится сначала к фотографии товара, а затем перейдет к кнопке “Добавить в Корзину”, так как внимание человек обычно перемещается по направлению слева-направо. Возможно даже такое, что сначала вы обратите внимание на кнопку, и это будет лучший результат.
С другой стороны, если применить этот тест к первому примеру, то куда устремится ваше внимание? Есть вероятность, что сначала вы посмотрите на фотографию товара, а затем просто не будете знать, куда смотреть. Это может случиться потому, что кнопка будет тесно заслонена другими элементами, и ее придется выискивать даже при серьезном намерении что-нибудь купить.
3. Сделайте качественный дизайн.
Если вы хотите, чтобы по вашим кнопкам кликали, но они и выглядеть должны как кнопки, так что используйте мелкие детали дизайна, которые позволяют выделять отдельные элементы. Попробуйте использовать незначительные градиенты или тени, а еще лучше – создайте кнопку в форме стрелки или используйте стрелку, которая указывает на кнопку и как бы говорит посетителям “Нажмите сюда!”.
Как и другие советы, это правило будет более понятным на наглядном примере.
Какие из этих трех кнопок вы находите более интересными?
Кнопка №1 выполнена в плоском стиле, без использования каких-либо дополнительных деталей. Кнопка №2, с другой стороны, выглядит как объемная. Наконец №3 — она дополнена иконкой и отражает свет. Ее дизайн заставляет задуматься о том, что же произойдет, если навести на нее курсор или нажать на нее? В общем, первую кнопку отбрасываем, выбираем между двумя.
Попробуйте использовать стрелку. Эту геометрическую фигуру часто используют для того, чтобы увеличить число кликов по кнопкам. Причина успешности стрелок лежит в том, что она как бы повествует о том, что нажатие по кнопке должно привести к развитию событий. Это хорошо, так как также сигнализирует покупателю, что у них есть возможность завершить процесс поиска и сравнения прямо сейчас, и перейти к оплате.
В завершение
Ну вот и все. Если вам хочется, чтобы ваши посетители кликали по вашим кнопкам «Добавить в корзину», то вам следует разрабатывать их таким образом, чтобы они выделялись на странице, и привлекали внимание.
Так чего же вы ждете? Приступайте к разработке собственных красивых кнопок. Кстати, когда вы добьетесь положительного результата, не забудьте в комментариях поделиться ссылкой на ваш магазин.
