Документ обсуждает интеграцию проектирования пользовательского опыта (UX) и гибких методов разработки (agile) в процессе создания интерфейсов. Основное внимание уделяется разделению дизайна на итерации и необходимости раннего вовлечения проектировщиков в продуктовые команды для повышения эффективности. Также затрагиваются методы тестирования и прототипирования для улучшения взаимодействия с пользователем.

1. « Шустрый » дизайн Как делить неделимое Андрей Шапиро проектировщик интерфейса, руководитель проектов

2. О чём будем говорить В чем суть проблемы, что такое опыт взаимодействия ( User Experience, UX ) и можно ли его проектировать Как включать проектирование взаимодействия в Agile разработку Способы разделения дизайна на части

3. Agile + UX = ? Scrum и XP молчат об инкрементальности дизайна Конфликт двух способов мышления Проектировщики взаимодействия «заточены» на целостный подход — Big picture Разработчики фокусируются на итеративно-инкрементальной разработке Сомнения насчет применимости инженерных практик в случае с UX Как можно померить UX? И как тогда этим управлять, если это нельзя измерить.

4. UX «на пальцах». Можно ли его проектировать? Первый опыт общения с приложением не передал пользователю ничего о его действительных назначении и способах взаимодействия. Любой на планете Земля встретив сейчас объект, напоминающий по форме масляную лампу, попробует потереть его, усвоив идиому из сказки. дизайн -> усвоение, опыт -> дизайн

5. Что входит в такое «проектирование» Сбор информации о задачах и опыте взаимодействия пользователей методы работы способы мышления особенности восприятия Проектирование с учетом имеющихся данных о культурном, нишевом и личном опыте Моделирование инноваций в интерфейсе на свой страх и риск Проверка того, что получилось, через сбор информации повод для итеративности?

6. 10 лет пирогу Гарретта Компоновка Элементы интерфейса Навигация Структура стоимость изменений Jesse James Garrett’s Elements of User Experience http://www.jjg.net/elements/ Информационный дизайн Проектирование взаимодействия Информацион. архитектура UX через призму разработки

7. Уровни опыта взаимодействия по Гарретту Водопадная модель Возможно вырождение Сбор данных только в основании пирамиды? Неясно как прикрутить к разработке «Раскраска» Структура Требования Стратегия Компоновка

8. мировая практика Как включать проектирование взаимодействия в Agile разработку

9. Agile + UX = как ? Опыт мирового Agile- сообщества Проектируйте вперёд хотя бы на одну итерацию Отделите проектирование от разработки — используйте для этого параллельный трек Lynn Miller

10. Отделение дизайна от разработки После нулевой итерации треки разработки и проектирования разделяются Итерации в треках идут раздельно, но одновременно и сопровождаются частой взаимной обратной связью Проектировщики в конце каждой итерации поставляют разработчикам инкремент дизайна, реализующийся в следующей итерации Трек проектирования идет всегда хотя бы на одну итерацию впереди Акцент на потенциально отгружаемые инкременты по которым можно получить обратную связь от конечного пользователя

11. Параллельные треки разработки и проектирования

12. К чему вы должны быть готовы при двух треках Очень быстро станет понятно, что не хватает ресурсов Тройная нагрузка в UX- команде. Увеличение времени разработчиков

13. Нагрузка в UX- команде Активности UX- команды Autodesk Исследования пользователя, тесты юзабилити и сбор данных о предыдущих релизах Разработка прототипов для следующей итерации с помощью быстрого итерирования Текущие консультации разработчиков

14. Agile + UX = как ? Опыт мирового Agile- сообщества Сделайте проектировщиков взаимодействия частью продуктовой команды Отделите моделирование от дизайна Моделирование: уровень структуры Дизайн: уровни компоновки и раскраски

