Единственный верный способ выяснить это — внедрить изменения и протестировать их (баннер, объявление, кнопку…) на живой аудитории. Результаты такого теста могут вас сильно удивить, сколько бы теоретических материалов вы до этого ни изучили.

Это можно сделать несколькими способами, например, провести A/B тестирование или Eye Tracking исследование. Они предоставят вам наглядные данные о том, что именно не устраивает пользователей на вашем сайте и как это изменить, чтобы конверсия повысилась.

Это может быть очень маленькое изменение интерфейса, которое принесёт вам очень большое изменение объёма продаж.

Например, одно лишь изменение цвета, размера или формы кнопки кнопки призыва к действию (call-to-action) способно повысить конверсию в несколько раз.

Компания Umisoft — разработчик программных решений для создания сайтов — поделилась с нами собственным опытом тестирования сайтов umi.ru и umi-cms.ru и рассказала, какой результат это дало.

Кейс 1: A/B-тестирование кнопок на сайте UMI.ru

UMI.ru — это сервис создания готовых сайтов, который рассчитан на начинающих предпринимателей и малый бизнес — людей, которые мало знакомы с интернет-технологиями.

Изначально конверсия на UMI.ru составляла примерно 1,5–2%. Чтобы добиться её увеличения, компания провела A/B-тесты двух вариантов дизайна кнопки призыва к действию «Создать сайт сейчас!».

A/B-тестирование (или сплит-тестирование) — это один из наиболее распространённых способов улучшения веб-интерфейсов, онлайн-рекламы и повышения конверсии в интернете.

Для этого разрабатываются два варианта тестируемого элемента (макета страницы, дизайна какой-либо кнопки, баннера, заголовка и т.д.), которые одновременно запускаются для целевой аудитории, разделённой на две одинаковые по объёму и равномерные по составу части.

Соответственно, первая часть аудитории попадает на один вариант страницы, а вторая — на другой. Полученные данные сравниваются и анализируются.  

До:

После:

Изначально на страницах сайта кнопка была зелёной и объёмной. Конверсия кнопки составляла около 2%. После изменения её формы (она стала плоской) роста или снижения конверсии не произошло.

Далее компания протестировала цвет кнопки, изменив его с зелёного на красный. A/B-тестирование было проведено на тысячах пользователей, в течение недели тестировалась зелёная кнопка и неделю — красная.

И вот тут-то и случилось открытие: красная кнопка показала подъём количества кликов в несколько раз. Был проверен каждый лендинг, страница тарифов и прочие страницы сайта UMI.ru.

После каждого теста была выбрана кнопка, на которую пользователи кликают больше — то есть красная.

Сейчас конверсия кнопки призыва к действию на UMI.ru поднимается зачастую до 9% — это очень высокий показатель.

Сергей Котырев (Umisoft):
Каким бы специалистом по юзабилити вы ни были, вы не скажете точно, что красная кнопка будет эффективнее, чем зелёная. Это можно выяснить, только грамотно проведя A/B-тестирование.

Желательно тестировать только одно изменение. Например, в случае кнопки call-to-action это может быть или текст, или внешний вид. Чем меньше величина изменения, которое вы проводите через A/B-тест, тем более точные результаты вы получите. Если тестировать одновременно множество изменений (и цвет, и форму кнопки), вы не будете знать, какое из них повлияло на конверсию.

UMI.CMS — популярная платформа для управления сайтами. Сайт на UMI.CMS можно редактировать прямо на самих страницах, не входя в отдельную административную зону. На самом деле, это безумно удобно, и в своё время эта технология стала прорывом в управлении сайтами.

Чтобы войти в режим редактирования сайта, нужно нажать на кнопку «Редактировать», которая находится в панели наверху страницы.

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

Нужно было присматриваться и искать кнопку в течение нескольких секунд — а это неудобно.  Для того, чтобы сделать инструмент удобнее, компания провела айтрекинг-исследование (eye-tracking).

