Разрабатываем быстрее и качественнее при помощи прототипов

http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/
  • Перевод
Старая поговорка «Лучше один раз увидеть, чем сто раз услышать» очень точно описывает, что разработчикам может дать создание прототипа интерфейса: визуальное представление, значительно более наглядно описывающие вопросы дизайна проекта и разработки функционала. В итеративном подходе к дизайну пользовательского интерфейса используется быстрое проектирование в процессе создания набросков системы (будь то веб-сайт или приложение) и утверждение их у обширной группы представителей заказчика, заинтересованных сторон, разработчиков и дизайнеров. Если придерживаться этого подхода — можно получить обратную связь раньше (чаще всего прямо в процессе обсуждения), что значительно улучшает качество дизайна конечного продукта и уменьшает потребности во внесении изменений в процессе разработки.

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

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


Процесс быстрого создания прототипа подразумевает множественные итерации в рамках рабочего процесса, состоящего из трех этапов:

Создание

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

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

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

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



Определяемся с терминологией


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

Что необходимо проектировать?


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

Сколько прототипов нужно?


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

Придумайте сценарии


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

Планируйте итерации


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

Расставьте приоритеты





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

Визуальная точность (набросок дизайн)

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

Функциональная точность (статичный интерактивный)

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

Точность контента (lorem ipsum реальный контент)

Другая важная составляющая, которая часто отвлекает пользователей — контент, отображенный в прототипе. Абстрактные строки и фиктивный текст (например «lorem ipsum») полезны, чтобы избежать некоторых сложностей на ранних этапах проектирования. Но поскольку прототип постоянно совершенствуется, возникает необходимость заменить фиктивный текст реальным контентом, чтобы получить представление о том, как это будет сказываться на разработке дизайна.

Спектр проектирования


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



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

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



Есть две причины, почему можно было бы преднамеренно заставить прототип средней точности не быть похожим на прототип средней точности:
— Прежде всего, сделайте так, чтобы прототип смотрелся как макет с низкой точностью для того, чтобы клиенты рассматривали его как набросок или макет в стадии разработки, а не полируемое и готовое изделие. Достичь этого можно используя Balsamiq или специальные макеты для Visio.
— Во вторых, придавая прототипу высокую визуальную точность (например, в виде красивого макета, сделанного в Photoshop), Вы заставляете клиента сосредотачиваться на оценке качества визуального дизайна — цветах, шрифтах, логотипах и изображениях.
Скорость создания прототипа средней точности достигается использованием шаблонов, трафаретов и типовых графических элементов.

Высокая точность
Высокоточные прототипы являются самыми реалистичными и часто ошибочно принимаются за конечный продукт. Несколько лет назад, единственный способ создать высокоточные прототипы состоял в том, чтобы фактически спрограммировать прототип, а для этого над созданием прототипа пришлось бы работать уже двум специалистам — программисту и проектировщику. Сейчас, к счастью, средства прикладного моделирования позволяют всем пользователям (даже не сильно подкованных технически) перетаскивать и опускать графические фрагменты интерфейса, чтобы создать высокоточные прототипы, которые моделируют функциональные возможности конечного продукта. Axure и iRise — хорошие примеры инструментальных средств прикладного моделирования, которые могут использоваться, чтобы создать высокоточные прототипы.
Эти прототипы необходимы, когда требуется высокая визуальная и функциональная точность. Например, при введении новой технологии (к примеру, когда вы адаптируете свое настольное приложение к работе в виде web-app). Большинство этих прототипов не может быть преобразовано в пригодный для использования код, но они служат превосходной справочной информацией для разработчиков, а также для проведения проверки удобства использования или обучения пользователей.



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

Выбираем уровень точности прототипа


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

Выбираем инструменты


В зависимости от Вашего подхода у Вас есть большое разнообразие инструментальных средств на выбор. Дэн Харрелсон составил список популярных инструментальных средств проектирования в блоге «Adaptive Path».
У каждого инструмента есть свой собственный набор возможностей и свои сильные стороны. Основываясь на своих потребностях и требованиях проектов Вы можете оценить и выбрать, какой инструмент стал бы для Вас оптимальным. Вот некоторые вопросы, которые помогут определиться с выбором:

  • Насколько просто освоить использование программы?
  • Достаточно ли ПО гибко для того, чтобы разрабатывать прототипы для Интернета, настольных и мобильных приложений?
  • Есть ли в наличии репозиторий с достаточным количеством полезных трафаретов, шаблонов и элементов?
  • Насколько просто поделиться прототипом с другими участниками разработки для того, чтобы узнать их мнение? Можно ли автоматизировать сбор такой информации силами самой программы?
  • Насколько просто вносить изменения «на лету» или в максимально короткие сроки итераций?
  • Есть ли возможности совместной работы над проектом, например возможность одновременной работы нескольких человек?
  • На условиях какой лицензии распространяется ПО и сколько оно стоит?


Полезные советы


Перед тем как вы приступите к быстрому проектированию — прочтите несколько пунктов об эффективной работе над прототипом:

