Придайте больше стиля вашей форме комментариев в WordPress

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

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

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

Улучшение дизайна формы комментариев WordPress

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

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

В основном мы внесли три изменения в форму комментариев:

1. Мы добавили в заголовок несколько смайликов , чтобы выделить область комментариев и побудить посетителей писать. Теперь кажется, что мы машем им и поощряем их писать с помощью смайликов приветствия и рукописного письма. Людям нравятся смайлики. Посмотрим, поможет ли это получить больше комментариев.
2. В юридическом тексте, в котором мы объясняем, где хранятся комментарии при заполнении информации, используется меньший шрифт . Это должно быть там по юридическим причинам, но мы не хотим придавать этому большое значение.
3. Мы превращаем кнопку отправки формы в оранжевый цвет , который выделяется. Как мы видели ранее, цвета важны.

Теперь, когда у нас есть готовый новый дизайн, нам нужно его протестировать.

Создание A/B-тестирования стилей CSS

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

С помощью Nelio A/B Testing мы создаем новый A/B-тест CSS. На следующем изображении показан экран редактирования такого теста:

Назовем тест («Выделение формы комментариев», в нашем случае) и вариант («Переработанная форма комментариев»). Мы также можем добавить описание к тесту в соответствующем поле на правой боковой панели. На предыдущем снимке экрана вы можете увидеть добавленное нами описание, которое служит ориентиром для любого пользователя, который собирается увидеть тест в будущем.

Мы также сократили объем теста до URL-адресов, содержащих https://neliosoftware.com/blog/ , так что тест применяется только к сообщениям в нашем блоге.

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

Прежде чем закончить, мы должны перейти к редактированию варианта B теста. Мы наводим указатель мыши на этот вариант, и появится возможность его редактирования. Как только мы щелкнем по нему, откроется редактор CSS с предварительным просмотром, как вы можете видеть на следующем снимке экрана:

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

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

Анализ результатов A/B-тестирования

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

Общее количество конверсий, полученных тестом, не впечатляет. За это время наш блог получил 27 комментариев (поэтому в результатах теста 27 конверсий).

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

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

Более продуманный дизайн побуждает к взаимодействию

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

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

Избранное изображение Джейсона Люна на Unsplash.