АРМАДА
Статья. Оптимизируем «продающие» кнопки на сайте.
Новая тема Написать ответ

Miss Content
V.I.P.
Зарегистрирован: 05.03.2010
Сообщений: 7881
Обратиться по нику
# Добавлено:Ср Май 29, 2013 12:36 pmДобавить в избранноеОтветить с цитатой
Сегодня мы поговорим о том, как разработать эффективные «продающие» кнопки для ваших лендингов.



Какая кнопка, на ваш взгляд, конвертится лучше?

Когда вы просите пользователей совершить какое-либо действие, например, скачать PDF, заполнить форму, совершить покупку или просто перейти на другую страницу, вы всегда делаете это посредством призыва к действию. Это ключевой момент, который определяет показатель отказов и конверсию на вашем сайте.



«Продающие» кнопки состоят из 2 элементов, непосредственно влияющих на конверсию: дизайн и текст.

Дизайн привлекает внимание потенциального покупателя. Другими словами, он информирует: «Где я должен кликнуть»? Текст на кнопке, мотивирует посетителя, отвечая на вопрос: «Почему я должен кликнуть»?

В этой статье, мы более подробно остановимся на дизайне.

Начнем с примера из практики. Речь идет о крупном интернет магазине, продающем вручную расписанный фарфор. Им удалось увеличить продажи на 35.81%, просто изменив цвет и размер «продающих» кнопок.



Этот пример характеризует то, как сильно влияет дизайн кнопок на конверсию. Если вы разрабатывали дизайн кнопок, не задумываясь об их потенциальной кликабельности, то вероятно, уже потеряли много денег.

Нет кнопки «Бабло», которая работает всегда.

Кнопки бывают самых разных размеров, форм и цветов и не существует решения, подходящего для всех случаев.

Существуют стереотипы вроде: «Не используете красный цвет, это стоп сигнал». Или «Зеленые кнопки самые лучшие»! На самом деле, такие обобщения редко отражают реальность. На картинке выше зеленые кнопки действительно работали лучше синих. Но это не означает, что так будет везде. Я видел много сайтов, где голубые или красные кнопки конвертились лучше.

Самое главное — ВЫДЕЛЯТЬСЯ.

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

Единственный способ узнать, что работает конкретно на вашей целевой странице — опробовать различные варианты на ваших клиентах.

Существует миллион оттенков. Какой из них выбрать?

Мой совет — используйте здравый смысл и выбирайте контрастные цвета для кнопок. Есть очень простой тест. Отойдите на несколько шагов от экрана, скосите глаза и посмотрите, выделяется ли ваша кнопка.



Еще один пример из жизни. В этом случае удалось вдвое увеличить CTR, путем тотального редизайна кнопки из маленькой коричневой в большую оранжевую.



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

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

Визуальные эффекты.

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

Несмотря на позитивный эффект на конверсию, вариант с оранжевой кнопкой совсем не понравился их дизайнеру. Особое нарекание вызвала зеленая стрелка. По моему же мнению, она делала кнопку более заметной и кликабельной.

После долгих споров мы решили провести эксперимент. Простой A/B тест доказал, что кнопка без стрелки работала на 12.29% хуже.



Вот еще один пример с сайта по продаже б/у сотовых телефонов. Я предположил, что можно увеличить CTR сменив цвет текста на кнопке с черного на желтый. Это было ошибкой. CTR упал на 18,01%



Очень сложно предположить возможные последствия, без тестирования на практике. Я не против креатива, но считаю, что простые, традиционные варианты работают лучше.

В следующем примере обычная зеленая кнопка на 10.94% оказалась успешнее, чем ее нестандартная копия.



Размер имеет значение.

Ошибка многих дизайнеров в том, что их совершенные со всех точек зрения кнопки слишком маленькие. Важно, чтобы ваша кнопка была заметна на сайте. Но это не значит: чем больше, тем лучше.

Как раз в следующем примере, увеличение размера кнопки привело к плачевным результатам.



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

Повторяю — не переусердствуйте с размером кнопок. Без тестирования здесь не обойтись.

Еще раз о тексте.

Дизайнеры любят повторять: «Никто не читает что написано на кнопках». Но это не так. У меня накопилось больше 30 примеров, опровергающих это утверждение. Текст на кнопках оказывает значительное влияние на конверсию и люди действительно его читают. Можете быть уверенным, что это самая читаемая часть страницы после заголовка.

Недавно мы проводили A/B тестирование лендига, целью которого было увеличить количество потенциальных клиентов, которые подписались на 30-дневную бесплатную пробную версию. Единственная вещь, которую мы сделали — изменили слово ваша» на «моя» в предложении «Загрузите вашу бесплатную версию». Это увеличило CTR на 90%




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

Более подробно про создание призывов к действию в видео.



Что мне теперь делать?

Откройте ваши лендинги и тщательно изучите кнопки. Легко ли их найти? Похожи ли они на кнопки? Может быть следует сменить цвет или добавить визуальных эффектов? В этом вам поможет специальный инструмент buttonoptimizer.com.

Оригинал статьи на английском языке: http://unbounce.com/conversion-rate-optimization/design-call-to-action-buttons/
Место для Вашей рекламы!

