ЗПШ 2009 Прототипирование на бумаге

МАСТЕРСКАЯ-ПРАКТИКУМ ПО БУМАЖНОМУ ПРОТОТИПИРОВАНИЮ

Алина Зотова

RusCHI member

Зимняя Психологическая Школа, 2008 г.

Цель

Формирование представления о методе прототипирования на бумаге условиях его наиболее

эффективного использования

2

3

Прототип - это Прототип: (от греч. protos — первый и

typos — отпечаток, оттиск) — прообраз, образец, оригинал.

Прототип — модель, работающая модель, опытный образец устройства или детали.

Бумажное прототипирование – создание прототипа из бумаги и/или на бумаге

4

Прототип ПК за 100 у.е.

Прототип гибкого телефона NEC

Прототип бумажного телефона

8

Среда разработки Html Среда объектно-

ориентированного программирования

Графический редактор Прототипирование на бумаге

9

Зачем нужен? Быстрое получение обратной

связи от пользователей Акцент на взаимодействие

человека и устройства, а не на реализацию

10

Когда использовать? Когда не важно время реакции

системы Когда нужна высокоуровневая

обратная связь

11

Преимущества Быстро Дешево Выявляет высокоуровневые проблемы Больше фидбека лучшего качества Помогает думать более творчески Пользователи и команда вовлечены в

процесс на ранней стадии Поощряет работу в команде и

коммуникацию Предотвращает разногласия

12

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

Невозможно проследить: сколько времени экран будет

загружаться или обновляться Работу горизонтальной или

вертикальной прокрутки Специфические цвета,

изображения, шрифты

13

Процесс проектирования Анализ деятельности пользователей и

формализация информации в виде сценариев

Концептуальное проектирование

Прототипирование интерфейса

Тестирование с пользователями

14

Цель: Объединить результаты стадий

анализа и концептуального проектирования в прототипе будущего интерфейса для дальнейшего тестирования его с пользователями

(возможны различные уровни детализации)

15

Предварительные действия Анализ Написание сценариев Концептуальное

проектирование«Нужно знать, что рисовать,

прежде чем начать рисовать»

Готовим прототип

Инструменты: Бумага Карандаши, ручки, фломастеры Клейкая лента Ножницы Скотч Прозрачный пластик

Прототип на бумаге: как? На основе сценариев взаимодействия и

концепции построить схему навигации, определить список экранов и форм

На рисунке каждого экрана и формы нанести изображение: а) элементов управления; б) информационных блоков

Проверить набор элементов на полноту и соответствие сценарию, проиграть сценарий использований в команде проектировщиков

18

Шаг №1 На основе сценариев

взаимодействия и концепции построить схему навигации, определить список экранов и форм

19

Полина: шоппинг Цель: купить вечернюю блузку черного цвета

меньше чем за 50$ Задачи:

Узнать адрес магазина и как до него доехать Попросить таксиста отвезти ее в магазин по

этому адресу Распознать знак валюты, в которой указана

цена и получить примерную цену в $ Спросить у продавца, подойдет ли ей

выбранная кофта , сколько она стоит и попросить померить

20

Шаг №2 Создать эскизы экранов на

бумаге, моделируя работу пользователя с Системой

21

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

двуцветным, или трехцветным Длинный текст может быть

заменен на пару предложений типа «Lorem ipsum» если значение текста не несет полезной для прохождения сценария информации

22

Отвечаем на вопросы Какую информацию предоставить

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

управления? Как их изобразить?

23

Результат Набор экранов, форм и

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

24

Шаг №3 Проверить набор элементов на

полноту и соответствие сценарию, проиграть сценарий использований в команде проектировщиков

25

Что дальше?

Тестировать с пользователями!

26