Главное Авторские колонки Вакансии Образование
Выбор редакции:
3 745 11 В избр. Сохранено
Авторизуйтесь
Вход с паролем

​Дизайн, ориентированный на конверсии

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

Повышение конверсии - путь часто длинный и извилистый. Он состоит из понимания возражений (негласных) и эффективной работы с ними.

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

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

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

Содержание статьи:

  • Что такое дизайн, ориентированный на конверсию (ДОК)
  • Принципы ДОК
  • Факторы уменьшающие и увеличивающие конверсию
  • Кейс по увеличению конверсии с помощью текста призыва к действию
  • Кейс по увеличению конверсии с помощью цвета

Что такое дизайн, ориентированный на конверсию?

Дизайн, ориентированный на конверсию (ДОК) или Конверсионный дизайн, нацелен на увеличение конверсии (кто бы мог подумать). Термин Conversion-Centered Design пришел к нам с запада. И он нацелен на решение одной задачи: увеличить количество кликов по кнопке на сайте.

Он сочетает в себе элементы копирайтинга, психологии и самого дизайна.

7 принципов ДОК

  1. Внимание. Важно использовать на сайте элементы, которые привлекают внимание.
  2. Контраст и цвет. Бытует мнение, что у красной кнопки самая лучшая конверсия. Это не так. Важен контраст и сочетание цвета на сайте.
  3. Направленные подсказки. Обращайте внимание посетителей на важные (для конверсии) элементы сайта.
  4. Пустое пространство. Используйте больше пустого пространства на странице. Дайте ей “подышать”.
  5. Социальное доказательство. Про важность отзывов и элементов социального доказательства написана не одна статья.
  6. Дефицит. Классический элемент психологии (ограниченность в товаре или во времени), которые влияют на повышение конверсии.
  7. Закрытие сделки. Данный принцип относится к правильному использованию призыва к действию и пространства вокруг, чтобы ничего не отвлекало.

Принципы ДОК используются, чтобы подтолкнуть посетителей к конверсии.

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

Негативные факторы, которые уменьшают конверсию

Негативные факторы или “стоп-слова”. Фразы или графические элементы, которые вызывают момент паузы, пока посетитель пытается их понять.

Такие слова снижают конверсии. Они создают отрицательные выводы в сознании потенциальных клиентов. В момент коммуникации их мысли направляются не в ту сторону.

Элементы доверия широко используются с целью повышения конверсии. Иногда она вызывает у покупателя вопрос: «Почему они так настойчиво пытаются убедить меня в безопасности этой сделки? Может это небезопасно? Им можно доверять?». Вы можете сказать, что я сам противоречу принципам ДОК. Мол, это же элементы доверия. Да, но вы должны смотреть на уместность. Если их слишком много - они могут провоцировать лишние вопросы. Чаще всего, залогом безопасной сделки является наличие значка замка в адресной строке. Это значит, что на странице используется протокол защищенных сокетов (SSL). Как его получить бесплатно, вы можете прочитать здесь или здесь.

Позитивные факторы, которые увеличивают конверсию

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

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

Кнопка

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

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

Бесплатно

Unbounce провели серию А/Б тестов, посвященную текстам призыва к действию.Вопреки распространенному мнению, слово “бесплатный” может оказать негативное влияние на конверсии.

Это потому, что мы все становимся более подкованными в маркетинге. Электронная почта завалена письмами и спамом. Не все хотят отдавать ее лишний раз. Мы уже понимаем, что нам будут что-то предлагать по электронной почте. Упоминание “халявы” больше похоже на приманку.

На одном из сайтов, Оли Гарднер из Unbounce использовал виджет опроса Qualaroo. Он спрашивал людей, что их останавливает. Было два распространенных ответа: “Сколько стоит?” и “Я не знаю, сколько это стоит?”.

wF_vDrzw2Er7f46YMDAIhmgYJ2xOjfXRS_HxkkQF

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

Он использовал свое фото (как автора) под кнопкой, и указал, что курс бесплатный.

3wBSYcOSwOcnox-1H_CeIpg4-LOJzlRg4Pk5lbKV

Какой результат A/Б теста?

PgqGJNs6BY5wp2cIfS6mzZZmxlEHp6TcOWShcGWk

Для этого теста, он разделил трафик 10/90. Это должно было ускорить тест. У исходной страницы была конверсия 26%.

Новый вариант привел к потере 14%.

Почему? Это из-за лица Оли? Или дело в слове «бесплатный»?

Они стали анализировать данные и обнаружили зависимость, связанную с словом «бесплатный».

rP58CQaMU3LD8WwsUntblDXpNu7k0UIgSEzPJrNC

По результатам 20 000 страниц, уровень конверсии в среднем на 16.8% лучше там, где слово «бесплатно» не упоминается.

Если «бесплатно» не работает… что тогда?

jvDG_GUuRNi36KsEA8rg4R6IVev3OCpSPr6k4Fxe

На диаграмме выше показаны данные только лендингов с формой

График выше иллюстрирует другие слова, которые обычно используются в призывах к действию. Здесь показано их влияние на конверсию.

Даже небольшое изменение текста в кнопке, может повлиять на уровень конверсии. Пока вы еще не изменили свой СТА (призыв к действию), знайте, что это средние показатели конверсии. Они основаны на статистических данных. Используйте данные А/Б тестов. Не изменяйте ничего просто так. Как проводить А/Б тесты вы можете прочитать в этой статье.

Подписка

