7 точек роста конверсии или как повысить кликабельность кнопок

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

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. Кнопка-призрак. Главная кнопка на странице должна быть контрастного цвета, чтобы выделяться от фона и окружающих элементов. Для менее приоритетных кнопок лучше не использовать цвет, сделав их прозрачными и поместив в рамку — это так называемые кнопки-призраки (ghost buttons).

Цвет кнопки отделяет главную кнопку (сверху) и второстепенную (снизу)

Но не стоит делать кнопку-призрак основной, иначе она сливается с фоном и становится менее заметной.

Кнопка-призрак в качестве главной кнопки неудачное решение
Так гораздо лучше, 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.com

7.5. Не перегружайте кнопки текстом. Для этого можно воспользоваться рекомендациями выше.

Nix.ru

В данной статье рассмотрены лишь семь точек роста конверсии. Если вы хотите узнать больше, то скачивайте книгу «Конверсия на стероидах» с сайта Conversant.me.

0
47 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

С тенью момент спорный, я потому и привел в статье ссылку на исследования (2017 года) в котором кнопки с тенью показывали себя лучше с точки зрения скорости поиска. Возможно, золотую середину можно найти в плоских кнопках но с полосой внизу, которая имитирует тень и объем (примеры прикладываю).

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Безусловно, e-commerce - это про выгоду. Но если в результате тестов становится понятно, что кнопки с объемом/тенью понятнее для пользователей, то это и есть хороший UX

Ответить
Развернуть ветку
Bender Rodriguez

Наглядный пример UI и UX дизайнера — один про «красиво», а второй про «удобно».

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Bender Rodriguez

Бля, Никита, у тебя такое милое портфолио, а ты такие глупые вопросы задаёшь ... Даже как-то неудобно :(

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Немного изменил примеры кнопок в статье, спасибо за комментарий

Ответить
Развернуть ветку
Георгий Свиридов

Казалось бы - все очевидно. Но многие сайты продолжают тормозить продажи не придерживаясь элементарных вещей.

Ответить
Развернуть ветку
Боря Бро

Спасибо, освежил свои знания )) Но если говорить о конверсии, то, имхо, кнопки тут играют минимальную роль.

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

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

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Спасибо вам, за чтение и отзыв. Взрывного роста из-за изменений в кнопках, возможно, не будет, зависит от сайта. Но конверсия она так и собирается: там +0,1%, здесь +0,2% и так изменив несколько элементов можно увеличить конверсию на несколько процентов.

А про множество полей и варианты их сокращения я дописываю статью, на следующей неделе опубликую.

Ответить
Развернуть ветку
Reb Rending

В статье про конверсии ни одной цифры.
А ещё столько нового узнал (нет)

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

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

Ответить
Развернуть ветку
Reb Rending

Твой материал - 100500 по данной теме, при чем из всех 100500 можно найти хорошие, но твой к ним я отнести не могу. А по поводу as is на российских сайтах - достаточно глупо искать связь между знаниям таких банальных вещей и применением их на практике

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Даниил Евстропов

Орнул)

Ответить
Развернуть ветку
zulus

Ну как так получается то?
Пишут полезные статьи книги, рассказывают как нужно правильно делать.
И хочеться верить автору, пока не попадаешь на его собственный сайт.
Книгу нашел только с 3 -го раза. Это при том что я знал о ее существовании и целенаправленно искал на сайте.
Уже даже хотел воспользоваться поиском по сайту, но увы ((
Но зато прочел на сайте статью "Как повысить конверсию сайта с помощью поиска на 82%"

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

В конце статьи указана ссылка, пройдя по которой вы попадаете на страницу с огромным изображением книги и большим CTA контрастного цвета и размером на весь экран: “Скачать книгу бесплатно». Дополнительно переходить на другие страницы не нужно.

Чтобы не заметить это нужно очень сильно постараться. Но спасибо за вашу целеустремлённость :)

Ответить
Развернуть ветку
zulus

Зачем мне ваша инструкция после того как я уже ее скачал?
Я понял вашу задумку, сразу не оценил ))
Чтобы скачать книгу нужно было пройти квест по ее поиску на сайте.

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Квест для вас это немного проскроллить? Или вы хотели получить полезную книгу совершенно бесплатно, при этом не сделав никаких действий?

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Что именно вас смущает?
Что на сайте Adidas кнопка не в первом экране? У меня влезла на 13 дюймовом экране мака, хоть и немного обрезана.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Неправильно вас понял, сначала, слишком мелкий шрифт на изображении.

Выгода играет роль, конечно. Но большая разница в цене скорее исключение. При прочих равных (в т.ч. цене), UX играет большую роль.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Antony Divnich

Спасибо за книгу!

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Спасибо за прочтение!
Собираю обратную связь, поэтому если будут комментарии или вопросы по книге – пишите.

Ответить
Развернуть ветку
Наталья Плоскина

Спасибо за материал, особенно за ссылки на исследования.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Семён Пиндак

Хорошая статья!

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

👍🏼

Ответить
Развернуть ветку
Илья Соболев

Спасибо за статью. Полезно!

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

👍

Ответить
Развернуть ветку
Илья Кофеман

Спасибо. В книжке весьма структурирована информация, приятно читается. Натолкнули на несколько идей по реализации.
В пункте 2.5.2 - сайта нет по перечисленным запросам в топе не из за текста на главной странице, так что пример так себе. Хотя сам посыл и правильный

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Спасибо за фидбэк 🔥

Длинные тексты ещё работают в SEO по высоко-конкурентным запросам? По моим наблюдениям уже не так, как раньше

Ответить
Развернуть ветку
Илья Кофеман

Есть нюансы, но в целом можно сказать, что влияние снизилось.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Сейчас проверил, всё работает, отправляется. Попробуйте ещё раз, если не получится, напишите на [email protected] и оперативно пришлют ссылку.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

👍🏿

Ответить
Развернуть ветку
Лёша Басов

Что интересно. Чисто технически, на сайте ВелоДрайв, есть кнопки. Но увидеть их можно только если у вас не самый быстрый интернет и они не успевают скрыться))

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Я как-то ловил кнопки, когда несколько раз менял локацию на сайте, думая, что проблема в городе. Но как бы там не было, вся суть в том, что потенциальные покупатели не будут так долго и упорно искать. Им проще выбрать другой магазин в Яндекс.Маркете, в котором рекламируется Велодрайв. К тому же, там есть варианты и дешевле или по той же цене, но с подарком (замок для велосипеда) - это всё в рамках одного города.

Ответить
Развернуть ветку
Санан Фатуллазаде

Надо эту статью кинуть в баду, чтобы там научились делать юзабельные интерфейсы, а то ощущение, будто у тамошних юиксов руки не из того места растут.

Ответить
Развернуть ветку
Шкура Шкуркин

Согласен, можно было бы написать материал про меховые шубы или жилеты, а этот текст скучен https://vc.ru/design/58713-7-tochek-rosta-konversii-ili-kak-povysit-klikabelnost-knopok

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

На столько скучен, что почти 9 000 просмотров и 440 сохранений в избранное.
Если ничего стоящего и полезного по теме статьи сказать не способны, то лучше промолчать - за умного сойдёте.

Ответить
Развернуть ветку
44 комментария
Раскрывать всегда