Сплит-тестирование с помощью таблиц стилей CSS

Самый быстрый способ значительного сплит-тестирования веб-сайта - это внести смелые изменения в каскадную таблицу стилей (CSS) в рамках общесайтового эксперимента.

Почему таблицы стилей CSS важны

Основной файл CSS веб-сайта является центральной точкой отсчета, которая контролирует общие стили, положение и поведение всех элементов на каждой веб-странице.

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

Сплит-тесты для всего сайта, которые следует выполнять каждый раз

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

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

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

Все онлайн-конверсии начинаются с кнопки, ссылки или виджета с призывом к действию. Размер, цвет, формулировка и даже расположение этих CTA имеют большое значение для коэффициента конверсии. Например, некоторые цвета кнопок CTA могут слишком сильно сливаться с фоном или могут подсознательно мешать пользователю нажимать на них, в зависимости от того, что они воспринимают как негативный цвет. Текст, используемый в ссылках и кнопках, также имеет значение. Например, простое изменение кнопки «ОТПРАВИТЬ» на форме «ОТПРАВИТЬ» дает лучшие результаты, поскольку «отправить» воспринимается как сильное слово. Вы можете прочитать об этом в полном руководстве по призывам к действию здесь, на VWO.com.

Размер шрифта

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

Тип шрифта

Опять же, стиль шрифта редко тестируется на многих веб-сайтах, кажется, что он определяется на начальном этапе разработки, а затем о нем забывают на многих веб-сайтах. Разные стили шрифтов имеют разную читаемость. Кроме того, некоторые шрифты доступны только на определенных устройствах, а некоторые очень плохо отображаются на определенных устройствах при определенных размерах без растеризации шрифтов. Вы можете использовать семейство шрифтов для использования ряда шрифтов, начиная с вашего любимого и заканчивая более простыми шрифтами, такими как Arial, которые всегда есть на каждом устройстве. Новые шрифты могут быть включены на веб-сайт с помощью JavaScript или службы, такой как Google шрифты. Вы можете узнать больше в этом посте на TypeWolf.com о десяти лучших веб-шрифтах 2016 года.

Стиль шрифта

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

Цвета фона

Часто веб-сайты создаются на белом фоне, но если вы посмотрите на свой любимый новостной веб-сайт или платформу социальных сетей, он часто имеет легкий оттенок синего или серого. Цвета фона могут помочь выделить определенные области веб-страницы, например информационное окно или баннер со специальным предложением. Кроме того, цвет фона может усилить марку или тип показываемого продукта, и эта корреляция повышает коэффициент конверсии, поскольку контент выглядит более релевантным. Узнайте больше о психологии цвета для веб-сайтов в этой статье на Jimdo.com и посмотрите, как такие цвета, как оранжевый, имеют большое значение (подумайте об Amazon), а синий - нейтральность и технологичность (подумайте о Facebook или Twitter).

Перемещение или скрытие элементов

Файл CSS контролирует поля и отступы для всех общих элементов на веб-страницах, а также позволяет полностью удалить определенные элементы с помощью команды «display: none». Некоторые способы использовать это - это попытаться уменьшить вертикально потраченное впустую пространство, удалить ненужную информацию, изменить интервал между важными CTA или поэкспериментировать с удалением определенных блоков контента. Иногда лучше меньше на веб-страницах (принцип простоты и глупости), и рекомендуется посмотреть, сколько можно удалить с веб-страницы, одновременно улучшив коэффициент конверсии.

Платформы для сплит-тестирования файлов CSS на уровне всего сайта

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

Требуется специальное программное обеспечение для сплит-тестирования, чтобы изменения CSS-файла согласовывались от страницы к странице для каждого отдельного пользователя, к сожалению, бесплатные «Эксперименты с контентом» Google Analytics не поддерживают эти типы сплит-тестов. Вот некоторые инструменты, которые вы, возможно, захотите использовать:

• Визуальный оптимизатор веб-сайтов (VWO) - vwo.com - Мы обнаружили, что это наиболее простое для реализации программное обеспечение для сплит-тестирования. Он обрабатывает все типы сплит-тестов на HTML, CSS или JavaScript, а также при необходимости генерирует тепловые карты пользователей. Структуру цен можно найти здесь
• Optimizely - optimizely.com - он также обрабатывает все типы сплит-тестов на HTML, CSS или JavaScript и при необходимости может выполнять некоторые очень сложные сплит-тесты. Информацию о ценах можно найти здесь

Заключение

Настроить сплит-тест CSS для всего сайта легко и эффективно, но вам может потребоваться 15-минутная помощь разработчика, если вы не знакомы с CSS.

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

Если вам нужна помощь, не стесняйтесь обращаться к нам.