15. Agile + UX = как ? Опыт мирового Agile- сообщества Проектируйте в команде и повышайте ее дизайнерскую грамотность Найдите способы выигрывать время на проектирование Разделите работы по проектированию на части 0-я итерация Сложные для разработки, но простые для дизайна задачи

16. Agile + UX = как ? Опыт мирового Agile- сообщества Прототипируйте в общих чертах, без излишней детализации. На бумаге дешевле всего. Используйте прототип в качестве спецификации

17. Agile + UX = как ? Опыт мирового Agile- сообщества Улучшайте прототипы циклически внутри одной итерации проектирования по методике RITE RITE — Rapid Iterative Testing and Evaluation

18. Agile + UX = как ? Опыт мирового Agile- сообщества Выжимайте всё из встреч с пользователем Культивируйте группу пользователей для непрерывного мониторинга продукта

19. Основной прорыв исходит из двух тезисах Активности в нулевую итерацию Отделение моделирования, проектирования и дизайна от разработки

20. Нулевая итерация Длится 2-3 недели и завершается до старта разработки Моделируется ядро: элементы информационной архитектуры и важнейшие особенности взаимодействия Определяется «большая картина» продукт, на которой будут основаны все последующие инкременты дизайна и неясные пока части Что на выходе определен уровень «Структуры» и часть «Компоновки» по Гаррету определена общая концепция дизайна Результаты обсуждены со всеми заинтересованными лицами и разработчиками для прикидки сложности исполнения

21. Как организуют процесс UX + Agile в Autodesk

22. Как организуют процесс в Autodesk Проектировщик интерфейса входит в продуктовую команду Сосредоточение на дизайне необходимом сейчас Часть фич может быть сделана наполовину в угоду завершению продукта вовремя Итерирование дизайна методом RITE . Ранний поиск ошибок на этапе дизайна. Дизайн до встройки изменяется столько сколько необходимо и сколько позволяет время Итерации разработки и проектирования производятся раздельно, но синхронно Большие области проектирования делятся на «куски», которые можно охватить в итерации и могут быть инкрементально добавлены в общий дизайн

23. Руководство к разбиению Чётко определить цели проектирования и обозначить общее направление, в котором движется дизайн Убедиться, что каждый «кусок» большого дизайн последовательно достигает ряда целей, закрепляемых на планировании итерации Ранние «куски» должны быть фундаментальными и низкоуровневыми. Ими становятся такие особенности дизайна, которые не изменятся, сколько новых кубиков вы на них не поставите

24. Пример требований. Цели дизайна «Перемещение курсора должно быть минимальным при переключении между перемещением, поворотом и масштабированием Взаимодействие должно быть плавным и естественным Пользователь должен обнаружить как позиционировать выбранную область, но не обязательно в первый час работы Функция должна работать схожим образом со слоями» Компонент перемещения поворота и масштабирования в программе Sketchbook Pro 2

25. Пример

26. Требования на UX- итерацию Похожи на User Stories Короткие Конкретные Содержат цели, которым должен отвечать проектируемый «кусок»

27. Что можно проектировать позже Прототипы, зависящие от незавершенной части кода или технологии. Всё, что относится к уровню процесса ( workflow) в противовес операционному функциональному уровню. Дополнительный навигационный дизайн для сопровождения пользователя по приложению в целях обучения, например. Части являющиеся концентраторами для других. Пример, палитра кистей в Sketchbook Pro .

28. И это всё?

29. Общая методология разбиения Сначала низкоуровневые, фундаментальные части, которые не изменятся при добавлении других частей Формирование граничных условий для будущей «склейки» Формирование целей и граничных условий на текущую стадию дизайна

30. Этап целостного дизайна Смысл и назначение. Это должно быть определено чётко на само раннем этапе Модель представления — навязываемая пользователю ментальная модель Процесс, способ работы, понимание как достичь результата Целостного видения, а значит проработки на начальном этапе требуют

