Прототип MVP должен проверять поведение, а не впечатлять анимациями. Его цель — дать человеку выполнить главное действие до того, как команда потратит время на полноценный WordPress-бэкенд. Достаточно реалистичных экранов и работающих переходов.
1. Выберите, что прототипировать
Возьмите 1–2 маршрута из User Flow. Не переносите в прототип весь будущий продукт. Для каждой проверки сформулируйте вопрос: «Найдёт ли пользователь нужную настройку?» или «Сможет ли он понять, почему импорт не завершён?».
Подготовьте реальные, но обезличенные примеры данных. Не используйте бессмысленные плейсхолдеры в местах, от которых зависит понимание сценария.
2. Свяжите экраны
В Figma достаточно отдельных фреймов с переходами. Назначьте начальный экран для каждого потока и проверьте работу в режиме просмотра — официальная инструкция Figma. Если используете HTML, сначала сделайте статические страницы с понятными button, a и формами, затем добавляйте только необходимый JS.
Проверьте прямой сценарий и как минимум один путь ошибки. Для загрузки файла полезно показать три состояния: до выбора, после загрузки и при некорректном формате. Человек должен иметь возможность вернуться, исправить и продолжить.
3. Протестируйте на телефоне
Посмотрите ширину 320–390 px и одну широкую мобильную ширину. Основное действие должно быть заметно, таблицы — читаться, навигация — не перекрывать форму. Прототип лучше проигрывать на реальном устройстве или близком к нему масштабе, а не только в десктопном редакторе.
Не используйте изображение интерфейса вместо интерактивного экрана там, где тестируете кликабельность: такую проверку нельзя считать валидной.
4. Подготовьте прототип к исследованию
Составьте короткое вступление для участника и 3 нейтральные задачи, например: «В этом примере есть список проектов. Попробуйте добавить новый проект и найти его настройки». Не подсказывайте название кнопки и ожидаемый путь.
Сделайте сброс к исходному состоянию между участниками. Переходы не должны зависеть от данных, оставшихся после предыдущего теста.
Шаблон передачи
## PROTOTYPE-HANDOFF
- Цель проверки:
- Ссылка / файл прототипа:
- Версия:
- Проверяемые маршруты:
- Стартовое состояние:
- Тестовые данные и правила удаления:
- Поддерживаемые экраны:
- Известные ограничения макета:
- Как сбросить сценарий:Когда прототип готов
Незнакомый человек может пройти сценарий самостоятельно, ошибиться и восстановиться. Если прототип просто перелистывает красивые экраны, он пока не проверяет механику продукта. Следующий шаг — тестирование понятности интерфейса.
Источник: https://help.figma.com/hc/en-us/articles/360040318013-Play-your-prototypes
Материал был полезен?
Помогите нам сделать материалы точнее и понятнее.