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

19 октября

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

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

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

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

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

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

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

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

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

Нельзя просто так взять и сделать прототип

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

Research and prototype

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

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

Business scheme

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

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

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

Interface prototype

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

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

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

All prototypes

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

User interface iteraction

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

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

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

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

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

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

Попробуйте (кликабельные области подсвечиваются):

Прототип использования настроек интерфейса промышленного кондиционера

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

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

All Prototypes

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

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

Андрей Иванов

Stay Tuned!

Привет! Мы команда Vershi.

Мы пишем в этот блог. А еще создаем сайты и мобильные приложения. Анализируем, прототипируем, разрабатываем интерфейсы.

Мы более 10 лет в IT. Будем рады применить весь этот опыт в работе над вашим проектом.

Написать нам Перейти на главную