Главная » Разное » Прототипирование что это такое

Прототипирование что это такое


Прототипирование — Википедия

Материал из Википедии — свободной энциклопедии

Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 5 августа 2019; проверки требует 1 правка. Текущая версия страницы пока не проверялась опытными участниками и может значительно отличаться от версии, проверенной 5 августа 2019; проверки требует 1 правка.

Прототипи́рование (англ. prototyping от др.-греч. πρῶτος — первый и τύπος — отпечаток, оттиск; первообраз) — быстрая «черновая» реализация базовой функциональности для анализа работы системы в целом. На этапе прототипирования малыми усилиями создается работающая система (возможно неэффективно, с ошибками, и не в полной мере). Во время прототипирования видна более детальная картина устройства системы. Используется в машино- и приборостроении, программировании и во многих других областях техники. Прототипирование, по мнению некоторых разработчиков, является самым важным этапом разработки. После этапа прототипирования обязательно следуют этапы пересмотра архитектуры системы, разработки, реализации и тестирования конечного продукта.

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

Качества, которыми должен[источник не указан 558 дней] обладать эффективный прототип:

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

Процесс создания прототипа состоит из четырёх шагов:

  1. Определение начальных требований.
  2. Разработки первого варианта прототипа, который содержит только пользовательский интерфейс системы.
  3. Этап изучения прототипа заказчиком и конечным пользователем. Получение обратной связи о необходимых изменениях и дополнениях.
  4. Переработка прототипа с учетом полученных замечаний и предложений.

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

  1. Промышленные прототипы, например электроники. Обычно они называются мастер-моделью.
  2. Архитектурные презентационные макеты города, дома или отдельной комнаты.
  3. Транспортные — прототипы любого транспортного средства (автомобиль, корабль, самолёт и т. д.).
  4. Товарный прототип — модель, которую используют для выставок и презентаций.

Прототипирование программных продуктов и компьютерных систем[править | править код]

Термин «прототипирование» активно используется в индустрии компьютерных систем. В английском языке используется термин «Software Prototyping».

Прототипирование в разработке программного обеспечения является важным этапом в жизненном цикле программного обеспечения.

Для прототипирования компьютерных (программных) систем чаще используют языки программирования высокого уровня абстракции (напр., Java, Perl, Python, Haskell) и специализированные инструменты прототипирования (напр., Axure RP, Microsoft Expression Blend и пр.).

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

  • Тодд Заки Варфел Прототипирование. Практическое руководство // Издательство: Манн, Иванов и Фербер, 2013 г., 240 стр., 2000 экз. ISBN 978-5-91657-725-9

Урок 4. Прототипирование

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

Содержание:

Прототип и прототипирование

Для начала дадим определение понятию «прототип».

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

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

Преимущества прототипирования:

  1. Повышается гибкость производства.
  2. Повышается конкурентоспособность и качество производства.
  3. Себестоимость продукции сокращается на 100-150%.

Недостатки прототипирования:

  1. Денежные затраты. Нередко приходится делать не один прототип, а несколько. Всё это требует денег на материалы и производство.
  2. Время. Чтобы сделать прототип, в любом случае придётся потратить определённое количество времени.

Прототипирование является первой стадией Product Evolution Canvas (на русский переводится как «канвас эволюции продукта»), и дальше речь пойдет о нем.

Product Evolution Canvas

Product Evolution Canvas (PEC) – это инструмент для компаний, создающих различные продукты, отлично подходящий для мозговых штурмов. Он состоит из 2 компонентов – это:

  1. Временные рамки.
  2. Три этапа эволюции продукта.

Временные рамки – это, как понятно из названия, время. А что такое эволюция продукта? Давайте рассмотрим подробнее.

3 этапа эволюции продукта

Эволюция продукта – это весь процесс от создания прототипа до готового товара. Он делится на 3 этапа:

  1. Моделирование минимально-жизнеспособного продукта (прототипа или по-другому MVP).
  2. Создание основного продукта (который перекрывает основные потребности потенциальных клиентов).
  3. Производство полнофункционального продукта (идеальное решение проблемы пользователя).

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

Канвас эволюции продукта помогает ответить на вопросы коллег, клиентов и инвесторов о функционале продукта. Например:

  1. Что может ваш продукт?
  2. Как вы будете развивать свой продукт?
  3. Что нас ждёт в будущем?
  4. Что в итоге получится?

Кроме того, Product Evolution Canvas упрощает:

  1. Разработку стратегии улучшения продукта.
  2. Установку дедлайнов.
  3. Генерацию идей.
  4. Презентацию продукта.
  5. Мотивацию команды на работу.

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

Как работать с PEC

Работа с PEC предполагает прохождение трех этапов:

1

 

На первом этапе спрашивайте себя: «Что делает мой продукт функциональным?»

2

 На втором этапе задавайте вопрос: «Как мне улучшить свой продукт, чтобы он соответствовал главным пользовательским сценариям?»

3

 На третьем этапе уточняйте: «Какие элементы стоит добавить в продукт, чтобы он полностью раскрыл заложенный в нём потенциал?»

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

  1. Нарисовать канвас на листе формата А4 или магнитной доске. Заполнить его элементами продукта.
  2. Повесить в комнате, в которой работает ваша команда.
  3. Постоянно дополнять.
  4. Использовать в презентациях для пользователей и инвесторов.

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

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

Прототипировать можно:

  1. Физические продукты, такие как автомобиль, зубная паста, спортивное снаряжение и т.п.
  2. Сайты. Их прототипируют, чтобы быстро получить представление о том, как они примерно будут выглядеть в готовом состоянии.
  3. Программы и приложения.
  4. Интерфейсы.
  5. Опыт.

В зависимости от того, что мы прототипируем, технологии прототипирования будут различаться.

Моделирование физических объектов

Физические объекты моделируют:

  1. С помощью подручных средств – бумаги, картона, пластилина, скотча, ножниц.
  2. С помощью «Лего».
  3. С помощью 3D принтеров.
  4. С помощью программ для 3D моделирования.

Давайте подробнее разберём каждую технологию.

Моделирование подручными средствам

