Бумажные прототипы

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

Всем нравится бумага

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

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

Простые итерации

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

Бюджет

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

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

Простое документирование

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

Покажите мне эту бумажку

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

Можно создавать и динамические блоки, содержащие контент или персонализированную информацию. Для «обновления» страницы достаточно просто поменять карточки. Вот пример формы авторизации, ошибки (если введено неправильное имя) и персональное меню (в случае успешного входа).
 

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

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

В дополнение к упомянутым материалам вам еще потребуется клей. С его помощью вы «магическим» образом зафиксируете макет.

Как включить бумажные прототипы в процесс разработки дизайна?

Возможны два варианта:

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

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

Юзабилити-тестирование на бумажных прототипах

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

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

Бумага – не идеал

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

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

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

И куда теперь?

Если вы хотите узнать больше информации по бумажным прототипам, Paper Prototyping Каролин Шнейдер является наиболее известным и рекомендуемым в данной области.