Что такое функциональный прототип

Интерактивные прототипы. Действующая модель пользовательского интерфейса, часть 1. Классификация

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

Классификация прототипов

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

Структурные схемы страниц (wireframes) или бумажные прототипы

Сперва это наброски ключевых страниц системы на бумаге, затем — отрисованные в MS Visio детальные схемы практически всех страниц и AJAX-взаимодействий. Их часто называют бумажными прототипами, но слово «бумажные» чаще всего теряется. Тут и начинаются терминологические споры — люди называют одним и тем же словом разные вещи, бесполезно спорят и вводят клиентов в заблуждение. Да и если посмотреть, к примеру, на аналогии в том же строительстве — тем есть и макеты (те самые модели из картона), и проекты — архитектурный, строительный, градостроительный и т.п… Поэтому я стараюсь говорить о них как о схемах страниц. Они дают первое наглядное представление о будущей системе, позволяют поставить задачи дизайнеру, верстальщику интерактивного прототипа, разработчикам.

Интерактивный или кликабельный прототип

Материал как раз о них. У нас это набор связанных между собой HTML-страниц, включающий имитацию AJAX-взаимодействий с помощью статичного JavaScript. Данных он обычно не сохраняет, но можно использовать те же cookies для имитации серверного взаимодействия. Есть и более простые варианты прототипирования — например, «оживление картинки» через Adobe Flash или просто макеты страниц с кликабельными зонами (imagemaps). Пользы от интерактивного прототипа много для всех участников процесса работы над системой, но об этом ниже.

Функциональный прототип

Это уже разработанная и полноценно работающая система, в которую еще не интегрирован дизайн. Один из самых проблемных моментов при итерационной разработке — это интеграция постоянно изменяющегося и добавляющегося программного кода с HTML-версткой. Система каждую неделю развивается и показывается заказчику, постоянно добавляется и изменяется функциональность. В сверстанном дизайне есть все что нужно, а вот в рабочей версии системы — пока еще или уже нет. Но чего именно нет? Это постоянная головная боль для того кто собирает проект. И один из вариантов решения — сперва сделать пусть и черно-белую, но работающую в соответствии со спецификацией систему. После чего заниматься ее внешним видом, наполнять ее контентом, показывать заинтересованным лицам.

Сразу оговорюсь — я работаю над веб-системами, поэтому вся специфика и терминология в статье — как раз о них. Хотя в целом переносима и на другие среды.

Аудитория

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

Заказчик

• Продукт можно будет показать инвесторам или высшему руководству задолго до того, как начнется его разработка. На пальцах это сделать бывает сложно, а вот работающая модель системы отлично помогает найти общий язык. А если и сама презентация бодрая — еще и заразить идеей будущего продукта. В итоге — получение или продолжение финансирования.
• Основные предположения о системе и ее функциональности верны. Пока концепция продукта находится в голове или на бумаге — сложно точно сказать, насколько она целостна и осмысленна. Предположения собираются и документируются в виде схем страниц (wireframes) и вспомогательных документов. Но только в процессе их материализации появляется ощущение целостности системы — когда можно проверить конкретные сценарии использования на практике. Конечно, прототип не решает всех будущих сложностей — например, сложности интеграции со сторонними базами данных или «тяжесть» кода страниц веб-приложения. Но это уже скорее технические, а не концептуальные проблемы — для их решения редко требуется менять сценарии использования. В итоге — целостная и непротиворечивая система, полноценный продукт.
• Продавать продукт или заключать партнерские договоренности можно начать заранее. Разработка крупных систем может идти достаточно долго, а показывать сырые рабочие версии стоит не всем заинтересованным лицам. Зато можно показать на практике, например, схемы размещения рекламы потенциальным рекламодателям, а возможным партнерам — механизмы продажи электронного контента или удобство и полноту платных сервисов. В итоге — предварительные договоренности или первые продажи.

Пользователи системы

