№1 по увеличению конверсии в России

Кнопки и конверсия:
Как увеличить кликабельность кнопок на сайте

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

1. Наличие кнопки

Для того чтобы по кнопке кликали - эта кнопка на странице должна быть. На примере ниже, страница товара на сайте ВелоДрайв, кнопки на странице нет, а звонить и диктовать номер артикула не самый удобный вариант.
На странице товара сайта velodrive.ru отсутствует кнопка

2. Кнопка должна быть похожа на кнопку

Для того, чтобы по кнопке кликали, пользователям необходимо понимать, что перед ними кнопка. Для этого, кнопки необходимо делать понятными и узнаваемыми, они должны быть похожи на кнопки. Как этого добиться, рекомендации ниже.
Ссылка (слева) менее заметна, чем кнопка (справа)
2.1. Форма кнопки может быть любой (круглая, квадратная, прямоугольная), но наибольшее распространение получила именно прямоугольная, так как на ней вы сможете уместить надпись обозначающую назначение этой кнопки.
Кнопки на сайте Tmall (AliExpress)
2.2. Скругленные углы. Большинство кнопок в физическом мире имеют закругленные углы, и такие кнопки на сайте проще узнать. К тому же, скругленные углы привычнее и потому проще воспринимаются мозгом. Пожалуй, самый наглядный пример — это клавиши на клавиатуре.
Apple Magic Keyboard, все клавиши имеют скрученные углы
2.3. Объем. Кнопку лучше делать объемной, для этого используется тень по краям, градиент и рамка. Тренд последних лет это плоский дизайн (flat design), он красив, но один из явных недостатков плоского дизайна заключается в том, что из-за отсутствия теней и объема кнопки сложнее отличить от других (некликабельных) элементов дизайна. Nielsen Norman group провели тест, в ходе которого выяснили, что объемные кнопки пользователи находят на 22% быстрее, чем плоские.
Плоская кнопка (слева) и объемная кнопка (справа)
2.4. Интерактив. Кнопку желательно делать отзывчивой, т.е. при наведении курсора менять цвет и объем кнопки. Так ещё при наведении курсора (до клика) становится понятно, что элемент кликабелен.
Кнопка по умолчанию (слева) и кнопка при наведении курсора (справа)

3. Царь-кнопка

Я вывел для себя одно хорошее правило: одна страница - одна главная кнопка. Не стоит перегружать страницу множеством кнопок, это рассеивает внимание, создает лишние вопросы и как следствие снижает кликабельность.
Nix.ru, множество кнопок рассеивает внимание и снижает кликабельность
Не заставляйте пользователей думать, дайте им только одну главную кнопку на странице. Это не означает, что на странице не может быть других кнопок. Они могут там быть, но их задачи второстепенные, поэтому их стоит сделать менее заметными с помощью размера и цвета кнопок, а также расположения на расстоянии от основной кнопки, создав свободное пространство. Это делается для того, чтобы второстепенные кнопки не конкурировали с основной за внимание пользователей.

4. Цвет кнопок

4.1. Кнопка-призрак. Главная кнопка на странице должна быть контрастного цвета, чтобы выделяться от фона и окружающих элементов. Для менее приоритетных кнопок лучше не использовать цвет, сделав их прозрачными и поместив в рамку - это так называемые кнопки-призраки.
Цвет кнопки отделяет главную кнопку (слева) и второстепенную (справа) на сайте Евросети
Но не стоит делать кнопку-призрак основной, иначе она сливается с фоном и становится менее заметной.
Кнопка-призрак в качестве главной кнопки неудачное решение
Так гораздо заметнее, mi-storekazan.ru
4.2. Цвета-подсказки. Распространено мнение, что цвет кнопки может подсказывать действие, например:

Положительное действие (CTA: добавить, отправить, сохранить, загрузить): синий, зеленый;
Отрицательное действие (CTA: удалить, заблокировать, сбросить): красный;
Нейтральное действие (CTA: узнать больше, сравнить, добавить в избранное): черный;
Недоступное действие: серый.
Цвет кнопок
Основано данное мнение на том, что человек с детства привыкает к значению этих цветов, и этот опыт закрепляется на уровне подсознания. Потому что так работают светофоры на улицах (красный стой, зеленый иди). Так работают телефоны (зеленый начать звонок, красный сбросить звонок) и так далее.
Привычное значение красного и зеленого цветов
Но на деле ситуация с восприятием цветов состоит несколько иначе. Красный цвет светофора выбран не из-за психоэмоционального восприятия цвета и не из-за его символической интерпретации. Ведь вид красного яблока или красной вишни ни у кого не вызывает отрицательных, тревожных или негативных эмоций. В Китае, красный - цвет радости, жизни. В Индии, родине цветового символизма, аналогично.

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

Но вернемся к конверсии, в результате теста кнопок разных цветов лучшая конверсия вышла у кнопки красного цвета - 52,25%, а худший показатель оказался у кнопки зеленого цвета 41,46%. Другими словами, ситуация абсолютно противоположная цветам светофора. Что говорит в пользу закона Рэлея и красный цвет более заметен.

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

  • С помощью крупного размера можно привлечь внимание, поэтому главную кнопку лучше делать крупнее.
  • В мобильных устройствах отсутствует курсор мыши, а палец человека больше курсора, поэтому и кнопки необходимо делать больше, чтобы по ним удобно было попадать подушечками пальцев. В MIT провели исследование, в рамках которого выявили, что средний размер подушечек пальцев составляют от 10 до 14 мм, а кончики пальцев - от 8 до 10 мм. Поэтому рекомендуемый минимальный размер кнопки 10 х 10 мм.
