Документ описывает процесс first-click тестирования (FCT) как важный инструмент для улучшения интерфейсов, включая его преимущества и шаги реализации теста. Приводятся примеры и результаты тестирования банковских приложений, подчеркивающие ключевые аспекты дизайна и взаимодействия пользователей. Также рассматриваются различные инструменты для FCT, их преимущества и недостатки, включая Axure, Google Analytics, Яндекс.Метрику, Chalkmark и UsabilityHub.

1. First-Click тестирование как инструмент
для быстрого улучшения интерфейсов
История одного теста (FCT) за 5 минут:
процесс, инструменты, аналитика
Вебинар для agile-команд
и юзабилити-специалистов

2. 2
Наш опыт тестирования банковских
приложений
Коллеги из Альфа-банка придумали тест для
поиска специалистов в штат.
При тестировании Альфа-Банка для рейтинга
приложений оказалось, что красная кнопка
вызывает сложности у пользователей и
увеличивает время выполнения задачи
Результаты тестов подтвердил и FCT
с пользователями из Facebook.
Описание дизайна
приложения

3. 3
Что такое First-Click Testing?
First-Click Testing (FCT) показывает, куда
пользователи нажмут в первую очередь
Преимущества этого метода
тестирования
Помогает принять решение в дизайне
Проверка гипотез о работе виджетов
Проверка гипотез по схеме А/B-
тестирования
Быстрый тест легко встроить в agile-
процесс
87% пользователей успешно
справляются с задачами,
если с первого раза
нажимают на нужную кнопку
Jeff Sauro

4. Я попросил сделать
варианты для сравнения
и проверить результаты
на аудитории в FB.
Давайте посмотрим
какой вариант лучше…
1 Текущее решение 2 Вариант для теста 3 Вариант для теста

5. Ваше решение
33 секунды успех 0,71 22 секунды успех 0,79 8 секунд успех 0,61
Карта кликов показала,
что большинство
«неуспешных»
пользователей нажимали
на «текущий счет», т.е.
искали его через продукт.
Минимальная
рекомендация: добавить
функцию оплаты через
счет.
Особенно, если Альфа-
Банк не готов отказаться
от красной кнопки.
1 Текущее решение 2 Вариант для теста 3 Вариант для теста

6. 6
Подготовка и запуск FCT
Шаг -1. Формирование гипотез для проверки
Поиск узких мест, проблем в существующих
интерфейсах и предложение способов их
решения
Шаг 0. Выбор инструмента для проведения
тестирования
Мы использовали Google Analytics и Axure
+ бонус в конце презентации
Сравнение инструментов для FCT
Шаг 1. Реализация сфомированных гипотез
Отрисованные макеты, изменённые прототипы
или внесение изменений в макеты
Шаг 2. Настройка аналитики,
достаточной для проверки гипотез
Шаг 3. Запуск и проведение тестирования
с использованием выбранного инструмента,
наличие связки с панелью
Шаг 4. Авто-выгрузка аналитики
Шаг 5. Анализ результатов
Выбор верной гипотезы без ошибок разного рода

7. 7
#1 AXURE, МЕТРИКА И GOOGLE
ANALYTICS
Инструменты
Реализация гипотез
Настройка аналитики
Проведение исследования

8. 9
Подготовка прототипа в Axure
Важно в структуре отразить страницы,
которые будут участвовать в тестировании
На скриншоте структура страниц для
тестирования приложений:
Альфа-Банка,
БСПБ,
Сбербанк
NB: не забываем продумать вопрос
мотивации для участников. В нашем случае
это данный вебинар :)
РЕАЛИЗАЦИЯ ГИПОТЕЗ
Шаг 1.1. 60 минут

9. 10
РЕАЛИЗАЦИЯ ГИПОТЕЗ
Публикация прототипа онлайн
Для получения ссылок на страницы
прототипа и установки на них счётчиков
Скриншот axshare.com
Шаг 1.2. <1 минуты

10. 11
НАСТРОЙКА
АНАЛИТИКИ
Создание счётчиков
на сервисах Google Analytics
Необходимо ввести URL сайта
с Axshare для отслеживания
Google Analytics
Шаг 2.1. 1 минута

11. 12
НАСТРОЙКА
АНАЛИТИКИ
Яндекс.Метрика
Создание счётчиков
на сервисах Яндекс.Метрика
Необходимо ввести URL сайта
с Axshare для отслеживания
Подключить карту кликов для
просмотра непопаданий по цели
Подключить Вебвизор
для сохранения визитов
пользователей и их просмотра
Шаг 2.3. 1 минута

12. 13
НАСТРОЙКА АНАЛИТИКИ
Получение кода счётчика и
интеграция его в Axure как
плагина
Google Analytics Добавление плагина в Axure
Шаг 2.2. 2 минуты

13. 14
НАСТРОЙКА АНАЛИТИКИ
Получение кода счётчика и
интеграция его в AxShare как
плагина
Яндекс.Метрика
Шаг 2.4. 2 минуты

