Как сделать кнопку в корзину
Хаки для кнопки добавить в корзину WooCommerce
Хочу рассмотреть некоторые интересные хаки, связанные с задачей добавления товара в корзину WooCommerce. Ранее вы уже могли видеть некоторые посты по настройке страницы корзины или ее автоматическом обновлении, а сегодня заметка будет больше касаться самой кнопки Add to Cart (и всего, что происходит при взаимодействии с ней). В частности, попробуем добавить сообщение при нажатии на произвольной страничке и заменить линк с нее на URL полного описания товара. Все эти решения тестировал лично, однако со временем некоторые из них (из-за версии модуля магазина) могут не срабатывать. Начну пока что с парочки сниппетов, а дальше по возможности буду данную заметку обновлять.
Изменяем ссылку добавления в корзину
По умолчанию в магазине для товаров вместе с заголовком, ценой, картинкой отображается также ссылка/иконка с функцией добавления товара в корзину. В настройках WooCommerce вы можете задать разные варианты поведения для нее:
Но иногда при клике на кнопку требуется поренаправление посетителей на страничку с описанием товара. Теоретически это можно сделать через правку файлов макета, если он позволяет такое реализовать. Однако правильнее и логичнее внести изменения с помощью хуков.
В файл темы custom-function.php, function.php или любой другой, где у вас расположены хаки для темы, добавляете строки:
Таким образом, вы сможете изменить кнопку добавить в корзину Woocommerce на свою. Вместо указанного class подставляйте те значения, которые используются в вашей теме дабы не пришлось дополнительный раз править CSS стили. Текст «Подробнее» тоже заменяем, хотя обычно он вообще не отображается, а подменяется на иконку.
Сообщение о добавлении товара на произвольной странице
В WooCommerce вы можете использовать шорткоды отображения списка товаров (новых, популярных, по ID) на любой странице сайта. Однако при этом кнопка добавить в корзину WooCommerce (Add to Cart) свою функцию выполняет, но никакое сообщение не показывает. А, по идее, должно быть что-то вроде следующей картинки:
Дабы это исправить первым делом определите файл шаблона, который отвечает за вывод информации на нужной странице. Как правило, он называется page.php, хотя может иметь и другие значения, например page-home.php (для главной), page-fullwidth.php (для широкоформатной) и т.п.
Далее в коде выбранного файла добавляем одну из двух следующих строк на выбор:
После этого загружаете новую версию на FTP и проверяете показ сообщения после добавления товара в корзину WooCommerce. Я пробовал оба варианта кода — все работало хорошо. Если у вас есть еще какие-то вопросы по теме, пишите в комментариях, буду искать соответствующие решения. Плюс советую почитать заметку про вариативные товары что тоже может пригодиться в работе.
Меняем стили и название ярлыка «Распродажа», кнопки «Добавить в корзину» и полей страницы корзины
Слова на русском «Добавить в корзину» и «Распродажа» в некоторых шаблонах смотрятся слишком громоздко. Внешний вид Woocommerce изначально заточен под английский язык. Слова Sale, New или Add to cart занимают немного места на кнопках и ярлыках. Но для других языков есть простые решения. Можно, конечно, создать свой локальный файл перевода. Но это не совсем удобно, так как Woocommerce постоянно дорабатывается и после обновлений легко забыть синхронизировать шаблон с кастомным переводом. Поэтому лучше поменять название кнопок и ярлыков Woocommerce при помощи удобного плагина или кода.
Данные функции можно применить и на мультиязычном сайте, так как мы создадим поле для перевода. Вставлять их надо в файл functions.php.
Изменим слово «Распродажа» на «Скидка» на бейдже в Woocommerce
Если мы снижаем цену на товар, то на карточке товара выводится стандартный ярлык (бейдж) со словом «Распродажа». Его можно сменить на любое удобное слово, например, «Акция» или «Скидка».
Процент вместо слова «Распродажа»
Эта функция заменит слово «Распродажа» на процент скидки. Процент рассчитается автоматически. Вы можете сменить знак минус на любой другой знак или слово.
Изображение вместо фона ярлыка «Распродажа»
Используйте CSS для очистки фона ярлыка.
Стили для ярлыка «Распродажа»
Также мы можем задать свой стиль ярлыкам Woocommerce. Например, сделаем анимированный значок. Он будет слегка пульсировать, тем самым привлекая внимание посетителей.
Удалить ярлык «Распродажа».
Если вы не хотите акцентировать внимание покупателей на скидках, то просто удалите ярлык. Скопируйте и вставьте следующий код в ваш файл function.php.
Изменим название кнопки «Добавить в корзину»
Чтобы сменить название кнопки на страницах одиночного товара, вставьте этот код в function.php:
Для смены названия кнопки на всех остальных страницах Woocommerce, примените этот код:
Или объединим обе функции в одну, если хотим сменить название кнопки Добавить в корзину на всех страницах. Вместо текста можно вставить иконку.
Кастомный CSS для кнопки «Добавить в корзину»
Вы можете задать свой стиль кнопке «В корзину». Это CSS код анимированной кнопки.
Как изменить поля на странице корзины
С помощью этой функции можно изменить слова: «Просмотр корзины», «Обновить корзину» и «Оформить заказ» на странице /cart/.
Добавление товара в корзину: обеспечение четкой и постоянной обратной связи
Перевод статьи UX-специалиста Пейджа Лаубхеймера.
Резюме: Чтобы подтвердить добавление товара в корзину, покажите значок на иконке и всплывающее окно подтверждения (или страницу) и измените метку кнопки «Добавить в корзину», сохраняя при этом возможность увеличивать количество этого элемента.
На сайтах электронной торговли первым шагом покупки продукта является добавление его в корзину покупок. Четкая обратная связь, что этот шаг был успешно завершен, дает пользователям чувство контроля и позволяет им уверенно продолжать покупки или приступать к их оформлению.
Тем не менее, тестирование юзабилити сайтов электронной торговли показывает, что многие сайты плохо справляются с подтверждением того, что продукт добавлен в корзину. В частности, возникают эти два вопроса:
Когда эти проблемы встречаются, пользователи часто вынуждены дважды перепроверять свои действия и следить за тем, чтобы товар был добавлен в корзину. Такое поведение покупателей говорит о том, что с подобной проблемой они встречаются довольно часто.
Уведомляющий значок, наложенный на иконку, четко указывает количество предметов в корзине и может косвенно гарантировать пользователям, что продукт был успешно добавлен. Это уведомление будет четко выделяться, если его цвет контрастирует со значком корзины.
Если это возможно, покажите промежуточную итоговую стоимость товаров в корзине рядом с иконкой. Это поможет пользователям в некоторых случаях:
Однако просто изменить значок корзины, чтобы отразить количество покупок недостаточно. В дополнение к этому цифровому значку на иконке корзины используйте дополнительный, более заметный индикатор, подтверждающий, что продукт был добавлен в корзину. Типичные примеры включают в себя анимацию или отдельные страницы, показывающие, какой продукт был добавлен в корзину. Используйте изображение продукта и его название прибегая к этим приемам. Однако не злоупотребляйте анимацией: небольшое количество движения может привлечь внимание, но много движений одновременно отвлекают и раздражают.
В нашем юзабилити-тестировании участница покупок на Burberry.com добавила пальто к своей корзине, затем увидела всплывающее окошко, показывающее, что продукт был добавлен, и начала двигать мышку в направлении всплывающего окна, чтобы кликнуть по нему для уточнения размеров изделия. Однако, прежде чем она успела прочитать информацию на оверлее, он исчез. «Куда делась моя сумка? Наверное, это очень чувствительный к движению мыши элемент сайта.»
Вот рекомендуемые способы отображения обратной связи в корзине:
Новая промежуточная страница, которая показывает сообщение «продукт Х был добавлен в корзину», с кнопками перехода – «Просмотр корзины», «Оформить заказ», и «продолжить покупки».
Какой из этих вариантов подходит для вашего бизнеса, зависит от поведения ваших пользователей в шоппинге. В большинстве случаев оверлей или баннер, показывающий, что что-то было успешно добавлено в корзину, наиболее полезно, особенно на сайтах, где пользователи склонны покупать или сравнивать несколько предметов. Тем не менее на сайтах с ограниченным количеством опций (например, в магазине специализированной мебели) или с пользователями, которые покупают только 1-2 товара за сеанс (например, такие покупатели как на Amazon Prime, не утруждающие себя консолидацией нескольких товаров в одном заказе), новая промежуточная страница может держать пользователей сосредоточенными на процессе проверки покупок и таким образом ускорить его.
Какой бы шаблон вы не выбрали для своего сайта, обязательно покажите:
В наших UX исследованиях многие участники случайно добавили один и тот же элемент в свою корзину несколько раз, а затем были удивлены во время проверки, когда заметили дубликаты. Есть много причин, по которым люди могут добавить товар в корзину несколько раз:
Как дизайнеры могут напоминать пользователям, что элемент уже добавлен в корзину? Вот несколько вариантов:
Как настроить кнопку WooCommerce «Добавить в корзину»
Divi: самая простая тема WordPress для использования
Divi: Лучшая тема WordPress всех времен!
Есть два способа сделать это:
Шаг 1: Установите плагин на WordPress простой пользовательский CSS и активировать его
Мы собираемся использовать плагин WordPress для внедрения кода CSS на страницы Интернет-магазин WooCommerce, Вы можете скачать плагин: Простой Пользовательский CSS
После активации плагина в меню будет добавлено новое подменю. apparence :
Доступ к этому разделу приведет вас к интерфейсу с текстовым полем, где вы можете ввести собственный код CSS.
Поместите следующий CSS в текстовое поле и нажмите « Обновление пользовательских CSS«.
Теперь вы можете получить доступ к своему интернет-магазину, вы заметите, что кнопки фактически изменили цвета.
Легко создайте свой сайт с Elementor
Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]
Чтобы настроить цвет кнопок, чтобы они наконец приобрели желаемый вид,
Заменить собственность » Backgroud: красный важно! По цвет вашего выбора. Обновите коды и снова войдите в свой интернет-магазин. Фактически, используя стиль, который мы только что предоставили, вы сможете полностью изменить структуру кнопок.
После небольшого исследования вы сможете создавать уникальные кнопки в стиле, соответствующем вашей теме WordPress (особенно если последний несовместим с WooCommerce).
В следующем примере вы можете использовать следующий код CSS.
Для тех, кто хочет оптимизировать производительность своего интернет-магазина, будь то с точки зрения конверсии или продажи товаров,
Мы также предлагаем премиальные плагины 3 для WordPress, предназначенные для этой задачи.
1. WooCommerce восстанавливает забытую корзину
ваши клиенты часто заполняют свои корзины и оставляют их: благодаря WooCommerce Восстановление Заброшенные Корзина вы сможете связаться с ними, напомнить им о том, что они купили, и предложить им завершить свои действия.
Вы ищете лучшие темы и плагины WordPress?
Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]
Установите интервал времени между оставлением корзины и отправкой клиенту персонализированного напоминания по электронной почте с прямой ссылкой на страницу покупок, чтобы он мог увидеть, на чем он был. указать на покупку.
2. WooCommerce Скрыть цену и плагин кнопки «Добавить в корзину»
Плагин WooCommerce Hide Price позволяет продавцам создавать несколько правил, чтобы скрыть цены или скрыть кнопку «добавить в корзину» от клиентов, не вошедших в систему, или пользователей, которые имеют определенные права доступа к вашему веб-сайту электронной коммерции.
Вы можете скрыть цену и кнопку «добавить в корзину» для определенных продуктов или в определенных категориях. Вы можете заменить их персонализированным текстом или кнопкой, которая переведет их в контактную форму. Вы можете создать столько правил, которые будут автоматически скрывать цену и » Добавить в панельr ”в зависимости от того, что вы хотите.
3. Переключатель валют WooCommerce
Этот плагин позволяет переключать цены на товары из одной валюты в другую в режиме реального времени.
Это особенно важно в электронной коммерции, поскольку она предназначена для всего мира. Этот плагин гарантирует, что независимо от того, где находятся ваши клиенты, они всегда смогут делать заказы в вашем интернет-магазине.
Рекомендуемые ресурсы
Откройте для себя другие рекомендуемые ресурсы, которые помогут вам оптимизировать производительность вашего интернет-магазина.
Легко создайте свой интернет-магазин
Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]
Заключение
Вот! Это все, что касается этого руководства, посвященного настройке кнопок. Добавить в корзину от WooCommerce. Не стесняйтесь поделиться им с друзьями на своем социальные сети предпочтительным.
Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.
А пока расскажите о своем Комментарии и предложения в специальном разделе.
Те, кто прочитал эту статью, также купили
Эта статья содержит комментарии 8
Привет,
Может ли этот же плагин помочь мне изменить цвет звездочек с отзывами клиентов на страницах продуктов woocommerce? заранее спасибо
Я никогда не пробовал и очень сомневаюсь, что это возможно.
Здравствуйте, а как увеличить размер кнопки Добавить в корзину? спасибо
Вы должны использовать код CSS для этого. В противном случае, я рекомендую плагин Yellow Pencil, который вы можете скачать на Codecanyon.
Кнопка для сайта: виды и способы создания
Делаем их функциональными
Из этого материала вы узнаете:
Идеальная кнопка для сайта — это когда посетители не отвлекаются на нее, но постоянно нажимают. Хорошая кнопка должна выглядеть естественно и органично, чтобы пользователь не оценивал ее на сознательном уровне, а автоматически следовал указанному призыву.
Практически на любом ресурсе вы найдете больше ссылок, чем кнопок. Кнопки представляют собой изображения, для создания которых необходимо потратить определенные усилия. А ссылку можно сделать за секунду. При этом линки и кнопки решают практически одинаковые задачи. В каких случаях необходимо использовать кнопки, а когда можно обойтись ссылками?
Основные типы кнопок для сайта
Зачем вообще на сайте кнопки? Ответ очевиден: чтобы пользователи по ним кликали! Яркая, заметная и красивая кнопка привлекает внимание намного успешнее, чем маленькая тусклая ссылка. При этом, если интерфейс пестрит различными кнопками, которые ещё и анимированы, он начинает утомлять пользователя, поскольку они конкурируют за его внимание. В результате люди нередко уходят с таких страниц, не понимая, чего от них хотят создатели веб-ресурса.
Поэтому умеренность является золотым правилом во всём, что касается кнопок: каждая страница (точнее, видимая область экрана) не должна содержать более одного-двух таких элементов. Функция кнопки – то, что произойдёт при её нажатии – должна быть интуитивно понятна пользователю.
Объём обычно придают прямоугольным кнопкам. Они оживляют плоский интерфейс, добавляют в него фактурность и глубину, акцентируют пользователя на главных или самых объёмных областях страницы. Желательно показать, что кнопка кликабельна, посредством сочетания оттенков.
«Мы обязаны делать клиентов довольными
любыми доступными способами!»
Алексей Молчанов,
основатель международной IT-компании Envybox
Текущая ситуация в стране и мире с каждым днем набирает все больше и больше оборотов.
Сегодня каждый предприниматель задается вопросом: “А что же сейчас будет с моим бизнесом?”
Если вы поддадитесь всеобщей панике и “заморозите” деятельность компании, то ни к чему хорошему это не приведет. Если вы видите, что кризис неизбежен и доход компании уже начинает сокращаться — не приостанавливайте свою деятельность. Ни в коем случае не сокращайте расходы на рекламу и не прекращайте продвижение (если вас, конечно, не закрыли из-за Постановления правительства).
Направляйте максимум усилий и внимания на продвижение своей компании и увеличение потока новых клиентов.
Для того, чтобы у вас было понимание, как следует себя вести во время кризиса — поделюсь с вами полезными инструментами, которые помогли нам не только преодолеть кризис, но и выйти из него победителями.
Ниже вы можете скачать чек-лист из простых и доступных для любой компании инструментов привлечения стабильного потока новых клиентов или возвращения существующих. А также в качестве бонуса получить бесплатное использование наших сервисов для увеличения заявок с сайта в течение 7 дней и 30% скидку на их подключение. Желаем вам удачи, новых клиентов и больших продаж!
В качестве единственного элемента на строке. Такие кнопки призваны показать значимость целевого действия на сайте либо в мобильном приложении и выделиться среди разнообразного контента.
3D-кнопки визуально поднимаются и меняют цвет при клике. Особенно они заметны на контрасте с плоскими кнопками.
Они тоже меняют цвет, но не приподнимаются. В отличие от объёмных, такие кнопочки меньше выделяются на фоне контента и не отвлекают внимание от него.
В диалоговых окошках, где управляющие элементы должны сочетаться с контентом, а также на панелях инструментов внизу (там пользователю проще всего их найти).
3. Переключатель (слайдер)
Предназначен для переключения между двумя или несколькими состояниями.
Обычно – в качестве кнопки «Вкл / Выкл». Полезны такие кнопки и для управления группой связанных элементов при условии, что эта их функция и принадлежность к данной группе ясно отражены в дизайне интерфейса. К подобным элементам предъявляются ещё два требования:
Иконки уместны там, где пользователь может захотеть отменить свой выбор (к примеру, добавить товару «звёздочку» или снять её), и иными способами это никак не сделать. В приложениях и на сайтах такие кнопки обычно помещают в панель инструментов в качестве переключателя состояний или элемента управления.
4. Контурная кнопка
Это простые кнопки для сайта, обычно прямоугольные, без заливки и с тонким контуром, содержащие текст.
В качестве призыва к действию они не пойдут, а вот для вторичного контента, который не должен отвлекать внимание от целевой кнопки, будут вполне уместны. Пользователь должен замечать контурные кнопки (если это для него актуально) уже после того, как в его поле зрения попала кнопка CTA, более контрастная и яркая.
5. Плавающая кнопка с выпадающим меню
Такие кнопки типичны для материального дизайна, разработанного Google. Кнопка с закруглёнными уголками приподнимается при клике и отбрасывает тень, напоминающую чернильное пятно.
Обычно применяются там, где необходимо вызвать функциональную клавишу.
Их отличает некоторая приподнятость над остальным интерфейсом, они словно парят над ним. Могут осуществлять морфинг и запуск функций, переносить точку привязки.
Читайте другие статьи по теме повышение конверсии сайта
Выбор типа кнопки для сайта
Стилистика кнопок для сайта определяется их важностью, количеством контента в видимой области экрана и разметкой страницы.
У кнопки есть несколько состояний. Плохо, если при наведении и клике она никак не меняется: тогда непонятно, кнопка ли это вообще, и пользователю приходится нажимать на неё, чтобы выяснить это.
Поэтому для данного элемента интерфейса так важно продумывать визуальное оформление смены состояний.
В своём обычном состоянии кнопка должна быть похожа на кнопку – это основное требование. В противном случае пользователь будет испытывать недоумение по поводу кликабельности объектов (как, например, в меню настроек Windows 8).
При наведении мыши кнопка должна визуально меняться: тогда пользователь увидит, что это интерактивный объект и что на его действие последует отклик.
Дизайн веб-страницы или приложения, особенно кнопки, можно анимировать различными способами, чтобы не только показать, что клик состоялся, но и сделать интерфейс более интересным, креативным.
Кнопка либо приобретает соответствующий вид, либо исчезает вовсе.
У скрытия кнопки с сайта есть свои плюсы:
Если оставить кнопку на месте и придать ей соответствующий вид, то:
Как сделать кнопку для сайта
1. Простая кнопка для сайта
Простейшая кнопка для сайта реализуется HTML-тегами button и input c определённым типом. У этих тегов отсутствует атрибут href, перекидывающий пользователя на указанную страницу. Но можно снабдить их атрибутом onclick – небольшой вставкой javascript’а, в которой прописывается целевая страница:
2. Кнопка с фоновой картинкой
При наличии рисованных кнопок в макете сайта можно реализовать их с помощью обычной ссылки, заключив в неё файл картинки:
Для этого вам потребуется:
Кстати, можно обойтись и одним CSS: кнопку для сайта полностью описать в стилях, включая фоновое изображение, скругление углов, и т. п. В шаблоне странице ссылке присваивается определённый класс.
Пример оформления кнопки на CSS:
В разделе “Панель управления” – “Дизайн” – “Редактор / CSS” напишите код вроде следующего:
.site-button <
background-color: #488bfa;
border: 2px solid #ffffff;
color: #ffffff;
padding: 12px 26px;
border-radius: 10px;
font-size: 17px;
>
И не забудьте про HTML-код кнопки:
Вероятно, CSS-код показался вам сложным и запутанным, если вы никогда не работали с ним. Но потребуются лишь некоторые настройки: размер шрифта (лучше в пикселях), фоновый цвет в формате HEX (таблица этих цветов легко находится с помощью поисковиков), отступы.
3. Кнопка на сторонний сайт
Иногда нужно отдавать свою готовую кнопку на сайты пользователям, чтобы они могли её установить у себя. Предоставляйте им полный HTML-код, чтобы они могли его скопировать и без проблем вставить на свой сайт. Такую заготовку под кнопку лучше оборачивать тегом textarea.
Топ 6 полезных статей для руководителя:
Особенности распространенных кнопок для сайта
Простой совет дизайнерам и веб-мастерам касательно кнопок покупки: не усложняйте себе жизнь. Раньше, всего четыре-пять лет назад, пользователи ещё вчитывались в подписи на таких кнопках, но сейчас все уже настолько привыкли, что можно не писать текст и обойтись иконкой корзины.
Большинство пользователей интернета очень опытны: кнопка с призывом «Купить» не оказывает на них принуждающего действия, и они знают, что при нажатии на неё не произойдёт автоматического списания денег с их карты, а «Положить в корзину» означает не «выбросить в мусорку», а отложить на будущее, чтобы не потерять товар. Поэтому просто не тратьте время, придумывая оригинальные названия для подобных кнопок: продажи от этого не вырастут.
Но если вам интересно разобраться, давайте порассуждаем логически.
Если при клике на кнопку в карточке товара он кладётся в корзину, а после этого пользователя сразу перекидывают на страницу оформления заказа, то целесообразно назвать такую кнопку «Купить». Но в интернет-магазинах обычно не оформляют заказ сразу, а набирают несколько товарных позиций.
Некоторые считают, что формулировка «Добавить в корзину» более конверсионна, чем «Купить»: первая подразумевает процесс выбора товаров, не требующий принимать решение о покупке прямо сейчас. Возможно, в этом есть доля истины. Вопрос в том, какое действие вы считаете конверсионным. Если это добавление продукта в корзину, то именно так и следует называть кнопку (помня о том, что корзины часто бросают, и что отложить товар – ещё не значит купить и оплатить его). Если конверсией считается оформленный и оплаченный заказ, то не стесняйтесь дать кнопке название «Купить».
Кроме того, ярлык «Добавить в корзину» намекает на приобретение нескольких товарных позиций: сначала их нужно найти и положить в корзину, а затем заполнить все поля формы заказа.
Другой вариант – обойтись без глагола и сократить название кнопки до «В корзину». Не все это одобряют: есть мнение, что призыв к действию неэффективен без глагола. Но вы можете выбрать и такую формулировку.
Встречаются на сайтах также кнопки «Заказать», и их использование вполне оправданно, если товар можно не только приобрести сразу (из имеющихся в наличии), но и заказать для последующей покупки (когда он поступит на склад). В этом случае для имеющихся товаров лучше ставить кнопку «Купить», чтобы пользователь осознавал разницу между этими двумя схемами приобретения.
Кстати, для онлайн-сервисов доставки еды лучше всего подходит именно кнопка «Заказать», потому что люди обычно говорят «Давай закажем пиццу», а не «Давай купим пиццу». Впрочем, никто не запрещает использовать на таком сайте или в приложении традиционные кнопки «Положить в корзину» и «Купить».
Значимость подписи на кнопках заказа сильно преувеличена (не в последнюю очередь экспертами, которые стремятся продвинуть свои обучающие семинары и курсы).
Сегодня онлайн-покупки уже практически никого не удивляют. Наверное, ещё остались жители деревень, затерянных где-то в сибирских лесах, пугающиеся призыва «Купить» и лучше воспринимающие деликатную формулировку «Добавить в корзину», но достоверной статистики по ним нет (отдельные случаи, о которых в интернете рассказывают как о курьёзах, не в счёт).
Теперь выберем цвет кнопки «Купить» на сайте.
С помощью Гугла или Яндекса можно найти статистику по проведённым А/Б тестам, показывающую, что красные кнопки наименее эффективны, зато зелёные работают прекрасно, оранжевые – тоже неплохо. Но есть и противоположная точка зрения. Поэтому не стоит принимать каждое подобное утверждение на веру и срочно переделывать сайт.
Кроме цвета, экспериментировать и тестировать на целевой аудитории можно и текстуру кнопок. И приходить к выводам, что романтичные юные девушки охотнее кликают по розовым блестящим кнопочкам, кнопки с древесной фактурой повышают продажи натуральных продуктов и стройматериалов, а «железные» – товаров для мужчин.
Это не меньший бред, чем тестировать цвет кнопок на сайте.
Вы действительно считаете, что ваши потенциальные покупатели не кликают на большую синюю кнопку «Купить», контрастную к белому фону, только из-за её цвета, а как только вы перекрасите её в сочный оттенок зелёного, сразу же начнут покупать, потому что ощутят умиротворение, безопасность и доверие?
Если вам кажется, что низкая конверсия связана исключительно с цветом целевой кнопки на сайте, то для начала решите остальные проблемы веб-ресурса, а затем уже принимаетесь за поиск идеального цвета.
Посетителя интернет-магазина, твёрдо вознамерившегося купить что-либо (а не просто изучить ассортимент, сравнить цены или даже полюбоваться симпатичными моделями, демонстрирующими одежду – в зависимости от ассортимента магазина), ничто не остановит в совершении покупки. Естественно, если его устраивают все условия (стоимость, способы доставки и т. п.), магазин вызывает доверие, а оператор присутствует онлайн и отвечает на все вопросы через встроенный чат.
Однозначно плохое цветовое решение – это белый фон, белая кнопка и белый текст. Что угодно лучше, и в этом можно убедиться без тестирования.
Кнопка красного цвета менее эффективна, если расположить её по соседству с зелёной. Контрасты – это не всегда хорошо и полезно.
Если рядом с насыщенно-красной кнопкой расположена серая с серым же текстом, то эта монохромная кнопка будет однозначно восприниматься как неактивная, отключенная, и мало кто станет кликать на неё.
При этом монохромные серые кнопки (второстепенные – «Быстрый заказ», «Сравнить», «Добавить в избранное») есть во многих магазинах, это довольно популярная ошибка. Вроде бы дизайнеры стремятся всё сделать правильно и обеспечить достаточный контраст между главной целевой кнопкой и вспомогательными элементами, но забывают о пользовательских привычках, сложившихся за много лет работы с операционными системами: всё, что окрашено серым, будь то чекбокс или ссылка, неактивно и некликабельно.
В животном мире распространён такой способ самозащиты, как мимикрия под мёртвых: хищники не интересуются мертвечиной. Так и кнопки светло-серой гаммы с таким же цветом текста: они достоверно маскируются под неактивные, и пользователю не приходит в голову нажимать их.
При этом цвет кнопки «Купить» (при условии, что она достаточно крупная, отделена отступами от окружающих объектов и контрастна) не столь важен. Аргументы и контраргументы против различных цветов приводились выше.
Поэтому А/Б тестирования интернет-магазинов показывают противоречивые результаты: где-то повышает конверсию красная кнопка, где-то – зелёная. Зачастую секрет заключается не в самой кнопке, не в товаре и даже не в целевой аудитории, а в дизайне всего интерфейса и том контексте, который окружает кнопку на сайте.
2. «Заказ» или «Быстрый заказ»
Это однозначно полезный элемент, который следует включить в дизайн магазина. Однако и здесь есть нюансы.
Кнопка «Купить в один клик» необходима там, где обычно приобретают единственный товар, а не набирают целый список. Или для дорогих товаров.
Для магазинов, где клиенты обычно берут более одной товарной позиции, в этой кнопке нет смысла: если сделать её слишком заметной и она перебьёт главную кнопку «Купить», может уменьшиться сумма среднего чека (потому что клиенты пойдут сразу оформлять заказ и не продолжат класть товары в корзину), а менеджерам придётся тратить больше времени на консультирование покупателей по телефону.
Поэтому так важна грамотная расстановка акцентов на кнопках. Если приоритетность главной целевой кнопки удачно подчёркивается дизайнерскими приёмами, опция быстрого заказа тоже может присутствовать и при этом не ломать сложившуюся схему покупки. Основное внимание посетителя достанется кнопке «Купить».
Ещё одна нередкая проблема кнопок моментального заказа – это то, что данные по таким заказам попадают в отдельный список (а не в общий, как при обычной покупке товаров через корзину) либо вообще приходят только в почту менеджерам. Это, по сути, функционал кнопки «Заказать звонок» для сайта и для шоппинга не подходит.
В чём же причина? В том, что моментальный заказ требует от клиента меньше данных, из-за чего не дотягивает до полноценной покупки и попадает в другую базу или инфоблок либо вообще на электронную почту менеджера. А это усложняет бизнес-процессы магазина, требует дополнительных действий и создаёт риск потери заказов. Устанавливая на сайт кнопку быстрого заказа, проследите, чтобы все подобные заказы попадали в общий список.
Ещё одна распространённая проблема – необходимость каждый раз вбивать своё ФИО и номер телефона при быстром заказе. Данные авторизованных пользователей должны подтягиваться в форму автоматически, чтобы человеку оставалось только подтвердить оформление заказа. Тогда покупка действительно будет быстрой.
Кстати, существует возможность объединять несколько моментальных заказов одного клиента. Это в какой-то степени решит проблему покупки ряда товарных позиций для тех пользователей, которые не любят заходить в корзину и предпочитают покупать за один клик.
Целесообразность добавления на сайт кнопки «В корзину» тоже вызывает много вопросов у дизайнеров и веб-мастеров. Ситуация аналогична предыдущей: всё зависит от специфики и ассортимента магазина. Для продуктов, при покупке которых нужно выбрать цвет, размер и другие характеристики, которые невозможно показать в краткой карточке товара на витрине, нет смысла в такой кнопке.
Например, очень странное впечатление будет производить кнопка «Отправить в корзину» в онлайн-магазине одежды: товар кладётся в корзину, но без возможности выбрать для себя нужный размер и расцветку. А если такая опция есть, то без сравнительной таблицы российских и зарубежных размеров и инструкции сложно определить свой размер. Это затрудняет выбор.
Однако в магазинах, торгующих бытовой химией, кнопка «В корзину» весьма уместна: такую продукцию обычно берут сразу, не присматриваясь к характеристикам, стремятся набрать всё нужное поскорее и оформить заказ. Наличие этой кнопки, впрочем, не мешает просмотру всех параметров товара, которые выводятся в карточке: объёма, веса, количества штук, аромата и т. п.
4. Оформление заказа
В корзине тоже имеются целевые кнопки, и их необходимо рассмотреть.
Как правило, в интернет-магазине существуют две разные корзины: главная (интерфейс оформления заказа, иногда в несколько шагов) и маленькая – блок с информацией в правом верхнем углу (количество отобранных товаров).
Крайне нежелательно давать одинаковое название кнопкам, ведущим в главную корзину, и кнопкам в карточках товаров, предназначенным для добавления понравившейся позиции. Это порождает некоторую путаницу. При наличии в товарных карточках на сайте кнопки «В корзину» придумайте другое обозначение для кнопки в малой корзине.
Это соответствует общему принципу: не называть одинаково элементы с разным функционалом и назначением.
Основная корзина проста и понятна с первого взгляда. Из кнопок здесь, если корзина пошаговая, есть только переход на следующий шаг и возврат к предыдущему. Подписи на кнопках должны отражать действие, совершаемое ими. Например, для пятишагового оформления заказа это будут следующие кнопки или ссылки: