First click тестирование. История одного теста.

First-Click тестирование как инструмент

для быстрого улучшения интерфейсов

История одного теста (FCT) за 5 минут:

процесс, инструменты, аналитика

Вебинар для agile-команд

и юзабилити-специалистов

2

Наш опыт тестирования банковских

приложений

Коллеги из Альфа-банка придумали тест для

поиска специалистов в штат.

При тестировании Альфа-Банка для рейтинга

приложений оказалось, что красная кнопка

вызывает сложности у пользователеи и

увеличивает время выполнения задачи

Результаты тестов подтвердил и FCT

с пользователями из Facebook.

Описание дизайна

приложения

http://www.rating.usabilitylab.ru/

https://vc.ru/p/alfa-app-redesign

3

Что такое First-Click Testing?

First-Click Testing (FCT) показывает, куда

пользователи нажмут в первую очередь

Преимущества этого метода

тестирования

Помогает принять решение в дизайне

Проверка гипотез о работе виджетов

Проверка гипотез по схеме А/B-


Быстрый тест легко встроить в agile-

процесс

87% пользователей успешно

справляются с задачами,

если с первого раза

нажимают на нужную кнопку

Jeff Sauro

https://measuringu.com/first-click/

Я попросил сделать

варианты для сравнения

и проверить результаты

на аудитории в FB.

Давайте посмотрим

какой вариант лучше…

1 Текущее решение 2 Вариант для теста 3 Вариант для теста

Ваше решение

33 секунды успех 0,71 22 секунды успех 0,79 8 секунд успех 0,61

Карта кликов показала,

что большинство

«неуспешных»

пользователей нажимали

на «текущий счет», т.е.

искали его через продукт.

Минимальная

рекомендация: добавить

функцию оплаты через

счет.

Особенно, если Альфа-

Банк не готов отказаться

от красной кнопки.

1 Текущее решение 2 Вариант для теста 3 Вариант для теста

6

Подготовка и запуск FCT

Шаг -1. Формирование гипотез для проверки

Поиск узких мест, проблем в существующих

интерфейсах и предложение способов их

решения

Шаг 0. Выбор инструмента для проведения


Мы использовали Google Analytics и Axure

+ бонус в конце презентации

Сравнение инструментов для FCT

Шаг 1. Реализация сфомированных гипотез

Отрисованные макеты, изменённые прототипы

или внесение изменений в макеты

Шаг 2. Настройка аналитики,

достаточной для проверки гипотез

Шаг 3. Запуск и проведение тестирования

с использованием выбранного инструмента,

наличие связки с панелью

Шаг 4. Авто-выгрузка аналитики

Шаг 5. Анализ результатов

Выбор верной гипотезы без ошибок разного рода

7

#1 AXURE, МЕТРИКА И GOOGLE

ANALYTICS

Инструменты

Реализация гипотез

Настройка аналитики

Проведение исследования

9

Подготовка прототипа в Axure

Важно в структуре отразить страницы,

которые будут участвовать в тестировании

На скриншоте структура страниц для

тестирования приложений:

Альфа-Банка,

БСПБ,

Сбербанк

NB: не забываем продумать вопрос

мотивации для участников. В нашем случае

это данный вебинар :)

РЕАЛИЗАЦИЯ ГИПОТЕЗ

Шаг 1.1. 60 минут

10

РЕАЛИЗАЦИЯ ГИПОТЕЗ

Публикация прототипа онлайн

Для получения ссылок на страницы

прототипа и установки на них счётчиков

Скриншот axshare.com

Шаг 1.2. <1 минуты

11

НАСТРОЙКА

АНАЛИТИКИ

Создание счётчиков

на сервисах Google Analytics

Необходимо ввести URL сайта

с Axshare для отслеживания

Google Analytics

Шаг 2.1. 1 минута

12

НАСТРОЙКА

АНАЛИТИКИ

Яндекс.Метрика

Создание счётчиков

на сервисах Яндекс.Метрика

Необходимо ввести URL сайта

с Axshare для отслеживания

Подключить карту кликов для

просмотра непопаданий по цели

Подключить Вебвизор

для сохранения визитов

пользователей и их просмотра

Шаг 2.3. 1 минута

13

НАСТРОЙКА АНАЛИТИКИ

Получение кода счётчика и

интеграция его в Axure как

плагина

Google Analytics Добавление плагина в Axure

Шаг 2.2. 2 минуты

14

