Как провести first-сlick тестирование с помощью Метрики

First-click тестирование — метод исследования интерфейсов, напоминающий A/B тестирование. Он тоже служит для проверки гипотез и сравнения разных экранов, но проводится немного по-другому.

Чтобы провести first-click исследование, пользователю показывают тестируемый экран, дают задачу и спрашивают, куда бы он нажал, чтобы её выполнить. Разным группам пользователей можно показывать разные экраны. Фиксируют только первый клик: куда пользователь нажал, чтобы начать выполнять задачу. Остальные исследователя не интересуют.

Первый клик так важен, потому что от него зависит, справится ли пользователь с задачей. Исследование метода показывает, что 87% пользователей успешно справляются с задачей, если с первого раза нажимают нужную кнопку или ссылку. Если пользователи делают неверный первый клик, то выполняют задачу только в 46% случаев.

Формулируем гипотезы

Чтобы first-click тест принес пользу, надо понимать, что мы хотим с его помощью выяснить.

В апреле мы, компания USABILITYLAB, составляли ежегодный рейтинг удобства банковских приложений. Тестируя приложение Альфа-Банка, мы обнаружили, что некоторые пользователи не сразу понимали, как с главного экрана перейти к оплате услуг. Им надо было нажать кнопку «Платежи и переводы», а они кликали на другие строчки и надписи. Мы предположили, что проблема была в оформлении и расположении кнопки. Чтобы понять, как сделать интерфейс понятнее,  мы решили провести first-click тест.

Создаём экраны

Для теста мы взяли три экрана. Первый — оригинальный. На втором переместили красную кнопку книзу. На третьем — убрали красный фон и превратили кнопку в ссылку.

Чтобы сделать экраны для first-click теста, подойдет любой инструмент, позволяющий быстро нарисовать интерфейс, сгенерировать html-код, куда можно будет встроить код Яндекс.Метрики, и разместить ссылки на экраны в интернете.

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

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

Готовый прототип мы загрузили в Axshare, связанный с Axure облачный сервис. Так мы получили страницу, к которой можно было подключить Яндекс.Метрику. А ссылку мы опубликовали в социальных сетях, чтобы привлечь респондентов.

Настраиваем Яндекс.Метрику

Метрика подключается к странице-прототипу интерфейса точно так же, как и к «обычному» сайту. Нужно просто создать новый счётчик и установить его в код страницы — в случае с Axshare это можно сделать в разделе Plugins. Стоит включить Вебвизор: он нужен не только для записей визитов, но и для других полезных отчётов — карты скроллинга и аналитики форм.

Для наших задач нам было недостаточно стандартного кода Метрики. Нужно было засечь, сколько времени респонденты будут проводить на тестовом экране — а по умолчанию Метрика показывает только всё время посещения сайта от первого до последнего события. Наш «сайт» состоял из двух страниц — инструкции по выполнению задания и собственно прототипа, — и нас интересовало только время на тестовом экране. Чтобы его зафиксировать, надо настроить параметры визита. Для этого в Аxure в начало страницы с тестовым экраном добавили вот такой код:
 

<script>
 var startDate = Date.now()
 var sendData = function() {
   yaCounterXXXXXXXX.params({
     time: Date.now() - startDate 
   });
 }
</script>

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

javascript: sendData();
Window.stop();

Разница между этими двумя точками вычисляется автоматически и отправляется в отчёт «Параметры визитов».
 

Привлекаем респондентов

Теперь ссылку на прототип с настроенной Метрикой нужно распространить среди респондентов. Как именно это сделать, зависит от того, где обитает ваша целевая аудитория. Ссылку можно  опубликовать на профильных сайтах, разослать по электронной почте или просто повесить в соцсетях. У нас не было особенных требований к респондентам, поэтому мы сделали в Facebook пост со ссылкой на исследование и собрали более двухсот анкет. Если у вас несколько групп целевой аудитории, желательно собрать примерно по 50-100 анкет на каждую из них.

Интерпретируем результаты

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

В нашем случае видно, что текущее решение Альфа-Банка с красной кнопкой между синим и белом фоном — самое неудачное. Пользователи тратят почти полминуты на выполнение задания, и 30% из них с ним не справляются. Второй вариант выигрывает у первого по обоим показателям. Быстрее всего пользователи догадываются, куда кликать, в третьем варианте, где красной кнопки нет, — однако у этого решения самый низкий показатель успешности. Получается, чтобы улучшить интерфейс, надо искать компромисс между вторым и третьим вариантом. И, конечно, снова его проверять.

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

Потратить $200 или час на работу с кодом