Хороший подход
— Работайте сообща с клиентами, их бизнесом и заинтересованными лицами в IT отделах во время быстрого проектирования. Кроме предоставления ценной обратной связи, они также получают опыт собственного использования конечного продукта.
— Избегите неверного понимания смысла создания прототипа — убедитесь, что клиенты ожидают от процесса проектирования то что нужно — включая, затрагивающие цель, точность, область видимости и продолжительность. Напомните всем, включая себя, что быстрое макетирование — средство для создания продукта, но не продукт сам по себе.
— Создавая интерактивные высокоточные прототипы, реализуйте реалистичные задержки в работе продукты (например, для обновления страницы или перемещения через шаги транзакции), так, чтобы пользователи не ожидали мгновенного реагирования от конечного продукта.
— Используйте многократно! Для компьютерного проектирования это означает сохранять шаблоны, трафареты, графические фрагменты для использования в будущих проектов.
— Самое важное — начните каждое рассмотрение прототипа с оговорки, что это — только прототип, макет, не фактическое решение. Это напоминает пользователям, что это — процесс разработки. Это поощряет обратную связь, и в случае высокоточных прототипов, препятствует тому, чтобы пользователи приняли это за рабочее решение.

Плохой подход
— Не проектируйте особенности или функциональные возможности, которые не могут быть осуществлены при разработке продукта. Если у Вас возникли сомнения — посоветуйтесь с разработчиками перед стартом.
— Не вносите каждое изменение или запрос, который выходит из обсуждения прототипа как из новое требование. Быстрое проектирование позволяет не пропустить необходимые возможности, но к новому функционалу стоит подходить осторожно. Некоторые возможности могут быть осуществлены, в то время как другие стоит перенести в будущие версии.
— Не начинайте обсуждения прототипа без ясных рекомендаций для обратной связи. Четко определите, какой типе обратной связи Вы ищете (например, «Структура логически понятна?», «Навигация ясна и интуитивна понятна?»). В противном случае нужно быть готовым к таким замечаниям, как «Мне не нравится синий цвет в заголовке», «Разве мы не можем использовать этот шрифт вместо этого» или «Вы можете сделать это больше, более жирным, красным цветом и мерцающим?»
— Не будьте перфекционистом! В большинстве случаев, быстрое макетирование не должно быть на 100 % совершенным, а только достаточно хорошим, чтобы дать всем общее понимание.
— Не проектируйте все, проектируйте только то, что действительно нужно видеть в качестве прототипа.
Поделиться публикацией
Ой, у вас баннер убежал!

Ну. И что?
Реклама
Комментарии 22
  • +1
    Ждал этот перевод! Спасибо!
    • +1
      «high fidelity» — «высокочастотный»??
      • +2
        Прошу прощения, упустил из вида эту ошибку.
        Поправил текст.
      • 0
        Спасибо за перевод!
        • НЛО прилетело и опубликовало эту надпись здесь
          • +1
            Да, именно!
            Хорошие примеры — тоже хотел добавить в статью, но подумал, что в рамках перевода это было бы неуместно.
            • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                Думаю напишу потом отдельный пост про это :)
          • +1
            Вопрос по теме: подскажите удобный инструмент для проектирование веб-интерфейсов для Mac OS, может кто знает?
            • 0
              Пробовал пользоваться AxureRP — но она у меня как-то криво работает со шрифтами.
              Сейчас пробую использовать InDesign и OmniGraffle.
              Но все равно пока что большую часть работы делаю сначала на бумаге, а потом в Balsamiq Mockups.
              • +1
                Спасибо, Balsamiq Mockups выглядит очень круто, буду пользовать.
                А OmniGraffle надо непременно пробовать на iPad'е — можно работать прямо в метро или маршрутке %)
                • +1
                  выходя из метро или маршрутки резко ускоряйтесь или окажитесь без прототипов.
            • 0
              Мне кажется, для поставленной задачи вполне хватает просто хорошей IDE.
              • +1
                Все упирается в то, где именно Вам просто делать прототипы.
                Если это IDE — то делайте в IDE. Выбор средств проектирования — дело сугубо индивидуальное и, как мне кажется, тут практически не существует «плохого» выбора.
              • +4
                То, что прототип не является продуктом — это надо жирным красным шрифтом выделить. Это одна из основных проблем, особенно в том случае, когда в качестве инструмента прототипирования используется основная среда разработки (а современные визуальные средства позволяют очень быстро «набросать» макет). В итоге получается, что прототипировали, прототипировали и допрототипировались до того, что сроки выпуска поджимают, а кроме прототипа ничего и нет. В итоге прототип отдаётся как конечный продукт со всеми вытекающими…
                • 0
                  Спасибо за хороший комментарий! Действительно такая ситуация, сожалению, не редкость.
                  Тут главное доходчиво все объяснять клиенту, не переусердствовать с этапом проектирования и внимательно соблюдать сроки.
                  • 0
                    В книге Pragmatic Programmer (Kindle Edition которой, кстати, сейчас распродается на Амазоне за $4.99), это описано. И в таких случаях, когда есть угроза, что прототип станет основой системы, рекомендуется отказаться от прототипирования в пользу «трассирования» (Tracer Bullets), или, по-простому — построения скелета.
                    • 0
                      О боже, как я попал в этот пост?
                  • 0
                    Очень Getting Real напомнило.
                    • 0
                      Книга и методика хорошая — сам ее очень люблю.
                      Схожие моменты вероятно есть.
                    • +1
                      Пробежался по тексту. Очень интересно и полезно! Хоть весь перевод и не осилил, но добавил в избранное, чтобы был под рукой, на случай чего :)
                      Спасибо
                      • +2
                        Кстати на хабре есть перевод статьи со списком инструментов:
                        habrahabr.ru/blogs/ui_design_and_usability/70001/

                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                        Самое читаемое