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

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

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

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

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

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

Цвет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Vyacheslav Vityuk

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

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

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

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

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

далее →

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

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

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

далее →

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

Комфорт покупателей как залог успешного бизнеса. Основные ошибки в юзабилити интернет-магазинов

Четыре года назад была опубликована статья «22 ошибки в юзабилити интернет-магазинов, а также работающие варианты по их исправлению». Мы решили, что настала пора освежить данную информацию и задали разработчикам сайтов и CMS следующие вопросы: «Какие указанные в данном материале ошибки по-прежнему актуальны?», «С какими юзабилити-ошибками интернет-магазинов вам приходится встречаться чаще всего?», «Какие юзабилити-советы вы можете дать заказчикам?». И вот что мы узнали.

далее →

11 августа / Комментарии

Чек-лист юзабилити интернет-магазина

По-настоящему проверить удобство интернет-магазина без подтверждения данными веб-аналитики, не получится. Контекст взаимодействия; задачи, опыт и мотивы пользователей; устройства, с которых пользователи просматривают магазин — всё это влияет на конверсию и не может быть оценено чек-листом.
При составлении чек-листа, я ориентировался на исследования института Baymard, Юзабилити Лаб, Mastercart и студии Сибирикс + некоторые собственные наблюдения.

далее →

Навигация как способ управления вниманием пользователя

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

далее →

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