Айтрекинг — технология, позволяющая отслеживать движение взгляда пользователя по монитору компьютера. Для тестирования в лабораторных условиях используется устройство ай-трекер, которое состоит из специальных очков, компьютера с инфракрасной камерой и программного обеспечения, позволяющего анализировать поведение человеческого глаза, строить «карты внимания» и другие виды отчётов.

До:


Респондентам из целевой аудитории UMI.CMS было дано задание: включить режим редактирования сайта на UMI.CMS. Пока пользователь искал нужную кнопку, устройство отслеживало движение его глаз. По результатам исследования была составлена тепловая карта, при анализе которой стало понятно, насколько легко/сложно было выполнить заданное действие. Красным пятном на карте выделяется то место, где взгляд пользователя задерживается дольше всего. Мы видим, что пользователи чаще всего искали нужную кнопку не в левом верхнем углу, где она расположена, а в правой части страницы.

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

После:

Результаты исследования

• Время на поиск кнопки: серая кнопка: 26 секунд, чёрная — 17 секунд. Пользователю понадобилось 26 секунд, чтобы найти на экране кнопку редактирования. После изменения цвета время сократилось до 17 секунд — практически в полтора раза.
• Движения глаз пользователя при поиске кнопки: серая кнопка — 60 движений, чёрная — всего 38 движений. Опять же, пользователю понадобилось в полтора раза меньше движений, чтобы обнаружить нужную кнопку на странице, после того как она была перекрашена в более тёмный цвет.
• Время от «нашёл кнопку» до «кликнул»: серая кнопка — 15 секунд, чёрная — 10 секунд.
• Общее время эксперимента (от начала эксперимента до клика по кнопке) — серая кнопка — 43 секунды, чёрная кнопка — всего 29 секунд.

Мы видим, что изменение всего лишь цвета кнопки привело к повышению удобства пользования инструментом (юзабилити) и росту конверсии (в данном случае — времени, затрачиваемом на выполнение задачи) на 50%.

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

Сергей Котырев (Umisoft):
Исследование движения глаз помогает выявить, на какие детали на странице пользователи обращают внимание в первую очередь, смотрят ли они туда, куда вы рассчитывали, что их «зацепило» на конкретной странице, а что заставило её покинуть.

Многие скажут, что аналогичный сервис есть в Яндекс.Метрике, который рисует тепловые карты кликов (зоны, где пользователь водит мышкой). Мы провели эксперимент — сравнили тепловые карты взглядов и карты кликов от Яндекс.

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

***

***

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

Ваши коллеги могут высказать свои предположения, однако доверять вы можете только тестированию, и его результаты могут вас удивить.

Нельзя утверждать, что A/B-тестирование совершенно, однако оно принесёт вам намного больше пользы, чем догадки коллег и теоретические знания из различных маркетинговых статей. Удачных тестов!

Изображения: usabilitygeek.com, conversionxl.com | Титульное изображение: emarketingblog.nl

Как дизайн CTA-кнопки может увеличить конверсию?

Если вы уже соскучились по практическим примерам, касающихся проектирования эффективно работающих кнопок призыва к действию на целевых страницах, то вашему вниманию предлагается статья из серии уже опубликованных нами постов на эту тему, среди которых: Элементы призыва к действию от известных брендов, CTA-элемент «выше линии сгиба»: миф или реальность? и 99 примеров эффективных элементов призыва к действию.

Данная информация рекомендована всем. Она существенно расширит ваше понимание практики оптимизации конверсии и лидогенерации. Напомним, что кнопкой призыва к действию, или CTA-кнопкой (call-to-action button), мы называем ссылку, часто оформленную в виде кнопки, нажатие на которую приводит к отправке данных лид-формы или выпонению любого другого целевого действия.

Что вы должны знать и помнить oб CTA-кнопках

Для посадочной страницы призыв к действию олицетворяет собой переломный момент между конверсией (Conversion) и отказом от нее (Bounce).