При моделировании подручными средствами нужно всего лишь следовать простому алгоритму:

  1. Определите, модель какого продукта вы будете создавать.
  2. Изучите аналоги, в данный момент существующие на рынке.
  3. Изобразите прототип на листе бумаги или создайте из материалов, которые найдёте. Вспомните, например, как вы делали модели вулканов из пластилина в школе.

К плюсам данного вида моделирования можно отнести:

  1. Короткий срок создания моделей.
  2. Не нужно тратить деньги на покупку дорогих материалов.
  3. Можно дорабатывать на ходу.

Среди минусов есть следующие:

  1. Нельзя сделать анимированные и интерактивные модели.
  2. Модели быстро изнашиваются.

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

Лего-моделирование

Моделипрование с помощью «Лего» выполняется не менее просто:

  1. Найдите как можно больше наборов «Лего».
  2. Соберите из деталей прототип будущего изделия.
  3. Не зацикливайтесь на одной идее. Разбирайте, собирайте заново, экспериментируйте.
  4. Пригласите собирать модели всех членов команды.

Для получения наилучшего результата советуем вам прочитать книгу Тима Брауна «Дизайн-мышление в бизнесе», где рассказывается о том, как компания IDEO создавала из конструктора прототипы устройств для введения в кровь инсулиновых инъекций. Каждый раз создавая прототип, представляйте, что вы рассказываете историю.

Моделирование с использованием 3D печати

Для создания 3D моделей используются следующие технологии:

  • FDM (Fused Deposition Modeling). Материал выдавливается слой за слоем на поверхность. Эта технология применяется в биомедицине, кулинарии и промышленном производстве.
  • Polyjet. Материал выкладывается маленькими кубиками.
  • LENS (Laser Engineered Net Shaping). Порошковый материал выдувается из отверстия и с помощью лазера наносится на поверхность.
  • LOM (Laminated Object Manufacturing). Принтер режет материал ножом и склеивает части в модель.
  • SL (Stereolithography). Внутри принтера находится резервуар с полимером. Когда лазер проходит по нему, полимер становится твёрдым. Таким образом получается прототип.
  • Laser Sintering (лазерное спекание). Эта технология очень похожа на предыдущую. Единственное отличие – вместо полимера в ней используется порошок. Лазерное спекание позволяет, например, делать коронки для зубов.
  • 3DP (Three Dimensional Printing). На порошок наносится клей, который склеивает его в гранулы. Получившийся материал напоминает гипс.

3D-печать – это достаточно сложная технология, поэтому для ее применения лучше всего привлекать квалифицированных специалистов.

Моделирование с использованием программ

То же самое моделирование, что и в случае с 3D, только здесь не надо «марать» руки, ведь весь процесс происходит на экране компьютера. Вот список 10 лучших бесплатных программ, которые помогут вам прототипировать, не выходя из зоны комфорта:

  • Wings 3D.
  • DAZ Studio.
  • Open Scad.
  • 3DReshaper.
  • 3D Crafter.
  • PTC Creo.
  • LeoCAD. Виртуальное Лего-моделирование.
  • Houdini Apprentice.
  • FreeCAD.
  • Sculptris.

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

Прототипирование сайтов и интерфейсов программ и приложений

Прототипирование сайта, главным образом, означает проектирование его интерфейса. Оно помогает облегчить задачу программистам, дизайнерам и верстальщикам. Поэтому мы объединили эти два пункта в один.

При моделировании интерфейса нужно исходить из концепции UX дизайна (UX расшифровывается как User Experience, что переводится на русский как «пользовательский опыт») – всегда помнить о том, к чему привыкли пользователи.

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

Если же вы зайдёте и увидите совсем другую картину (к примеру, меню будет расположено где-то снизу, контентная часть будет слишком узкой и т.п.), вероятно, вы просто уйдёте на другой сайт – более привычный.

Однако не нужно потакать пользователям во всём, ведь сайт должен решать и ваши задачи. К примеру, человек задал в поиске такой вопрос: «С чего начать саморазвитие?» Увидел ссылку на наш сайт и перешёл на него. Задача человека – получить информацию. Наша задача – не только помочь ему, но и реализовать собственные цели, в том числе и финансовые.

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

Как создать прототип

Прототип можно создать в любой программе, где можно рисовать. Если вы новичок, используйте Photoshop, Paint, Adobe Illustrator или даже Google Docs. Профессионалам рекомендуем программу Axure. И вот что нужно сделать дальше (в упрощенной форме):

  1. Отрисовать основные элементы шапки – форму поиска, логотип, кнопку обратной связи, описание проекта, кнопку действия («заказать услугу», «купить курс», «совершить звонок»), а если сайт информационный, то либо кнопку «Блог», либо меню с рубриками.
  2. Нарисовать контентную часть и сайдбар (то, что находится сбоку). Как будет располагаться текст, кнопки социальных сетей, комментарии и т.д.
  3. Обрисовать подвал сайта – дополнительные ссылки, значок копирайта и прочее.

Стиль сайта должен прослеживаться на всех его страницах. Не должно быть так, чтобы на главной странице преобладал минимализм (чёрно-белый дизайн и полное отсутствие лишнего), а в статьях – «рог изобилия», когда кажется, что попал совсем в другую реальность. Элементы нужно делать симметричными по размерам и расположению.

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

И еще несколько советов о том, чего нужно избегать при создании сайтов и приложений:

  • Мелкие шрифты (если человеку не удобно читать у вас, он быстро найдёт, у кого читать комфортнее).
  • Горизонтальные прокрутки (особенно это вызывает неудобство на смартфонах).
  • Отсутствие мобильной версии (международное агентство Social провело исследование и выяснило, что 5,26 миллиарда пользователей (именно пользователей, а не людей) заходят в Интернет с мобильных устройств).

Подробнее читайте в материале, подготовленном крупнейшим маркетинговым агентством России Texterra. Там очень хорошо и понятно изложено, что стоит внедрить на своём сайте/приложении, а что –  убрать. Однако не старайтесь всё время следовать нашим советам: экспериментируйте и пробуйте выяснить самостоятельно, что хотят видеть потенциальные клиенты на вашем сайте или в приложении.

Прототипирование опыта

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

Прототипирование опыта проводится так:

1

 

Выберите ситуацию, в которой человеку пригодится ваш продукт для решения проблемы.

