Инструменты быстрого прототипирования
Прототипы, как инструменты дизайна, находятся на подъёме, и вот почему. Я твёрдо верю, что прототипирование помогает нам в процессе создания качественных пользовательских интерфейсов. Мы работаем в мире богатых, обладающих динамикой интерфейсов пользователя как в сети, так и на наших устройствах. Интерфейсы, которые мы создаём, интерактивны, откликаются на воздействие пользователя и обладают эмоциями. Прототипы позволяют сформулировать чувства и функции дизайна так, как этого не могут сделать простые экранные формы. Но как выбрать лучший инструмент прототипирования для работы?
Создание эффективных прототипов
Для того чтобы оценить инструменты или техники прототипирования нам в первую очередь необходимо определить критерии эффективного прототипа. Лучшими являются те прототипы, которые вливаются в процесс дизайна. Мы хотим иметь возможность быстро переходить от набросков к интерактивному воплощению.
Эффективные прототипы быстры. Мы хотим использовать методики, которые помогают делать итерации короче. Этап создания прототипа не должно быть жестко закреплен в конце процесса дизайна. Включение создания прототипа в вашу ежедневную дизайнерскую работу способствует возникновению идей и бытрой проверке концепций.
Эффективные прототипы являются одноразовыми. Как и любой другой дизайн, предназначеный для реализации, мы создаём артефакт, предназначенный для того, чтобы донести идею до кого-то ещё (заинтересованного лица, разработчика, пользователя и т.д.). После того как дизайнерская идея была донесена, прототип реализации может быть отвергнут. Мы не должны переживать тяжёлое чувство, что создаём шедевр, который обязательно будет реализован, и безусловно не должны создавать прототип, работая на уровне кода.
Эффективные прототипы являются сфокусированными. Мы хотим выбирать интерактивные элементы нашего дизайна, которые действительно должны быть прототипированы. Ищите части вашего дизайна, которые сложны. Ищите паттерны взаимодействия, кторые давно известны в теории 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: Таблица, содержащая список инструментов прототипирования, в оригинальном посте регулярно дополняется.