7 точек роста конверсии или как повысить кликабельность кнопок
Кнопки играют важную роль в процессе покупок в интернете: неправильно оформленные кнопки имеют низкую кликабельность и, как следствие, низкую конверсию. В статье пойдет речь о том, как это исправить.
1. Наличие кнопки
Для того, чтобы по кнопке кликали, кнопка на странице должна быть. Это может прозвучать странным, но сайты без кнопок есть. На примере ниже — страница товара интернет-магазина ВелоДрайв. Сайт рекламируется в «Яндекс.Маркете», но кнопки «Купить» на странице нет, а звонить и диктовать номер артикула не самый удобный вариант.
2. Кнопка должна быть похожа на кнопку
Для того, чтобы по кнопке кликали, пользователям необходимо понимать, что перед ними кнопка. Для этого их необходимо делать понятными и узнаваемыми, кнопки должны быть похожи на кнопки. Как этого добиться, рекомендации ниже.
2.1. Форма кнопки может быть любой (круглая, квадратная, прямоугольная), но наибольшее распространение получила именно прямоугольная, так как на ней вы сможете уместить надпись с её предназначением.
2.2. Скругленные углы кнопок. Большинство кнопок в физическом мире имеют закругленные углы, и такие кнопки на сайте проще узнать. К тому же, скругленные углы привычнее и потому проще воспринимаются мозгом. Пожалуй, самый наглядный пример — это клавиши на клавиатуре.
2.3. Объемные кнопки. Кнопку лучше делать объемной, для этого используется тень по краям, градиент и рамка. Тренд последних лет — плоский дизайн (flat design). Он красив, но один из явных недостатков в том, что из-за отсутствия теней и объема кнопки сложнее отличить от некликабельных элементов дизайна. Nielsen Norman group провели тест, в ходе которого выяснили, что объемные кнопки пользователи находят на 22% быстрее, чем плоские.
2.4. Интерактивные кнопки. Кнопку желательно делать отзывчивой, то есть при наведении курсора менять её цвет и объем. Таким образом, ещё при наведении курсора (до клика) становится понятно, что элемент кликабелен.
3. Царь-кнопка
Я вывел для себя одно хорошее правило, которое ещё ни разу меня не подвело: одна страница — одна главная кнопка. Не стоит перегружать страницу множеством кнопок, это рассеивает внимание, создает лишние вопросы и, как следствие, снижает кликабельность.
Не заставляйте пользователей думать, дайте им только одну главную кнопку на странице. Это не означает, что на странице не может быть других кнопок. Они могут там быть, но их задачи второстепенные, поэтому их стоит сделать менее заметными с помощью размера и цвета, а также расположения на расстоянии от основной кнопки, создав свободное пространство. Это делается для того, чтобы второстепенные кнопки не конкурировали с основной за внимание пользователей.
4. Цвет кнопок
4.1. Кнопка-призрак. Главная кнопка на странице должна быть контрастного цвета, чтобы выделяться от фона и окружающих элементов. Для менее приоритетных кнопок лучше не использовать цвет, сделав их прозрачными и поместив в рамку — это так называемые кнопки-призраки (ghost buttons).
Но не стоит делать кнопку-призрак основной, иначе она сливается с фоном и становится менее заметной.
4.2. Какой цвет кнопки выбрать. Распространено мнение, что цвет кнопки может подсказывать действие, например:
- Положительное действие (CTA: добавить, отправить, сохранить, загрузить): синий, зеленый;
- Отрицательное действие (CTA: удалить, заблокировать, сбросить): красный;
- Нейтральное действие (CTA: узнать больше, сравнить, добавить в избранное): черный;
- Недоступное действие: серый.
Основано данное мнение на том, что человек с детства привыкает к значению этих цветов, и этот опыт закрепляется на уровне подсознания. Потому что так работают светофоры на улицах (красный — стой, зеленый — иди). Так работают смартфоны (зеленый — начать звонок, красный — сбросить) и так далее.
Но на деле ситуация с восприятием цветов состоит несколько иначе. Красный цвет светофора выбран не из-за психоэмоционального восприятия цвета и не из-за его символической интерпретации. Ведь вид красного яблока или красной вишни ни у кого не вызывает отрицательных, тревожных или негативных эмоций. В Китае, красный - цвет радости, жизни. В Индии, родине цветового символизма, аналогично.
Дело в рэлеевском рассеянии, при котором красному цвету соответствует наибольшая длина волны видимого спектра. А это значит, что он менее всего подвержен рассеянию. При всех прочих равных, красный сигнал светофора водитель сможет различить на более удаленном расстоянии от перекрестка или пешеходного перехода и у него будет чуть больше времени для остановки.
Но вернемся к конверсии, в результате теста кнопок разных цветов лучшая конверсия вышла у кнопки красного цвета - 52,25%, а худший показатель оказался у кнопки зеленого цвета 41,46%. Другими словами, ситуация абсолютно противоположная цветам светофора. Что говорит в пользу закона Рэлея и красный цвет более заметен.
В ходе другого теста измерялся коэффициент конверсии разных цветов текста на кнопках. В результате, с большим преимуществом лидировал белый цвет, с конверсией почти 77%. Белый цвет оказался наиболее читабельным из-за высокого контраста с фоном кнопок разных цветов.
5. Размер кнопок
Размер кнопок важен по двум основным причинам:
- С помощью крупного размера можно привлечь внимание, поэтому главную кнопку лучше делать крупнее.
- В мобильных устройствах отсутствует курсор мыши, а палец человека больше курсора, поэтому и кнопки необходимо делать больше, чтобы по ним удобно было попадать подушечками пальцев. В MIT провели исследование, в рамках которого выявили, что средний размер подушечек пальцев составляет от 10 до 14 мм, а кончики пальцев — от 8 до 10 мм. Поэтому рекомендуемый минимальный размер кнопки 10х10 мм.
Другой важный момент, который можно отнести к размерам — это расстояние между кнопками. Если кнопки находятся близко друг к другу, пользователи мобильных устройств могут случайно нажать неправильную кнопку пальцем. Рекомендуемое расстояние между кнопками — 3 мм.
6. Расположение кнопок
Кнопки должны должны быть заметны, для этого их лучше всего размещать там, где их ожидают увидеть, например, рядом с товаром на странице товара или рядом с итоговой ценой в корзине. Главную кнопку на странице необходимо размещать в первом экране. Не заставляйте пользователей искать важные кнопки по сайту, это снизит конверсию.
7. Текст на кнопках
7.1. Понятный призыв к действию. Человек так устроен, что он с опасением относится к чему-то неизвестному. Поэтому надпись на кнопке должна подсказывать, что ожидает человека после клика, и побуждать к действию. В противном случае, кликабельность кнопки будет ниже.
7.2. Динамичные надписи на кнопках. Другой вариант — это изменяющиеся надписи на кнопках при наведении. По ним пользователь сразу понимает, какое действие он совершит, кликнув на кнопку. Это снижает неопределенность и повышает кликабельность.
7.3. Значки на кнопках. Помимо надписей, на кнопку можно вынести значок, так становится гораздо понятнее. Ниже пример кнопки на сайте Amazon, обратите внимание, что благодаря значку корзины значение кнопки понятно на любом языке.
Но применять значки стоит обдуманно. Подбирайте простые и понятные значки, не злоупотребляйте украшениями. Значки должны подходить по смыслу тому разделу в который они направляют.
- 1 — личный кабинет (регистрация или вход).
- 2 или 3 — с этими значками следует быть осторожнее, потому как они могут обозначать множество функций: избранное, сохраненное, список желаний, закладки, лайк, рейтинг. Легко запутаться.
- 4 — сравнение товаров (по характеристикам).
- 5 — просмотренные ранее товары.
- 6 — помощь (info).
7.4. Текст рядом с кнопками. Желательно указывать подписи к кнопкам и значкам. Без подписи кликабельность снижается, а вместе с ней и конверсия. Пример: когда компания Microsoft выпустила почтовый клиент Outlook 97, то в новом интерфейсе для кнопок были использованы значки основных команд.
Но тесты показали, что люди практически не использовали панель инструментов с значками. Тогда было принято решение внести исправления: перестановка значков местами, отрисовка новых значков. Но с каждым изменением ничего не менялось, люди не использовали кнопки с значками.
Наконец, команда проекта решила разместить текстовое описание рядом с каждым значком. И это сработало, люди начали активно использовать панель инструментов.
Поясняющий текст рядом с кнопками также помогают снять беспокойства пользователей, например: "Я сейчас нажму на кнопку и у меня спишут деньги?"
7.5. Не перегружайте кнопки текстом. Для этого можно воспользоваться рекомендациями выше.
В данной статье рассмотрены лишь семь точек роста конверсии. Если вы хотите узнать больше, то скачивайте книгу «Конверсия на стероидах» с сайта Conversant.me.
Также суд на четыре года запретил ей заниматься коммерческои деятельностью и удовлетворил гражданский иск на 587 млн рублей.
Публикуем первую главу из книги «Эффективный руководитель: готовые решения и практики управления» в трёх частях. Данная глава будет полезна всем руководителям для развития деятельности по управлению структурными подразделениями и организациями в целом. Предлагаем вашему вниманию вторую часть: «Пять главных качеств руководителя».
Сервис не работает с 28 февраля 2025 года — тогда СМИ сообщили об обысках у команды «Глаза Бога», но основатель бота это опровергал.
В 2023 я больше всех продавал на маркетплейсах в своей товарной категории, работал со всеми крупными ритейл-сетями, а всего бизнес приносил 1,1 млрд ₽ выручки и 55 млн ₽ прибыли в год.
Только выложила пост, а под ним уже куча бессмысленных комментов от самопиарщиков и ботов. Как же это бесит. Сегодня разберёмся, как справиться с этим и не стоять вышебалой возле каждого поста.
Комментарий недоступен
С тенью момент спорный, я потому и привел в статье ссылку на исследования (2017 года) в котором кнопки с тенью показывали себя лучше с точки зрения скорости поиска. Возможно, золотую середину можно найти в плоских кнопках но с полосой внизу, которая имитирует тень и объем (примеры прикладываю).
Наглядный пример UI и UX дизайнера — один про «красиво», а второй про «удобно».
Немного изменил примеры кнопок в статье, спасибо за комментарий
Казалось бы - все очевидно. Но многие сайты продолжают тормозить продажи не придерживаясь элементарных вещей.
Спасибо, освежил свои знания )) Но если говорить о конверсии, то, имхо, кнопки тут играют минимальную роль.
Если мне нужно что-то купить, то я найду эту чёртову кнопку при любом раскладе. Но вот процесс оформления заказа убивает конверсию куда сильнее.
По ощущениям, 90% обычных интернет-магазинов вообще не парятся над этим, заставляя покупателя заполнять десятки ненужных полей, и в такой ситуации проще вернуться в поиск и попытать счастье на следующем сайте ))
Спасибо вам, за чтение и отзыв. Взрывного роста из-за изменений в кнопках, возможно, не будет, зависит от сайта. Но конверсия она так и собирается: там +0,1%, здесь +0,2% и так изменив несколько элементов можно увеличить конверсию на несколько процентов.
А про множество полей и варианты их сокращения я дописываю статью, на следующей неделе опубликую.