Прототип интерфейса до дизайнера и без него

Предмет

Что здесь работа, а не файл

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

Прототип: сводка, допущения, готовый файл

Первый экран отвечает на вопрос «что я увижу», а не «как это нарисовано»

Третий экран и мобильный вид

  1. 1

    Экран «файл готов»

    Что человек получает: ссылка, срок жизни, две кнопки формата и порог малой группы

  2. 2

    Тот же смысл на 390 пикселях

    Одна цифра, одна кнопка: на телефоне проверяется не красота, а понятность

Критерий приёмки: по чему работа считается сделанной

Один экран — один вопросЕсли экран отвечает на два вопроса, он отвечает на оба плохо
Текст внутри, а не в описанииПрототип проверяют чтением: подписи должны быть настоящими, не «текст текст»
Мобильный вид сразуПоловина проверок проваливается не на десктопе, а на телефоне — и это видно только на телефоне

Как идёт работа

  1. 1

    Взять требования

    Из ТЗ: что должно быть на экране и какой критерий приёмки

  2. 2

    Собрать первый экран

    Что человек увидит: одна главная цифра, один вывод, одно действие

  3. 3

    Добавить проверку

    Экран допущений: откуда взялась цифра — то, что обычно прячут

  4. 4

    Сделать мобильный вид

    Тот же смысл на 390 пикселях: без мелких чисел и лишних кнопок

  5. 5

    Проверить на человеке

    Показать трём-пяти пользователям и записать, где они останавливаются

Агент делает. Вы решаете.

Агент собирает прототипЭкраны, подписи, состояния, мобильный вид — из требований, за час
Агент показывает состоянияПусто, ошибка, загрузка — там, где обычно забывают и потом переделывают
Дизайнер доводит видПрототип не заменяет дизайн: он проверяет смысл и порядок, а не красоту
Вы решаете, что проверятьКакую гипотезу ломает этот экран — решение продакта, а не инструмента

Данные

Откуда берутся цифры

  • Требования

    Экраны собираются из требований, а не из вкуса

  • Реальные подписи

    Тексты кнопок и подсказок — из интервью, словами пользователей

  • Данные кейса

    Цифры на экране — из расчёта, чтобы прототип не выглядел пустым

  • Записи проверок

    Где человек остановился и что спросил — главный результат прототипа

Как проверить

Проверка прототипа за минуту

Покажите первый экран человеку не из команды и спросите, что он получит. Если ответа нет — экран не отвечает на свой вопрос. Затем откройте на телефоне: если числа мелкие или кнопок больше двух, мобильный вид не сделан. И найдите экран с ошибкой — его отсутствие значит, что прототип показывает только хороший путь.

Развилка: три пути и их последствия

А: показать прототип трём пользователямДень работы — и понятно, где ломается смысл; цена: небольшая задержка
Б: отдать сразу дизайнеруБыстрее по календарю, но если смысл неверный — переделка дороже
В: проверить на себеБесплатно, но команда уже знает замысел и не увидит проблему

Границы

Что агент не делает

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

Возражения

Что обычно спрашивают до входа

  • У нас есть дизайнер, зачем прототип

    Чтобы дизайнер не тратил неделю на смысл, который ещё не проверен

  • Прототип на HTML — это же разработка

    Это проверка: одна страница, без сервера, без данных, выбросить не жалко

  • Пользователи не поймут прототип

    Понимают, если на экране настоящие слова. Проблема обычно в подписях, а не в прототипе

Частые вопросы

Сколько экранов нужно

Столько, сколько вопросов у человека: обычно 3–5. Больше — уже не прототип, а макет

Когда прототип не нужен

Когда требование очевидно и проверяется цифрой. Тогда прототип — трата дня

Что делать с результатом проверки

Правку требований, а не картинки: если человек не понял, виноват текст

Можно ли показать клиенту

Да, и это полезнее финального дизайна: клиент говорит о смысле, пока он ещё дешёвый

Куда дальше

Соседние компетенции

  • Рубли без VPN
  • Договор с ИП
  • Данные в России
  • Чтение по умолчанию
  • Токены в подарок

Роли

Принесите требования — заберёте кликающийся прототип

Агент соберёт три экрана и мобильный вид с реальными подписями и состояниями.