НаFigma вам прототипы? Разбираем более простой подход для создания и теста интерактивных прототипов

Развиваю UX решения на Fastuna и регулярно наблюдаю, как продуктовые команды тратят силы и время на создание детальных прототипов, которые в итоге не решают поставленную задачу. Покажу на примерах, почему ненавижу тесты на Figma. Предложу альтернативный подход на базе конструктора анкет, расскажу про кейс тестирования приложения для доставки еды Yami Yami.

Материал будет полезен тем, кто работает с прототипами интерфейсов: дизайнерам, продакт менеджерам, исследователям. Статья создана по мотивам выступления на Product Camp 2022. Кстати, следующий кемп в апреле 2023 года.

Прототип интерфейса (от др. -греч. πρῶτος «первый» + τύπος «отпечаток, оттиск»): быстрая, черновая реализация будущего интерфейса. Здесь говорим про интерактивные прототипы графического интерфейса, которые моделируют работу цифрового продукта или отдельных его функций.

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

Лучше один раз потыкать, чем прочитать сто статей на VC. Далее покажу результаты тестов по онлайн-панели. Перед прочтением попробуйте выполнить то же задание самостоятельно.

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

Ссылку на результаты тестов дам в конце статьи. Будет любопытно сравнить результаты читателей и людей из онлайн-панели.

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

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

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

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

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

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

Есть хорошая новость. Не все в нее поверят, но я попробую донести.

Фокусировка на задаче — гарант использования сил и времени с большей пользой. Предположим, задача проверить удобство навигации. Применение здесь полноценного интерактивного прототипа — один из вариантов решения, но это ресурсозатратно в плане создания и тестирования. Быстрее и проще решить задачу тестом первого клика. Для First Click достаточно изображений: макета или даже скетча.

Потребность в интерактивном прототипе возникает, когда в интерфейсе несколько равноценных пользовательских сценариев. Здесь теста первого клика уже недостаточно, ведь наша задача понять, как именно люди перемещаются по нелинейному интерфейсу и где они сталкиваются с трудностями. Но делать монструозный прототип и тут необязательно. В разговорах исследователи и дизайнеры из продуктовых команд часто описывали мне типичный прототип так: "3-4 экрана и 2-3 сценария". Это напоминает анкету с фильтрами.

Если выбираешь вариант А, то показываем вопрос 2. Если вариант Б, то вопрос 3 и т. д. В прототипе то же самое, только здесь вариантами ответов выступают области экрана. Перевел эту идею в техническое задание. Документ помариновался в беклоге всего лишь полгода, и к декабрю 2022 года я получил рабочую версию продукта. Экраны переключались с задержкой, но все работало на удивление стабильно. Далее на примере кейса расскажу, где этот подход применим.

Ранее уже публично тестировал раздражающие интерфейсы Tinkoff, IPhone, Spotify. В этот раз остановился на приложении для доставки еды Yami Yami, которое мучило меня в 2020-21 годах.

Контекст: в приложении есть два сценария заказа. 1-ый сценарий — быстрое добавление в корзину из каталога через “+”.

2-й сценарий включает переход в карточку товара. Важная особенность: в обоих сценариях для оформления нужно перейти в корзину, которая (!) кликабельна только из каталога.

Гипотеза 1: большинство новых пользователей не понимают, как перейти к оформлению заказа.

Гипотеза 2: Пользователи, перешедшие в карточку товара, испытывают больше трудностей с оформлением заказа.

Для создания прототипа беру 4 изображения, захожу в решение Prototype test на Fastuna и собираю прототип, который имитирует оба сценария.

Выборка: Мужчины, Женщины, 18-44 лет, Смартфон, Города 1м+, 100 человек на прототип

Задание: Выберите поке с лососем XL и перейдите к оформлению заказа.

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

Результат: Только 33% смогли дойти до оформления заказа. В среднем пользователи сделали 5 кликов по областям в ходе теста. 15% выполнили задание в 2 клика. 8% потребовалось 4-5 кликов. 10% сделали более 5 кликов для выполнения задания. 67% людей не справились с заданием вовсе.

(!) Дисклеймер: простые прототипы не восприимчивы к свайпу. В реальности с заданием бы справилось большее число людей. Но в графическом интерфейсе удобная ориентация по кнопкам никогда не будет лишней.

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

Пока писал текст, Yami Yami изменили интерфейс. Корзину перенесли вниз экрана, а второй сценарий сократили до 3-х кликов: при добавлении товара приложение автоматически возвращает пользователя в каталог. Не буду тешить себя иллюзией, что до команды дошло мое сентябрьское выступление на Product Camp. Скорее всего, я не один, кому был неудобен старый интерфейс.

Было бы глупо не провести сравнительный тест. Из 3-х изображений сделал 4-х экранный прототип.

Выборка идентичная: Мужчины, Женщины, 18-44 лет, Смартфон, Города 1м+, 100 человек на прототип

Задание: Выберите один поке с лососем и перейдите к оформлению заказа

В 2 клика задание выполнили все те же 14%. Сокращение шагов дало свои плоды: в 3-4 клика с заданием справились уже 45% людей.

Замечу, что команда Yami Yami подошли к решению проблемы радикально: переместили корзину вниз, оставили сверху пустое место. Это вызвало недоумение у отдельных респондентов.

Тест показал, что интерфейс стал удобнее. Из рекомендаций: я бы продублировал корзину сверху. Также стоит обратить внимание на кнопку быстрого добавления в заказ. Во втором тесте на нее кликнули еще меньше людей. Есть предположение, что с потерей обозначений “+” и “-” функция кнопки перестала быть понятна. Я бы уточнил у людей о назначениях кнопок, понимают ли они, что это и какой эффект несет.

Итого, настройка обоих тестов вместе со сбором материалов заняла у меня суммарно минут 20. В течение пары часов получил результаты и доказал наличие критичной проблемы, сравнил новый и старый интерфейсы. И все это доступно еще на этапе макетов. Пользуйтесь Prototype test, оставляйте обратную связь. Будем еще дорабатывать решение.

Если задача проверить линейный сценарий на интуитивность, то никакой прототип и не нужен. Хватит теста первого клика.

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

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

Тест старого интерфейса на онлайн-панели

Тест старого интерфейса на читателях

Тест нового интерфейса на онлайн-панели

Telegram канал Tiburon Research с кейсами и обучающими материалами по исследованиям.