2

 Напишите сценарий. Опишите подробно обстоятельства, действующие лица, место действия.

3

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

4

 Разместите прототип решения в этом месте.

5

 Распределите роли среди коллег и обыграйте сценарий.

6

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

7

 Понаблюдайте за их поведением и прототипом решения.

8

 Попросите их описать свои мысли и ощущения.

9

 Запишите результаты и сделайте выводы.

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

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

Резюме

Прототип – это макет вашего решения. Прототипирование – создание этого макета. Также прототипирование – важная часть Product Evolution Canvas.

Существует 3 этапа эволюции продукта:

  1. Минимально-жизнеспособный продукт (MVP).
  2. Основной продукт.
  3. Полнофункциональный продукт.

Прототип – это как раз и есть MVP.

Моделировать можно:

  1. Физические продукты.
  2. Сайты.
  3. Программы и приложения.
  4. Интерфейсы.
  5. Опыт.

Физические продукты можно моделировать с помощью подручных средств, «Лего», графических редакторов и 3D принтеров.

Интерфейсы программ, приложений и сайтов моделируются с помощью карандаша и бумаги или специальным программ: Adobe Photoshop, Paint, Adobe Ilustrator и т.п.

Прототипирование опыта проводится с помощью моделирования ситуаций.

Проверьте свои знания

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

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

3Д прототипирование - это, термин "что такое 3D прототипирование" и как оно происходит

Ещё совсем недавно 3Д-печать и 3Д-технологии в целом были за гранью фантастики. Никому и не приходило в голову, что 3Д-печать будет использовать в промышленных масштабах, и даже простые обыватели смогут позволить себе подобные небольшие устройства для бытовых нужд и хобби. А ведь уже сегодня аддитивные технологии активно используют даже дети, рисуя 3Д-ручкой или работая с 3д-принтером в кружке или в школе. Но встаёт вполне закономерный и не всем понятный вопрос, что же такое 3Д-прототипирование? И ответ на него не такой уж сложный.

3Д прототипирование — это процесс создания трёхмерного прототипа объекта. Изначально оно осуществлялось путём удаления лишнего материала с заготовки. Это методы фрезерования, ковки, точения и т.п. Но в 80-х годах учёные разработали иной подход, ставший настоящим прорывом. Заключался он в послойном формировании объекта. Именно эта технология легла в основу современных 3Д-принтеров.


Как это работает?

Как происходит 3Д-прототипирование? Изначально 3d-прототипирование подразумевает моделирование объекта на компьютере. В специальной программе создаётся модель с заданными в трёхмерном пространстве параметрами. Эта модель отправляется на печать в специальное устройство — 3D-принтер, где послойно формируется прототип.

Существует много технологий 3D-печати:

  • FDM – самый простой метод печати;
  • стереолитография;
  • фотополимерная печать и многие другие.

В зависимости от технологии используются разные материалы для прототипирования: пластики, фотополимерные смолы, гипс и даже порошковые металлы. Но суть остаётся неизменной – объект слой за слоем формируется в камере устройства. При этом толщина слоя будет характеризовать точность 3d-печати и во многом её качество.


Применение 3D-прототипирования

3д-прототипирование нашло очень широкое применение:

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

В медицине и стоматологии на 3Д-принтерах печатают хирургические инструменты, шаблоны, протезы, модели органов и т.д.

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

6 инструментов для прототипирования сайта

Из статьи вы узнаете:

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

Что такое прототипирование

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

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

Структура интернет-магазина штор, сделанная в программе Xmind (источник)

Узнать, как продвигать интернет-магазин, избежать ошибок и вдохновиться на процесс можно на бесплатной онлайн-конференции “Интернет-магазин от А до Я” от обучающего центра Cybermarketing.

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

Существует более прозрачный способ передать идею и получить обратную связь на вашу работу — инструменты прототипирования.

Некоторые программы позволяют быстро создать вайрфреймы — простые схемы, чтобы понять направление ваших мыслей.

Пример вайрфрейма интернет-магазина в приложении Moqups

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

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

Перед созданием прототипа продумайте информационную архитектуру сайта — блок-схему с основными разделами. Это легко сделать в программе XMind. Таким образом вы расставите приоритеты для разработки и сможете отказаться от лишнего.

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

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

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

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

Зачем нужно прототипирование

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

Инструменты для прототипирования

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

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

Principle

Приложение для MacOS, совмещающее в себе возможности дизайнерских программ Sketch и After Effects.

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

Посмотрите, как работает готовый прототип модуля “Чек-лист” от SeoPult, сделанный в Principle:

Прототип модуля «Чек-лист» в Principle

Balsamiq

Balsamiq позволяет создавать прототипы с нуля без дополнительных файлов. Встроенная библиотека средств пользовательского интерфейса включает приятные мелочи типа «аккордеон» или выпадающее меню.

Оглавление книги в интерфейсе приложения для чтения — пример «аккордеон»-меню, созданный в Balsamiq (источник)

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

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

Moqups

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

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

Прототип мобильного приложения с сайта Moqups (источник)

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

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

InVision

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

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

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

Pixate

Бесплатное приложение для рабочего стола Pixate Studio создаёт прототипы для мобильных, которые будут выглядеть как реальный продукт. Затем можно связать его с системой IOS или Android и протестировать на экране телефона.

Прототип интернет-магазина в Pixate

Чтобы делиться работой с коллегами, загрузите макеты в облако.

Axure

Дорогой, долгий, но фундаментальный. Он остаётся стандартом профессионализма для дизайнеров из России.

Пример интернет-магазина в Axure

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

Вызывает противоречивые мнения: одни говорят, что Axure сложная программа для быстрого прототипирования, другие разбираются в ней за 20 минут. Вы можете попробовать Axure. Для этого в инструменте есть пробная бесплатная версия на 30 дней.

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

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

как сделать прототип сайта или моб.приложения

Для чего нужны прототипы и как их делать? Разберем прототипирование в деталях.

Где-то год назад посчастливилось мне работать с одной командой. Необходимо было создать сайт под определенные задачи. Моя зона ответственности была на уровне: найди исполнителей, поставь задачу и проконтролируй, чтобы все было как надо. Подрядчиков нашли, начали ставить задачи. Разбили проект на несколько частей, поехали.

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

