Чеклист для тестирования прототипа: 5 пунктов, которые нужно учесть, чтобы не потратить ресурсы впустую

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

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

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

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

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

Если читаете со смартфона, то вот ссылка на тест двух сценариев приложении Yami Yami. С этим заданием справляются лишь 33% людей из онлайн-панели и 65% читателей VC 🤫

Если смотрите с десктопа, то попробуйте оформить пожертвования в личном кабинете “Нужна помощь”. Если наберется достаточно людей, то покажу результаты команде фонда.

Ссылки на отчеты в конце.

🧠 Держим в голове, зачем прототип. Каковы критерии принятия бизнес-решения? Быть может, интерактивный прототип и не нужен.

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

📜 Устройства людей и скорость их интернета отличаются от тех, что есть у вас. Нужна проверка в реальных условиях.

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

Выберите наиболее подходящий вариант

💼 Обсуждения внутри команды.

Если речь о синхронизации, то возможность оставлять комментарии важнее, чем интерактивный характер прототипа. На ранних этапах, при работе над структурой подойдет Google Doc, Miro, Figma Jam.

🤔 Поиск проблем в интерфейсе.

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

❗ Лайфхак для модерируемых тестов — Figma Mirror. Достаточно дать респонденту логин и пароль от учетной записи. Так люди откроют прототип даже на стареньких андроидах.

🐏 Проверка интерфейсных гипотез.

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

❗ Для проверки гипотез рекомендую минимум 100 человек на тест.

При тестировании на пользователях наиболее часто возникают следующие задачи:

📍 Проверить навигацию экранов на удобство, интуитивность.

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

Материал в тему: UX-исследователь Паулина Гасс из Газпромбанка сравнила тест интерактивного прототипа и First Click Test на примере подключения функции Pay Control в приложении. Ссылка на вебинар

🤹 Проверить сценарии поведения в интерфейсе.

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

👯 Проверить взаимодействие с интерактивными элементами.

Потребуются специализированные сервисы, навыки создания интерактивных компонентов, анимации. Figma — самый популярный инструмент для работы с UI.

❗ Функция Auto Layout в Figma упростит создание интерактивных прототипов. Вот полезная статья.

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

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

❗ В прототипах используем облегченные изображения. Картинки по 500 кб загрузятся быстрее, чем хайрезы.

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

❗При работе с Figma в настройках деактивируем навигацию клавиатурой и снимаем галку “Show Figma UI”, “Show hotspots on clicks”. Для показа людям используем получившуюся ссылку.

Недостаточно проверить прототип на последнем айфоне и макбуке 🤓. Открываем на сторонних устройствах, при слабом интернете. Заходим в инкогнито с бесплатного вай-фая в кафе, открываем прототип с простого андроида. И под финал отправляем ссылку бабушке, родственнику из небольшого города, другим непосвященным людям. Собираем обратную связь.

Если прошли по всем пунктам и исправили выявленные проблемы, то прототип уже соответствует минимальным требованиям. Можно тестировать 🙂

Результаты теста на смартфонах (Yami Yami) — разбор кейса здесь.

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

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