Бумажные прототипы
По мере того, как интерфейсы становятся все более универсальными, а описывающие их спецификации все более короткими, может оказаться полезным заменить моделирование пользовательского интерфейса чем-то более простым. Все что для этого потребуется – бумага, ручка, ножницы и ваше воображение.
Всем нравится бумага
Подобно политической партии, собирающей голоса избирателей, команде разработчиков нужно собрать мнения как можно большего числа людей и, по возможности, на ранних стадиях разработки интерфейса. В этом случае бумажные прототипы позволят вовлечь в процесс дизайна большее количество людей, по сравнению с прототипами в формате HTML.
Некоторые отказываются от бумажных прототипов, поскольку, как им кажется, они не будут восприниматься пользователями всерьез. Я же наоборот считаю, что большинство людей может оттолкнуть формализованный процесс разработки дизайна, и что менее «профессиональные» по своей природе бумажные прототипы легче воспринимаются неподготовленными участниками. Просто раздайте всем побольше бумаги, ручек и других материалов. А тем, кто все еще волнуется, предложите кофе.
Простые итерации
Бумажные прототипы могут также помочь улучшить конечный продукт: этап создания прототипа – наиболее подходящее время для выявления недочетов в дизайне и их исправления, а бумага, благодаря своим свойствам, способствует экспериментированию и быстрому нахождению решений. Вместо того чтобы редактировать код, выравнивая колонки в правой части, рисуйте на бумаге, отбрасывайте идеи, которые не работают и двигайтесь дальше.
Бюджет
Если у вас ограниченный бюджет, бумага является хорошей альтернативой большинству программных пакетов. Если же у вас бюджет побольше, то можно использовать цветные липкие листки (post-it) и табулированные карточки чтобы разнообразить бумажные прототипы. Можно напечатать разноцветные элементы управления, которыми участники команды смогут пользоваться во время сеанса макетирования. Вам также потребуется ноутбук и принтер в конференц-зале, чтобы распечатывать новые идеи. Если кому-нибудь потребуется взглянуть на сайт, который он видел в интернете, распечатайте скриншот и прикрепите его на стену.
С другой стороны, используя бумажные прототипы можно обсуждать дизайн, не привязываясь к конкретной технологии.
Простое документирование
Еще одно преимущество использования бумаги – все необходимые примечания и заметки можно написать прямо на самом прототипе или на обратной стороне. Разработчик может случайно увидеть такую пометку через неделю работы над кодом этой дурацкой формы и сразу все встанет на свои места.
Покажите мне эту бумажку
Традиционные элементы пользовательского интерфейса легко смоделировать с помощью бумаги. Здесь показаны несколько табов, две кнопки и то, что произойдет, если нажать на выпадающий список:
Можно создавать и динамические блоки, содержащие контент или персонализированную информацию. Для «обновления» страницы достаточно просто поменять карточки. Вот пример формы авторизации, ошибки (если введено неправильное имя) и персональное меню (в случае успешного входа).
Возможно, потребуется продемонстрировать и проблемные ситуации, когда, например, всплывающее окно блокирует ключевые элементы интерфейса, и найти подходящее альтернативное решение:
Для каждой ссылки или кнопки нужно подготовить соответствующие макеты (и держать их наготове). Или же предложить участникам самим в реальном времени составить нужную станицу, форму или окно.
В дополнение к упомянутым материалам вам еще потребуется клей. С его помощью вы «магическим» образом зафиксируете макет.
Как включить бумажные прототипы в процесс разработки дизайна?
Возможны два варианта:
- Бумажные макеты используются для презентации большой группе людей, заинтересованных в продукте.
- Пользователи проходят по набору имеющихся бумажных макетов после чего на числом листе делают набросок, отражающий их видение.
Второй вариант отлично подходит, если нужно «отключится» и пойти непосредственно к тем людям, которые хотят протестировать ваш интерфейс. В качестве примера покажем как бумага используется в процессе юзабилити-тестирования.
Юзабилити-тестирование на бумажных прототипах
Бумажное юзабилити-тестирование ничем не отличается от любого другого юзабилити-тестирования. Выберите группу тестеров, представляющих целевую аудиторию продукта. Подготовьте сценарии, который пользователям предстоит выполнить. Фиксируйте сеанс тестирования на видеокамеру, чтобы позже просмотреть эмоциональное состояние пользователей при работе с макетами. После окончание теста задайте несколько вопросов, чтобы проверить запоминаемость интерфейса. А еще с помощью бумаги можно:
- Разрешить пользователям отобразить идеи, которые, по их мнению, могут улучшить интерфейс.
- Отметить места на прототипе, по которым пользователь пытался «кликнуть» или другим способом взаимодействовать с макетом.
- Попросить, чтобы пользователи нарисовали то, что они ожидают увидеть на следующем шаге.
- Проводить тестирование, даже если у вас нет доступа в испытательную лабораторию или электронные прототипы работают не так как надо.
Бумага – не идеал
Основное преимущество бумаги – это контент, сгенерированный пользователями во время сеанса. Однако время жизни бумажного макета ограничено и он постепенно портится в процессе совместного использования.
Также есть понятия, которые трудно отобразить на бумаге: например, сколько времени экран будет загружаться или обновляться. Горизонтальная и вертикальная прокрутка – общая проблема всех сайтов, но ее почти невозможно обнаружить с помощью бумажных прототипов. Специфические цвета, изображения, шрифты нелегко перенести на простые бумажные прототипы (использование распечатанных вариантов позволяет снять часть этих вопросов).
Не забывайте включать в команду людей, которые могут объяснить участникам сеанса как дополнительные элементы, графика, шрифты и мультимедиа могут влиять на дизайн.
И куда теперь?
Если вы хотите узнать больше информации по бумажным прототипам, Paper Prototyping Каролин Шнейдер является наиболее известным и рекомендуемым в данной области.