Прототипирование это

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

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

Зачем нужно прототипирование

Собрал чек-лист по основным задачам, который решает создание прототипа:

  • Обзор конечного продукта/системы в целом.
  • Выявление слабых мест в системе.
  • Тестирование и проверка гипотез.
  • Отладка процессов.
  • Постановка задач на уровне тех.задания
  • …(можно добавить свой вариант в комментариях)

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

Прототип танка времен Второй Мировой Войны

Во Второй Мировой Войне прототипы танков или муляжи, к примеру, применялись для отвлечения внимания противника. Таким образом, было выиграно несколько сражений с наименьшими человеческими потерями. Если покопаться больше, то история прототипов уходит корнями в века. Но давайте вернемся в наше время и посмотрим, какие требования ставятся перед прототипами.

Требования к прототипам

  • Высокая скорость создания.
  • Определенный уровень детализации от задач.
  • Легкость для внесения изменений.
  • Интерактивность в случае взаимодействия с реальным пользователем.
  • Доступность для участников процесса.

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

Кто обычно занимается прототипированием

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

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

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

Как сделать прототип сайта или мобильного приложения

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

Различаются они по точности: low fidelity – низкая точность прототипа, medium – средняя и high – высокая, соответственно. Давайте разберем каждый из них подробнее.

–

Простите, что прерываю чтение. Присоединяйтесь к моему telegram канал. Свежие анонсы статей, развитие digital продуктов и growth hack, там все. Жду вас! Продолжаем…

–

Low fidelity или бумажный прототип

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

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

Когда я первый раз попробовал сделать бумажный прототип, то немного скептически отнесся к идее. Но после того, как мы поиграли в эту “игру” и обнаружили кучу косяков в нарисованном продукте, я кардинально изменил свое мнение. История рабочая на пять с плюсом.

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

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

Medium fidelity или интерактивный прототип

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

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

Пример, который я сделал в программе Marvel для мобильного приложения: ссылка

Все кнопочки и элементы можно брать из библиотеки софта, доступны разные варианты по видам устройств (Android, IOS, Desktop). Или же, просто нарисовать, сфотографировать и загрузить в программу. Ссылки от экрана к экрану можно цеплять, просто выделив какой-то объект в “View”.

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

Попробуйте немного покопаться в софте, он не очень сложный, но зато катастрофически полезный. Как всегда есть бесплатный доступ с ограничением по кол-ву проектов вроде бы. Но что мешает зарегистрироваться под разными почтами, если уж нужно много проектов? Или же купить подписку 12$ в месяц, тоже небольшие деньги, если много работать будете с подобными задачами.

Софтины для создания интерактивных прототипов:

Меня лично устраивает вариант такой: нарисовал что-то в графическом редакторе под прототипы (типа Figma) и закинул картинки в Marvel. Или же с помощью карандаша и ручки набросал эскиз и через фото бросил опять же все в Marvel. Быстро, бесплатно, эффективно.

High fidelity или интерактивный прототип с кусками кода

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

Как видите на рисунке выше, high fidelity прототип, это уже практически готовый продукт. Создать такой образец собственными усилиями будет проблематично, если у вас нет продвинутых навыков владения графическими программами. Поэтому, привлекайте дизайнера интерфейсов (UX/UI). С вас логика продукта/системы, с него визуализация и интерактивность.

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

Важный момент при прототипировании высокой точности (high fidelity) заключается в том, что вы можете передавать части кода разработчикам или верстальщикам. Например, в Fligma, когда вы рисуете экраны, то можете выгрузить кусок кода прямо из программы.

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

Если обобщить все способы прототипирования, то у меня сложилась следующая картина мира:

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

Заканчиваем

Прототипирование, это мощная практика, которая позволяет закрывать целый ряд задач. Теперь вы знаете, как создавать прототипы сайтов и мобильных приложений, используйте эти знания и если когда-нибудь вас спросят: “Будете ли вы делать прототип?”, – смело отвечайте: “Буду!”.

Алексей А.

Читайте также:

Короткий сериал от Ростелекома. Посмотрим один из эпизодов.

 

Вконтакте

Facebook

Twitter

Google+

Загрузка...

Прототипирование программного обеспечения — Википедия

Прототипи́рование программного обеспечения (от англ. prototyping) — этап разработки программного обеспечения (ПО), процесс создания прототи́па программы — макета (черновой, пробной версии) программы, обычно — с целью проверки пригодности предлагаемых для применения концепций, архитектурных и/или технологических решений, а также для представления программы заказчику на ранних стадиях процесса разработки.

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

Процесс создания прототипа обычно состоит из шагов:

  1. Определение начальных требований
  2. Разработка первого варианта прототипа, который содержит только пользовательский интерфейс системы
  3. Изучение прототипа заказчиком и конечными пользователями, получение обратной связи о необходимых изменениях и дополнениях
  4. Переработка и улучшение прототипа: с учетом полученных замечаний и предложений изменяются как спецификации так и прототип, после этого шаги 3 и 4 могут повторяться.

Прототипирование имеет множество различных вариантов. Тем не менее, все методы в какой-то степени основаны на двух основных типах.

Быстрое прототипирование[править | править код]

При быстром прототипировании (англ. rapid prototyping или throwaway prototyping) предполагается, что создаётся макет, который на каком-то этапе будет оставлен («выброшен») и не станет частью готовой системы.

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

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

Быстрое прототипирование не обязательно выполняется в рамках той же платформы и тех же технологий, что и разрабатываемая система. Для прототипа графического интерфейса пользователя (GUI) могут использоваться как стандартные HTML-страницы, либо прототип может подготавливаться в программе, специально предназначенной для создания макетов (например: Axure RP, Microsoft Expression Blend и др.).

Эволюционное прототипирование[править | править код]

Эволюционное прототипирование (англ. evolutionary prototyping) ставит своей целью последовательно создавать макеты системы, которые будут все ближе и ближе к реальному продукту.

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

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

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

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

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

Тем не менее, использование прототипирования создаёт ряд дополнительных рисков.

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

