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

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

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

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

Обзор

Давайте быстро пробежимся по тому, что мы охватим в этой статье.

• Введение в A/B тестирование
• Почему вы должны использовать A/B тестирование?
  • Точка зрения клиента
  • Ваша точка зрения
• Что можно A/B тестировать?
• Что вы должны A/B тестировать?
• Правильный подход к A/B тестированию
• Что нужно и не нужно делать при тестировании

Введение в A/B тестирование

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

A/B тестирование использовалось медицинским сообществом в клинических экспериментах довольно долгое время. На самом деле, первое записанное клиническое испытание было A/B тестированием. В 1747, шотландец James Lind (врач Британского Королевского флота) разделил двенадцать страдающих цингой моряков на шесть пар. Затем он давал этим группам различные вариации, цитрусовых, уксуса, сидра, и т.д. и в результате выяснил, что витамин С, которым богаты цитрусовые, помогают в профилактике и лечении цинги.

James Lind кормит цитрусовым моряка, страдающим от цинги на борту Корабля Ее Величества Солсбери в 1747 (художник: Роберт А Тхом).
Источник: История медицины в фотографиях, опубликованные Parke, Davis & Co. в 1960 году.

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

Инженеры, которые не смыслят в дизайне, пытаются использовать основные правила и методы такого тестирования в надежде создать хороший дизайн. Веб-дизайнеры (как правило) терпеть не могут результаты, полученные таким путем. Самый известный случай, когда дизайнеры шли в разрез культуры A/B тестирования, был в Google. В своем посте под названием «Прощай Google» Дуглас Боуман из StopDesign (в настоящее время креативный директор в Twitter) обрисовал, как фанатичное использование тестирования даже мельчайших дизайнерских решений было одним из факторов, которые привели к его уходу из компании.

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

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

Почему вы должны использовать A/B тестирование?

По нескольким простым причинам. Это:

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

Давайте рассмотрим каждый из них отдельно.

Чтобы помочь вашим клиентам достичь их бизнес-целей

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

Более того это также отличная причина для потенциальных клиентов доверять вам свой бизнес.

Чтобы увеличить ваши доходы.

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

Профилактика изжоги

Вот краткое руководство для профилактики изжоги при обсуждении дизайна с клиентами.

Когда ваш клиент подходит к вам с:

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

Ваш ответ: «Конечно, давайте просто утроим A/B тест.»

Или, если ваш клиент скажет:

Клиент прибегает к помощи других людей."Выглядит хорошо, но я хотел бы узнать мнение моего друга, коллеги, дяди, хомячка и др." "Я спросил у своей мамы, она рисовала листовку для гаражной распродажи в 1982, так что можно сказать, у нее есть чувство вкуса" "Дизайн должен иметь более яркие цвета, а то он мрачноват. Может быть немного разового? Еще вставьте котенка. ВСЕ ЛЮБЯТ КОТЯТ!" Ваш ответ: «Конечно, давайте просто проведем A/B тест»

Или ваш клиент говорит:

У меня есть клиент, дизайн для которого летит прямо в ад. Последнюю «фичу», что они просили, чтобы при загрузке сайта автоматически в фоне начинала играть музыка Что я должен сказать чтобы мягко их убедить, что это плохая идея? - stackexchange.com

Вы должны казать: «Нет проблем, просто давайте  проведем A/B тест.»

Небольшое предупреждение...

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

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

Результаты? По его собственным словам «0,049% CTR против 0.137% CTR пользу дерь*** баннера из Microsoft Paint». Дело в том, что вполне вероятно, что фирменный цвет выбраный попугаем клиента или благодаря картам Таро, вывернут наизнанку ваш первоначальный дизайн. В этом случае будьте готовы выкусить его и продолжить делать для клиента больше денег.

Что можно A/B тестировать?

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

Источник: formstack.com

1. Заголовок
2. Подзаголовок
3. Копирайтинг
4. Отзывы
5. Текст с призывом к действию
6. Кнопка с призывом к действию
7. Ссылки
8. Изображения
9. Размещение элементов выше или ниже первого экрана

