Глава 6. Бумажный и другие аналоговые методы.

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

Прототипирование на бумаге существует много десятилетий и было популярно преимущественно в академических институтах и крупных корпорациях, таких как IBM, Digital и Sun в 1990-е годы. В те времена на вас, скорее всего, посмотрели бы странно, если бы вы сказали, что делаете прототипы из бумаги. Как изменились времена!

_{Фотография Кристиана Крамера, компания Cultured Code.}

^{РИС. 6.1. Образец бумажного прототипа приложения Things для iPhone.}

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

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

Сильные стороны.

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

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

• Быстрота. Практически любое взаимодействие можно прототипировать в считаные минуты.

• Дешевизна. Не нужно оплачивать лицензии на программы. Все инструменты, скорее всего, уже есть у вас дома или в офисе.

• Легкость. Входной барьер практически отсутствует. Заняться этим может любой человек.

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

• Совместная работа. Очень удобно работать с другими членами команды или с участниками тестирования на удобство использования.

• Не связан какими-либо программными или аппаратными ограничениями. При прототипировании на бумаге вы не привязаны к предустановленным виджетам графического интерфейса или способам взаимодействия. Бумага позволяет изучить любые взаимодействия.

• В любом месте, в любое время. Прототипирование на бумаге не требует наличия компьютера и может осуществляться где угодно и когда угодно.

Слабые стороны.

Хотя прототипирование на бумаге – один из самых популярных (и любимых мной) методов, и у него есть свои недостатки.

• Распределенная работа. По очевидным причинам работа с бумажными прототипами затруднена, если члены команды находятся далеко друг от друга. Пересылка бумажных прототипов, например из США в Ирландию и обратно, несколько затруднительна. Средства совместной работы с изображениями на экране, такие как Adobe Acrobat Connect или WebEx, облегчают задачу.

• Нужно воображение. Это не настоящий iPhone, поэтому придется включить воображение.

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

«Бумажное» прототипирование на лету. Несколько лет назад я работал над цифровым голосовым продуктом для клиента – крупной телекоммуникационной компании. Поскольку у нас есть набор каркасных представлений, прототипирование на бумаге казалось самым логичным решением. Одной из проектируемых концепций была блокировка телефонного номера. Представьте, что вы обедаете и вдруг раздается звонок с одного из 866 номеров компаний, занимающихся телемаркетингом. Скорее всего, вы захотите заблокировать этот номер, чтобы вам больше никогда с него не звонили. Мы спроектировали решение, позволяющее подписаться на цифровые голосовые услуги и добавить номер в черный список. Мы провели тестирование с первым участником четко по сценарию и спросили его, как он представляет себе блокировку номера. Он поступил неожиданно (как часто и бывает): попытался нажать на номере правую кнопку, ожидая увидеть список команд и среди них «Заблокировать этот номер». Такого решения мы не прорабатывали. Оно было разумно, но не входило в число концепций, которые мы рассматривали (это было до того, как на сцене воцарился AJAX). Мой ассистент спросил: «Что же нам теперь делать?» Я просто взял желтый листок для заметок с липким слоем, нарисовал на нем несколько команд, налепил его выше номера и спросил: «Примерно так?» Участник тестирования улыбнулся и ответил: «Да, да, именно так». Другие девять участников сделали то же. Бумажный прототип позволил нам создать альтернативное решение за считаные секунды – мы не смогли бы добиться этого при использовании цифровых прототипов.

Инструменты, необходимые для прототипирования на бумаге.

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

• Бумага. Стопка обычной белой бумаги формата А4. Мы используем ее как основу для любого проекта.

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

• Каталожные карточки. Стандартные карточки размером 7,5×12,5 см используются для разных целей, например изображения диалогового окна или виджетов графического интерфейса. Мы предпочитаем карточки, разлинованные с одной стороны и чистые с другой. Сообщения диалогового окна можно аккуратно написать по линейкам.

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

• Цветные ручки или маркеры. Я включаю в набор маркеры с тонкими и толстыми наконечниками: черный, синий, красный и зеленый. Большинство эскизов делаются черным или синим цветом, сообщения об ошибках – красным, а сообщения об успешном завершении – зеленым.