31. Проработки на начальном этапе требуют Концепция модели представления Информационная и функциональная структуры Процесс, если он является значимой частью модели Сетка Рекомендации по организации блоков Первое приближение навигации В компоновке В структуре

32. Что делится легко и безболезненно Отдельные экраны операционного уровня Улучшение поведения отдельных элементов и блоков интерфейса Второстепенная навигация Всё уровня «раскраски»

33. Как процесс устроен у нас Стараемся держаться впереди на итерацию с задачами проектирования Применяем иногда быстрое прототипирование в продукте на основе бумажных эскизов и библиотеки элементов и паттернов проекта Разработчик готовит боевой прототип, который становится частью продукта Тут же тестируем на пригодность Если фича хорошо показала себя и не выкинута, проходимся «тяжелым» дизайном

34. Артефакты продуктовой команды. Мы используем… Бумажные прототипы 2 синхронизируемых бэклога: продуктовой команды и команды разработчиков Доска задач по результатам пользовательского тестирования. Доска улучшений интерфейса Наборы элементов и паттернов, собственные интерфейсные словари проектов Журналы наблюдения за поведением пользователей продукта обратной связи с пользователями пользовательских тестирований

35. Доска задач по результатам UX- тестирования

36. ЭРГО Моделирование целостной части в фундаменте (нулевой итерации) Инкрементальное проектирование кусков в итерациях Итерирование внутри итерирования . RITE. Богатейшая работа с пользователем на каждой итерации

37. Напутствие и рекомендации проектировщику Тренируйте особенно эти 2 навыка как не сделать развивающийся продукт заложником выбираемой модели что важно успевать сделать в нулевую итерацию Откладывайте окончательный выбор модели представления насколько это возможно

38. Напутствие и рекомендации проектировщику Прекратите проектировать в одиночку Инвестируйте время в повышение UX- грамотности команды Собирайте библиотеку подходов, идиом, паттернов поведения, найденных при юзабилити тестах для каждого проекта и для команды в целом

39. Напутствие и рекомендации проектировщику Оставайтесь как можно дольше на бумаге

40. Напутствие и рекомендации проектировщику Итерируйте бумажные прототипы — это дешевле и быстрее

41. Напутствие и рекомендации проектировщику Участвуйте в формулировании критериев приёмки при планировании итерации разработки Фичи на оранжевом, критерии приёмки на синем P.S.: Помните, люди не любят изменения. Они в любом случае будут встречать их с недовольством.

42. Что почитать на эту тему Jeff Patton , agileproductdesign.com Anders Ramsay, andersramsay.com Austin Govella, thinkingandmaking.com Desiree Sy , Adapting Usability Investigations for Agile User-centered Design Lynn Miller, Case Study of Customer Input For a Successful Product Sandy Mamoli , nomad8.com Jesse James Garrett , jjg.net

43. Спасибо за внимание! Андрей Шапиро проектировщик интерфейса, руководитель проектов Спасибо за внимание! @ xraizor andrew @ ashapiro.ru x-raizor.livejournal.com

44. Процесс моделирования в нулевой итерации Сбор данных об ограничениях из требований Откидывание углублений, усовершенствований и привнесенных требований Построение диаграмм близости, ментальных моделей, первые наброски процессов — все это только для того чтобы появились первые цельные образы в голове Далее идет серия итераций синтеза и проверки первоначальных идей через быстрое эскизирование и проверку бумажных прототипов

45. Процесс моделирования в нулевой итерации Продумывание процесса взаимодействия и выявления граничных условий, которым должны соответствовать «кубики» для поздней склейки Отделение всех операционных частей, они пойдут на позднюю проработку Первые эскизы макетов

46. Процесс моделирования в нулевой итерации Проверка макетов и сущностей на состоятельность и работоспособность Проверка в кругу основной команды Формирование ядра и проверка на наращиваемость Запуск в разработку прототипа с минимальной неопределенностью Разработка оставшихся неясностей.