Если вы просите пользователя сделать что-либо на вашем лендинге, то дабы выполнить желаемое действие, он должен воспользоваться вашим CTA-элементом — независимо от того, что вы конкретно предлагаете: загрузить eBook, заполнить лид-форму, купить товар/услугу или просто перейти на другую страницу.

CTA: Переломный момент между конверсией и отказом от нее

Кнопки призыва к действию состоят из двух основных элементов: собственно дизайна (цвет, форма, шрифт) и текста. Они оба имеют непосредственное влияние на конверсию, однако играют разные роли в процессе преобразования: 

• Дизайн кнопки посылает визуальный сигнал, помогающий привлечь внимание потенциальных клиентов к действию. Другими словами, дизайн (внешний вид) отвечает на вопрос: «Куда я должен нажать?».
• Текст, со своей стороны, помогает пользователю увидеть перспективу его действий и отвечает на вопрос: «Почему я должен нажать на эту кнопку?».

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

4 уловки повышения эффективности призывов к действию

Начнем с примера из реальной жизни

Сейчас речь пойдет о крупном европейском сайте электронной торговли, продающем фарфор, расписанный вручную (по материалам сайта contentverve.com). Изменяя цвет и форму кнопки призыва к действию, маркетологам удалось повысить продажи продукта – не только рейтинг кликабельности (CTR) – на 35,81%.

Это пример прекрасно иллюстрирует, какое влияние на конверсию может оказывать дизайн CTA-кнопок.

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

Нет универсальной формулы «абсолютной CTA-кнопки», срабатывающей каждый раз

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

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

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

Главное – выделить кнопку

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

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

Лучшим способом узнать, какой «рецепт» работает на конкретной целевой странице, был и остается сплит-тест.

Миллионов цветов на выбор, и с какого мне начать?

Лучший совет – руководствоваться здравым смыслом и использовать контрастные цвета. Старый добрый «тест на косоглазие» всегда придет на помощь – соберите вашу страницу, отойдите на несколько шагов назад от монитора, скосите глаза, и посмотрите, выделяется ли ваша кнопка.

Еще пример из реальной практики

CTR коммерческого сайта, торгующего недвижимостью, был увеличен более чем в 2 раза с помощью радикальной реконструкции главной CTA-кнопки – тускло-коричневатая кнопка была заменена на гораздо более яркую оранжевую.

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

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

Тут нет никаких особо глубоких психологических обоснований – просто они хорошо выделяются на большинстве «среднестатистических» целевых страниц.

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

Искусство сочетания цветов — яркий путь к высокой конверсии

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

Визуальные эффекты могут иметь влияние на кликабельность (CTR) вашей кнопки, но применять их надо с особой осторожностью! Даже относительно небольшой эффект может оказать удивительно большое влияние – и нет никаких гарантий, что оно обязательно будет положительным.

Рассмотрим несколько примеров

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

Дизайнеру не понравилась новая кнопка, несмотря на положительное влияние, оказанное ей на конверсию – его главное возражение сводилось к тому, что сочетание оранжевой кнопки с зеленой стрелкой кажется ему «уродливым».

Специалист по оптимизации приводил свой довод: зеленая стрелка делает кнопку более заметной, а следовательно – более активно взаимодействующей с пользователем.

Спор разрешило простое А/Б-тестирование. Дизайнер оказался неправ: кнопка без стрелки понизила конверсию на 12,29%.

А вот противоположный пример: эксперт по оптимизации предположил, что, изменив цвет надписи на зеленой кнопке с черного на желтый, он еще больше выделит кнопку на странице и увеличит CTR. Увы, последствия были самыми неприятными: изменение цвета надписи снизило кликабельность 18,01%.

Так что в этом случае визуальный эффект оказал негативное влияние на конверсию – выяснилось, что менее контрастное решение работает много лучше. Вообще, в большинстве случаев можно быть уверенным, что простые кнопки (которые пользователь легко распознает как именно «кнопки») с конкретными текстами, описывающими действие, будут работать лучше, чем различные «креативные» варианты.

Простая зеленая кнопка с описательным текстом превзошла «креативную» на 10,94%.

