Как мы разрабатываем прототипы

Что такое прототип?

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

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

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

Прототип плюс ТЗ

Проектирование должно вестись гибко, не должно быть жестких, неизменных технических заданий. Во время прототипирования появляется понимание, как все должно работать. Написание ТЗ и прототипирование — процесс взаимодополняющий.

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

Исследование

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

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

Из информационного хаоса проектировщик начинает выявлять закономерности, отсекать лишнее, создавать гипотезы и предположения.

Описываются бизнес-процессы:

Первый прототип

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

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

Прототип внутренней системы работы с тарифами мобильного оператора

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

Прорабатываются другие функционалы:

Для сложных функционалов отдельно продумывается логика работы:

Схема функционала добавления сервисной информации интерфейса промышленного кондиционера

Интерактивность

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

Интерактивный прототип позволяет понять работу продукта в динамике

Для своих проектов мы используем сервис прототипирования UXPin.com. Это мощный инструмент онлайн-прототипирования.

Часто в интерактивные прототипы связываются готовые дизайн-макеты. В этом случае нет возможности реализовать все анимации и взаимодействия, но зато получается посмотреть на дизайн в действии. Для этих целей мы используем сервис marvelapp.com

Готовый прототип

В итоге, после множества итераций, разрабатывается полное представление будущей системы. Какие-то элементы могут быть упрощенными, а дизайн схематичен, но у владельца продукта и разработчиков теперь есть полное представление, как все будет работать.

Скриншоты прототипа рекламной системы

Перед переходом к следующему этапу, дизайну интерфейса, рекомендую внимательно проверить все детали. Чем точнее и полнее прототип, тем проще дизайнеру в отрисовке интерфейса а программистам в разработке. Хороший прототип — это экономия времени, денег и нервов всех участников создания продукта.

Stay Tuned! Андрей Иванов