Кнопка «добавить в корзину» для сайта. Примеры и советы интернет-магазинам.

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

Что должен сделать каждый посетитель, который решился у вас купить что-нибудь?

Правильно: нажать всем известную кнопку «добавить в корзину».

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

Итак, как же можно научиться создавать самые лучшие и эффективные кнопки «добавить в корзину»? Данное руководство рассчитано на новичков в этом деле, и в нем приводится 3 простых совета о том, как увеличить показатели продаж:

1. Используйте такой цвет и контраст, чтобы кнопка выделялась.

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

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

Взгляните на кнопки, в дизайне представленных ниже магазинов, и вы поймете, о чем я говорю:

Кнопка "добавить в корзину" для сайта. В первом примере кнопка ужасно сливается с другими элементами дизайна, представьте себе, такой магазин реально существует!

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

Совет:

Чтобы быстрее определить контрастирующие цвета, воспользуйтесь колесом цветов:

Цветовое колесо показывает все три основные цвета, а также связанные с ними оттенки и противоположные им. К примеру, наиболее контрастирующий синему цвету – оранжевый, и именно поэтому оранжевая кнопка так отчетливо видна среди элементов дизайна, оформленных в синей цветовой схеме.

2. Ваша кнопка должна быть достаточно крупной и вокруг нее должно быть достаточно пространства.

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

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

Чтобы увидеть этот подход в действии, я представляю вам следующие примеры. Два хороших примера расположения кнопки «Добавить в корзину/Купить»:

А вот плохой вариант:

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

Совет:

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

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

С другой стороны, если применить этот тест к первому примеру, то куда устремится ваше внимание? Есть вероятность, что сначала вы посмотрите на фотографию товара, а затем просто не будете знать, куда смотреть. Это может случиться потому, что кнопка будет тесно заслонена другими элементами, и ее придется выискивать даже при серьезном намерении что-нибудь купить.

3. Сделайте качественный дизайн.

Если вы хотите, чтобы по вашим кнопкам кликали, но они и выглядеть должны как кнопки, так что используйте мелкие детали дизайна, которые позволяют выделять отдельные элементы. Попробуйте использовать незначительные градиенты или тени, а еще лучше – создайте кнопку в форме стрелки или используйте стрелку, которая указывает на кнопку и как бы говорит посетителям “Нажмите сюда!”.

Как и другие советы, это правило будет более понятным на наглядном примере.

примеры кнопок

Какие из этих трех кнопок вы находите более интересными?

Кнопка №1 выполнена в плоском стиле, без использования каких-либо дополнительных деталей. Кнопка №2, с другой стороны, выглядит как объемная. Наконец №3 — она дополнена иконкой и отражает свет. Ее дизайн заставляет задуматься о том, что же произойдет, если навести на нее курсор или нажать на нее? В общем, первую кнопку отбрасываем, выбираем между двумя.

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

В завершение

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

Так чего же вы ждете? Приступайте к разработке собственных красивых кнопок. Кстати, когда вы добьетесь положительного результата, не забудьте в комментариях поделиться ссылкой на ваш магазин.

09.02.2014

Кнопка «добавить в корзину» для сайта. Примеры и советы интернет-магазинам.
3.67 (73.33%) 3 votes

Статья недели

5 способов изучить спрос на товар до открытия интернет-магазина.

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

© 2011-2016

Права на экспертные публикации принадлежат авторам.

Права на комментарии и статьи редакции принадлежат eMagnat.

Реклама на сайте