Для чего нужен интерактивный прототип

Любой проект начинается с уточнения требований. Если технические требования уточняются в техническом задании, то как зафиксировать визуальную часть проекта? Здесь мы описали, что такое интерактивный прототип и привели свои примеры.

Лучше всего поможет решить эту задачу интерактивный прототип. Интерактивный прототип - это визуальное представление мобильного приложения. Он позволяет увидеть заранее все экраны будущего приложения и даже попробовать его в действии, не прибегая к программированию. Прототип разрабатывается в специальных сервисах, например, Figma или Marvel. Эти же сервисы позволяют запустить прототип и изучить возможности будущего приложения.

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

При помощи прототипа можно проверить, весь ли намеченный функционал учтен. Посмотреть как достигаются бизнес задачи заказчика. Например, если в приложении есть продажи, нужно оценить, насколько легко пользователю совершить покупку. Хорошо ли видно кнопку “Купить”.

С прототипом можно точнее оценить сроки и стоимость разработки. Он позволяет понять, насколько сложно будет реализовать интерфейс приложения.

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

Как выглядит интерактивный прототип приложения

Чтобы дизайнеру было проще разработать интерактивный прототип сначала нужно набросать основные экраны приложения карандашом на бумаге. Это позволит быстро наметить общую концепцию интерфейса:

Для чего нужен интерактивный прототип

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

Наш пример интерактивного прототипа без дизайна:

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

Пример интерактивного прототипа с дизайном:

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

44
20 комментариев

Почему в статье говорится только о мобильном приложении? Из инструментов для прототипирования Axure  советую, больше интерактива, реальный html, а не картинки с кликабельным областями. 

1
Ответить

Фигму можно использовать и для десктоп прототипов. Axure - говно мамонта, тяжелый, сложный, никому не нужный. Фигма де факто стала стандартом в среде дизайнеров и UI специалистов. А если тебе нужно «больше интерактива» и «настоящий html», то у меня вопрос, ты точно понимаешь, зачем нужны прототипы, кто и в каких ситуациях их делает?

11
Ответить

Потому что мы разрабатываем мобильные приложения :)

2
Ответить

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

В марвеле так же осталось куча вопросов, касающихся элементарных вещей: например, зачем мне 3 раза создавать чат? В прототипе ясно указано, что нажать на кнопку "создать чат" нужно 3 раза. При первом нажатии все понятно, но зачем дублировать эту же надпись во второй и третий раз, если чат я уже создал, только из-за названия чата?
Или что произойдет, когда я нажму на кнопку "Бесплатный чат" при его создании?
Или насколько раскрывается детальная информация в профиле людей (сколько символов можно ввести, сколько строчек это занимает, не перекроет ли эта информация первый экран)?
Как добавляется комментарий в профиле?
И это только первая часть вопросов.

В общем вам нужно немного расширить видение дизайнеров и проектировщиков для дальнейшей работы, плюс не отказываться от такого "говна мамонта" как Axure, т.к. на нем за пару часов можно сделать прототип интернет-магазина, а приложения тем более.

2
Ответить

Могу сделать серию уроков по Axure, если кому-то будет полезно.

1
Ответить

Конечно полезно. Я вот на бумаге накидал и интерактива совсем не хватает...

1
Ответить

Какие трудозатраты на создание и поддержание интерактивного прототипа?))

1
Ответить