Размер имеет значение, но «больше» не всегда значит «лучше»

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

Вот пример, в котором увеличение размера графического элемента привело к снижению конверсии на 10%:

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

Уважайте текст на CTA-кнопке!

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

Будьте конкретны: тексты «отправить» и «послать» ни о чем не говорят вашему потенциальному клиенту. То, что он поймет, называется примерно так: «отправить заявку», «заказать обратный звонок», «получить консультацию», «заказать расчет», «заказать очередь», «гарантировать участие», «получить доступ к урокам», «загрузить книгу» и т. д.

Что вы должны сделать прямо сейчас

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

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

Высоких вам конверсий!

A/B-тестирование кнопок и форм

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

A/B-тестирование кнопок: габариты и формы

Кнопка призыва к действию – это самый популярный объект для тестирования, чаще всего начинают именно с нее. Причина большой популярности этого объекта во время A/B-тестирований заключается еще и в том ,что изменение именно этого элемента оказывает наибольшее влияние на всю цепочку конверсий. Кнопка может удвоить, утроить продажи.

Самым популярным способом изменить эффективность кнопки является изменение цвета. Цвет должен привлекать и выделяться, сразу концентрировать на себе все внимание пользователя.  Можно также подумать об изменении размера кнопки действия: возможно, стоит сделать ее больше или меньше.

Есть смысл изменить текст для призыва к действию. Например, во многих интернет магазинах предпочитают не писать на кнопках «Купить», а пишут «В корзину». Психологически пользователю проще положить в корзину, чем купить – меньше ответственности.

Вместо слова «Зарегистрироваться» можно воспользоваться фразой «Стать участником», а вместо «Скачать» — «Скачать бесплатно».

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

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

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

Чуть больше навязчивости

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

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

Зачастую хорошим решением будет использование какой-то иконки. Например, при загрузке можно использовать иконку дискеты (для пользователей старше 20 лет), или облака со стрелкой вниз (для тех, кто период дискет не застал). При необходимости отправить письмо – логотип почтового конверта.

Создайте какое-нибудь ограничение. Например «Купить со скидкой в 20%», или «Зарегистрироваться. Осталось 6 мест». Это заставляет пользователя проявлять большую расторопность при взаимодействии с вашим сайтом.

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

Формы должны быть аппетитными

В некоторых случаях пользователь должен заполнить форму. Это требует куда больше телодвижений и времени, нежели клик на кнопку. Соответственно, проводить A/B тестирование здесь необходимо более глубоко и внимательно.  Как показывает практика, большое количество посетителей просто уходят, так как не хотят заполнять бесконечные формы. Вам необходимо убедить людей в том, что это не займет много времени, и точно дать им понять, что они получать по результату заполнения.

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

Так, для того, чтобы получить номер телефона клиента, достаточно просто имени и номера телефона: не нужно спрашивать его о фамилии, девичьей фамилии матери и не нужно просить оставить свой e-mail.

В некоторых случаях можно обойтись вообще одним полем – «Номер телефона».

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

На первом этапе спросите как зовут пользователя – на втором – узнайте его контактные данные, на третьем спросите о платежный данных.

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

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

При возможности помогайте пользователю заполнять поле. Если он указал свое имя – то можно заполнить поле «Род», заполнить страну проживания и национальную валюту можно по IP адресу пользователя.

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

Стоит поэкспериментировать и с самой формой, ее размерами, геометрическими особенностями (закругленные или ровные края).

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

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

Если в поле подразумевается какой-то значение по умолчанию (например, в поле «Поиск» или в поле «Найти»), то не оставляйте это поле таким – вставьте туда тот товар, который вы желаете побыстрее распродать.

Кроме того, таким приемом вы показываете пользователю: «А еще у меня вот это есть!».  Саму форму поиска не стоит прятать далеко, она должна быть на виду, притом она должна быть постоянно.

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

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

И, наконец, наградите пользователя заполнением формы. В качестве «приза» может выступать купон или электронная книга.  Пользователь ленив, и его лень может побороть только его жадность. 