• Клейкая лента или клеящие карандаши. Они отлично подходят для крепления виджетов графического интерфейса. При использовании бумаги для создания прототипов RIA капелька клея на обратной стороне листка элемента поможет перемещать его, не сдвигая другие.

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

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

Последовательное прототипирование на бумаге.

Дальше будет весело. Я покажу ряд приемов по созданию многофункциональных прототипов. Начнем с основных приемов, таких как проектирование форм, и перейдем к более развитым методам, например симуляции AJAX. В первую очередь рассмотрим приемы создания виджетов графического интерфейса для бумажных прототипов. Файл Illustrator с примерами виджетов можно скачать здесь: rosenfeldmedia.com/books/downloads/prototyping/Paper_Prototype_GUI.ai.

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

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

Не забудьте подготовить включенное и выключенное состояния для каждого элемента.

Совет. Ручки. Загните одну сторону виджета вверх под прямым углом, чтобы сформировать подобие ручки (рис. 6.4). Это облегчит манипуляции с ними во время тестирования.

Теперь, когда почти все нужные элементы готовы, начнем с простого, например формы для регистрации.

^{РИС. 6.2. Нарисованные от руки виджеты приложения с графическим интерфейсом.}

^{РИС. 6.3. Напечатанные виджеты приложения с графическим интерфейсом.}

^{РИС. 6.4. Отогнутая ручка интерфейсного виджета.}

Прототипирование простой формы регистрации на бумаге.

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

• Введите имя и фамилию.

• Введите адрес электронной почты (используется для входа и восстановления пароля).

• Введите пароль.

• Запомнить меня.

• Зарегистрироваться.

• Вход для зарегистрированных пользователей.

На рис. 6.5 показан созданный мной пример. Все понятно, не так ли?

^{РИС. 6.5. Бумажный прототип простой регистрационной формы.}

Коммуникативные изменения состояния.

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

При работе с бумажным прототипом изменения состояния могут быть легко отражены путем добавления текста к прототипу. Если участники тестирования хотят установить флажок, они могут просто нарисовать его ручкой. Но это работает только при установке флажка. А что делать, если его надо снять?

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

^{РИС. 6.6. Бумажный прототип с установленным флажком на добавленном сверху интерфейсном виджете.}

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

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

Это одна из моих любимых маленьких хитростей. Пленки невероятно гибки. Я использую их для имитации разных эффектов, включая состояния навигации (см. рис. 6.7), подсветку полей ввода, когда в них переходит фокус, и эффектов перекрытия.

^{РИС. 6.7. Прозрачной пленкой отмечена выделенная миниатюра в фотогалерее.}

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

Чтобы добиться этого, нужно следующее:

• желтая бумажка для «подсветки» и кусок прозрачной пленки или кусок цветной прозрачной пленки;

• кусок каталожной карточки для перекрывающего окна;

• лента или резиновый клей.

Сначала отрежем небольшой кусок прозрачной пленки по размеру окна ввода. Затем отрежем перекрывающую секцию для облачка контекстной подсказки. Прикрепите облачко к прозрачной пленке, как показано на рис. 6.8. Не забывайте отгибать один уголок пленки, чтобы было за что ее держать.

Когда участник переходит от одного поля формы к другому, вы можете сдвигать пленку вниз, симулируя контекстную подсказку. Если в поле подсказки нет, возьмитесь за отогнутый угол и снимите пленку. Так вы получите то, что нужно: контекстную подсказку в строке.

^{РИС. 6.8. Подсвечивание выбранного поля и отображение контекстной подсказки в строке.}

Передовые методы прототипирования на бумаге.

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

Один из наиболее обычных приемов в духе AJAX[18] – скрытие или показ элементов, когда пользователь нажимает на ссылку для отображения дополнительной информации, а затем нажимает еще раз для ее скрытия. Этот эффект, пожалуй, симулировать проще всего.

Достаточно согнуть лист бумаги.