• Продукт понятен пользователям и удобен в работе. На основе схем страниц или визуального дизайна можно проводить только достаточно ограниченное юзабилити-тестирование. А вот интерактивный прототип дает возможность увидеть, как пользователи выполняют в системе основные задачи, уже максимально приближенно к реальности. Особенно здорово то, что прототип можно быстро доработать и провести юзабилити-тестирование снова. А при наличии альтернативных вариантов — сделать модели всех из них и показывать пользователю по очереди. Конечно, все равно остаются оговорки — данные в прототипах сохраняются редко, нет особенностей взаимодействия с сервером и других рабочих моментов. Но чаще всего это касается нефункциональных требований — если костяк системы составляют независящие от пользователя функции, то и интерактивный прототип ей редко нужен. В любом случае, в итоге — проверены и доработаны основные сценарии работы пользователей с системой.
• Все необходимые функции реализованы и работают эффективно. Это скорее продолжение предыдущего пункта — но удобнее выделить его в отдельный. Разница в том, что проверяется эффективность выполнения не отдельных задач, а целых процессов. Все ли в продукте есть для того, чтобы каждая группа пользователей выполняла свои задачи полноценно и эффективно? Можно ли достичь состояния потока, когда работа с системой идет «на одном дыхании» — она явно или неявно предлагает и подсказывает следующий шаг? В итоге дается ответ на то, работает ли система как полноценный продукт и помогает ли достижению бизнес-целей.
• Систему можно обеспечить необходимым контентом, а ее функции — поддержкой. Успех веб-приложения или сервиса обычно строится на основе качественного контента или функциональности — в сумме или по отдельности. Важно знать, насколько возможна и затратна поддержка этих составляющих. Прототип показывает финальный результат работ, так что можно просчитать заранее, с какой периодичностью, в каких объемах, из каких источников, какими ресурсами, с какой доработкой брать информацию. Не забывая и про функции — на каких участках, кто, как и какими силами должен поддерживать успешную работу сервисов. Начиная от модерации user-generated content, заканчивая справочными службами и т.п. В итоге — проработка процесса поддержки системы и поиск путей облегчения работы в этом процессе.

Команда разработки

• Как выглядит и работает система в целом. Разработчикам хочется понимать, что же они делают. Бумажные описания не очень-то цепляют — в них не видно финиша, того зачем все это затеяно. Как передать суть работы, основные идеи продукта тем людям, кто не принимал участия в аналитике и проектировании? Лучший способ — показать максимально похожую систему. Или интерактивный прототип той, которую нужно создать. В итоге — понимание сути работы.
• Каковы особенности работы отдельных функций. В процессе разработки конкретной функциональности часто всплывают большие и маленькие вопросы по поводу того, как это все работает. Общая суть обычна понятна с первого взгляда, но вот последовательность процесса работы функции — источник множества потенциальных проблем. Например, нужно добавить новую квартиру в список объектов недвижимости. Как работают собственные поля ввода? Выдается ли какое-то сообщение при отправке формы? Нужно ли подсвечивать новую квартиру с общем списке после добавления? Прототип не отменяет необходимости описывать все эти и другие моменты в спецификации. Но наличие их в модели интерфейса помогает сократить список переделок. В итоге — более подробная и всеохватывающая спецификации системы.
• Насколько возможно реализовать те или иные функции. В сложных системах невозможно описать в спецификации абсолютно все моменты. Разве что если отвести на это изрядное количество человеко-месяцев. Отчасти это связано с проблемами интеграции функциональности друг с другом. Отчасти потому что планируется использовать новые и неопробованные технологии. В процессе работы все это обсуждается на планерках или спонтанных митингах — словесно или на маркерных досках. Но особенно удобно, если при обсуждении можно обращаться к интерактивному прототипу. А еще лучше — тут же экспериментировать с функциональностью на его основе. В итоге — результаты обсуждений ближе к реальности, а не абстрактным предположениям.

• проектирование
• прототипы
• пользовательские интерфейсы
• юзабили

Зачем нужен функциональный прототип приложения

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

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

Что такое функциональный прототип и для чего нужен

Функциональные прототипы веб-приложений – исходные модели компьютерного интерфейса. В будущем эти модели формируются в готовые цифровые продукты. Наряду с техзаданием (ТЗ) прототип является незаменимой подготовительной ступенью к созданию качественного, отлаженного и корректно работающего приложения, базовым инструментом для закрепления исходных задач заказчика и обеспечения соответствия дизайнерским и функциональным условиям. ТЗ полностью не отражает реальных потребностей со стороны дизайнеров и исполнителей веб-разработок. По утвержденному «черновику» приложения создателям проще работать над созданием интерфейса без отхода от продуманного плана и ошибок с интерпретацией слов в ТЗ.

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

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

