Original size 2480x3500

Воркшоп № 6 Прототип как инструмент проверки

На этом занятии учимся превращать сценарий в первые рабочие экраны и собирать минимальный кликабельный прототип в Figma. Разбираем, зачем нужен прототип как инструмент проверки гипотез и почему на этом этапе важнее логика и проверка решения, а не «идеальный дизайн».

1. Какой прототип нам нужен?

На занятии говорим о простом и понятном формате:

Кликабельный сценарий из нескольких экранов.
Только те элементы, которые важны для выполнения задачи.
Без лишних деталей и украшательств.
Понятная структура: «что вижу → что делаю → что происходит дальше».

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

2. Как построить прототип из сценария?

Берём выбранный пользовательский сценарий.
Определяем ключевые шаги пользователя.
Для каждого шага создаём экран.
Связываем экраны в Figma так, чтобы получился связный путь. (если работаете в Figma)
Проверяем: можно ли по прототипу пройти задачу без объяснений.

Примеры разных видов прототипа

Original size 2074x1340

Пример кликабильного прототипа в Figma

Во время создания прототипа обсуждаем: где пользователю должно быть максимально очевидно, что делать; как сократить количество действий; как выделить ключевые элементы; как убрать «визуальный шум», который мешает.

Прототип — это проверка логики, не декор.

3. Воркшоп

Студенты создают первые версии экранов в Figma.
Связывают их в кликабельный сценарий.
Показывают прототип одногруппникам.
Получают быстрый фидбек: Понятно ли назначение экранов? Не теряется ли логика? Действительно ли решается проблема?

Пошаговый процесс создания

Определяем минимальный набор экранов. Принцип: минимум, которого достаточно для проверки гипотезы. Главный экран или точка входа; Экраны с выбором действий; Ключевой экран, где решается задача; Экран результата.
Грубые наброски (low-fi). Перед тем как «рисовать красиво», делаем простые схематичные версии экранов.
Переносим в Figma (или на другую платформу) и собираем прототип. Теперь превращаем наброски в кликабельный сценарий. Создаём экраны в Figma; Используем базовые компоненты и простую сетку; Связываем экраны интерактивными переходами; Проверяем, можно ли пройти путь без подсказок.
Финальная подготовка к тестированию. Перед следующим этапом студент должен понимать: Что именно он будет проверять в прототипе; Какая гипотеза заложена; Какой сценарий должен пройти человек.