Как и почему вы должны создавать A/B-тесты ваших целевых страниц электронной коммерции

Опубликовано: 2021-07-15

Я помню, давным-давно, когда я впервые шел по главной торговой улице Чикаго, Мичиган-авеню, я был совершенно поражен витринами более чем одного магазина. Магазин Nike был большой данью уважения Майклу Джордану, магазин игрушек FAO Schwarz был захватывающим мини-парком развлечений и так далее. Вы вошли и в итоге взяли что-то с собой, просто чтобы получить сувенир на память

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

Люди часто думают, что целевая страница — это домашняя страница вашего сайта и, следовательно, она только одна. Нет ничего более далекого от правды. Этот тип страниц — это те страницы, которые мы разрабатываем как точки входа на наш веб-сайт. Это то, что привлекает внимание посетителя, удерживает его на нашем сайте и запускает процесс совершения покупок. Так, например, на нашем веб-сайте Nelio некоторые целевые страницы, которые мы должны показать Nelio A/B Testing:

  • Домашняя страница Nelio A/B Testing
  • Nelio A/B-тестирование для вашего бизнеса
  • Nelio A/B-тестирование для электронной коммерции
  • так далее

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

В этом посте мы рассмотрим основные характеристики целевой страницы и лучшие практики для повышения их коэффициента конверсии.

Особенности целевой страницы электронной коммерции

Как вы уже видели, целевая страница электронной коммерции — это отдельная веб-страница, созданная специально для маркетинговых целей. Это страница, на которую «попадает» посетитель, когда он нажимает на ссылку из объявления, результатов поисковой системы или рекламной кампании.

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

Захват части целевой страницы Nelio A/B Testing для электронной коммерции
Скриншот раздела целевой страницы Nelio A/B Testing for E-commerce.

Например, если человек ищет, как оптимизировать коэффициент конверсии в своей электронной коммерции, и, увидев разные результаты, он нажимает на ссылку Nelio A/B Testing для электронной коммерции (вы можете увидеть частичный снимок экрана на изображении выше). ), когда они попадут на страницу, они увидят заголовок, соответствующий поисковому запросу, изображение магазина, а также текст и призыв к действию, предлагающие начать создание A/B-тестов. На странице также объясняется, как они могут оптимизировать представление продуктов в своем магазине, и содержится отзыв, чтобы придать посетителю больше уверенности. Наконец, есть пара разделов, объясняющих, как они могут увеличить продажи благодаря данным и, конечно же, дополнительная информация о том, почему они могут нам доверять.

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

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

Зачем и какие тесты я должен создавать на целевой странице

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

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

Изображение, показывающее, как работает A/B-тестирование: трафик делится, и каждый сегмент видит один вариант, а затем мы проверяем, какой вариант получил больше конверсий.
В своей простейшей форме A/B-тестирование предлагает случайным образом разделить трафик на сайт на две группы так, чтобы 50 % посетителей видели дизайн A, а остальные 50 % — дизайн B. Отслеживая реакцию пользователей в каждой группе, мы можем рассчитать коэффициент конверсии каждой группы и, в случае статистически значимой разницы между ними, объявить дизайн-победитель.

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

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

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

Упростите страницу

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

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

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

Хотя теория хороша, самое главное — создать A/B-тест, который подтвердит, что упрощение, которое вы создали на своей странице, действительно является тем, которое предпочитают ваши посетители. Например, мы хотели упростить домашнюю страницу Nelio Software и провели для нее A/B-тест. Нашей целью было разработать более простую, наглядную и лаконичную альтернативную версию для повышения конверсии.

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

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

Первая складка вашей целевой страницы

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

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

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

Оригинальная версия первой страницы домашней страницы Nelio A/B Testing
Вариант первой страницы домашней страницы Nelio A/B Testing
Различия между исходной версией и вариантом первой страницы домашней страницы Nelio A/B Testing.

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

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

В этом случае результаты A/B-теста для английской версии отличались от результатов для испанской версии. В то время как в английской версии мы получили улучшение конверсии более чем на 12%, в испанской версии мы не смогли получить убедительных данных. Чтобы узнать больше об этом эксперименте, нажмите здесь.

Результаты A/B теста сравнения изменений на главной странице Nelio A/B Testing на английском языке.
Результаты A/B теста сравнения изменений на главной странице Nelio A/B Testing на английском языке.

Этот пример еще раз показывает вам важность A/B-тестирования ваших целевых страниц. Вы не можете знать, какое влияние какое-либо изменение окажет на ваш сайт, пока не протестируете его.

Избранные изображения

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

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

На этой странице первый раз содержит изображение, на котором изображен улыбающийся мужчина с заклейкой на лбу и густой бородой перед компьютером. На мониторе компьютера мы видим редакционный календарь Nelio Content. Мы решили создать A/B-тест с двумя дополнительными вариантами: первый вариант — это более традиционное изображение, показывающее группу людей, работающих перед ноутбуком. Во втором варианте мы показали скриншот редакционного календаря, к которому мы применили эффект размытия, чтобы сделать текст над ним более читаемым.

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

Что ж, любопытно было выигрышное изображение. Вот полная страница результатов теста:

Результаты A/B-тестирования различных избранных изображений.
Результаты A/B-тестирования различных избранных изображений в испанской версии.

В частности, изображение с группой людей перед компьютером имело на 25 % лучшую конверсию, чем бородатый мужчина с почти 90 % уверенностью в испанской версии и процентное улучшение почти на 15 % в победившей английской версии, теперь с еще более высокая статистическая достоверность, превышающая 95%.

Результаты A/B-тестирования в англоязычной версии сайта.
Результаты A/B-тестирования в англоязычной версии сайта.

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

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

Кнопки призыва к действию

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

Следуя некоторым теориям о том, какой цвет лучше всего подходит для кнопки призыва к действию, мы решили провести A/B-тестирование цвета кнопок на целевой странице Nelio Content. В этом случае мы провели тест стилей CSS с помощью Nelio A/B Testing.

Вот как выглядят кнопки действий при просмотре из редактора стилей CSS для каждого варианта выполненного нами A/B-теста. Сначала у вас есть оригинальная версия с оранжевыми кнопками. Два других варианта включают CSS для установки кнопок в зеленый и красный цвет соответственно:

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

Как мне создать эти A/B-тесты?

Создать A/B-тест очень просто, если вы используете инструмент A/B-тестирования. В частности, если вы используете Nelio A/B Testing, полностью интегрированный плагин WordPress, вы сможете создавать варианты любого теста так же легко, как вносить изменения на страницу с помощью редактора блоков.

Селектор тестов в Nelio A/B Testing
Селектор теста в Nelio A/B Testing.

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

В этом полном руководстве я объясню, как создавать тесты A/B с помощью редактора блоков WordPress.

Начните улучшать конверсию вашей электронной коммерции

Улучшение конверсии в вашей электронной коммерции так же или более важно , чем увеличение количества посещений вашего сайта. Целевые страницы — это страницы, на которые попадают ваши посетители, и заставить их конвертировать должно быть вашим главным приоритетом. Вы уже видели, что все они имеют некоторые общие характеристики, но только если вы создадите A/B-тесты, вы узнаете, как их улучшить. Мы показали несколько примеров, но вместо того, чтобы их копировать, выдвигайте собственные гипотезы и начинайте экспериментировать.

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

Избранное изображение Игоря Миске на Unsplash.