НАСТРОЙКА АНАЛИТИКИ

Получение кода счётчика и

интеграция его в AxShare как

плагина

Яндекс.Метрика


15

ПРОВЕДЕНИЕ ИССЛЕДОВАНИЯ

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

Специфика пользователей зависит

от вашего ресурса и того, какие

гипотезы

вы хотите проверить.

Требования к респондентам

Могут включать в себя соцдем-

параметры, опытность пользователя и

т.д.

Помочь сформировать требования

к респондентам и посчитать выборку

может юзабилити-специалист.

Шаг 3. ___минут

Поиск респондентов для FCT

ИТОГО

50+ респондентов

< 10 минут на исследование

16

АВТО-ВЫГРУЗКА АНАЛИТИКИ

После проведения эксперимента с нужным

количеством респондентов в GA и Метрике

можно мониторить результаты

Шаг 4. 0 минут


АНАЛИЗ РЕЗУЛЬТАТОВ

В Google Analytics отображается успешность

каждого теста и время его выполнения

Вебвизор для более подробной информации

по поведению пользователей на сайте Google Analytics Отчёт «Страницы»

17



Тепловая карта

кликов

Яндекс.Метрика покажет тепловую

карту кликов для понимания причин

ошибок

Google Analytics и Яндекс.Метрика

предоставляют достаточно

данных, но анализ этих измерений

может выполнить UX-специалист

18

AXURE + GOOGLE ANALYTICS + ЯНДЕКС.МЕТРИКА

Преимущества:

• Реализация гипотез происходит там же, где

и запускается FCT. Большая гибкость

инструмента прототипирования

• Быстрая интеграция веб-аналитики в

готовые прототипы

• Плагин с аналитикой достаточно один раз

подключить и будет работать

Недостатки:

• Лицензия Axure от 29$ в месяц

• Необходимо знание Axure

Проектирование Настройка теста Тестирование Выгрузка Анализ

1,5 часа1 час 6 минут 10 минут 0 минут 10 минут

19

#2 ДРУГИЕ ИНСТРУМЕНТЫ ДЛЯ FCT

HTML И GA

Chalkmark

Usabilityhub

20

Реализация гипотез

Необходимо знание основ HTML,

CSS и JS

Время для реализации гипотез

будет зависеть от умения верстать,

сложности макета

Большой выбор инструментов

Можно использовать практически

любой текстовый редактор или

редактор кода с подсветкой и

автодополнением

Шаг 1. 80—120 минут

21

НАСТРОЙКА

АНАЛИТИКИ


ЗАПУСК И ПРОВЕДЕНИЕ

ТЕСТИРОВАНИЯ


АВТО-ВЫГРУЗКА

АНАЛИТИКИ




Перечисленные шаги

проводятся аналогично

описанному процессу

с Axure и занимают

столько же времени

22

HTML вместо AXURE

Преимущества:

• Для реализации гипотезы подойдёт любой

бесплатный редактор (например, Brackets)

• Проще интегрировать веб-аналитику

• Вёрстку можно использовать для готового

продукта

Недостатки:

• Необходимы знания вёрстки

• Загрузка файлов на хостинг сложнее, чем

загрузка проекта в Аxshare

• Необходимо наличие домена


3,5 часа3 часа 6 минут 10 минут 0 минут 10 минут

23

CHALKMARK

25

Chalkmark

Добавьте задания для тестирования

и картинки, выделите верные области

клика

Добавление картинки

Выбор областей клика


Инструмент делает интерактивные прототипы

только из готовых макетов – проектировать

«внутри» нельзя

Chalkmark

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

Возможность пропускать задания, их

перемешивание и количество заданий для

каждого участника

Корректная настройка теста

влияет на результаты, поэтому

важно запускать готовить

тестирование со специалистами


Chalkmark

Добавьте примечания к процессу


Добавьте опросник после тестирования

Опрос необходимо создать в самом

приложении, поскольку нет интеграции с

Google Forms

Добавьте персонализацию: логотип

компании, задайте цвет фона

Эти шаги не являются обязательными Нельзя ссылку сделать «красивой»


28

Настройка происходит

в рамках создания теста

Остальные шаги занимают

столько же времени, сколько

при работе с Google

Analytics и

Яндекс.Метрикой

НАСТРОЙКА

АНАЛИТИКИ

Шаг 2. 5 минута





АНАЛИТИКИ




29

Chalkmark

Преимущества

• Достаточно картинки – можно отметить

области кликов