Банальности про АБ–тест

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

Мой опыт проведения АБ–тестов связан с мобильными приложениями, поэтому какая–то специфика может прорваться несмотря на намерения писать только о базовых вещах.

Определение

АБ–тест — это способ понять стал ли ваш продукт лучше при изменении его части. Скажем, у вас есть гипотеза, что какое–то изменение увеличит ключевую метрику продукта больше чем на 10%.

Вы берёте новых пользователей и одной половине даёте контрольный вариант продукта, а другой — с реализованной гипотезой. Дожидаетесь пока разница между значениями метрики станет статистически достоверна, то есть не изменится при продолжении теста с вероятностью 90–95%.

Как только результаты достоверны — оставляем победителя и запускаем следующий тест.

Зачем это вообще нужно?

— Я ведь знаю, что моя идея сделает продукт лучше. Ну, как минимум не хуже. Ну, в крайнем случаем случае ей будут пользоваться те, кому это действительно надо, а для остальных продукт останется тот же!

Так нам говорит наш внутренний голос. Ну, или по крайней мере говорил мне. И иногда он прав. А иногда — нет.

— Давайте выпустим изменение и посмотрим вырастут ли метрики!

Допустим вырастут. Но они могли вырасти из–за исправления креша в этом же обновлении, а не из–за нововведения. Такая ошибка оценки называется «false positive».

Или метрики могли не измениться, или даже упасть, а хотя изменение на самом деле увеличило.

Просто параллельно вышла реклама которая привела не только целевую, но и много нецелевой аудитории, которая быстро ушла, не заинтересовавшись продуктом. Это ошибка «false negative».

Причиной ошибки может быть большое количество факторов. И что самое пугающее — это непредсказуемость их появления и сила влияние не результат. Научиться предсказывать и оценивать искажающие факторы не представляется возможным. Так что выпуск изменений под девизом «мне повезёт!» скорее всего не приведёт к стабильному увеличению метрик продукта.

АБ–тесты нужны нам чтобы обеспечить проверяемый рост метрик продукта, который вызван именно улучшением продукта, а не внешними факторами или временным изменением аудитории.

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

Вводим данные о конверсии в базовой и тестовой вариации и получаем размер выборки для каждой вариации который позволит сказать, что вариации статистически достоверно различаются. Вероятность ошибки false negative 20%, ошибки false positive 5%.

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

АБ–тест цвета кнопок

Это пример который обычно используют для объяснения что такое АБ–тест. Этот пример хорош для объяснения, но на практике обычно не даёт значимого увеличения метрики. Потому что ваш продукт больше чем кнопка. Если, конечно, весь ваш трестируемый продукт не баннер.

Как и всякий инструмент, АБ–тест можно использовать неправильно, так что метрики проекта не будут расти, а усилия на их проведение будут тратиться. Поставьте дополнительное условие для тестов: изменение должно увеличить важную метрику продукта на 15%.

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

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

И пару советов напоследок:

• делайте как можно меньше вариаций, это позволит уменьшить время проведения теста;
• по началу старайтесь не проверять конверсии, значение которых меньше 10% — на это потребуется много времени. Обычно к таким метрикам принадлежит такая важная как конверсия в платящего пользователя. Для неё проверяйте гипотезу, если вы уверены, что она принесёт существенно улучшение.

Послесловие

АБ–тест — очень полезный инструмент, который помогает нам не только когда гипотеза подтвердилась. Вся прелесть метода в том, что даже неположительный результат даёт нам новую информацию о продукте.

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

Какого цвета должна быть кнопка «Купить», чтобы увеличить конверсию — Академия SEO (СЕО)

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

Кнопка «Купить» — непременный и очень важный атрибут любого интернет-магазина.

Её правильное цветовое оформление может привести к повышению продаж, и наоборот – неверно подобранный цвет оставит её за пределами внимания пользователей.