Многие пишут о том, что не надо использовать в кнопке такие шаблонные слова, как “Регистрация” или “Подписаться”. Мы в KEPLER LEADS сами придерживаемся этих взглядом. Точнее, придерживались до определенного момента.

Мы провели серию А/Б тестов для сайта выставки абстрактных пейзажев XYZT. Часть из них касалась текста в кнопке. Так как предложение было неуникальным (подписка на новости), то мы создали 2 виджета с разной кнопкой. В одном было стандартное предложение “Подписаться”. Во втором случае призыв для новостей звучал более активно “Быть в курсе!”.

QF-dLtVGpWIggwPHnHivCsLFk9mnxXxkFax70EPW

Исходный вариант страницы

qm0KqtGcWLCJ11i_uadbI1GojoXNIwMhzZ9aUuhj

Вариант с кнопкой “Быть в курсе”

Вначале мы думали, что стандартный вариант “Подписаться” будет иметь худшую конверсию. Однако, результат нас удивил.

ieqiviRiwZkGQkcn-lnocjnJGtKFgRKYq-cmSOhk

Конверсия “Быть в курсе” оказалась на 300% ниже!

Именно, поэтому мы рекомендуем проверять любые гипотезы с помощью А/Б тестирования. Результаты могут вас удивить.

Кстати, если вы хотите создать такие же виджеты для сбора подписчиков с возможностью А/Б тестирования, вы можете сделать это в конструкторе KEPLER LEADS.

Цвет кнопки

Какого цвета должна быть кнопка - старый философский вопрос. Кто-то утверждает, что самая высокая конверсия у красных кнопок. Другие говорят - зеленая или синяя. На самом деле, правильный ответ звучит так (как и многое в маркетинге): “Надо тестировать”.

Мы в KEPLER LEADS проводили серию А/Б тестов по поводу цвета кнопки. Для этого в интернет-магазине спортивной одежды создали несколько виджетов. Отличие было только в цвете кнопки.

BUj_kXJY_Xmyb3S7TL1H1OWjJlpI408eYTYCHtlT

Вариант всплывающего окошка с красной кнопкой

8qYIX_aTZRLRddlxmU1UOLDBEJ7HSs8caxB74HQ-

Вариант всплывающего окошка с синей кнопкой

В финальный тест вышли 2 цвета: синий и красный. В общей сложности было сделано 4000 показов. Выборка, как видите, существенная.

Какой результат?

eCKSjQWg8cu5CLrPdJICwMfbbjIjItbLV5-ux7OG

В результате у красной кнопки конверсия ниже на 16%.

Значит ли это, что синий цвет лучше? В этом случае, да. Во всех остальных - не факт. Этот пример показывает 2 вещи:

  • Любую гипотезу относительно конверсии надо тестировать
  • Простая смена цвета кнопки может существенно повысить конверсию

После того, как конверсия совершена

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

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

+8
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Рита Петрова
Статья заставляет задуматься. Бесплатно и Подписаться показывают неожиданные результаты. Лишний раз доказывает, что любую идею надо тестировать, а не воспринимать как само собой разумеющееся.
Ответить
Amarket
Платформа сарафанного радио
Антон Черкасов
Спасибо за обратную связь.
Ответить
Константин К.
Рассказать, что "бесплатно" понижает конверсию и закончить этой фразой статью. Отлично.
Ответить
Amarket
Платформа сарафанного радио
Антон Черкасов
Это не значит, что в нашем конкретном случае это не работает ) Я хотел показать, что все надо тестировать. Мы тестировали разные варианты. У нас с кнопкой "бесплатно" сейчас конверсия лучше.
Ответить
Офисофф
Онлайн сервис для бизнеса и бухгалтерии
Виталий 18511
Конечно, у вас лучше. Вы где живете? В России, где все и всё хотят на халяву. Здесь это улучшает конверсию. Когда люди уйдут от этого дурацкого мышления, тогда "бесплатно", будет снижать конверсию, как в описанном примере.
Ответить
Andrew Halin
Основная идея статьи - уходить от шаблонов, принимая те или иные решения. И автор хорошо раскрывает эту идею.
Ответить
Amarket
Платформа сарафанного радио
Антон Черкасов
Спасибо за то, что так емко все подытожили. В точку!
Ответить
Oleg Smeltsov
Да не поможет вам никакой а/б тест в выборе цвета кнопки. Не существует идеально подходящего цвета, лучший цвет этот тот, который наиболее контрастен с бекграундом. Цвет кнопки должен зависеть от общей стилистики лендинга и заметно выделяться. Можно, конечно, учитывать психологические нюансы (красный - тревога, зеленый - наоборот) но, в основном, все строится на контрасте.
Ответить
Amarket
Платформа сарафанного радио
Антон Черкасов
Нам как раз А/Б тест отлично помогает в выборе цвета кнопок. Особенно, когда контрастным для сайта цветом будет и синий, и зеленый, и красный. Контрастный - не значит только 1 цвет. Как определить по вашему, если для сайта контрастными будут сразу несколько цветов? А/Б нужен, чтобы понять какой из них лучший.
Ответить
Oleg Smeltsov
Для этого существует теория цвета, а не А/Б тесты :) Про монохромные, триадные, аналоговые сочитания можете погуглить)
Ответить
Amarket
Платформа сарафанного радио
Антон Черкасов
Как показывает практика, любые теории имеют исключения. И лучше не доверять безоговорочно им, а проверять на практике гипотезы, полученные на основании теории. Именно для этого и существуют А/Б тесты )
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.