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

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

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

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

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

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

Определение A/B-теста

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

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

В следующем сравнении вы можете увидеть исходную версию первой складки (слева) и альтернативную версию (справа) с разными цветами кнопок и полей, а также с новым фоновым изображением:

Чтобы протестировать изменения, мы использовали Nelio A/B Testing в качестве эталонного плагина для A/B-тестирования. Первое, что мы собираемся сделать, это создать новый A/B-тест страниц, который является элементом, который мы собираемся протестировать.

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

На экране редактирования A/B-теста мы выбираем базовую страницу, которую хотим протестировать (наша страница с ценами), и создаем новый вариант, который мы отредактируем позже:

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

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

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

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

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

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

Анализ результатов испытаний

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

Мало того, что вариант получил меньше кликов по кнопкам действий, он также привел к меньшему количеству продаж (почти на 22%).

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

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

Избранное изображение Джереми Томаса на Unsplash.