Конечно, в первую очередь посетителей сайта должен привлекать сам товар. Но, как показали исследования по маркетингу, цвет кнопки значительно влияет на желание её нажать, и, соответственно, купить предложенный товар. Рассмотрим, какие советы по поводу выбора цвета кнопки «Купить» дают опытные маркетологи и тестировщики.

Содержание:

Как и почему цвет кнопки «Купить» влияет на продажи

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

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

Если просто следовать правилу целостности и гармоничности дизайна, и сделать кнопку «Купить» в цвете, подходящем к общему оформлению, но сливающемся с фоном, мало кто обратит на неё внимание.  И пользователи, не увидев явной подсказки, говорящей о том, что этот товар можно купить, отправятся на другие сайты. 

Красота и привлекательность в некоторых случаях разные вещи. Учитывайте, что задача кнопки «Купить» не просто украсить собой страничку, а в первую очередь привлечь внимание. Поэтому она должна быть контрастной, и выделяться на общем фоне.

Но это не значит, что необходимо подобрать цвет, режущий глаза диссонансом –  всё должно выглядеть эстетично и гармонично. Рассмотрим, как это сделать, и какого цвета лучше сделать кнопку «Купить» на сайте интернет-магазина.

Какой цвет лучше выбрать для кнопки «Купить»

Ориентация на целевую аудиторию сделать выбор в пользу какого-либо цвета для кнопки «Купить» совершенно не поможет. У каждого человека есть свой любимый цвет, и это не зависит от пола, возраста и социального статуса. Подстроиться под каждого пользователя невозможно, но можно учесть общие тенденции, результаты тестирования и советы опытных маркетологов.

Доказано, что, если выбрать цвет кнопки «Купить» правильно, можно увеличить продажи до 65%. Но однозначного ответа, какого же цвета её нужно сделать, нет. Всё зависит от дизайна – слово «Купить» должно быть оттенено ярким цветом, заметным на общем фоне.

Начнём с того, какие цвета выбирать не следует: 

• Не выбирайте тусклые, тёмные оттенки;
• Не стоит довольствоваться простой рамочкой, такой призрачный силуэт плохо заметен и совершенно непривлекателен;
• Серый цвет использовать не рекомендуется категорически – серая кнопка «Купить» выглядит неактивной, и не вызывает желания на неё нажать;
• Также будьте осторожнее с тенями и градиентами – если визуально кнопка будет казаться вогнутой, то воспримется, как уже нажатая. Так что делайте её либо однотонной, либо зрительно выпуклой;
• Хоть чёрный цвет и выглядит достаточно ярким, но для этой цели его лучше не выбирать – на страничках обычно находится текст чёрного цвета, и кнопка на его фоне не будет достаточно притягивать взгляд.

О том, что лучше всего выбрать для кнопки «Купить» контрастный к общему фону цвет, мы уже сказали. Теперь уточним, какие цветовые сочетания считаются контрастными:

• Красный – зелёный
• Синий – оранжевый
• Жёлтый – фиолетовый.

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

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

• Красный. Привлекает внимание, повышает решительность и побуждает к действию.
• Зелёный. Даёт чувство безопасности, успокаивает и настраивает принять решение.
• Оранжевый. Вызывает оптимизм и бодрость, повышает активность.
• Жёлтый. Настраивает на дружелюбие, коммуникабельность  и позитив, призывает к общению.
• Синий. Создаёт ощущение стабильности, повышает доверие.
• Фиолетовый. Помогает сосредоточиться и сконцентрироваться, ассоциируется с роскошью и благополучием. 

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

Но опять-таки при выборе отталкивайтесь от общего дизайна сайта, проведите A/B-тестирование, чтобы оценить эффективность различных цветов и вариантов оформления. 

А вы пробовали экспериментировать с цветом кнопки «Купить»? Может, у вас есть свои критерии выбора, и вы захотите поделиться ними с нашими читателями?

P.S. Еще больше фишек, которые помогут вам повысить продажи интернет-магазина, можно узнать на курсе «10X Интернет-Магазин». А с промо-кодом «Color-21-10» для вас будет действовать специальный бонус.