Вопрос о том, в какой мере оправдано применение прототипирования, в той или иной форме, к конкретному проекту, не имеет однозначного ответа. Хорошие результаты дает прототипирование при проектировании систем, в которых заметная часть трудозатрат связана с реализаций интерфейсов человек-компьютер, а оценка соответствия системы требованиям заказчика в значительной мере субъективна. В таких системах создание детальной спецификации очень сложно, так как заказчик не может учесть все нюансы, а программисты организуют неспецифицированные детали по собственному усмотрению; в результате типичной реакцией на демонстрацию готовой системы является: «Да, всё формально соответствует техническому заданию, но нам было нужно совсем не это!». Создание и оценка прототипа позволяют в таких случаях на ранних стадиях разработки отделить важные для заказчика детали, которые не попали в спецификацию, от неважных, реализация которых может быть произвольной.

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

Инструменты быстрого прототипирования / Habr

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

Создание эффективных прототипов
Для того чтобы оценить инструменты или техники прототипирования нам в первую очередь необходимо определить критерии эффективного прототипа. Лучшими являются те прототипы, которые вливаются в процесс дизайна. Мы хотим иметь возможность быстро переходить от набросков к интерактивному воплощению.
Эффективные прототипы быстры. Мы хотим использовать методики, которые помогают делать итерации короче. Этап создания прототипа не должно быть жестко закреплен в конце процесса дизайна. Включение создания прототипа в вашу ежедневную дизайнерскую работу способствует возникновению идей и бытрой проверке концепций.
Эффективные прототипы являются одноразовыми. Как и любой другой дизайн, предназначеный для реализации, мы создаём артефакт, предназначенный для того, чтобы донести идею до кого-то ещё (заинтересованного лица, разработчика, пользователя и т.д.). После того как дизайнерская идея была донесена, прототип реализации может быть отвергнут. Мы не должны переживать тяжёлое чувство, что создаём шедевр, который обязательно будет реализован, и безусловно не должны создавать прототип, работая на уровне кода.
Эффективные прототипы являются сфокусированными. Мы хотим выбирать интерактивные элементы нашего дизайна, которые действительно должны быть прототипированы. Ищите части вашего дизайна, которые сложны. Ищите паттерны взаимодействия, кторые давно известны в теории user experience. Ищите элементы взаимодействия, которые принесут пользу вашему продукту. Прототип, который продемонстрирует эти элементы, будет лучшим использованием вашего времени и энергии. [...]
Выбор инструмента
Вместе с базовым набором, который инструмент прототипирования должен предоставлять нам для создания эффективного прототипа, мы рассмотрим, что подойдет нашей конкретной организации.
Первым делом давайте бросим взгляд на команду. Кто-нибудь из сотрудников умеет программировать? Является технолог дизайна членом нашей группы, занимающейся user experience? Есть ли у нас прочные отношения с инженерным отделом, кторый может помочь в создании прототипов? Что насчёт штатных разработчиков, кторые могут помочь? Определение наших технических возможностей укажет нам направление на программирование прототипа вручную или на использование основанного на рисовании ПО для прототипирования.
Как велика наша команда? Мы являемся командой по user experience, состоящей из одного человека, занимающегося одновременно и исследованиями, и рисованием скетчей и прототипированием? Или мы члены небольшой, сплоченой команды, которая может осуществить процесс создания готового прототипа менее чем за один день? Или мы являемся частью большой организации, и существует необходимость пробиваться в мутной воде корпортативной политики и различных точек зрения на наш прототип? Зачастую, чем больше команда, тем больше деталей прототипа (описания) потребуется.
Где находится люди, которые будут оценивать наш прототип? Находятся ли они в одном с нами офисе, заглядывая через плечо? Или они далеко? Находятся ли они в стране с тем-же самым часовым поясом? Положительный ответ на этот вопрос увеличивает вероятность обсуждения с помощью прототипа, так как он на все 100% описывает себя сам.
Является ли команда, занимающаяся user experience, частью команды по разработке, или привлечённой группой, занимающейся консалтингом? Если мы часть команды, то сильно ли мы интегрированы с инженерной группой, или мы совершенно отдельный департамент? Группе по user experience, которую привлекли со стороны, зачастую приходится отстаивать свой концепт дизайна немного больше.
Какой у нас бюджет на средство прототипирования? Как и с большинством ПО, границы предложений охватывают диапазон от бесплатного до дорогого. Лучшие решения как правило относятся к нижней части среднего ценового диапазона. Супер-дорогие решения (как в отношении времени, так и в отношении цены) как правило своего не стоят.
Насколько гибким должен быть наш инструмент прототипирования? Ориентируемся ли мы только лишь на одну платформу, например на веб? Или мы создаём дизайн для многих платформ, мобильной, терминалов, телевидения, бытовой электроники, интернета? Многие средства прототипирования создаются лишь для одного направления (чаще всего для веб-сайтов), поэтому мы либо должны выбрать что-то одно, что нам нравится, или остановиться на методах создания прототипов с помощью программирования.
Инструменты прототипирования
С учётом указанных критериев создан список инструментов прототипирования. [...] Я надеюсь, что вместе мы сможем сформулировать подробные критерии выбора и варианты аспектов прототипирования. Этот список будет пересматриваться на основе обратной связи с сообществом.
Название инструмента Описание Платформа/Цена/Производитель Ссылка
Axure RP Pro Инструмент, ориентированный на создание прототипов веб-сайтов. Генерирует кликабельный HTML и документацию в формате Word. Поддерживает комплексное взаимодействие. Windows / $ 589 / Axure www.axure.com/p101_5.aspx
Balsamiq Mockups Позволяет очень быстро создават макеты вашего ПО. Сгенерированное содержимое выглядит как скетчи, что поможет не вводить в заблуждение тех, кто может подумать, что программа уже готова. Веб / $ 79 / Balsamig www.balsamiq.com
CogTool* Создаёт простые макеты пользовательского интерфейса и позволяет оценить их эффективность. Предсказывает, сколько времени опытному пользователю понадобиться для выполнения той или иной задачи. Кроссплатформенный / Бесплатный / Bonnie E. John cogtool.hcii.cs.cmu.edu
Coutline* Веб-приложение для создания и просмотра интерактивных прототипов. Включает в себя функции по управлению проектом и участию контролирующей группы. Веб /? / Coutline www.coutline.com www.usability.by/coutline
Dreamweaver Используйте визуальную часть Dreamweaver для перетаскивания и размещения элементов дизайна с помощью drag-and-drop, добавления элементов интерактивности, и погружайтесь в код для более комплексного прототипирования. Кроссплатформенный / $ 399 / Adobe www.adobe.com/products/dreamweaver
EasyPrototype* Очень похож на популярный Axure, легкий инструмент, позволяет проектировать экранные формы, экспортировать интерактивные HTML-прототипы и документацию. Кроссплатформенный / $ 69 / ExtremePlanner Software www.extremeplanner.com/easyprototype
Excel* Вы думаете, «Excel, ты с ума сошел»? Авторы этой книги так не считают. Кроссплатформенный / $ 229 / Microsoft www.effectiveprototyping.com/ep_excel.shtm excelprototyping.weebly.com
Expression Blend Генерирует прототипы для Silverlight и WPF приложений с богатыми интерактивными возможностями, быстрая скорость работы посредством Drag-и-Drop. Windows / $ 499 / Microsoft www.microsoft.com/expression/products/Overview.aspx?key=blend#page-top
Expression Blend + SketchFlow* Cоздание карт потока задач и концепций интерфейсов, которые выглядят как скетчи. Прототипы можно преобразовывать в конечный продукт с помощью Expression Suite. Windows / $ 599 / Microsoft www.microsoft.com/expression/products/Sketchflow_Overview.asp
Expression Design Мощный инструмент рисования для создания прототипов HTML, Silverlight и WPF приложений с ограниченной интерактивностью. Windows / $ 699 / Microsoft www.microsoft.com/expression/products/Overview.aspx?key=design
Fireworks Возможно создание сложных интерактивных прототипов. Множество инструментов аналогичны некоторым инструментам из Adobe suite. Имеется возможность экспорта в PDF или HTML. Кроссплатформенный / $ 299 / Adobe tv.adobe.com/#VI+f1498v1659
FlairBuilder* Создаёт интерактивные экранные формы с помощью десктопного Air приложения. Отправляет результат клиенту для просмотра в виде самостоятельного приложения. Кросплатформенный / $ 99 / Cristian Pascu www.flairbuilder.com
Flash Быстро генерирует анимацию или простые интерактивные прототипы. При наличиии знаний ActionScript позволяет создавать сложные интерактивные прототипы. Кроссплатформенный / $ 699 / Adobe www.boxesandarrows.com/view/quick-and-easy-flash
Flash Catalyst Инструмент, еще находящийся в процессе раработки, призван помочь дизайнерам в создании интерфейсов для флэш-приложений. Кроссплатформенный /? / Adobe labs.adobe.com/technologies/flashcatalyst
Flex Несмотря на то, что более приспособлен для разработчиков, WYSIWYG редактор и поддержка импорта скинов из Ilustrator дают возможность быстро пройти путь от проекта до опытного образца. Есть возможность экспорта Flash или Air приложений. Кроссплатформенный / $ 249 / Adobe www.adobe.com/products/flex
ForeUI* Создаёт макеты, определяет и моделирует поведение приложения в браузере. Кроссплатформенный / $ 79 / EaSynth Solution www.foreui.com
FormBuilder for Drupal Имеет веб-интерфейс с возможностью перетаскивания элементов на страницу. Создаёт рабочтающие формы, включая требования к вводимым параметрам, за считанные минуты. Веб / Бесплатный / Lullabot www.lullabot.com/blog/drupals-form-building-future
GUI Design Studio* Создаёт интерфейсы, аннотации к ним, строит раскадровки для определения рабочего прототипа. Имеет прекрасный визуальный стиль, похожий на скетчи. Windows / $ 499 / Caretta Software www.carettasoftware.com/guidesignstudio
iPlotz* Веб-приложение, создающее интерактивные экранные формы.Также включает в себя базовый набор для управления проектом, вроде присваивания задач. Доступна версия для десктопа (Air). Веб / $ 99 [1] / iPlotz iplotz.com
iRise Комплексный инструмент для моделирования бизнес-процессов и проектирования интерфейса приложения. Windows / $ 6995 / iRise www.irise.com
Justinmind Prototyper* Создаёт экранные формы с возможностью определения их поведения через описание с помощью use case-диаграмм. Кроссплатформенный (Для Mac пока только бета-версия) / $ 690 / Justinmind justinmind.com
JustProto* Веб-приложение, ориентированное на работу с удалённой командой. Веб / $ 99 [1] / DeSmar www.justproto.com/en
Keynote Похож на Powerpoint. Позволяет объектам быть кликабельными, открывать внешние ссылки, проигрывать Quicktime формат, атовматически переходить к новому слайду. Mac / $ 79 / Apple www.apple.com/iwork/keynote
LiveView Просмотр вашего рабочего стола на виртуальном iPhone, или в качестве приложения на реальном iPhone. Mac / Бесплатный / IDEO labs.ideo.com/2009/01/20/liveview-an-iphone-app-for-on-screen-prototyping
Lucid Spec* Дизайн экранных форм и моделировние рабочих приложений с использованием стандартных элементов управления и простого в использовании инструмента рисования. Windows / $ 499 / Elegance Technologies www.elegancetech.com/LS/LS.aspx
MockApp* Библиотека элементов интерфейса iPhone для Keynote. Есть также неоттестированная версия для Powerpoint, производящая некорректный экспорт. Кроссплатформенный / Бесплатный / Dotan Saguy mockapp.com
MockupScreens* Простой инструмент для создания экранных форм без интерактивных возможнстей. Windows / $ 100 / MockupScreens mockupscreens.com
OmniGraffle Инструмент для построения диаграмм и макетов, которые можно экспортировать в виде кликабельного HTML или PDF. Mac / $ 200 / OmniGroup urlgreyhot.com/personal/weblog/creating_prototypes_with_omnigraffle
OverSite* Создаёт структуру приложения, позволяет проектировать интерфейсы и моделировать приложения в виде кликабельного прототипа. Существует возможность импорта существующего сайта для использования в качестве отправной точки. Кроссплатформенный / $ 65 / OverSite taubler.com/oversite
Pencil Дополнение для Firefox, представляющее из себя нечто большее, чем просто создатель экранных форм или инструмент прототипирования. Кроссплатформенный / Бесплатный / Duong Thanh An www.evolus.vn/Pencil
pidoco* [...] Веб-инструмент для прототипирования, с возможностью совместной работы в стандартном режиме и режиме скетчей. Веб / $ 600 [2] / pidoco pidoco.com/en
Polypage* jQuery-плагин, позволяющий показывать/скрывать элементы страницы. С его помощью можно моделировать изменение состояния через панель инструментов. Кроссплатформенный / Бесплатный / ClearLeft 24ways.org/2008/easier-page-states-for-wireframes
Powerpoint Слайды Powerpoint — прототип? Да, это малоизвестный факт, но Powerpoint поддерживает интерактивные горячие точки, кторые можно использовать для переходов между слайдами. Это можно скомбинировать с анимацией переходов. Кроссплатформенный / $ 229 / Microsoft www.boxesandarrows.com/view/interactive
Protonotes Не является инструсментом прототипирования, но позволяет разрозненной команде комментировать проект через интернет. Веб / Бесплатный / Webanza www.protonotes.com
Protoscript Супер-упрощенный скриптовой язык, дающий дизайнерам возможность добавления элементов динамики к существующим HTML-страницам. Веб / Бесплатный / Bill Scott protoscript.com
Protoshare Веб-приложение, ориентированное на команды, которым требуется возможность совместной работы с интерактивными экранными формами. Веб / $ 156 [1] / Site 9 www.protoshare.com
Prototype Composer Даёт возможность прототипирования для веб и десктоп-приложений. [...] Windows / Бесплатный / Serena www.serena.com/products/prototype-composer/index.html
Screen Architect* Работает совместно с инструментом UML-моделирования Enterprise Architect для создания прототипов интерфейса в формате RTF и HTML. Windows / $ 120 [3] / CATCH www.screenarchitect.com
Tinderbox* Комплексный инструмент для записей, который может быть использован для экспорта в кликабельный HTML. Mac / $ 229 / Eastgate Systems www.eastgate.com/Tinderbox
Visio Professional Многие называют Visio «золотым стандартом» для инструментов создания экранных форм. Может создавать интерактивные прототипы. Windows / $ 560 / Microsoft office.microsoft.com/en-us/visio/FX100487861033.aspx
XHTML & CSS Овладейте навыками программирования, избавьтесь от программ для прототипирования и создавайте прототипы руками! Кроссплатформенный / Бесплатный / W3C? ;-) www.boxesandarrows.com/view/prototyping-with

