Развиваю UX решения на Fastuna и регулярно наблюдаю, как продуктовые команды тратят силы и время на создание детальных прототипов, которые в итоге не решают поставленную задачу. Покажу на примерах, почему ненавижу тесты на Figma. Предложу альтернативный подход на базе конструктора анкет, расскажу про кейс тестирования приложения для доставки еды Yami Yami.
Материал будет полезен тем, кто работает с прототипами интерфейсов: дизайнерам, продакт менеджерам, исследователям. Статья создана по мотивам выступления на Product Camp 2022. Кстати, следующий кемп в апреле 2023 года.
🚨 Контекст и термины
Прототип интерфейса (от др. -греч. πρῶτος «первый» + τύπος «отпечаток, оттиск»): быстрая, черновая реализация будущего интерфейса. Здесь говорим про интерактивные прототипы графического интерфейса, которые моделируют работу цифрового продукта или отдельных его функций.
Прототипы используют при запуске нового продукта, добавлении фичей, изменении навигации в продукте. Прототипы дают понимание, как будет выглядеть продукт и ключевые пользовательские сценарии. И все это до начала дорогостоящей разработки.
🎮 Интерактив
Лучше один раз потыкать, чем прочитать сто статей на VC. Далее покажу результаты тестов по онлайн-панели. Перед прочтением попробуйте выполнить то же задание самостоятельно.
Вот ссылка на тест. Прототип создан для проверки навигации мобильного приложения, поэтому откроется только на смартфоне. Если читаете с компьютера, то не поленитесь и скиньте себе ссылку на телефон. Так будет интереснее. Прототипы на десктоп сделаю в следующий раз.
Ссылку на результаты тестов дам в конце статьи. Будет любопытно сравнить результаты читателей и людей из онлайн-панели.
🧐 В чем проблема сложных прототипов
С одной стороны, чем больше прототип похож на финальный продукт, тем ближе результаты теста к реальности. С другой стороны, чем сложнее прототип, тем больше он требует ресурсов для создания, и тем у меньшего числа людей он откроется 💔.
В UX сфере распространены модерируемые юзабилити тесты — это разновидность личных интервью. Подходят для поиска инсайтов, неудобств интерфейса, детального изучения пользовательских паттернов поведения. Наличие модератора позволяет работать с интерактивными прототипами разного уровня проработки. Модератор сглаживает ограничения прототипа, комфортизирует пользователя. Стабильность работы здесь имеет значение, но не относится к критичным параметрам.
Стабильная работа прототипа выступает критичным параметром при количественной проверке интерфейсных гипотез. В таких тестах модератор отсутствует, и люди остаются с материалами один на один, именно поэтому результаты напрямую зависят от того, как прототип открывается. В статье сфокусируем внимание на проверке гипотез количественными методами. Далее перейду к насущному тезису.
У 10-30% людей прототип в Figma и аналогах не открывается 😫
Слабая открываемость снижает точность теста, а нередко и делает результаты подобных исследований вовсе бесполезными.
Мало кто из респондентов будет ждать более 10-40 секунд до загрузки прототипа.
Проблемы с запуском вызывает у людей раздражение и недоверие. Если тестируете прототипы на пользователях вашего продукта, это может снизить лояльность некоторых из них.
Либо Ваше приложение не работает, либо, наоборот Ваше приложение технично скачалось в мой комп в виде какого-либо вируса, а Вы сами мошенники.
Есть и другие проблемы. Если тестируете прототип, созданный в Figma и аналогах, уделите особое внимание подготовке. Иначе есть риск остаться без данных. Скоро опубликую статью, где расскажу о том, что необходимо учесть перед тестом.
🔨 Альтернативные инструменты для тестов
Есть хорошая новость. Не все в нее поверят, но я попробую донести.
Сложные интерактивные прототипы нужны далеко не всегда. Бывает и так, что прототипы не нужны вовсе.
Фокусировка на задаче — гарант использования сил и времени с большей пользой. Предположим, задача проверить удобство навигации. Применение здесь полноценного интерактивного прототипа — один из вариантов решения, но это ресурсозатратно в плане создания и тестирования. Быстрее и проще решить задачу тестом первого клика. Для First Click достаточно изображений: макета или даже скетча.
Потребность в интерактивном прототипе возникает, когда в интерфейсе несколько равноценных пользовательских сценариев. Здесь теста первого клика уже недостаточно, ведь наша задача понять, как именно люди перемещаются по нелинейному интерфейсу и где они сталкиваются с трудностями. Но делать монструозный прототип и тут необязательно. В разговорах исследователи и дизайнеры из продуктовых команд часто описывали мне типичный прототип так: "3-4 экрана и 2-3 сценария". Это напоминает анкету с фильтрами.
Простой прототип по структуре похож на анкету с фильтрами.
Если выбираешь вариант А, то показываем вопрос 2. Если вариант Б, то вопрос 3 и т. д. В прототипе то же самое, только здесь вариантами ответов выступают области экрана. Перевел эту идею в техническое задание. Документ помариновался в беклоге всего лишь полгода, и к декабрю 2022 года я получил рабочую версию продукта. Экраны переключались с задержкой, но все работало на удивление стабильно. Далее на примере кейса расскажу, где этот подход применим.
🥡 Тестирование приложения Yami Yami
Ранее уже публично тестировал раздражающие интерфейсы Tinkoff, IPhone, Spotify. В этот раз остановился на приложении для доставки еды Yami Yami, которое мучило меня в 2020-21 годах.
Контекст: в приложении есть два сценария заказа. 1-ый сценарий — быстрое добавление в корзину из каталога через “+”.
2-й сценарий включает переход в карточку товара. Важная особенность: в обоих сценариях для оформления нужно перейти в корзину, которая (!) кликабельна только из каталога.
Запись экрана. 2-й сценарий. Четыре клика до перехода к оформлению.
Гипотеза 1: большинство новых пользователей не понимают, как перейти к оформлению заказа.
Гипотеза 2: Пользователи, перешедшие в карточку товара, испытывают больше трудностей с оформлением заказа.
Для создания прототипа беру 4 изображения, захожу в решение Prototype test на Fastuna и собираю прототип, который имитирует оба сценария.
Как же я люблю экраны прототипов, вот они в виде макетов слева направо Экран 1, Экран 3, Экран 4, Экран 2 — он же Экран 5.
🔬 Результаты теста прототипа
Выборка: Мужчины, Женщины, 18-44 лет, Смартфон, Города 1м+, 100 человек на прототип
Задание: Выберите поке с лососем XL и перейдите к оформлению заказа.
Экран 1. Развилка сценариев: 64% идут в карточку товара(1) и 33% нажимают на “+”(2)
Экран 2. По короткому первому сценарию пошли 33%. Но только 15% нажали на корзину, завершив задание в минимальные 2 клика.
Наибольшие затруднения возникают у тех, кто делают заказ через карточку товара. 18% людей сдались на Экране 3. Лишь 27 из 79 человек нажали верно и продвинулись дальше по сценарию.
Живая речь людей иногда полезнее статистики.
Было непонятно, куда нажимать. Зачем вы придумываете то, что уже давно придумано?
Непонятно, как платить после выбора блюда. Хорошо было бы добавить «вернуться к меню" и "перейти к оформлению»
Результат: Только 33% смогли дойти до оформления заказа. В среднем пользователи сделали 5 кликов по областям в ходе теста. 15% выполнили задание в 2 клика. 8% потребовалось 4-5 кликов. 10% сделали более 5 кликов для выполнения задания. 67% людей не справились с заданием вовсе.
(!) Дисклеймер: простые прототипы не восприимчивы к свайпу. В реальности с заданием бы справилось большее число людей. Но в графическом интерфейсе удобная ориентация по кнопкам никогда не будет лишней.
Выводы: Гипотезы подтвердились. Большинство пользователей не понимают, как перейти к оформлению заказа, так как не замечают кнопку корзины. Необходимо сделать ее заметнее: выделить цветом или продублировать снизу. Важно сократить количество шагов для сценария, который включает переход в карточку товара.
🎉 Бонус: новый дизайн. Что изменилось?
Пока писал текст, Yami Yami изменили интерфейс. Корзину перенесли вниз экрана, а второй сценарий сократили до 3-х кликов: при добавлении товара приложение автоматически возвращает пользователя в каталог. Не буду тешить себя иллюзией, что до команды дошло мое сентябрьское выступление на Product Camp. Скорее всего, я не один, кому был неудобен старый интерфейс.
Было бы глупо не провести сравнительный тест. Из 3-х изображений сделал 4-х экранный прототип.
Вы уже соскучились по ним. Вот они слева направо: Экран 1, Экран 3, Экран 2 — он же экран 4.
🧪 Тест нового интерфейса
Выборка идентичная: Мужчины, Женщины, 18-44 лет, Смартфон, Города 1м+, 100 человек на прототип
Задание: Выберите один поке с лососем и перейдите к оформлению заказа
С новым интерфейсом процент успешных прохождений с 33% вырос до 80% 📈
В 2 клика задание выполнили все те же 14%. Сокращение шагов дало свои плоды: в 3-4 клика с заданием справились уже 45% людей.
Замечу, что команда Yami Yami подошли к решению проблемы радикально: переместили корзину вниз, оставили сверху пустое место. Это вызвало недоумение у отдельных респондентов.
Кнопка оформить заказ в конце была удобной. Но при этом она была, как будто, не на своём месте, я бы скорее ожидал где-то в уголке или сверху
Тест показал, что интерфейс стал удобнее. Из рекомендаций: я бы продублировал корзину сверху. Также стоит обратить внимание на кнопку быстрого добавления в заказ. Во втором тесте на нее кликнули еще меньше людей. Есть предположение, что с потерей обозначений “+” и “-” функция кнопки перестала быть понятна. Я бы уточнил у людей о назначениях кнопок, понимают ли они, что это и какой эффект несет.
Итого, настройка обоих тестов вместе со сбором материалов заняла у меня суммарно минут 20. В течение пары часов получил результаты и доказал наличие критичной проблемы, сравнил новый и старый интерфейсы. И все это доступно еще на этапе макетов. Пользуйтесь Prototype test, оставляйте обратную связь. Будем еще дорабатывать решение.
🚨 Выводы
Если задача проверить линейный сценарий на интуитивность, то никакой прототип и не нужен. Хватит теста первого клика.
Прототипы в Figma имеют проблемы с открытием, поэтому для количественных тестов их стоит использовать, когда тестируете анимацию или когда необходимо воспроизведение сложной логики переходов.
Если в сценарии развилка, а задача проверить навигацию, то простой прототип на базе изображений решит задачу с минимальными проблемами.
Ссылки к статье
Telegram канал Tiburon Research с кейсами и обучающими материалами по исследованиям.
После публикации — присмотрюсь к вашему сервису.
Мы частенько проводим качественные ю-тесты. И тут скорее всего сервис не поможет нам.
А вот закинуть, найденные проблемы, в сервис в количественник и проверить на нормальной выборке — вполне. Посчитаю в деньгах, сравню и буду иметь вас ввиду)
Комментарий недоступен
Как у вас обстоят дела с оценкой? Обратная связь никогда не лишняя.
Спасибо за такой подробный разбор. Надо будет потестить как-нибудь.
Комментарий недоступен
В тексте прикладываю видео загрузки и комментариев именно к таким "легковесным" прототипам. На выборках более 20 человек проблема начинает быть более чем заметна. На фастуне можно на коленке собрать прототип из 10-15 экранов с любой логикой переходов. Изучаю пока, насколько критична задержка переключения между экранами.
А что мешает в фигме в отдельном проекте подготовить легковесный прототип, например из дизайн макетов, которые склеены в обычные скрины-картинки? Ведь долгая загрузка прототипа в основном из-за тяжелых исходников макетов.
Спасибо за уточнение. Все верно. Так открываемость вырастает. Но стоит все равно держать в голове, что скорость интернета и уровень устройств у людей разные. И то, что у вас загружается за пару секунд, у других займет 10-15. На днях опубликую чеклист из действий, которые важно соблюсти, чтобы таких проблем было меньше.
неплохая доставка и приложение у них хорошее )
Да, мне тоже нравится. Вон, какой разбор для них бесплатный сделал.
Описанное в статье полезно и актуально для _немодерируемых_ тестов.
Для модерируемых время загрузки прототипа не критично.
Почти слово в слово пишу об этом: "Наличие модератора позволяет работать с интерактивными прототипами разного уровня проработки. Модератор сглаживает ограничения прототипа, комфортизирует пользователя. Стабильность работы здесь имеет значение, но не относится к критичным параметрам." Для модерируемых на крайний случай есть даже Figma Mirror.
Полезная статья, спасибо!
Думаю, стоит на одном из проектов затестить такой способ. Как минимум, в теории звучит рационально хах.
В продолжении темы написал о том, как подготовить прототип к тестированию. Во многом актуально для фигмы https://vc.ru/design/613650-cheklist-dlya-testirovaniya-prototipa-5-punktov-kotorye-nuzhno-uchest-chtoby-ne-potratit-resursy-vpustuyu