Прототип интерфейса — зачем он до разработки и что он не заменяет

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

При этом прототип часто путают с дизайном. Это разные вещи и делаются они с разными целями.

Три уровня проработки

Что дает прототип

• Проверку понимания. Заказчик видит, что понял исполнитель, а не читает описание и додумывает свое.
• Находит пропуски. На экране сразу видно, что нет поля, без которого не оформить заказ, и нет состояния «ничего не найдено».
• Дает поговорить с теми, кто будет работать. Диспетчер за две минуты скажет, чего не хватает, глядя на экран, и ничего не скажет, читая ТЗ.
• Уточняет объем. По прототипу оценка становится точнее в разы, потому что видно количество экранов и состояний.
• Превращается в часть задания. Экраны с подписями заменяют десятки страниц описания интерфейса.

Чего прототип не заменяет

• Модель данных. На экране не видно, как связаны сущности и что с чем должно сходиться. Это отдельная работа, и ошибка здесь дороже любой ошибки в интерфейсе.
• Правила и расчеты. Формулу нельзя нарисовать. Она описывается текстом с примерами.
• Нагрузку и объемы. Прототип с пятью строками в таблице ничего не говорит о том, как экран поведет себя на пятидесяти тысячах.
• Проверку спроса. Красивый прототип легко принять за подтверждение, что продукт нужен. Люди хвалят картинки охотнее, чем платят деньги.

Из чего состоит хороший прототип

Разница между полезным прототипом и красивой картинкой — в трех вещах.

Как показывать

Способ показа влияет на результат сильнее, чем качество прототипа.

1. Не рассказывать. Дать задание словами — «оформите заявку на завтра» — и молчать. Каждое место, где человек замешкался, это находка.
2. Показывать по одному. В группе люди соглашаются с первым высказавшимся, особенно если это руководитель.
3. Записывать вопросы, а не мнения. «Мне не нравится цвет» — шум. «А где тут посмотреть предыдущие заявки этого клиента» — требование, которое пропустили.
4. Пройти с тремя-четырьмя людьми. Дальше замечания начинают повторяться, и этого достаточно.

Как его делают

1. Начать с эскиза от руки. Пять минут на экран. Задача — договориться о составе, а не о виде.
2. Собрать кликабельный прототип основного пути. Только главный сценарий, без ветвлений. Его должно быть можно пройти от начала до конца.
3. Показать тем, кто будет работать. Не руководителю, а исполнителю. Молча дать пройти сценарий и смотреть, где он остановится.
4. Добавить неудобные состояния. Пусто, много, ошибка, нет прав, долго грузится.
5. Зафиксировать как часть задания. С подписями к элементам: откуда берется значение, что происходит при нажатии.

Где здесь ИИ

Прототипирование — область, где инструменты изменились сильнее всего за последние пару лет.

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

Второе применение — генерация неудобных данных. Заполнить прототип реалистичными длинными названиями, пограничными значениями и пустыми состояниями теперь дешево, а именно на них и ломаются интерфейсы.

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

Сколько стоит прототип

Основной сценарий в кликабельном виде — обычно несколько дней. Это сопоставимо со стоимостью одной переделки готового экрана, поэтому окупается почти всегда.

Нужен ли прототип, если делаем внутреннюю систему

Особенно нужен. Во внутренних системах цена неудобного интерфейса выше: в них люди работают каждый день по многу часов, и потери от лишних кликов накапливаются.

Можно ли сразу верстать, минуя прототип

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

Дальше по теме