* Выпущен, или добавлен в таблицу после опубликования поста в марте 2009
[1] За год
[2] За год
[3] Плюс $ 135 за Enterprise Architect
grumbler_chester: Таблица, содержащая список инструментов прототипирования, в оригинальном посте регулярно дополняется.

это что такое? :: SYL.ru

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

Актуальность

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

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

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

Особенности

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

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

Виды прототипов

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

Итак, в каких сферах и какие виды прототипов наиболее востребованы?

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

На основании созданного прототипа принимают решения относительно дальнейшей возможности и целесообразности реализации проекта. Вот почему при создании образца особое внимание уделяют точности и реалистичности.

Требования

Чтобы эффект от прототипирования моделей был максимальным, образец должен соответствовать некоторым требованиям.

  • Быстрое создание. Прототип – это не готовое изделие, поэтому на его создание не должно тратиться слишком много времени. Ведь образец – это лишь промежуточный этап на пути изготовления основного изделия.
  • Заданный уровень детализации. Если образец не будет соответствовать этому требованию, возможно, не удастся в полной мере оценить его функционал. Соответственно, по этой причине в дальнейшем недостатки могут быть выявлены уже в готовом продукте. Фактически при несоблюдении данного требования изготовление прототипа теряет всякий смысл.
  • Простота корректировки. Чем легче вносить изменения в созданный прототип, тем лучше. Это позволит при обнаружении недостатков не создавать новый образец, а просто внести изменения в уже существующий. Таким способом удается сократить сроки выпуска готового изделия.
  • Интерактивность. Это актуально, если уже на этапе прототипирования планируется взаимодействие с реальными пользователями. Таким способом удается получить обратную связь и сделать продукт, соответствующий пожеланиям пользователей.
  • Доступность. Это актуально в случае, если над разработкой трудится целая команда специалистов. Каждый из них должен иметь возможность высказать собственное мнение, чтобы совместными усилиями удалось найти идеальное решение, напрямую влияющее на качество конечного продукта.

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

