Расскажу о первых факторах которые, по моему мнению, влияют на эффективность CTA (call to action) кнопки, она же «купить» в икоммерц-проектах.
Никаких советов и кейсов, скриншоты только для иллюстрации текста. Гипотезы каждый может построить сам и проверить их сплит-тестами.
Первый экран наше всё. В зависимости от проекта, до 50% пользователей не скроллят страницу вниз. То есть, если мы располагаем главную кнопку на втором экране — то сами, своими руками, снижаем конверсию.
Проверить легко: Смотрим на каком пикселе сверху кнопка и сверяем с высотой экранов юзеров по ГА. Например, если нижний край кнопки 900-й пиксел, то 30% юзеров получают ее (или ее часть) на втором экране.
То есть, в общем случае, чем выше CTA-кнопка, тем лучше. Традиционно ее место справа т.к. пользователи правши, а контент на большинстве сайтов слева.
Пример: На сайте Ламоды сапог в первом экране виден не весь, но кнопка на месте.
Размер это акцент, акцент это приоритет, приоритет это что? Да — кто здесь главный. Если мы хотим продавать, то СТА-кнопка должна быть главной, то есть большого размера.
Но, не слишком большого, чтобы не выпадать из дизайна и не занимать половину экрана.
На сайте Yoox нет сомнений какой элемент интерфейса главный.
Что мы имеем здесь. Хорошо, если он контрастный, то есть отличается от цвета основных элементов сайта. Но, выпадение его из дизайна создает ощущение кичливости. Именно поэтому я не считаю универсальными и лучшими оттенки красного/оранжевого (что принято в среде юзабилистов). Но, в некоторых случаях, они действительно работают, все зависит от дизайна сайта.
На сайте Вайлберрис кнопка контрастирует с дизайном и не случайно оранжевая.
Это мой любимый момент. В качестве текста внутри кнопки можно видеть на сайтах зоопарк вариантов. Я считаю, что текст в кнопке должен:
Сюда же: Стрелка спецсимволом (>) в кнопке, если после ее нажатия происходит переход и ее отсутствие если перехода нет.
На сайте Утконос решили вообще обойтись без текста. Хорошее решение? Не думаю.
В этом пункте сильная привязка к дизайну сайта, но в общем случае прямоугольную форму можно считать предпочтительной, она наиболее распространена и комфортна для пользователей.
На сайте Боско кнопка круглая, это непривычно. Я бы проверил ее на эффективность.
Как хорошо порой поиграть с кнопкой наведением мыши. Раз, два, три навел и вот — ты ее уже нажал. Редкий случай? Нет, это работает. Поэтому по оверлею меняем цвет, увеличиваем шрифт или еще каким-то образом меняем кнопку. И это правильно!
Еще можно по дать всплывающую подсказку, это тоже интерактивность.
Букинг.ком по наведению предлагает нажатием на кнопку перейти к новому шагу.
И, конечно, если кнопка выпуклая, то при нажатии ее лучше вдавливать, это и есть тактильность. Поэтому объемная кнопка с тенью обычно предпочтительней плоской.
Если у нас простыня контента (например, лендинг), то кнопку хорошо повторить. Почему? Чтобы для ее нажатия не надо было много скроллить вверх. И еще, чтобы напомнить пользователю зачем мы все это на странице ему показываем — чтобы он купил.
На сайте Онлайнтурс вверху страницы кнопка и внизу такая же.
Отдельный пункт, который и так понятен, но не всегда реализован. Некрасивая, кривая кнопка нажимается реже, даже если весь сайт еще ничего. Это барьер, который никому не нужен и убирается легко любым толковым дизайнером.
Кроме того, хорошая кнопка вокруг имеет отступ, это увеличивает ее самостоятельность и выделяет из всего контента. Плохая — липнет к краям и другим объектам.
Блёклые, шаблонные кнопки из 90-х на сайте Никса, сразу видно делали программисты.
При перезагрузке или скроллинге вниз и кнопа меняет цвет. В какой-то момент она цепляется за экран. Кому от этого плохо? — Никому. Привлекает внимание? — Да.
Прием для сплит-теста годится, пробуем.
Самый сложный момент. Не могу дать правил, но если у нас рядом с основной кнопкой другие, то они друг на друга влияют и это надо учитывать. Нет ничего хуже двух похожих рядом, это пессимизирует обе, снижая их CTR.
На сайте BEBAKIDS они чуть разные по размеру, но уж очень похожи.
Факторов много (описал основные), все влияют по отдельности, а их комбинация влияет вместе. Думаю, что каждый понимает как это отражается на конверсии — прямо и непосредственно. Я повышал за счет этого продуктивность в 1,5 раза и больше. В любом случае, над ней стоит хорошенько поработать.
Всем рабочих кнопок!
Никаких советов и кейсов, скриншоты только для иллюстрации текста. Гипотезы каждый может построить сам и проверить их сплит-тестами.
1) Расположение
Первый экран наше всё. В зависимости от проекта, до 50% пользователей не скроллят страницу вниз. То есть, если мы располагаем главную кнопку на втором экране — то сами, своими руками, снижаем конверсию.
Проверить легко: Смотрим на каком пикселе сверху кнопка и сверяем с высотой экранов юзеров по ГА. Например, если нижний край кнопки 900-й пиксел, то 30% юзеров получают ее (или ее часть) на втором экране.
То есть, в общем случае, чем выше CTA-кнопка, тем лучше. Традиционно ее место справа т.к. пользователи правши, а контент на большинстве сайтов слева.
Пример: На сайте Ламоды сапог в первом экране виден не весь, но кнопка на месте.
2) Размер
Размер это акцент, акцент это приоритет, приоритет это что? Да — кто здесь главный. Если мы хотим продавать, то СТА-кнопка должна быть главной, то есть большого размера.
Но, не слишком большого, чтобы не выпадать из дизайна и не занимать половину экрана.
На сайте Yoox нет сомнений какой элемент интерфейса главный.
3) Цвет
Что мы имеем здесь. Хорошо, если он контрастный, то есть отличается от цвета основных элементов сайта. Но, выпадение его из дизайна создает ощущение кичливости. Именно поэтому я не считаю универсальными и лучшими оттенки красного/оранжевого (что принято в среде юзабилистов). Но, в некоторых случаях, они действительно работают, все зависит от дизайна сайта.
На сайте Вайлберрис кнопка контрастирует с дизайном и не случайно оранжевая.
4) Текст (содержание)
Это мой любимый момент. В качестве текста внутри кнопки можно видеть на сайтах зоопарк вариантов. Я считаю, что текст в кнопке должен:
- точно отражать действие, конкретизировать его. В этом смысле «купить» не говорит ни о чем.
- включать эмпатию. Например «Положить в мою корзину»
- содержать призыв к действию, не быть нейтральным.
Сюда же: Стрелка спецсимволом (>) в кнопке, если после ее нажатия происходит переход и ее отсутствие если перехода нет.
На сайте Утконос решили вообще обойтись без текста. Хорошее решение? Не думаю.
5) Форма
В этом пункте сильная привязка к дизайну сайта, но в общем случае прямоугольную форму можно считать предпочтительной, она наиболее распространена и комфортна для пользователей.
На сайте Боско кнопка круглая, это непривычно. Я бы проверил ее на эффективность.
6) Интерактивность / тактильность
Как хорошо порой поиграть с кнопкой наведением мыши. Раз, два, три навел и вот — ты ее уже нажал. Редкий случай? Нет, это работает. Поэтому по оверлею меняем цвет, увеличиваем шрифт или еще каким-то образом меняем кнопку. И это правильно!
Еще можно по дать всплывающую подсказку, это тоже интерактивность.
Букинг.ком по наведению предлагает нажатием на кнопку перейти к новому шагу.
И, конечно, если кнопка выпуклая, то при нажатии ее лучше вдавливать, это и есть тактильность. Поэтому объемная кнопка с тенью обычно предпочтительней плоской.
7) Повторение
Если у нас простыня контента (например, лендинг), то кнопку хорошо повторить. Почему? Чтобы для ее нажатия не надо было много скроллить вверх. И еще, чтобы напомнить пользователю зачем мы все это на странице ему показываем — чтобы он купил.
На сайте Онлайнтурс вверху страницы кнопка и внизу такая же.
8) Качество исполнения
Отдельный пункт, который и так понятен, но не всегда реализован. Некрасивая, кривая кнопка нажимается реже, даже если весь сайт еще ничего. Это барьер, который никому не нужен и убирается легко любым толковым дизайнером.
Кроме того, хорошая кнопка вокруг имеет отступ, это увеличивает ее самостоятельность и выделяет из всего контента. Плохая — липнет к краям и другим объектам.
Блёклые, шаблонные кнопки из 90-х на сайте Никса, сразу видно делали программисты.
9) Изменяемость
При перезагрузке или скроллинге вниз и кнопа меняет цвет. В какой-то момент она цепляется за экран. Кому от этого плохо? — Никому. Привлекает внимание? — Да.
Прием для сплит-теста годится, пробуем.
10) Взаимосвязь с другими CTA-кнопками
Самый сложный момент. Не могу дать правил, но если у нас рядом с основной кнопкой другие, то они друг на друга влияют и это надо учитывать. Нет ничего хуже двух похожих рядом, это пессимизирует обе, снижая их CTR.
На сайте BEBAKIDS они чуть разные по размеру, но уж очень похожи.
Заключение
Факторов много (описал основные), все влияют по отдельности, а их комбинация влияет вместе. Думаю, что каждый понимает как это отражается на конверсии — прямо и непосредственно. Я повышал за счет этого продуктивность в 1,5 раза и больше. В любом случае, над ней стоит хорошенько поработать.
Всем рабочих кнопок!
Поделиться с друзьями
Комментарии (9)
aistrasser
27.01.2017 09:42А ещё бесят «навороченные» страницы, фиг поймеш, что там и куда, аж в глазах рябит.
izhanov
27.01.2017 10:54Да, это тоже снижает продуктивность. А активная CTA-кнопка не мешает, а помогает с этим разобраться. Посмотрите на скриншот 8. Это как раз пример того, о чем вы говорите и как бы хорошо встала здесь правильная кнопка. Да, она это не решило бы всех проблем карточки товара и дизайна, но это первое что я бы сделал.
sim-dev
Было бы любопытно ознакомиться с исследованиями по поводу того, сколько именно людей нажимает на кнопку «Купить тур» просто увидев его цену, и не ознакомившись детально и скрупулезно со всеми тонкостями и нюансами этого тура? Ну и про остальные клики тоже.
Создается полное ощущение, что продаются именно клики на кнопках — чем их больше и чем быстрее ои произойдут, тем лучше. А полезно ли это посетителю сайта — никого не волнует. Странная логика.
Среди моих знакомых нет ни одного, кто совершает покупки в «один клик», т.е. в соответствии с рекомендациями выше — сразу на первом экране, прочитав мотивирующий текст на кнопке и обратив внимание на ее цвет. Я сам и все мои знакомые как раз читают мелкие буквы с характеристиками товара и отзывами, а дизайнеров кнопок с высокой конверсией все мы просто мечтаем убивать с особой жестокостью.
Наше мнение никого не волнует? Дизайнеры сами покупают то, что помогают продвигать? Тогда успехов «в конверсии»!
izhanov
В примере с онлайнтурс, скриншот предпоследнего шага выбора тура. То есть, все ньюансы пользователи изучил на предыдущих и фактически пришел к моменту решения о покупке.
Сколько из них сделают отказ на следующем этапе (заполнение данных туристов) интересно, да. Но, если нет перехода на него, значит отказ еще раньше, а это еще хуже.
Весь смысл конверсионной воронки в том, чтобы продвигать через каждый этап как можно больше людей.
Спрашивают ли, при этом пользователя? Конечно, АБ-тестами. Он голосует рублем.
izhanov
Покупка в «один клик» это отдельная схема упрощенной покупки, как правило одного товара. Когда он не кладется в корзину, а оформляется сразу. Как раз для тех, кто не хочет ничего читать, точно знает все о товаре и стоит у кассы «давайте быстрее, я побежал». И на это делается отдельная кнопка.
Что именно вас так раздражает? Поясните подробнее.
sim-dev
Самое главное, что меня раздражает, и думаю, я не одинок в этом, это безусловная уверенность продаванов (а, извините, дизайнеры, идущие у них на поводу или, наоборот, ведущие их — не важно, — этим страдают) в том, что они лучше меня, покупателя, знают, что именно мне надо. И в огромном количестве случаев просто лишают меня возможности выбрать самому ту информацию, последовательность знакомства с товаром и т.п.
Все, что сказано в той статье, нацелено именно на это — незаметно лишить посетителя сайта возможности СДЕЛАТЬ НЕ ТАК, КАК НАДО. Кнопки, притягивающие взгляд, текст, вызывающий желание кликнуть, картинки/палитры и т.п. изыски — всё направлено именно на подавление (мягкое и ненавязчивое) воли покупателя. Знаменитая воронка — это разве не манипулирование свободой выбора?
Все так хотят побыстрее получить «конверсию», что забывают об иконном праве покупателя размышлять над предложением. И это бесит везде, а особенно, когда читаешь это на [ранее] уважаемом ресурсе.
izhanov
Вы занимаетесь подменой понятий. Презумпцией виновности продавца.
1) Да, объект поста стимулирует продажи, но он не заменяет необходимости дать информацию о товаре, подробно рассказать о нем и дать возможность сравнить (есть даже специальный функционал).
Более того, я вам могу сказать, что кнопка просто не будет работать, если человеку как-то мешать выбору человека, он не положит в корзину товар не изучив его. То есть, это вещи взаимосвязанные.
Поэтому грамотные продавцы делают хорошие фотографии (в последнее время видео), подробные описания, отзывы и т.д.
izhanov
2) Воронка продаж — это ведение человека от первого посещения до покупки (и далее). Внимание к нему, упорядочивание этого процесса.
Работа с ней делится на два фронта:
Ни то ни другое не подавляет свободу выбора, не драматизируйте.
Вы заходите в магазин и видите рядом с кассой мелкие товары — это вас раздражает? Вот прямо поубивать хотите? (ваши слова)
А раскладывание более дорогих товаров на уровне глаз?
А размещение необходимых групп типа хлеба в конце, чтобы по дороге вы увидели другие продукты?
Если да, то извините, вы как-то чрезмерно реагируете на окружающую вас действительность и сайты здесь ни при чем.
Fonarist
Вся многомиллиардная сфера маркетинга направлена на то, чтобы лучше знать, что нужно покупателю.
Да что там! Философия Apple сводится к тому, что им виднее, что именно нужно пользователю :) А сколько у них клиентов думаю не стоит упоминать.
Так что Вы (впрочем как и я) в меньшинстве.