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

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

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

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

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

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

Цвет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Vyacheslav Vityuk

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

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

21 февраля / Комментарии

Дизайн, ориентированный на конверсии

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

далее →

1 февраля / Комментарии

Маленькая деталь страницы товара в зарубежных магазинах одежды, которую пока игнорируют наши продавцы

Одежда – один из самых продаваемых товаров в интернете. Ранее мы публиковали резюме отчёта об исследовании, проведённом аналитическим агентством Nielsen, «Nielsen: какие товары россияне чаще всего покупают в интернете». Согласно результатам этого исследования, одежда не просто самый популярный товар, приобретаемый в интернете. Этот вид товаров на 14% опережает «ближайшего преследователя», потребительскую электронику. Очевидно, что у многих интернет-магазинов одежды дела идут неплохо. Могут ли они идти ещё лучше? Если они внедрят в свои товарные страницы одну маленькую деталь, ответ запросто может быть положительным.

далее →

13 декабря 2016 / Комментарии

Мобильная версия интернет-магазина: предпраздничная подготовка

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

далее →

25 октября 2016 / Комментарии

11 принципов веб-дизайна, которые повышают конверсию

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

далее →

26 сентября 2016 / Комментарии

Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год

Изначально статья планировалась как одно целое, где я хотел рассмотреть возможные ошибки в юзабилити топа российских интернет-магазинов. Но после нескольких дней обзора, понял, что каждый сайт заслуживает отдельного разбора. Кроме того, мне захотелось не только осветить проблему, но и предложить своё видение ее решения. В связи с этим вся статья строится по схеме: Гипотеза о проблеме > Причина и Обоснование > Решение.
Поскольку статья начата еще в ноябре 2015 года, а закончена только сейчас, Ulmart успел исправить часть проблем,  обозначенных в статье. Об этом я дополнительно говорю в примечаниях . И сейчас мы можем отследить те преобразования, которые были сделаны.

далее →

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