К кому обращаться?

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

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

Варианты прототипов

По точности образцы можно разделить на те, которые имеют низкую, среднюю или высокую точность.

Существует классификация по способу реализации.

  • Бумажные прототипы – это быстрый набросок. Как правило, их используют на старте для фиксации основных идей, на которых будет основано дальнейшее развитие проекта.
  • 3Д-прототипирование занимает значительно больше времени, но открывает гораздо большее количество возможностей для тестирования проекта, позволяет вносить корректировки и получать более качественный продукт на выходе.

Этапы создания

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

  • Построение CAD-модели.
  • Формирование трехмерного макета.
  • Тестирование визуализированного образца потенциальными потребителями, а также оценка функционала и полезности.

При выявлении недостатков в исходную модель вносятся корректировки.

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

После того как прототип удалось согласовать и устранить недостатки, проект запускают в серийное производство.

Технология

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

  • Различные виды термопластиков наиболее реалистично воссоздают объект.
  • Фотополимер выпускается в жидком состоянии и застывает под ультрафиолетовыми лучами. Рекомендуется для создания высокопрочных объектов. Этот способ также называют "селективное лазерное спекание".
  • Гипсовый порошок считается наиболее бюджетным материалом.
  • Воск используют при производстве ювелирных изделий.

Итог

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

Прототипирование - это... Что такое Прототипирование?

Прототипи́рование (англ. prototyping) — быстрая «черновая» реализация базовой функциональности для анализа работы системы в целом.

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

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

Прототипирование программных продуктов и компьютерных систем

Термин «прототипирование» активно используется в индустрии компьютерных систем. В английском языке используется термин «Software Prototyping».