14. 15
ПРОВЕДЕНИЕ ИССЛЕДОВАНИЯ
Поиск респондентов
Специфика пользователей зависит
от вашего ресурса и того, какие
гипотезы
вы хотите проверить.
Требования к респондентам
Могут включать в себя соцдем-
параметры, опытность пользователя и
т.д.
Помочь сформировать требования
к респондентам и посчитать выборку
может юзабилити-специалист.
Шаг 3. ___минут
Поиск респондентов для FCT
ИТОГО
50+ респондентов
< 10 минут на исследование

15. 16
АВТО-ВЫГРУЗКА АНАЛИТИКИ
После проведения эксперимента с нужным
количеством респондентов в GA и Метрике
можно мониторить результаты
Шаг 4. 0 минут
Шаг 5. 10 минут
АНАЛИЗ РЕЗУЛЬТАТОВ
В Google Analytics отображается успешность
каждого теста и время его выполнения
Вебвизор для более подробной информации
по поведению пользователей на сайте Google Analytics Отчёт «Страницы»

16. 17
Шаг 5. 10 минут
АНАЛИЗ РЕЗУЛЬТАТОВ
Тепловая карта
кликов
Яндекс.Метрика покажет тепловую
карту кликов для понимания причин
ошибок
Google Analytics и Яндекс.Метрика
предоставляют достаточно
данных, но анализ этих измерений
может выполнить UX-специалист

17. 18
AXURE + GOOGLE ANALYTICS + ЯНДЕКС.МЕТРИКА
Преимущества:
• Реализация гипотез происходит там же, где
и запускается FCT. Большая гибкость
инструмента прототипирования
• Быстрая интеграция веб-аналитики в
готовые прототипы
• Плагин с аналитикой достаточно один раз
подключить и будет работать
Недостатки:
• Лицензия Axure от 29$ в месяц
• Необходимо знание Axure
Проектирование Настройка теста Тестирование Выгрузка Анализ
1,5 часа1 час 6 минут 10 минут 0 минут 10 минут

18. 19
#2 ДРУГИЕ ИНСТРУМЕНТЫ ДЛЯ FCT
HTML И GA
Chalkmark
Usabilityhub

19. 20
Реализация гипотез
Необходимо знание основ HTML,
CSS и JS
Время для реализации гипотез
будет зависеть от умения верстать,
сложности макета
Большой выбор инструментов
Можно использовать практически
любой текстовый редактор или
редактор кода с подсветкой и
автодополнением
Шаг 1. 80—120 минут

20. 21
НАСТРОЙКА
АНАЛИТИКИ
Шаг 2. 6 минут
ЗАПУСК И ПРОВЕДЕНИЕ
ТЕСТИРОВАНИЯ
Шаг 3. 10 минут
АВТО-ВЫГРУЗКА
АНАЛИТИКИ
Шаг 4. 0 минут
Шаг 5. 10 минут
АНАЛИЗ РЕЗУЛЬТАТОВ
Перечисленные шаги
проводятся аналогично
описанному процессу
с Axure и занимают
столько же времени

21. 22
HTML вместо AXURE
Преимущества:
• Для реализации гипотезы подойдёт любой
бесплатный редактор (например, Brackets)
• Проще интегрировать веб-аналитику
• Вёрстку можно использовать для готового
продукта
Недостатки:
• Необходимы знания вёрстки
• Загрузка файлов на хостинг сложнее, чем
загрузка проекта в Аxshare
• Необходимо наличие домена
Проектирование Настройка теста Тестирование Выгрузка Анализ
3,5 часа3 часа 6 минут 10 минут 0 минут 10 минут

22. 23
CHALKMARK

23. 25
Chalkmark
Добавьте задания для тестирования
и картинки, выделите верные области
клика
Добавление картинки
Выбор областей клика
Шаг 1.2. 2 минуты
Инструмент делает интерактивные прототипы
только из готовых макетов – проектировать
«внутри» нельзя

24. Chalkmark
Настройте параметры тестирования:
Возможность пропускать задания, их
перемешивание и количество заданий для
каждого участника
Корректная настройка теста
влияет на результаты, поэтому
важно запускать готовить
тестирование со специалистами
Шаг 1.3. <1 минуты

25. Chalkmark
Добавьте примечания к процессу
тестирования
Добавьте опросник после тестирования
Опрос необходимо создать в самом
приложении, поскольку нет интеграции с
Google Forms
Добавьте персонализацию: логотип
компании, задайте цвет фона
Эти шаги не являются обязательными Нельзя ссылку сделать «красивой»
Шаг 1.4. <1 минуты

26. 28
Настройка происходит
в рамках создания теста
Остальные шаги занимают
столько же времени, сколько
при работе с Google
Analytics и
Яндекс.Метрикой
НАСТРОЙКА
АНАЛИТИКИ
Шаг 2. 5 минута
ЗАПУСК И ПРОВЕДЕНИЕ
ТЕСТИРОВАНИЯ
Шаг 3. 10 минут
АВТО-ВЫГРУЗКА
АНАЛИТИКИ
Шаг 4. 0 минут
Шаг 5. 10 минут
АНАЛИЗ РЕЗУЛЬТАТОВ

