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