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.
Комментарий недоступен
С тенью момент спорный, я потому и привел в статье ссылку на исследования (2017 года) в котором кнопки с тенью показывали себя лучше с точки зрения скорости поиска. Возможно, золотую середину можно найти в плоских кнопках но с полосой внизу, которая имитирует тень и объем (примеры прикладываю).
Комментарий недоступен
Безусловно, e-commerce - это про выгоду. Но если в результате тестов становится понятно, что кнопки с объемом/тенью понятнее для пользователей, то это и есть хороший UX
Наглядный пример UI и UX дизайнера — один про «красиво», а второй про «удобно».
Комментарий недоступен
Бля, Никита, у тебя такое милое портфолио, а ты такие глупые вопросы задаёшь ... Даже как-то неудобно :(
Комментарий недоступен
Немного изменил примеры кнопок в статье, спасибо за комментарий
Казалось бы - все очевидно. Но многие сайты продолжают тормозить продажи не придерживаясь элементарных вещей.
Спасибо, освежил свои знания )) Но если говорить о конверсии, то, имхо, кнопки тут играют минимальную роль.
Если мне нужно что-то купить, то я найду эту чёртову кнопку при любом раскладе. Но вот процесс оформления заказа убивает конверсию куда сильнее.
По ощущениям, 90% обычных интернет-магазинов вообще не парятся над этим, заставляя покупателя заполнять десятки ненужных полей, и в такой ситуации проще вернуться в поиск и попытать счастье на следующем сайте ))
Спасибо вам, за чтение и отзыв. Взрывного роста из-за изменений в кнопках, возможно, не будет, зависит от сайта. Но конверсия она так и собирается: там +0,1%, здесь +0,2% и так изменив несколько элементов можно увеличить конверсию на несколько процентов.
А про множество полей и варианты их сокращения я дописываю статью, на следующей неделе опубликую.
В статье про конверсии ни одной цифры.
А ещё столько нового узнал (нет)
Ну если вы всё знаете, то поздравляю. Но если судить по тому, что в большинстве сайтов Рунета с кнопками беда, то об этом знают немногие.
Твой материал - 100500 по данной теме, при чем из всех 100500 можно найти хорошие, но твой к ним я отнести не могу. А по поводу as is на российских сайтах - достаточно глупо искать связь между знаниям таких банальных вещей и применением их на практике
Комментарий недоступен
Орнул)
Ну как так получается то?
Пишут полезные статьи книги, рассказывают как нужно правильно делать.
И хочеться верить автору, пока не попадаешь на его собственный сайт.
Книгу нашел только с 3 -го раза. Это при том что я знал о ее существовании и целенаправленно искал на сайте.
Уже даже хотел воспользоваться поиском по сайту, но увы ((
Но зато прочел на сайте статью "Как повысить конверсию сайта с помощью поиска на 82%"
В конце статьи указана ссылка, пройдя по которой вы попадаете на страницу с огромным изображением книги и большим CTA контрастного цвета и размером на весь экран: “Скачать книгу бесплатно». Дополнительно переходить на другие страницы не нужно.
Чтобы не заметить это нужно очень сильно постараться. Но спасибо за вашу целеустремлённость :)
Зачем мне ваша инструкция после того как я уже ее скачал?
Я понял вашу задумку, сразу не оценил ))
Чтобы скачать книгу нужно было пройти квест по ее поиску на сайте.
Квест для вас это немного проскроллить? Или вы хотели получить полезную книгу совершенно бесплатно, при этом не сделав никаких действий?
Что касается функции поиска по сайту, то он необходим для сайтов с большим содержанием контента, например, интернет-магазины с тысячами товарных страниц. В случае с нашим сайтом, здесь одна страница с описанием услуги и несколько статей. В поиске нет необходимости.
Комментарий недоступен
Что именно вас смущает?
Что на сайте Adidas кнопка не в первом экране? У меня влезла на 13 дюймовом экране мака, хоть и немного обрезана.
Комментарий недоступен
Неправильно вас понял, сначала, слишком мелкий шрифт на изображении.
Выгода играет роль, конечно. Но большая разница в цене скорее исключение. При прочих равных (в т.ч. цене), UX играет большую роль.
Комментарий недоступен
Спасибо за книгу!
Спасибо за прочтение!
Собираю обратную связь, поэтому если будут комментарии или вопросы по книге – пишите.
Спасибо за материал, особенно за ссылки на исследования.
Комментарий недоступен
Хорошая статья!
👍🏼
Спасибо за статью. Полезно!
👍
Спасибо. В книжке весьма структурирована информация, приятно читается. Натолкнули на несколько идей по реализации.
В пункте 2.5.2 - сайта нет по перечисленным запросам в топе не из за текста на главной странице, так что пример так себе. Хотя сам посыл и правильный
Спасибо за фидбэк 🔥
Длинные тексты ещё работают в SEO по высоко-конкурентным запросам? По моим наблюдениям уже не так, как раньше
Есть нюансы, но в целом можно сказать, что влияние снизилось.
Комментарий недоступен
Сейчас проверил, всё работает, отправляется. Попробуйте ещё раз, если не получится, напишите на [email protected] и оперативно пришлют ссылку.
Комментарий недоступен
👍🏿
Что интересно. Чисто технически, на сайте ВелоДрайв, есть кнопки. Но увидеть их можно только если у вас не самый быстрый интернет и они не успевают скрыться))
Я как-то ловил кнопки, когда несколько раз менял локацию на сайте, думая, что проблема в городе. Но как бы там не было, вся суть в том, что потенциальные покупатели не будут так долго и упорно искать. Им проще выбрать другой магазин в Яндекс.Маркете, в котором рекламируется Велодрайв. К тому же, там есть варианты и дешевле или по той же цене, но с подарком (замок для велосипеда) - это всё в рамках одного города.
Надо эту статью кинуть в баду, чтобы там научились делать юзабельные интерфейсы, а то ощущение, будто у тамошних юиксов руки не из того места растут.
Согласен, можно было бы написать материал про меховые шубы или жилеты, а этот текст скучен https://vc.ru/design/58713-7-tochek-rosta-konversii-ili-kak-povysit-klikabelnost-knopok
На столько скучен, что почти 9 000 просмотров и 440 сохранений в избранное.
Если ничего стоящего и полезного по теме статьи сказать не способны, то лучше промолчать - за умного сойдёте.