fast-prototyping

Проектируйте лучше и быстрее, используя “быстрое прототипирование”

Useme переводы -
Share Button

Автор статьи: Lyndon Cerejo
Оригинал статьи опубликован в Design Better And Faster With Rapid Prototyping (16.08.2010)

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

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

Процесс быстрого прототипирования

Быстрое прототипирование включает в себя несколько итераций трёхэтапного процесса:

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


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

Определение возможностей прототипа

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

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

Как много должно быть спрототипировано ?
Хорошим правилом является то, что нам необходимо сфокусироваться на тех 20% функционала, который будет использоваться 80% времени, т.е. ключевые функции, которые будут использоваться наиболее часто. Помните, что цель быстрого прототипирования – это демонстрация того, что и как будет работать или, на более поздних стадиях, как система будет выглядеть, без прототипирования всего продукта.

Определите сценарии
После определения областей, которые будут спрототипированы, соедините их вместе с одним или несколькими сценариями: определите понятные пути получения пользовательского опыта, который будет симулировать прототип. Для вэб-сайта продающего обувь одним сценарием может быть “Скучный Джо”, который покупает точно такие же беговые кроссовки Nike, какие он купил 6 месяцев назад, а другим сценарием может быть “Изучающий Сэм”, просматривающий всю обувь 10го размера, чтобы найти пару “оксфорд-шуз” и пару тапок, которые его интересуют.

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

Выберите подходящий уровень соответствия

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

  • Визуальное соответствие (наброски .. стилизация)
    Внешний вид и осязание являются наиболее заметными аспектами соответсвия прототипа и, если они подобраны неверно, могут уводить в сторону отзывы о прототипе. Если перейти к точному соответствию слишком рано, то пользователи будут обращать внимание на визуальный дизайн, который не имеет значения на ранних стадиях. С визуальной точки зрения, прототипы не должны быть совершенными до пикселя, необходимо просто соблюдать пропорции. К примеру, если левая навигационная область должна занимать пятую часть экрана шириной в 1024 пикселя, она не должна иметь ширину точно 204 пикселя до тех пор, пока пропорции этой области сохранены в прототипе. Пока прототип проходит через цикл проектирования, повышайте по мере необходимости визуальное соответствие путём введения элементов стиля, графики, брендирования и цветов.
  • Функциональное соответствие (статичность .. интерактивность)
    Прототип будет просто отображать работу системы (статический) или он будет выглядеть полностью функционирующим, реагируя на действия пользователя (интерактивный). Это соответствие в меньшей степени отвлекает пользователей, но добавление интерактивности в последующих итерациях повышает функциональньность и позволяет использовать прототип для юзабилити-тестирования, обучения и комуникации.
  • Соответствие контента (Lorem ipsum .. реальный контент)

Ещё один аспект, который отвлекает пользователей, – это контент, который отображается в прототипе. Волнистые линии и фиктивный текст наподобие “lorem ipsum” полезны на ранних стадиях прототипирования. Но с уточнением прототипа нужно оценивать необходимость замены “lorem ipsum” на реальный контент, чтобы оценить, как он влияет на общий дизайн.

Диапазон прототипирования

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

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

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

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

1. Во-первых, используя Balsamiq или схематичные трафареты Visio, вы заставляете пользователей воспринимать работу как незавершённую или как черновик, а не завершённый отточенный продукт.
2. Во-вторых, предоставляя прототип с высоким уровнем визуального соответствия (например, детальный макет, сделанный в Photoshop), вы даёте пользователям возможность сфокусироваться на визуальном дизайне и внешнем виде, включая цвета, шрифты, изображения и логотип.

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

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

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

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

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

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

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

Выбор инструментов

В зависимости от ваших подходов, у вас есть широкий выбор инструментов. Дэн Харрельсон (Dan Harrelson) составил список популярных инструментов прототипирования в блоге Adaptive Path.

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

  • Насколько легко изучить и использовать инструмент?
  • Насколько гибко он поддерживает прототипы для вэб, пакетных и пользовательских приложений, а также десктоп- и мобильных приложений?
  • Даёт ли инструмент доступ к библиотекам многократно используемых трафаретов, шаблонов и виджетов?
  • На сколько легко поделиться прототипом с остальными для оценки? Можно ли с помощью этого инструмента собрать их отзывы?
  • На сколько легко вносить изменения “на лету”? Можно ли включить инструмент обратной связи?
  • Есть ли у него функции совместной работы, такие, как возможность нескольким людям работать с ним в одно и то же время?
  • Каковы условия лицензии и стоимость?

Что делать нужно, а чего не стоит?

Делать:

  • Работайте совместно с пользователями и заинтересованными со стороны бизнеса и ИТ во время быстрого прототипирования. Помимо ценной обратной связи, они также дают чувство ответственности за конечный продукт.
  • Избегайте “затянутых прототипов”, устанавливая сроки для процесса, учитывая цели, уровень соответствия, масштабность и продолжительность. Напоминайте всем, в том числе и себе, что быстрое прототипирование является средством для достижения цели, а не самоцель.
  • При построении высокоточных прототипов и симуляторов настраивайте реалистичные задержки (например, для обновления экрана или перемещения между шагами транзакции), тогда пользователи не будут ожидать мгновенного ответа в конечном продукте.
  • Используйте элементы повторно (Reuse, reuse, reuse). Для компьютерных прототипов это означает сохранение многократно используемых шаблонов, трафаретов, паттернов и виджетов для их использования в последующих проектах.
  • И самое главное, начинайте каждый прототип с обзорной сессии с оговариванием того, что это всего лишь прототип, макет, а не само решение. Это напоминает пользователям, что работа ещё в процессе, что увеличивает обратную связь, и в случае высококачественного прототипа не позволяет пользователям ошибочно принять его за работающее решение.

Не делать:

  • Не протипируйте решения и функции, которые не могут быть реализованы. Если есть сомнения, проконсультируйтесь у разработчиков до начала.
  • Не воспринимайте каждое изменение или запрос, которые следуют из отзывов о прототипе, как новое требование. Быстрое прототипирование помогает собрать упущенные требования, но эти новые требование должны быть тщательно исследованы. Некоторые из них могут быть реализованы, а некоторые стоит отложить до следующей версии.
  • Не начинайте обзорную сессию прототипа без выработанных принципов получения обратной связи. Чётко определите тип обратной связи, которую вы хотите получить. (Логично ли организованны шаги? Интуитивна ли навигация?). Если этого не сделаете, то будьте готовы к “Мне не нравится синий цвет в шапке”, “Мы можем использовать вот этот шрифт вместо этого?” или “Можете ли вы сделать это больше, толще, в красном цвете и мигающим?”.
  • Не будьте перфекционистами. В большинстве случаев быстрое прототипирование не является совершенным на 100%, оно должно быть достаточно хорошим, чтобы дать общее понимание каждому.
  • Не прототипируйте всё. Вы не должны этого делать в большинстве случаев.

Автор статьи: Lyndon Cerejo
Оригинал статьи опубликован в Design Better And Faster With Rapid Prototyping (16.08.2010)

Share Button