27. 29
Chalkmark
Преимущества
• Достаточно картинки – можно отметить
области кликов
• Аналитика встроена: не нужно
задумываться об URL и копировании кода
• Возможность добавить опрос перед или
после прохождения тестов
• Возможность запрашивать контакты
респондентов
Недостатки
• 166$ в месяц (в бесплатной версии: 10
респондентов, 3 задания – не достаточно
для исследования)
• Нельзя изменить текст ссылки на более
«красивую»
Проектирование Настройка теста Тестирование Выгрузка Анализ
2 часа5 минут +
создание макета
от 1 часов
5 минут 10 минут 0 минут 10 минут

28. 30
USABILITYHUB

29. 31
Usabilityhub
Введите названия теста, связанного с ним
проекта и языка
Загрузите картинку интерфейса и вопрос
для респондентов
Шаг 1.1. <5 минут

30. 32
Usabilityhub
Добавьте вопросы после теста и настройте
дополнительные требования к
респондентам
Шаг 1.2. <3 минут

31. 3333
Настройка происходит
в рамках создания теста
Остальные шаги занимают
столько же времени, сколько
при работе с Google
Analytics и
Яндекс.Метрикой
НАСТРОЙКА
АНАЛИТИКИ
Шаг 2. минута
ЗАПУСК И ПРОВЕДЕНИЕ
ТЕСТИРОВАНИЯ
Шаг 3. минута
АВТО-ВЫГРУЗКА
АНАЛИТИКИ
Шаг 4. 0 минут
Шаг 5. 10 минут
АНАЛИЗ РЕЗУЛЬТАТОВ

32. 3434
Usabilityhub
Пример отчёта

33. 35
Usabilityhub
Преимущества
• Достаточно картинки – можно отметить
области кликов
• Аналитика встроена: не нужно
задумываться об URL и копировании кода
• Возможность добавить опрос перед или
после прохождения тестов
Недостатки
• Стоимость от 79$ в месяц
(в бесплатной версии нельзя запускать опрос)
• Нет быстрых результатов: области кликов
отмечать можно только после тестов
• Нет функционала запроса контактов
респондентов
Проектирование Настройка теста Тестирование Выгрузка Анализ
2 часа5 минут +
время на
создание макета
(от 1,5 часов)
5 минут 10 минут 0 минут 10 минут

34. 36
Поделитесь в комментариях
своим опытом
Дмитрий Силаев
+7 (926) 492 05 50
d.silaev@usabilitylab.net
rating.usabilitylab.ru
+ 7 (495) 933-01-37
info@usabilitylab.net

35. 37
СРАВНЕНИЕ ИНСТРУМЕНТОВ FCT
Axure
HTML вместо Axure
Chalkmark
Usabilityhub

36. 38
Сравнение инструментов FCT
Axure + Метрика +
GA
HTML + Метрика +
GA
Chalkmark Usabilityhub
Формирование
гипотез для
проверки
–
Реализация
сфомированных
гипотез
Лицензия Axure от
29$ в месяц
Бесплатное
тестирование
Быстрое создание
переходов
Быстрое создание
экранов
Сложная
интеграция
сервисов
Требуются навыки
верстальщика
Бесплатное
тестирование
Долгая реализация
переходов
Долгая реализация
страниц
Простая интеграция
сервисов
166$ в месяц
Быстрое
создание теста
Нельзя
создавать
экраны внутри
Аналитика
интегрирована
79$ в месяц
Нет ограничения
на кол-во тестов
Быстрое
создание теста
Нельзя создавать
экраны внутри
Аналитика
интегрирована

37. 39
Сравнение инструментов FCT
Axure + Метрика +
GA
HTML + Метрика +
GA
Chalkmark Usabilityhub
Запуск и
проведение
тестирования
Дает только ссылку, связки с панелью нет
Добавление опроса Можно добавить
ссылку на Google
Forms
Можно добавить
ссылку на Google
Forms или
реализовать свой
Встроенная
возможность
добавить опрос
Встроенная
возможность
добавить опрос
Поиск
респондентов
Можно поделиться ссылкой на тест
в социальные сети
Предлагает найти
респондентов
Сбор контактов с
респондентов
Можно запросить контакты
через Google Forms
Можно запросить
контакты
Нет возможности
Авто-выгрузка
аналитики
Сразу отображается результат теста,
время выполнения, карта кликов
Анализ
результатов –
Общее время
1,5 часа 3,5 часа 2 часа 2 часа

38. Ни один из этих инструментов
не формулирует гипотезы и не
принимает решения по
внедрению изменений
40
Сравнение инструментов FCT
Формирование гипотез
Ни один из инструментов не помогает в
формировании гипотез, поэтому
к участию даже в FCT необходимо
привлекать юзабилити-специалистов
Только у Usabilityhub есть возможность
рекрутинга респондентов
Анализ полученной информации
Ни один из инструментов не даёт указания
по изменению интерфейсов для повышения
конверсии. Такие рекомендации могут
предлагать только юзабилити-специалисты
Наш выбор
Для прототипов в Axure и статичных экранов
мы используем связку с Яндекс.Метрикой и
Google Analytics