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

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

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

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

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

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

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

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

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

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

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

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

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

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

0
20 комментариев
Написать комментарий...
Хороший Человек

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

Ответить
Развернуть ветку
Eugene Danilov

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

Ответить
Развернуть ветку
Lucky Fox

Axure, хоть и старое говно мамонта, но оно решает ряд задач быстрее чем фигма. Фигма даже близко не стоит с возможностями акшуры. Если вы ее не используете, не значит что ее не используют продуктовые компании.
Фигма не стандарт среди ui. Вы забываете про скетч и xd.
Еще вы забываете, что html тоже инструмент и если человек умеет программировать, то он быстрее накидает прототип в html, нежели будет разбираться с дизайнерскими инструментами.
Еще сюда можно добавить фреймер.

Ответить
Развернуть ветку
Slava Kutovoy

"Фигма не стандарт среди ui" - а что вообще значит стандарт в UI? Каждый юзает тот инструмент, который ему подходит и решает его задачи. 

А если человек не знает html? Всё, крест на себе ставить? Для этого и создаются удобные инструменты прототипирования, которые позволяют создавать интерактивные макеты без знания кода. Я практически уверен, что дизайнер сделает быстрее интерактивный прототип в той же Фигме, чем разраб все это дело заверстает с нуля. Разумеется, речь идет о спецах с аналогичным набором скиллов в своем направлении)

Я работал в Акшуре до Фигмы. И да, для меня на данный момент это действительно говно мамонта. Тут уже на вкус и цвет. Но как мы все понимаем прекрасно, данные сервисы нельзя сравнивать, назначение как бы немного разное :) Зависит от того, на каком этапе вы показываете прототип. Если это схематические наброски страниц, залинкованные между собой, то в Акшур возможно быстрее получится сделать. Если это презентация готового дизайна - Фигма тут победит, уж извините. 

Ответить
Развернуть ветку
Lucky Fox

Я не совсем понял зачем вы мне это все написали. Ваш комментарий больше подходит для ответа человеку которому я сам ответил.

Ответить
Развернуть ветку
Slava Kutovoy

Так перечайте сообщение) Что лучше, а что хуже - каждый решает сам для себя. "Фигма даже близко не стоит с возможностями акшуры." - на основании чего Вы сделали такой вывод?

Ответить
Развернуть ветку
Lucky Fox

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

Ответить
Развернуть ветку
Хороший Человек

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

Ответить
Развернуть ветку
Дмитрий Ольшевский

Figma-стандарт. Окэеейй... блэт!

Ответить
Развернуть ветку
BytePace
Автор

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

Ответить
Развернуть ветку
Mikhail Dubovoi

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

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

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

Ответить
Развернуть ветку
Хороший Человек

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

Ответить
Развернуть ветку
Дмитрий Савостиков

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

Ответить
Развернуть ветку
Кирилл Вечкасов - Маркетолог

Включите воображение! ;)

Ответить
Развернуть ветку
Хороший Человек

У Axure один минус - стоит дороговато, по этому не так популярен инструмент.

Ответить
Развернуть ветку
Сослан Сакшин

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

Ответить
Развернуть ветку
Хороший Человек

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

Ответить
Развернуть ветку
Eugene Danilov

То, что нарисовано в примере, можно сделать за час

Ответить
Развернуть ветку
BytePace
Автор

Пример ведь не настоящего проекта. А так, при наличии опыта, интерактивный прототип можно сделать в течение одного- двух рабочих дней. Ну и смотря какой объем проекта

Ответить
Развернуть ветку
Дмитрий Ольшевский

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

Ответить
Развернуть ветку
17 комментариев
Раскрывать всегда