При создании сайтов, программ, приложений разработчики ставят перед собой ряд вопросов: кто целевая аудитория, каким должен быть дизайн, контент и т.д. Несмотря на сложность этих задач, решаются они достаточно успешно. Как показывает практика, трудности начинаются, когда мы сталкиваемся с разностью взглядов владельца сайта на продукт и взглядом пользователя (потребителя). У каждого из них своя цель: владелец стремится продать наиболее выгодно, потребитель – быстро получить необходимую информацию. Найти компромисс бывает непросто.
Чтобы приблизить эти цели друг к другу принято проводить тестирование. Тестирование позволяет определить, какой вариант подачи информации подходит пользователям, предоставляя объективные данные о прототипе. Зачастую оказывается, что предлагаемый для тестирования вариант является наиболее эффективным (один из примеров мы рассмотрим в статье).
Несмотря на то, что владелец ресурса не всегда готов на доработку/изменение структуры страниц сайта или дизайна, результаты тестирования (а конкретно здесь – A/B-тестирования) будут весомым аргументом для принятия таких изменений.
A/B-эксперимент проводит тест двух версий страницы: «A» (оригинальная/исходная) и «B» (тестовая/новая). Механизм A/B-тестирования: 50 % всех посетителей видят вариант «А», 50 % – вариант «B». Рассматриваемый в статье пример А/В-тестирования проводился на сайте автомобильного дилера на страницах моделей авто.
Первый этап тестирования
Работа над сайтом начинается с анализа.
Главная страница сайта, на которой указывается контактная информация, сфера деятельности, преимущества и другая важная для бренда информация – лицо компании. Но далеко не все пользователи готовы детально изучать первую страницу, так как их прежде всего интересуют цены, акции, ассортимент (модельный ряд), характеристики, комплектации (речь идет об автомобилях). Поэтому на многих сайтах трафик на главную страницу составляет 10–30% от общего числа посещений.
Необходимо проанализировать, куда заходит большинство пользователей. Если же основной трафик сконцентрирован на главной странице, следует уделить внимание её анализу и оптимизации.
Если же на главная страница идет не основной поток трафика, то вашим «крючком» для пользователя должна стать страница товара/модели. Проработка карточки товара напрямую влияет на эффективность вашего сайта.
Для пользователя знакомство с вашим товаром начинается с первого экрана страницы. От оформления первого экрана зачастую зависит поведение посетителя и то, сколько времени он проведет на вашем сайте. Все ценят своё время и если в течение нескольких секунд не находят на странице ответ, просто покидают сайт.
Основные элементы первого экрана:
- Заголовок – дает представление о том, что расположено на странице.
- Изображение – для визуального восприятия товара.
- Призыв к действию.
Цель первого экрана – целевое действие пользователя.
Подготовка к проведению теста
Рассмотрим всё вышесказанное на примере А/В-тестирования.
Основной поток трафика приходится на модельные страницы:
Первый экран страницы модели выглядит так:
Половину первого экрана занимает баннер с изображением модели, который не несет полезных функций для пользователя. За счет баннера левое меню сайта отображается не полностью на первом экране.
Для А/В-тестирования было предложено удалить баннер, за счет чего левое меню стало полностью доступным на первом экране, а также добавить кнопки целевого действия.
Макет предложенного варианта:Проверяемые гипотезы:
- Увеличится ли взаимодействие пользователей с левым меню за счет того, что оно стало доступным с первого экрана.
- Увеличатся ли целевые действия пользователей после размещения кнопок действий.
Тестирование
Для проведения тестирования использовался сервис optimizely.com.
Бесплатный тарифный план позволяет:
- проводить А/В-тестирование;
- реализовать мультивариантное тестирование;
- тестировать приложения;
- делать базовую сегментацию (источник: мобильный/не мобильный, браузер);
- интегрироваться с GA;
- использовать визуальный редактор страниц;
- тестировать 2 отдельных URL;
- ставить события на кнопки или подвязываться к событиям в GA;
- использовать коммьюнити, базу знаний и Академию.
Создаем проект
1. На странице списка проектов нажимаем https://app.optimizely.com/projects/manage
2. Задаем название для проекта
Подключаем интеграцию с GA
3. Заходим в проект на вкладку «Integrations»:
4. Далее переходим на вкладку «Settings» и копируем код, который необходимо вставить на сайте сразу после открывающего тега head
После этого начинаем эксперимент.
Также возможна настройка фильтрации пользователей
1. Переходим в настройки аудитории
2. Создаем новую аудиторию
3. Фиксируем:
- тип устройства;
- источник трафика;
- дополнительно фильтруем страницы с параметрами (на случай, если контекстная реклама Яндекса будет считаться поисковым трафиком).
4. Настраиваем фильтр, но не только на бесплатный трафик, а дополнительно отсекаем рекламный трафик по меткам:
utm_medium=cpc
tgb
banner
utm_source содержит _calltouch
Важно!
«Устройство», «Источник трафика», «Параметры запросов» следует указывать через «and also…» – логическое «И». А вот в рамках «Query Parameters» указывается через «or» – логическое «ИЛИ».
Пример настройки для десктопов:
Создаем тестовый вариант (следует отметить, что в optimizely.com не обязательно создавать страницу заново, каждый элемент на странице редактируется отдельно, что упрощает подготовку тестируемого макета).
Настраиваем цели, которые мы поставили перед собой для тестирования и запускаем тест.
Несколько слов о том, как получить достоверные и корректные результаты:
1. Статистическая достоверность. Достоверность должна составлять не меньше 95%. В сервисах тестирования есть калькуляторы для расчета https://www.optimizely.com/resources/sample-size-calculator/ .
2. Сроки проведения тестирования. Следует стремиться к получению 100 конверсий и больше. Поэтому не рекомендуется останавливать тест раньше срока. Чем больше выборка, тем достовернее результаты.
3. Проблема сайтов с низким трафиком. В таких случаях эксперимент растягивается на месяцы. Рекомендуется не тратить время на А/В-тестирование пока на сайте нет достаточного количества трафика и конверсий. Вместо этого следует делать анализ карты кликов, скроллинга и искать очевидные проблемы.
Однако А/В-тест можно запустить на нескольких схожих страницах. Т.е. получается, есть несколько модельных страниц, для которых мы создаем наш макет и тестируем одновременно.
Какие результаты были получены?
1. Гипотеза об увеличении взаимодействия пользователей с левым меню за счет того, что оно стало полностью доступно с первого экрана.
По результатам тестирования видно, что взаимодействие пользователей увеличилось на 11,3%.
2. Гипотеза об увеличении целевых действий пользователей после размещения кнопок действий.
В тесте отслеживались записи на тест-драйв. Так как кнопки «Запись на тест-драйв» в исходном варианте не было, то очевидно, что при её добавлении пользователи начнут кликать больше.
Исходный вариант:
Тестируемый вариант:
Результаты для кнопки «Запись на тест-драйв»:
Чтобы корректно отследить эффективность добавленной кнопки записи на тест-драйв, контролировались сразу несколько кнопок. Кнопка записи есть в шапке сайта:
Результаты А/В-тестирования показали схожие результаты по кликам кнопки записи на тест-драйв в шапке сайта в исходной и тестируемой версиях.
Конечная конверсия со страницы значительно увеличилась:
Выводы и рекомендации
Тестирование рекомендуется проводить на всех этапах создания и продвижения продукта.
Тестирование позволяет получить объективную оценку, которая может повлиять на эффективность сайта или позволит предоставить владельцу ресурса исчерпывающую информацию для принятия решения для изменений и доработки своего продукта. Для получения корректных результатов важно не допускать ошибок при планировании теста и выборе гипотез.
Чем больше данных получено от пользователей, тем больше понимания, что нужно потребителю, и тем выше вероятность создания востребованных продуктов.