Призывы к действию в интернет-магазине

На основе материала E-commercecalls to action: 10 best practice tips, источник – Econsultancy

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

Тестирование

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

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

Цвет

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

Слова на кнопке

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

Обратите внимание на «Process order». Перевести эту формулировку можно как «Обработать заказ», что запросто может заставить некоторых посетителей подумать дважды перед тем, как кликнуть по этой кнопке.

Размер кнопок призыва к действию

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

Расположение кнопки

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

Осмысленная пустота

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

Приоритет самых важных призывов

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

Безотлагательность действия

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

Модификация под различные устройства

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

Автор: Vyacheslav Vityuk

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

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

Когнитивные особенности проектирования интерфейсов

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

Эксперты сервиса AskUsers разобрались, что это значит, как работает и каким образом скомпоновать элементы интерфейса так, чтобы они соответствовали принципам теории.

далее →

Какие изображения повышают конверсию сайта: на основе тестов

Изображения повышают конверсию сайта. На эту тему написано много статей. В основном приводят примеры сайтов из США. Мы решили на своем опыте протестировать разные изображения. Чтобы понять, когда конверсия выше.

далее →

Как избежать 10 ошибок в работе с цветом на сайте

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

далее →

18 апреля / Комментарии

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

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

далее →

17 апреля / Комментарии

Как психология цвета может увеличить конверсию вашего сайта

Пользователю хватает всего 90 секунд, чтоб сформировать в голове решающее мнение о продукте. Как достучаться до него за такой короткий промежуток времени? Понятно, что красочное описание чудодейственной функциональности продукта, удачный нейминг и прочие маркетинговые фишки эффективны, но как сыграть на эмоциях клиента? Цвет – вот что мотивирует (или демотивирует) пользователя – в 62-90% случаев цвет становится главным аргументом в пользу совершения покупки!

далее →

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