Прототипирование, в разработке программного обеспечения, является важным этапом в жизненном цикле программного обеспечения.

Для прототипирования компьютерных (программных) систем чаще используют языки программирования высокого уровня абстракции (например: Java, Perl, Python, Haskell) и специализированные инструменты прототипирования (например: GUI Machine, Axure RP, Microsoft Expression Blend).

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

См. также

В этой статье не хватает ссылок на источники информации. Информация должна быть проверяема, иначе она может быть поставлена под сомнение и удалена.
Вы можете отредактировать эту статью, добавив ссылки на авторитетные источники.
Эта отметка установлена 24 июня 2012.

от идеи до рабочего экрана / Mobile Dimension corporate blog / Habr

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

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

Начнем с определения:

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


  1. Концептуальные
  2. Интерактивные
  3. Анимированные

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

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


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

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

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

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

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

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

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

Практические решения:

Онлайн. Есть прекрасное приложение Post-it Plus, которое с помощью камеры «переносит» стикеры на виртуальную доску.


Так Post-it Plus конвертирует физические записки с фотографии в виртуальные (источник: Post-it Plus)

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

Интерактивные прототипы

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

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


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

Мы использовали интерактивные прототипы для демонстрации работы директорам, чтобы показать, каким образом реальные процессы отражены в приложении. Качественно проработанные прототипы – в исследованиях, для тестирования сценария на пользователях (некоторые даже не понимают, что это прототип), для проверки идей и предположений. Этот способ точно не залежится в арсенале дизайнера.

Практические решения:

Для создания интерактивного прототипа необходимы специальные инструменты для постраничного прототипирования. Например, Marvel или InVision (оба работают в web). Эти инструменты позволяют быстро загрузить экспортированный дизайн и установить связи между определенными областями экранов. Они просты и очень интуитивны, потому навык работы приобретается после пары раз использования. Простота инструментов позволяет сконцентрироваться на логике работы вашего прототипа и сценариях тестирования.


Страницы прототипа в Marvel (источник marvelapp.com)


Создание интерактивных областей и связей в Marvel (источник marvelapp.com)

Анимированные прототипы

Движение – это способ вдохнуть жизнь в дизайн! Анимированный прототип является самым высокоуровневым прототипом. Некоторые из них способны практически полностью моделировать работу настоящего приложения, и неискушенному взгляду отличить их достаточно сложно. Главное преимущество создания анимированного прототипа читается из названия. На этом этапе дизайнер продумывает очень важный аспект в UX – взаимодействие приложения с пользователем, визуализация которого создается посредством анимации.


Источник principleformac.com

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


Источник principleformac.com

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


Неотзывчивая кнопка

Практические решения:

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


Работа с прототипом в ProtoPie (источник protopie.io)

Для создания анимированных прототипов подходят такие инструменты как Principle, Flinto, Proto.io, Origami, ProtoPie, Framer и др. Некоторые инструменты (например, ProtoPie, Framer) поддерживают работу встроенных датчиков мобильных устройств – акселерометра, гироскопа, микрофона, камеры, 3D Touch, что позволяет сделать прототип еще более реалистичным. О том, какие датчики и сенсоры есть в нашем распоряжении и как работать с ними в ProtoPie прочитать можно тут.

Пошаговая инструкция по работе в Principle.

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

Когда нужно делать анимированный прототип:


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

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

как создать успешный продукт и сэкономить / Habr

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

Недавно, прогуливаясь по Москве, вспомнил о стартапе и решил проверить его лично. Но уже через 15 минут понял, что шансов взять самокат в аренду нет, а рейтинг 1.5 в AppStore полностью оправдан и подтверждает, что сложности не только у меня.

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

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

Из статьи вы узнаете:

  • Что такое прототипы
  • Как сделать первоклассный прототип
  • Как отличить хороший прототип от плохого
  • Как сэкономить бизнесу $25 000

Что же такого важного в этих ваших прототипах?


Концепция прототипов в обычном мире довольно стара. Строительству любого здания предшествует проект (проект = прототип), выпуску серийного автомобиля — концепт (концепт-кар = прототип). Несмотря на это, в цифровом мире долгое время даже высокобюджетные проекты фактически разрабатывались методом тыка, а продукты для среднего и малого бизнеса вообще по наитию подрядчиков.

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


Прототип-прототипу — рознь


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

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

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

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

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

Прототип – результат комплекса работ


Рассмотрим шаги, выполнение которых позволит создать действительно эффективные интерфейсные решения, основанные на потребностях пользователей и решающие конкретные бизнес-задачи:

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


Исследования – важнейший этап, фундамент успеха всей последующей работы. Несмотря на это, на рынке до сих пор приняты два способа «исследований»: «пришлите нам ТЗ» и «заполните бриф на 150 вопросов».

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

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

Многие UI/UX-дизайнеры не считают необходимым общаться с пользователями, тем не менее, исследование пользователей позволяет взглянуть на задачу с другой стороны, выявить причинно-следственные связи, понять мотивацию, обнаружить страхи, услышать сомнения, найти инсайты.

Разработка дизайн-решения


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

Для трансформации исследований в требования к продукту существует множество инструментов: User-Centered-Design, Value Proposition Canvas, Jobs-To-Be-Done и другие, но все они приводят к одному результату – осознанному проектированию интерфейса.

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

Контент


Прежде, чем перейти от скетчей к прототипам высокой детализации, нужно подготовить весь контент. Соблазн использовать текстовую рыбу чреват последствиями: такой прототип невозможно реально оценить, к тому же, когда реальный контент все-таки появится, окажется, что он не ложится в уже разработанный продукт. И тогда контент придется подгонять под заданные рамки.
Поэтому сначала ЧТО (контент), а потом КАК (дизайн).

Прототип


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

Как отличить хороший прототип от плохого


Вот простой чек-лист, который без каких-то знаний в области проектирования взаимодействия позволит определить, подсовывают ли вам под видом прототипа «заливную рыбу» или результат реальной работы.

Итак, всего несколько пунктов:

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

Заключительная история


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

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

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

Если вам показалось, что все слишком сложно и долго, вот доказательство обратного: UX-challenge: проектирование приложения мобильного банка за 5 дней

Смотрите также