Pull to refresh

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

Reading time 9 min
Views 204K
Original author: Dan Harrelson
Прототипы, как инструменты дизайна, находятся на подъёме, и вот почему. Я твёрдо верю, что прототипирование помогает нам в процессе создания качественных пользовательских интерфейсов. Мы работаем в мире богатых, обладающих динамикой интерфейсов пользователя как в сети, так и на наших устройствах. Интерфейсы, которые мы создаём, интерактивны, откликаются на воздействие пользователя и обладают эмоциями. Прототипы позволяют сформулировать чувства и функции дизайна так, как этого не могут сделать простые экранные формы. Но как выбрать лучший инструмент прототипирования для работы?

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

Articles