Выбор инструмента для разработки прототипа 


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

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

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

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

Дабы оценить инструменты или технику прототипирования, в первую очередь, необходимо определить критерии, которыми следует руководствоваться: 

1. Визуальная точность (детализация):

— скетчи, "карандашные" наброски, вайрфреймы (как правило, это статичные прототипы, которые подойдут для прототипирования на уровне набора блоков).

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

2. Направление, для которого будет создаваться прототип:

— разработка веб-сайта

— настольные приложения

— мобильные ОС

3. Скорость создания прототипа

4. Возможность внесения изменений

5. Необходимость повторной отрисовки (занимает довольно много времени).

6. Возможность доступа к проекту всем его участникам (заказчик, руководство, разработчики, дизайнер).

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

 

Инструмент: Axure RP Pro

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

Стоимость: $ 589

Преимущества: Возможность создания сценариев. Генерирование интерактивных страниц в html формате. Просмотр прототипа без установки дополнительных программ. Высокая скорость создания прототипа и детализация.
Не требуется повторная отрисовка страниц.
Полная доступность для всех участников проекта.
Высокая скорость внесения изменений.

Недостатки: Проблемы с выделением группы объектов. Медленная работа при создании крупного проекта с множеством сценариев. Рассчитан только для web приложений. 

 

Инструмент: MS Expression Blend

Назначение: Позволяет генерировать прототипы для Silverlight и WPF приложений.  Имеет богатые интерактивные возможности. Быстрая скорость работы благодаря drag-and-drop.

Стоимость: $ 499

Преимущества: Поддерживает два типа SketchFlow-проектов. Концепция композиционного экрана. Возможность оставлять комментарии и отзывы двумя способами. Возможность создания функционального прототипа за счет изменения состояний. Поддерживает трансформацию анимации (XAML-раскадровка). Поддерживает два варианта определения тестовых данных. Экспорт в Microsoft Word для документирования.

Недостатки: Подойдет только для прототипирования под Windows ОС. Для WPF нужно отправлять приложение для демонстрации. Не хватает кнопки для перехода «Convert To Production Styles» и обратной «Convert To Sketch Styles». Проект «Silverlight и SketchFlow» ничего не знает о Silverlight Navigation Framework.

 

Инструмент: Balsamiq Mockups

Назначение: Позволяет быстро создавать макеты ПО. Сгенерированное содержимое представлено в виде скетчей. Подходит для построения каркаса и воспроизведения проектов, нарисованных от руки. Позволяет быстро обновлять свойства программ, таких как Microsoft Word. Тип: Приложение AIR

Стоимость: Веб / $ 79

Преимущества: Кроссплатформенная. Высокая скорость создания каркаса. Большая библиотека встроенных компонентов для создания пользовательского интерфейса. Возможен экспорт готового прототипа в формате PNG или PDF. Удобный, несложный интерфейс. Наличие десктопного приложения и возможность работать с макетами офлайн.

Недостатки: Необходимость наличия интернет-подключения (для он-лайн версии). Предназначен для несложных проектов. Невозможно создавать интерактивные страницы.

 

Инструмент: MockFlow

Назначение: Предназначен для проектных, объединенных (в реальном времени) моделей интерфейса для ПО и веб-сайтов.
Тип: Онлайн/оффлайн

Стоимость: 4.91$ в месяц (безлимитный пакет)

Преимущества: Обширная библиотека шаблонов и различных элементов. Экспорт в PDF/PPT. Включает в себя приложение с возможностью работы офлайн. Наличие бесплатного мобильного приложения.

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

 

Инструмент: Mockingbird

Назначение: Инструмент для создания прототипов сайтов и веб-приложений. Позволяет создавать, просматривать и редактировать макет, обмениваясь наработками между участниками.
Тип: Онлайн

Стоимость: бесплатный

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

Недостатки: Необходимость наличия интернет-подключения. Предназначен для несложных проектов. Невозможно создавать интерактивные страницы.

 

Инструмент: Visio Professional

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

Стоимость: $ 560

Преимущества: Наличие библиотеки объектов (stensil) со стандартными элементами управления. Скорость создания прототипа высокая. Возможность экспортировать в квази-HTML.

Недостатки: Трудности для демонстрации заказчику. Невозможно разрабатывать длинные (высокие) формы. Практически невозможно проводить юзабилити-тестирование. Гиперссылки не работоспособны. Необходимо изменять один элемент вручную на всех страницах. Стандартные объекты растровые (хорошо выглядят только в одном масштабе). Несоответствие визуальной реалистичности элементов управления с отсутствием их функциональности. Интерактивность очень низкая.

 

Инструмент: Pencil

Назначение: Дополнение для Firefox, предназначен для построения диаграмм и прототипов пользовательского интерфейса.
Тип: Дополнение Firefox

Стоимость: бесплатный

Преимущества: Кросс-платформенный. Наличие готовых трафаретов для построения графиков и разработки веб-приложений, добавочных внешних объектов, редактора текста на странице. Возможность экспортирования в HTML, PNG, OpenOffice, Word и PDF и просмотр клипартов. Импорт растровых изображений во внутреннюю коллекцию фигур.

Недостатки: Неудобства группировки/разгруппировки. Работает как плагин только для FireFox. Подойдет для создания небольших и несложных проектов. Отсутствует навигация в виде «дерева» по элементам интерфейса.

 

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

Axure RP Pro и MS Expression Blend позволяют создавать эстетичные прототипы, которые пригодны для юзабилити-тестирования. Обе среды подходят для разработки динамических прототипов, в них удобно проектировать взаимодействие пользователя и системы. Таким образом, такие прототипы воспринимаются как сайт или программа, чего не скажешь о статичной картинке.

Рассматривать Pencil или Axure/MS Expression Blend нужно в зависимости от целей и задач, поскольку первый ресурс предназначен для создания статичных «карандашных» набросков, а вторые два - для интерактивных hi-fi прототипов. Их ни в коем случае нельзя сравнивать или рассматривать их как альтернативные решения. Каждый инструмент создан для решения определенного круга задач.

Для блочной разметки, которая предшествует прототипу, можно использовать он-лайн инструменты или векторные редакторы. Инструменты MockFlow, Mockingbird, Balsamiq Mockups не создают полноценные прототипы. Средства этих инструментов позволяют создать лишь отдалённый набросок сайта (собственно они для этого и создавались). Для более крупных проектов использование этих инструментов не подходит — не достает функционала, детализации интерфейса и возможности создавать базовые интерактивные элементы. В них отсутствует возможность добавления «заметок» к элементам, как в Axure или комментирования, как в MS Expression Blend. В них нет возможности  работать с Master-page (создавать группы элементов, которые сохраняются и могут быть использоваться по всему сайту). При этом их можно править только в одном месте, а изменения относятся ко всему прототипу. Поскольку очень часто приходится вносить изменения в проект, наличие такого инструмента как мастер — незаменимо.

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

 

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

 

Инструменты проектирования (часть I)

Инструменты проектирования (часть III)