Правильный подход к A/B тестированию

Правильный способ тестирования это как если бы тест проводил ученый. Ученые используют так называемый «научный путь» (готов спорить, вы бы не догадались) который состоит из следующих действий:

1. Исследование и наблюдение: исследовать поведение пользователей и понять, где они прерывают путь ведущий к цели. Например вы заметили, что много посетителей либо не заполняют необходимую форму либо начинают заполнение но затем останавливаются где-то посередине.
2. Определение проблемы: к примеру «форма регистрации имеет слишком много полей, ведущих к высокому числу отказов».
3. Создание гипотезы: например «Сокращение количества полей в форме регистрации позволит сократить показатель отказов.»
4. Запуск эксперимента: основываясь на вашей гипотезе, вы создаете вариант формы, в которой вы уменьшили количество полей. Вы разделяете трафик пополам между оригиналом и короткой версией и ждете выполнения эксперимента до тех пор, пока он не достигнет статистической уверенности (95% уверенность является признанным стандартом и ваше программное обеспечение должен ему следовать). Помните, что нужно всегда проводить тестирование вместе с  оригиналом («контролем») в одно и то же время так, чтобы вы смогли сравнить результаты. Таким образом, вы будете знать, является ли новый вариант лучше или хуже, чем оригинал.
5. Анализ: вы увидите, работает ли новый вариант лучше или  хуже чем контрольный.
6. Вывод: если вариант работает лучше, вы реализуете его для всех пользователей. Если работает хуже то вы узнаете, что длина формы, вероятно, не является результатом высокого уровня отказов и необходимо вернуться к определению проблемы.

Создание вашего первого A/B теста

Большинство современных инструментов для веб-A/B тестирования работают следующим образом:

• Внесение изменений на веб-странице с помощью визуального редактора (это будет называться вариацией).
• Настройка параметров тестирования.
• Вставка JavaScript кода на веб-сайте, где будет проходить тест.
• Старт теста.
• Ожидание результатов, на основе которых вы уже будете принимать дальнейшие меры.

Для целей этой статьи я покажу вам, как настроить быстрый тест, с использованием Visual Website Optimizer (да, я работаю здесь).

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

Внесите необходимые изменения:

Настройте цели тестирования и параметры:

Теперь все, что вам нужно сделать, это добавить фрагмент JavaScript на ваш веб-сайт, и все готово.

Что нужно и не нужно делать при тестировании

Закругляясь, перечислим несколько рекомендаций.

• Во-первых и обязательно отпустите ваше эго. Это эксперимент, не проверка вашего дизайна.
• Проверяйте только одну вещь в одно время. Если вы одновременно тестируете слишком много изменений, то не сможете определить, что работает, а что нет.
• Дождитесь статистической уверенноти. Большинство инструментов для A/B тестирования объявляют победителя, когда процент уверенности дорастает до 95%.
• Всегда проверяйте контроль и вариацию в одно и то же время и на одном и том же трафике. Тестирование контроля на одной неделе и вариации на следующей - распространенная ошибка, которую следует избегать, поскольку за это время профиль посетителей может измениться.
• Сделайте большие изменения. Если посетители не заметят изменений, они не смогут отреагировать на него и вы останетесь без убедительных результатов.
• Убедитесь, что изменения сделаны везде где нужно. Например, если вы делаете изменения на странице продукта, такие же изменения должны быть сделаны на остальных страницах продуктов.
• Если ваш клиент не против, попробуйте тестировать постоянно. Уже одно положительное A/B тестирование обычно убеждает скептически натроенных клиентов делать это. В результате теплые улыбки и медвежьи объятия обычно склоняют дизайнера к мысли, что это вовсе не плохая идея.
• Не оставляйте результаты без последствий. Делайте изменения немедленно, как только получены положительные результаты и используйте отрицательные результаты для создания вашей собственной внутренней базы знаний. Извлеченные уроки помогут вам с другими клиентами.
• Никогда не предполагайте что-нибудь. Просто дождитесь результатов.

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

Спасибо за чтение, не стесняйтесь задавать любые вопросы  в разделе комментариев.