• Аналитика встроена: не нужно

задумываться об URL и копировании кода

• Возможность добавить опрос перед или

после прохождения тестов

• Возможность запрашивать контакты

респондентов

Недостатки

• 166$ в месяц (в бесплатной версии: 10

респондентов, 3 задания – не достаточно

для исследования)

• Нельзя изменить текст ссылки на более

«красивую»


2 часа5 минут + создание макета

от 1 часов

5 минут 10 минут 0 минут 10 минут

30

USABILITYHUB

31

Usabilityhub

Введите названия теста, связанного с ним

проекта и языка

Загрузите картинку интерфейса и вопрос

для респондентов

Шаг 1.1. <5 минут

32

Usabilityhub

Добавьте вопросы после теста и настройте

дополнительные требования к

респондентам

Шаг 1.2. <3 минут

3333

Настройка происходит

в рамках создания теста

Остальные шаги занимают

столько же времени, сколько

при работе с Google

Analytics и

Яндекс.Метрикой

НАСТРОЙКА

АНАЛИТИКИ

Шаг 2. минута



Шаг 3. минута


АНАЛИТИКИ




3434

Usabilityhub

Пример отчёта

35

Usabilityhub

Преимущества

• Достаточно картинки – можно отметить

области кликов

• Аналитика встроена: не нужно

задумываться об URL и копировании кода

• Возможность добавить опрос перед или

после прохождения тестов

Недостатки

• Стоимость от 79$ в месяц

(в бесплатной версии нельзя запускать опрос)

• Нет быстрых результатов: области кликов

отмечать можно только после тестов

• Нет функционала запроса контактов



2 часа5 минут + время на

создание макета

(от 1,5 часов)

5 минут 10 минут 0 минут 10 минут

36

Поделитесь в комментариях

своим опытом

Дмитрий Силаев

+7 (926) 492 05 50

[email protected]

rating.usabilitylab.ru+ 7 (495) [email protected]

37

СРАВНЕНИЕ ИНСТРУМЕНТОВ FCT

Axure

HTML вместо Axure

Chalkmark

Usabilityhub

38

Сравнение инструментов FCT

Axure + Метрика +

GA

HTML + Метрика +

GA

Chalkmark Usabilityhub

Формирование

гипотез для

проверки

–

Реализация

сфомированных

гипотез

Лицензия Axure от

29$ в месяц

Бесплатное

тестирование

Быстрое создание

переходов

Быстрое создание

экранов

Сложная

интеграция

сервисов

Требуются навыки

верстальщика

Бесплатное

тестирование

Долгая реализация

переходов

Долгая реализация

страниц

Простая интеграция

сервисов

166$ в месяц

Быстрое

создание теста

Нельзя

создавать

экраны внутри

Аналитика

интегрирована

79$ в месяц

Нет ограничения

на кол-во тестов

Быстрое

создание теста

Нельзя создавать

экраны внутри

Аналитика

интегрирована

39


Axure + Метрика +

GA

HTML + Метрика +

GA

Chalkmark Usabilityhub

Запуск и

проведение


Дает только ссылку, связки с панелью нет

Добавление опроса Можно добавить

ссылку на Google

Forms

Можно добавить

ссылку на Google

Forms или

реализовать свой

Встроенная

возможность

добавить опрос

Встроенная

возможность

добавить опрос

Поиск


Можно поделиться ссылкой на тест

в социальные сети

Предлагает найти


Сбор контактов с


Можно запросить контакты

через Google Forms

Можно запросить

контакты

Нет возможности

Авто-выгрузка

аналитики

Сразу отображается результат теста,

время выполнения, карта кликов

Анализ

результатов –Общее время

1,5 часа 3,5 часа 2 часа 2 часа

Ни один из этих инструментов

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

принимает решения по

внедрению изменений

40


Формирование гипотез

Ни один из инструментов не помогает в

формировании гипотез, поэтому

к участию даже в FCT необходимо

привлекать юзабилити-специалистов

Только у Usabilityhub есть возможность

рекрутинга респондентов

Анализ полученной информации

Ни один из инструментов не даёт указания

по изменению интерфейсов для повышения

конверсии. Такие рекомендации могут

предлагать только юзабилити-специалисты

Наш выбор

Для прототипов в Axure и статичных экранов

мы используем связку с Яндекс.Метрикой и

Google Analytics

First click тестирование. История одного теста.

Internet

Transcript of First click тестирование. История одного теста.