Для программиста и веб-дизайнера функциональный прототип – своеобразная карта, с помощью которой достигается требуемый результат для всей задействованной команды, включая заказчика. В дизайнерском сообществе бытуют особые термины в отношении прототипирования (варфрейм, мокап). Мокап не следует путать с понятием «прототип», поскольку эти инструменты демонстрируют интерфейс на различных уровнях детализации. На начальном этапе разработки веб-приложения или сайта прототип задает направление, в котором пойдет дальнейшее развитие. При наличии изменений основной каркас остается прежним.

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

Кто и как создает функциональные прототипы

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

Проектировщики интерфейсов работают в различных сервисных программах и графических редакторах (NinjaMock, Wireframe.cc, Moqups, Figma и т.д.). Наиболее популярный сервис прототипирования – онлайн-редактор Figma, с помощью которого создаются рабочие образы интерфейсов с опциями интерактивного взаимодействия, а также мокапы и прототипы. Преимущество данного инструмента – пользовательская свобода (не требуется платить за подписку), большой выбор актуальных плагинов, возможность постоянного усовершенствования функционала и автоматизации типовых задач. Фигма обладает нативным интерфейсом и обеспечивает построение визуальных решений любого формата и уровня.

Чем и кому полезен функциональный прототип

Прототипы способствуют решению широкого перечня важных задач:

• позволяют существенно сэкономить время. При помощи прототипа можно быстро переходить к последующему этапу разработки, минимизировать количество правок, не тратить время на правки;
• визуализируют идеи. Различие образов в замыслах отдельных исполнителей задачи затрудняет работу над созданием приложения. Создание прототипа способствует приведению идеи к общей концепции;
• помогают отладить рабочий процесс. Этапы работ после создания прототипа: UI-проектирование, верстка HTML, интеграция в CMS;
• совершенствуют концепт. Увеличение количества итераций доработок повышает итоговый уровень программного продукта;

• формируют обратную связь. Обнаружение критических ошибок в процессе анализа прототипов позволяют устранить недостатки до изготовления макета;
• закрепляют договоренности.

Прототипы ограничивают договорные рамки при постановке ТЗ и помогают следовать в точном направлении.

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

Функциональные прототипы

Меня зовут Артемий Мельчук. Я основатель sdesystem.com и создатель конструктора веб интерфейсов к базам данным с бизнес процессам. В молодости активно занимался 1С разрабатывая и реально внедряя системы управленческого, бухгалтерского учета, финансового и операционного планирования в разных мелких и не очень компаниях. Так же есть опыт разработки систем на других технологиях: asp.net,java,php,lotus notes. На данном этапе развития системы я продвигаю создание функциональных прототипов как часть процесса разработки веб приложений, что должно существенно изменить вероятность успеха проекта для бизнеса. Фактически я предлагаю первым шагом разработку минимально жизнеспособного продукта (MVP) в целях проверки согласованности бизнес требований и выявления сложных алгоритмов и структур данных в будущей системе. В результате заказчик достаточно быстро и не дорого может провести тестирование функционала будущей системы со всеми вытекающими отсюда преимуществами. На самом деле идеи заложенные в системе выходят за рамки создания прототипов, но это дело будущего.

Функциональный прототип — первый этап в разработке приложения

На данный момент известно несколько моделей разработки веб приложений: каскадная, спиральная, Agile. Компания sdesystem.com предлагает новый метод разработки веб приложений через разработку функциональных прототипов на стандартизированном интерфейсе. Отличие sdesystem от существующих средств прототипирования заключается в разработке реально работающего приложения c необходимым функционалом и системой прав доступа.

Что такое функциональный прототип

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

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

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

Что такое функциональный прототип?

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

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

Фактически, создание функциональных или рабочих прототипов незаменимо и должно рассматриваться как необходимый этап в процессе внедрения нового продукта (NPI). Его часто рассматривают как «страховой полис» перед началом дорогостоящего массового производства.

Функциональные прототипы, соответствующие конечным продуктам

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

• Создание более сложного прототипа рабочих механизмов для проверки формы и посадки, а также проверки того, что все детали подходят для сборки.

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

• Функциональные оптические прототипы поддерживают технические испытания фотометрических разработок, включая оптическую передачу, показатель преломления и пропускания и т. Д.

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

• Создание функциональных прототипов — также отличный способ быстро проверить качество поверхности, текстуру и ощущение различных материалов на конечном продукте.

Получите награды от функционального прототипа

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

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

Использование правильной технологии прототипирования для моделирования производства

Делая все возможное, чтобы обеспечить успех вашего проекта

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

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

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