{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}

Да куда ты кликаешь? Какие задачи дизайна интерфейса решает метод First Click

При работе над интерфейсом неизбежно возникают вопросы: куда разместить кнопку, какой фон выбрать, как назвать раздел. И тут выручает First Click — наиболее наглядный и простой метод UX/UI исследования. В статье расскажу о возможностях метода и тонкостях применения.

Что такое First Click Test

Создатели метода Боб Бэйли (Bob Bailey) и Кери Вольфсон (Cari Wolfson) в 2006 году на основе десятков исследований впервые сформулировали идею: ключевой показатель эффективности интерфейса — это то, насколько успешно пользователь начинает решать задачу

Ключевой показатель эффективности интерфейса — это то, насколько успешно пользователь начинает решать задачу

По результатам исследований, если первый клик был верным, то вероятность успешного завершения пользовательского сценария составляет 87% (от 72 до 100). Участники, которые при первом нажатии попадают не туда, выполняли задачу лишь в 46% случаев (от 29 до 70).

Один экран. Один клик. На тесте первого клика человек получает задание, связанное с навигацией по интерфейсу, смотрит на экран и делает первый и единственный клик.

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

Пример отчета со случайной ротацией заданий

Область применения метода

1. Проверка понятности конкретного экрана

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

Пример: Банк запустил мобильный оператор связи.

Бизнес задача: за n времени на XX% увеличить конверсию на заказ сим карты с сайта банка.

Исследовательская задача: оценить, какой процент людей с первого раза найдет информацию об операторе на главной странице банка.

При просмотре тепловых карт иногда возникает вопрос: 72% успешных кликов это много или мало? В таких случаях помогает сравнение с похожим вариантом или бенчмарком. Метод подходит и для этой задачи.

2. Сравнение вариантов

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

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

Сравнивать тепловые карты одно удовольствие. Только задание должно быть одинаковое.

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

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

3. Тестирование пользовательского сценария

First Click позволяет тестировать пользовательские сценарии (user flow). Принцип все тот же: даем одно задание, последовательно показываем экраны с уточнениями, фиксируем на каждой странице первый клик. По тепловым картам видим, сколько людей теряется на каждом шаге сценария.

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

Пример с поиском дверной ручки. На втором шаге лишь 6% людей правильно выбрали раздел “скобяные изделия”. 71% нажали на раздел "Двери и окна".

Тонкости проведения First Click

Сначала гипотеза

Тест первого клика создан для проверки гипотез. Смотрим на интерфейс и делаем предположения о том, как именно люди взаимодействую с конкретными элементами интерфейса, формулируем опасения.

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

Оригинальный скриншот. Отчеты по ежемесячным пожертвованиям хранятся в разделе Отчеты и справки в левом меню.
50% кликнули по карточке фонда вместо раздела со справками и отчетами. Гипотеза подтвердилась.

Чем больше людей, тем нагляднее

First Click — это количественный метод

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

Чем больше кликов, тем лучше видны основные зоны. Большая выборка сводит к минимуму влияние случайных эффектов. Разовые ошибки складываются в паттерны, проявляют проблему.

Личный кабинет Фонда “нужна помощь”. Тепловая карта на основе 54 кликов.

Из-за разрозненности кликов не видны основные тренды.

Та же самая тепловая карта на основе 100 кликов. Клики формируются в явные кластеры.

Тестируем на пользователях и сторонних людях

Таргетируем исследование с учетом бизнес задач. Если бизнес цель - расширение аудитории продукта, рекомендуем тестировать материалы на максимально широкой аудитории.

Тест на пользователях покажет, с какими проблемами столкнутся пользователи при обновлении дизайна интерфейса.

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

Смартфон или десктоп — все равно

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

First Click ориентирован на оценку навигации. Мой опыт показывает, что люди пальцем и мышкой нажимают примерно в одинаковые места. Поэтому экраны приложений допустимо тестировать на всех устройствах. К тому же это дешевле и быстрее.

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

Комбинируем тест первого клика с анкетой

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

Платим временем или деньгами

Есть 3 подхода проведения First click

  1. Полностью самостоятельно. Создаем html страницу с интерфейсом, подключаем к ней метрику. Несложно, но требует специализированных навыков и доступа. Как показывает опыт, регулярно таким мало кто занимается.
  2. Ваша база и готовый инструмент. Загружаем изображения на сервис, получаем ссылку на проект, рассылаем по базе людей. Для проектов по своей базе у нас на Fastuna 500 интервью в месяц — бесплатно.
  3. Сторонние респонденты и готовый инструмент. Специализированные платформы дают доступ к респондентам. От момента запуска до получения результата проходит буквально пара часов. На рынке First Click предлагает Fastuna и Orposso. Яндекс взгляд сделали решение, похожее на тест первого клика, но с принципом как в Figma. Среди зарубежных сервисов выделю UsabilityHub и Chalkmark.

Выводы

First Click количественный метод, эффективен на выборках респондентов более 50 человек. Подходит для тестирования, сравнения отдельных экранов и для проверки пользовательских сценариев.

Метод не требователен к устройству, на котором тестируется экран. Результаты наглядны. Если хотите вкатиться в UX/UI исследований, то First Click - лучший выбор.

Добавляйтесь в друзья в Facebook. Задавайте вопросы про UI тесты на Fastuna.

0
7 комментариев
Написать комментарий...
Маргарита Лунина

Было бы круто, если бы был плагин для фигмы First Click. Тогда можно было бы тестить любой интерфейс в фигме, минуя упомянутую проблему навязанного сценария🤔

Ответить
Развернуть ветку
Pavel Schegolev

Маргарита, интересная мысль, но поясни про навязывание сценария? не очень понял. Ты же делаешь дизайн целевого пути, и вот если отдать на тест ссылку на прототип, по сути сценарий все равно будет, но будут видны и отклонения на каждом шаге...

Ответить
Развернуть ветку
Kirill Sherstobitov
Автор

17 декабря проведу бесплатный вебинар по связанной теме. Расскажу, как формулировать исследовательскую задачу и как под нее подбирать доступный метод для UI тестирования, подробно разберем 2 кейса. Записывайтесь за ништяками. Запись будет.
https://tiburon-research.timepad.ru/event/1499806/ 

Ответить
Развернуть ветку
Сергей Алексейчиков

Вписался

Ответить
Развернуть ветку
Kirill Sherstobitov
Автор

Буду рад! Вот как раз логику прописываю. Все оказалось не так уж просто там.

Ответить
Развернуть ветку
Андрей Крамарь

Очень интересно!

Ответить
Развернуть ветку
Dasha Zv

Спасибо за полезности

Ответить
Развернуть ветку
4 комментария
Раскрывать всегда