В этом примере я буду использовать виджет голосовой почты, который мы создали для веб-приложения. В состоянии по умолчанию он отображает каждое голосовое сообщение с некоторой информацией о нем. Если вы нажимаете кнопку раскрытия, то выбранное сообщение открывается, показывая дополнительную информацию и возможные действия (см. рис. 6.9). Если кнопку нажать еще раз, оно сжимается, пряча дополнительную информацию.

Чтобы достичь эффекта скрытия-показа, я возьму распечатку виджета и сделаю две складки – одну выше и одну ниже содержимого, которое я собираюсь скрывать или показывать (рис. 6.10).

^{РИС. 6.9. Расширенное состояние виджета.}

^{РИС. 6.10. Складки для симуляции эффекта скрытия-показа.}

Выход за границы привычного. На конференции по взаимодействию, прошедшей в 2009 году в Саванне, я проводил занятие по прототипированию на бумаге и попросил участников создать карусель для фотогалереи. Я показал им виджет из библиотеки интерфейсов Yahoo! (YUI) в качестве примера. Большинство участников создали стандартную галерею со скользящими изображениями, похожую на карусель YUI (рис. 6.11). Однако две группы создали совершенно неожиданный и потрясающе удачный вариант (рис. 6.12).

^{РИС. 6.11. Простой бумажный прототип карусели.}

^{РИС. 6.12. Трехмерный бумажный прототип карусели.}

Участники моих семинаров всегда удивляют и восхищают меня. Я не знаю, что было причиной: недопонимание или живое воображение. Но они создали трехмерную карусель – мне бы даже не пришло в голову разработать такой прототип в HTML. При работе с конкретной программой или языком мы часто ограничиваемся тем, что изначально поддерживается в среде. Если там есть двумерные объекты, мы их и используем. Если их нет или их применение затруднено, мы, скорее всего, ограничимся встроенными типовыми решениями и не будем пытаться выйти за их границы, сломать их, придумать что-то инновационное.

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

Другой обычный прием симуляции – метод скольжения. Он полезен для представления фотогалереи, движения в видео– или аудиопроигрывателе, эффектов перелистывания обложек в iTunes или «умной» прокрутки в iPhone. Это уже сложнее и все-таки относительно просто.

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

Для начала потребуются три элемента: окно просмотра, средство выбора миниатюр и лента фотографий. Я создал их в программе Illustrator (рис. 6.13).

^{РИС. 6.13. Компоненты фотогалереи.}

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

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

^{РИС. 6.14. Лента с фотографиями, проходящая через окно просмотра.}

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

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

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

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

Демонстрируя эффект, я мог получить более подробные отзывы, чем при простом описании. И я смог его симулировать в течение нескольких минут без всякого программирования.

Прототипирование физических устройств из бумаги.

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

Физические устройства более осязаемы, чем интерфейс программы, и ценность прототипирования на бумаге в данном случае выше. Можно сделать из бумаги физическую модель такого устройства, как iPhone (рис. 6.15), или даже автомата по продаже билетов в метро (рис. 6.16).

_{Фотография Стивена Туми.}

^{РИС. 6.15. Бумажный прототип iPhone. www.flickr.com/photos/typeweight/357099407/in/set-72157594476948766/}

^{РИС. 6.16. Бумажный прототип автомата по продаже билетов в метро. www.flickr.com/photos/knute/2247602574/}

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

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

Магниты с интерфейсными элементами.

Магниты с интерфейсными элементами – маленькие гибкие магниты с нарисованными на них элементами графического интерфейса. Их можно использовать на лекционных досках при проведении «мозговых штурмов» и легко перетаскивать в поисках наилучшего прототипа интерфейса. Купить их можно на сайте http://www.guimagnets.com/order/.

Дополнительную информацию можно найти в книге Кэролин Снайдер «Прототипирование на бумаге» на сайте paperprototyping.com.

Резюме.

Я убедил вас в необходимости прототипирования на бумаге? Чувствуете, что можете решить любую задачу? Теперь вы поняли, почему я считаю этот метод таким мощным:

• он быстрый, дешевый (чаще бесплатный) и простой;

• его можно использовать в любое время и в любом месте, компьютер не нужен;

• это один из немногих инструментов, удобных для совместной работы.

PowerPoint и Keynote.