1. Гибкое прототипирование
для гибкой разработки
Максим Гапонов

2. Кто я?
Макс Гапонов
Certified Scrum Product Owner
Agile coach, CIO at Banki.ru
mgaponov@gmail.com

3. О чем мы будем сегодня говорить?

4. Что такое прототип?
Прототип — это модель
будущей системы

5. В каких областях используется прототипирование?
• Архитектура
• Инженерия
• Автомобилестроение
• Искусство
• Программное обеспечение

6. Даже этот доклад сначала был прототипом :)

7. Для чего строят прототипы?
• Получить больше данных о продукте
• Получить обратную связь
• Получить информацию о возможных сложностях при
производстве
• Получить возможность что-то изменить до производства

8. Прототип - это вид документации
• Значительно более компактный, чем текст
• Не требует много времени на ознакомление
• Упрощает процесс разработки
• Сокращает время разработки

9. Прототип - это вид коммуникации
— Ну что, мы друг друга поняли?
— Да-а!!!

10. Что нужно для прототипирования?
Для прототипирования необходимо понять принцип
использования продукта:

11. Как рождается продукт?
Поверхность
Компоновка
Структура
Набор возможностей
Стратегия

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

13. Существуют разные способы создания прототипов
• Бумажное прототипирование
• HTML
• PowerPoint/Keynote
• Axure RP Pro
• Excel/Numbers

14. Почему бумажные прототипы?

15. Это просто!

16. Кто из вас умеет рисовать?

17. А кто умел рисовать в детстве?

18. Главное - чтобы вас поняли :)

19. Бумажные прототипы имеют достаточную детализацию

20. Бумажные прототипы можно делать вместе!

21. Еще немного монет в копилку...
• Самый быстрый способ прототипирования
• Могут выступать катализатором решений
• Не требуют технических навыков
• Их никто не судит строго

22. Какие инструменты необходимы?
• Бумага
• Прозрачная пленка
• Стикеры
• Ножницы
• Удаляемый скотч
• Ручки, карандаши, фломастеры

23. Еще немного инструментов...

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

25. Прототип поиска

26. Посмотрели, подумали и добавили подробностей...

27. Пример посложнее: фотогалереи
Что сделать:
Пользователь может создавать и редакторовать фотогалереи
для того, чтобы делиться своими фотографиями с друзьями.
Как продемонстрировать:
Создание фотогалерей; загрузка фотографий; подписывание
фотографий; выбор, кто из друзей будет иметь доступ к
галереям; просмотр фотогалерей.

28. В анимации и кинематографе есть раскадровки

29. А у нас есть скетчборды

30. Скетчборд для фотогалерей

31. Прототип редактирования фотогалереи

32. Добавляем фотографию

33. Фотография добавлена

34. Добавляем подпись к фотографии

35. Подпись добавлена

36. Настраиваем доступ к фотогалерее

37. Тестирование прототипов

38. Что нужно для тестирования?
• Целевая группа
• Задания для тестирования
• Помощники

39. Какие помощники нам нужны?
Фасилитатор Компьютер Наблюдатель
Следит за тем, Манипулирует Слушает, молчит и
чтобы все было, прототипом, записывает
как надо :) отвечая на действия
тестировщика

40. Из чего состоят задания для тестирования?
• Цель
• Входные данные
• Предполагаемые шаги пользователя
• Заметки

41. Подведение итогов тестирования
• Все ли задания выполнены успешно?
• Были ли у тестировщиков замечания?
• Что записали наблюдатели?

42. Дорабатываем поиск после тестирования

43. Дорабатываем фотогалереи после тестирования

44. Переименование галереи

45. Поворот фотографий

46. Фотографии переворачиваются

47. А потом опять тестируем... и опять дорабатываем...
Прототипирование — это процесс :)

48. Домашнее чтение
User Experience Прототипирование:
• Элементы опыта • Prototyping: A Practitioner’s
взаимодействия, Дж. Guide, Todd Zaki Warfel
Гарретт
• Paper Prototyping: The Fast
• Об интерфейсе, Алан and Easy Way to Design and
Купер Refine User Interfaces,
Carolyn Snyder
• Статьи и презентации Jeff
Patton

49. Спасибо!