Paper prototyping
-
Upload
agile-base-camp -
Category
Business
-
view
867 -
download
1
description
Transcript of Paper prototyping
![Page 1: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/1.jpg)
Гибкое прототипированиедля гибкой разработки
AgileBaseCamp’11, Днепропетровск
![Page 3: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/3.jpg)
О чем мы будем сегодня говорить?
![Page 4: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/4.jpg)
Что такое прототип?
Прототип — это модель будущей системы
![Page 5: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/5.jpg)
В каких областях используется прототипирование?
• Архитектура• Инженерное дело• Автомобилестроение• Искусство• Программное обеспечение
![Page 6: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/6.jpg)
Даже этот доклад сначала был прототипом :)
![Page 7: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/7.jpg)
Для чего строят прототипы?
• Получить больше данных о продукте• Получить обратную связь
• Получить информацию о возможных сложностях при производстве
• Получить возможность что-то изменить до производства
![Page 8: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/8.jpg)
Прототип - это вид документации
• Значительно более компактный, чем текст
• Не требует много времени на ознакомление• Упрощает процесс разработки• Сокращает время разработки
![Page 9: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/9.jpg)
Прототип - вид коммуникации
— Ну что, мы друг друга поняли?
— Да-а!!!
![Page 10: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/10.jpg)
Что нужно для прототипирования?
Для прототипирования необходимо понять принцип использования продукта:
![Page 11: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/11.jpg)
Как рождается продукт?
Стратегия
Набор возможностей
Структура
Компоновка
Поверхность
![Page 12: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/12.jpg)
Место и время для прототипирования
Стратегия
Набор возможностей
Структура
Компоновка
Поверхность
Прототипы
![Page 13: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/13.jpg)
Существуют разные способы создания прототипов
• Бумажное прототипирование• HTML
• PowerPoint/Keynote
• Axure RP Pro
• Excel
![Page 14: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/14.jpg)
Почему бумажные прототипы?
![Page 15: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/15.jpg)
Это просто!
![Page 16: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/16.jpg)
Кто из вас умеет рисовать?
![Page 17: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/17.jpg)
А кто умел рисовать в детстве?
![Page 18: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/18.jpg)
Главное - чтобы вас поняли :)
![Page 19: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/19.jpg)
Бумажные прототипы имеют достаточную детализацию
![Page 20: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/20.jpg)
Бумажные прототипы можно делать вместе!
![Page 21: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/21.jpg)
Какие инструменты необходимы?
• Бумага• Прозрачная пленка• Стикеры• Ножницы• Удаляемый скотч• Ручки, карандаши, фломастеры
![Page 22: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/22.jpg)
Простой пример: поиск по сайту
Что сделать:
Пользователь может осуществлять поиск по сайту для того, чтобы находить интересующий его контент.
Как продемонстрировать:
Пользователь вводит в форму поисковый запрос, в ответ получает список найденных элементов контента.
![Page 23: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/23.jpg)
Прототип поиска
![Page 24: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/24.jpg)
Посмотрели, подумали и добавили подробностей...
![Page 25: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/25.jpg)
Пример посложнее: фотогалереи
Что сделать:
Пользователь может создавать и редакторовать фотогалереи для того, чтобы делиться своими фотографиями с друзьями.
Как продемонстрировать:
Создание фотогалерей; загрузка фотографий; подписывание фотографий; выбор, кто из друзей будет иметь доступ к галереям; просмотр фотогалерей.
![Page 26: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/26.jpg)
Скетчборды
![Page 27: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/27.jpg)
Скетчборд для фотогалерей
![Page 28: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/28.jpg)
Прототип редактирования фотогалереи
![Page 29: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/29.jpg)
Добавляем фотографию
![Page 30: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/30.jpg)
Фотография добавлена
![Page 31: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/31.jpg)
Добавляем подпись к фотографии
![Page 32: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/32.jpg)
Подпись добавлена
![Page 33: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/33.jpg)
Настраиваем доступ к фотогалерее
![Page 34: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/34.jpg)
Тестирование прототипов
![Page 35: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/35.jpg)
Что нужно для тестирования?
• Целевая группа• Задания для тестирования• Помощники
![Page 36: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/36.jpg)
Какие помощники нам нужны?
ФасилитаторСледит за тем, чтобы все было, как надо :)
КомпьютерМанипулирует прототипом, отвечая на действия
тестировщика
НаблюдательСлушает, молчит и записывает
![Page 37: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/37.jpg)
Из чего состоят задания для тестирования?
• Цель• Входные данные• Предполагаемые шаги пользователя• Заметки
![Page 38: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/38.jpg)
Подведение итогов тестирования
• Все ли задания выполнены успешно?
• Были ли у тестировщиков замечания?• Что записали наблюдатели?
![Page 39: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/39.jpg)
Дорабатываем поиск после тестирования
![Page 40: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/40.jpg)
Дорабатываем фотогалереи после тестирования
![Page 41: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/41.jpg)
Переименование галереи
![Page 42: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/42.jpg)
Переворот фотографий
![Page 43: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/43.jpg)
Фотографии переворачиваются
![Page 44: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/44.jpg)
А потом опять тестируем... и опять дорабатываем...
Прототипирование — это процесс :)
![Page 45: Paper prototyping](https://reader038.fdocuments.net/reader038/viewer/2022110120/557f424cd8b42aa41d8b4bd1/html5/thumbnails/45.jpg)
Что почитать?
• Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces, Carolyn Snyder
• Protoryping: A Practitioner’s Guide, Todd Zaki Warfel