Лик
V.I.P.
Зарегистрирован: 03.07.2010
Сообщений: 4501
Обратиться по нику
# Добавлено:Чт Май 30, 2013 11:21 amОтветить с цитатой
А что это за визуальные эффекты для кнопок?

Longer
V.I.P.
Зарегистрирован: 09.10.2007
Сообщений: 2782
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Чт Май 30, 2013 11:22 amОтветить с цитатой
Классный материал! :thup:
Серверы и XEN ВПС с бесплатным 24/7 Администрированием
Превосходное решение для мобильного трафика. Мысли глобально - лей на Bizzclick!

Miss Content
V.I.P.
Зарегистрирован: 05.03.2010
Сообщений: 7881
Обратиться по нику
# Добавлено:Пн Июн 03, 2013 8:11 amОтветить с цитатой
Цитата:
А что это за визуальные эффекты для кнопок?


Это подсветка кнопки при наведении на нее указателя мыши, анимированные кнопки. Что еще?
Место для Вашей рекламы!

narolskay +
Гуру
Зарегистрирован: 11.06.2009
Сообщений: 1037
Обратиться по нику
# Добавлено:Пн Июн 03, 2013 1:59 pmОтветить с цитатой
Цитата:
Я обычно начинаю свои эксперименты с зеленого или оранжевого цвета. Не ищите здесь глубокого психологического подтекста. Просто в дизайне большинства сайтов используется традиционная, нейтральная гамма, а зеленый или оранжевый более заметны. Опять же, все зависит от контекста. В некоторых случаях, фиолетовая кнопка оставит зеленую и оранжевую далеко позади.


Я думаю, что эти цвета спокойные, а вот если посмотреть на синюю кнопку, то она мне думается более агрессивная, призывает к действию?
Ищете хостинг? Beget.ru
месяц бесплатного тестирования!

Miss Content
V.I.P.
Зарегистрирован: 05.03.2010
Сообщений: 7881
Обратиться по нику
# Добавлено:Пн Июн 03, 2013 2:45 pmОтветить с цитатой
Вот еще в тему: 5 цветов, которые заставляют посетителей нажимать на кнопку

http://www.armadaboard.com/viewtopic.php?t=45740
Место для Вашей рекламы!

Вишенка
V.I.P.
Зарегистрирован: 29.03.2011
Сообщений: 1961
Contest (Сумма: 1)
Обратиться по нику
# Добавлено:Пт Июн 07, 2013 12:54 amОтветить с цитатой
Хорошая продающаяся кнопка должна быть заметной ровно настолько, чтобы не раздражать.

Вот то, что я поняла, из прочитанного.

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

Miss Content
V.I.P.
Зарегистрирован: 05.03.2010
Сообщений: 7881
Обратиться по нику
# Добавлено:Пт Июн 07, 2013 8:57 amОтветить с цитатой
Цитата:
А работать лучше всего будет именно тот цвет, который в каждом конкретном дизайне будет выделяться и привлекать к себе внимание, - это же очевидно.


Есть такая полезная штука как цветовой круг - показывает гармоничные сочетания цветов. Любой правильный треугольник, вписанный в цветовой круг, даст вам новый вариант для идеального сочетания цветов. Подробнее.




Есть еще сайт http://colorscheme.ru/ Кто знает как с ним работать?
Место для Вашей рекламы!

Yabuti
V.I.P.
Зарегистрирован: 28.11.2008
Сообщений: 16263
Contest (Сумма: 2)
Обратиться по нику
# Добавлено:Пт Июн 07, 2013 12:13 pmОтветить с цитатой
Отличный материал, спасибо! :thup:
Ксен ВПС и выделенные серверы от PQCService.net с бесплатным администрированием в 7 локациях, icq: 87244588
--

Miss Content
V.I.P.
Зарегистрирован: 05.03.2010
Сообщений: 7881
Обратиться по нику
# Добавлено:Пн Июн 10, 2013 12:38 pmОтветить с цитатой
Наткнулась на интересное утверждение: обязательно используйте закругленные уголки, тени, блики и все остальное, что придает кнопке более реалистичный вид. Глядя на реалистичную кнопку, пользователь начинает чувствовать непреодолимый зуд в указательном пальце и не может от него избавиться, пока не нажмет.

Согласны с ним?
Место для Вашей рекламы!

narolskay +
Гуру
Зарегистрирован: 11.06.2009
Сообщений: 1037
Обратиться по нику
# Добавлено:Ср Июн 12, 2013 12:23 pmОтветить с цитатой
Я для красоты всегда использую тень, но вот в плане эффективности, что то не заметилаSmile. А блики меня наоборот настораживают.
Ищете хостинг? Beget.ru
месяц бесплатного тестирования!

Miss Content
V.I.P.
Зарегистрирован: 05.03.2010
Сообщений: 7881
Обратиться по нику
# Добавлено:Пт Июн 14, 2013 11:01 amОтветить с цитатой
По поводу реалистичности в интерфейсе можно почитать: http://ignorethecode.net/blog/2010/01/21/realism_in_ui_design/
Место для Вашей рекламы!
Новая тема Написать ответ    ГЛАВНАЯ ~ ПОЛЕЗНЫЕ СТАТЬИ

Перейти:  





Генеральный спонсор



Партнеры