UX Magazine (слева) и руководство для разработчиков от Apple (справа)
Другой важный момент, который можно отнести к размерам - это расстояние между кнопками. Если кнопки находятся близко друг к другу, пользователи мобильных устройств могут случайно нажать неправильную кнопку пальцем. Рекомендуемое расстояние между кнопками 3 мм.
6. Расположение кнопок
Кнопки должны должны быть заметны, для этого их лучше всего размещать там, где их ожидают увидеть, например рядом с товаром на странице товара или рядом с итоговой ценой в корзине. Главную кнопку на странице необходимо размещать в первом экране. Не заставляйте пользователей искать важные кнопки по сайту, это снизит конверсию.
Расположение кнопки
Главная кнопка "Купить" расположена на видном месте, в первом экране страницы товара
на сайте Спортмастер
Расположение кнопки
Главная кнопка "Оформить заказ" расположена в первом экране корзины на сайте Adidas.
Также кнопка продублирована на случай большого количества товаров в корзине.
Расположение кнопки
Главная кнопка "Оформить заказ" отсутствует в первом экране корзины маркетплейса "беру!"
7. Текст на кнопках
7.1. Понятный призыв к действию. Человек так устроен, что он с опасением относится к чему-то неизвестному. Поэтому, надпись на кнопке должна подсказывать, что ожидает человека после клика и побуждать к действию. В противном случае, кликабельность кнопки будет ниже.
Текст на кнопке должен ясно подсказывать действие
7.2. Динамичные надписи на кнопках. Другой вариант это изменяющиеся надписи на кнопках при наведении. По ним пользователь сразу понимает какое действие он совершит кликнув на кнопку. Это снижает неопределенность и повышает кликабельность.
Динамичные кнопки в Twitter, кнопка меняет надпись и цвет при наведении курсора, подсказывая действие
7.3. Иконки на кнопках. Помимо надписей, на кнопку можно вынести иконку, так становится гораздо понятнее. Ниже пример кнопки на сайте Amazon, обратите внимание, что благодаря иконке значение кнопки понятно на любом языке.
Amazon
Но применять иконки стоит обдуманно. Подбирайте простые и понятные иконки, не злоупотребляйте украшениями. Иконки должны подходить по смыслу тому разделу в который они направляют.
1 - личный кабинет (регистрация или вход);
2 или 3 - с этими иконками следует быть осторожнее, потому как они могут обозначать множество функций: избранное, сохраненное, список желаний, закладки, лайк, рейтинг. Легко запутаться;
4 - сравнение товаров (по характеристикам);
5 - просмотренные ранее товары;
6 - помощь (info).
7.4. Текст рядом с кнопками. Желательно указывать подписи к кнопкам и иконкам. Без подписи кликабельность снижается, а вместе с ней и конверсия. Пример: когда компания Microsoft выпустила почтовый клиент Outlook 97, то в новом интерфейсе для кнопок были использованы иконки основных команд. Но тесты показали, что люди практически не использовали панель инструментов с иконками. Тогда было принято решение внести исправления: перестановка иконок местами, отрисовка новых иконок. Но с каждым изменением ничего не менялось, люди не использовали иконки.
Microsoft Outlook 97
Наконец, команда проекта решила разместить текстовое описание рядом с каждой иконкой. И это сработало, люди начали активно использовать панель инструментов.
Microsoft Outlook 2003
Поянсяющий текст рядом с кнопками также помогают снять беспокойства пользователей, например: "Я сейчас нажму на кнопку и у меня спишут деньги?"
Подпись к кнопке, конверсия
Booking
7.5. Не перегружайте кнопки текстом. Для этого можно воспользоваться рекомендациями выше.
Подпись к кнопке, конверсия
Nix.ru
В данной статье рассмотрены лишь 7 точек роста конверсии. Если вы хотите увеличить конверсию вашего сайта по 524 параметрам, узнайте подробности в разделе Аудит сайта
Автор Эдуард Файзуллин. Опубликовано 17 апреля 2017 года.
Подробнее про рост конверсии в книге: "Конверсия на стероидах"
    Конверсия на стероидах, Эдуард Файзуллин
    • Навигация на сайте;
    • Главная страница сайта;
    • Сервисные функции;
    • Каталог товаров;
    • Страница товара;
    • Корзина;
    • Оформление заказа;
    • Цена и оплата;
    • Технические параметры.
    200 точек роста, 130 страниц, детально рассмотрены:
      Скачать книгу бесплатно
      Пожалуйста, оставьте свой e-mail и мы пришлём вам ссылку для скачивания книги
      + 1 раз в неделю мы рассылаем свежие статьи про увеличение конверсии сайтов
      Отписаться можно в любое время, в 1 клик
      Оставляя свой e-mail, вы принимаете условия обработки персональных данных
      Другие статьи по теме
      Больше статей о повышении конверсии в разделе Статьи