advertisement

«Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в Agile-командах

38 %
63 %
advertisement
Information about «Шустрый» дизайн: подходы к декомпозиции проектирования взаимодействия в...
Design

Published on September 21, 2010

Author: xraizor

Source: slideshare.net

Description

Методики декомпозиции инженерных задач в кроссфункциональной команде программистов хорошо изучены на данный момент. Как быть с декомпозицией на независимые задачи с случае с дизайном интерфейса и проектированием взаимодействия не всегда понятно, в особенности для молодых команд.

Общее стремление одновременно повысить скорость и качество разработки, приводит к тому, что специалисты в области опыта взаимодействия всё чаще включаются в agile-команды. Как лучше устроить процесс с этом случае. Что следует проектировать сначала, что можно проектировать независимо и что можно отложить на будущие итерации без страха получить несочленимые компоненты. Как без ущерба разделить то, что, по определению, должно быть целостным.
advertisement

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

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

В чем суть проблемы, что такое опыт взаимодействия ( User Experience, UX ) и   можно ли его проектировать

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

Способы разделения дизайна на части

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

Scrum и XP молчат об инкрементальности дизайна

Конфликт двух способов мышления

Проектировщики взаимодействия «заточены» на целостный подход — Big picture

Разработчики фокусируются на итеративно-инкрементальной разработке

Сомнения насчет применимости инженерных практик в случае с UX

Как можно померить UX? И как тогда этим управлять, если это нельзя измерить.

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

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

Сбор информации о задачах и опыте взаимодействия пользователей

методы работы

способы мышления

особенности восприятия

Проектирование с учетом имеющихся данных о культурном, нишевом и личном опыте

Моделирование инноваций в интерфейсе на свой страх и риск

Проверка того, что получилось, через сбор информации

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

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

Водопадная модель

Возможно вырождение

Сбор данных только в основании пирамиды?

Неясно как прикрутить к  разработке

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

мировая практика

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

Проектируйте вперёд хотя бы на одну итерацию

Отделите проектирование от разработки — используйте для этого параллельный трек

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

После нулевой итерации треки разработки и проектирования разделяются

Итерации в треках идут раздельно, но одновременно и сопровождаются частой взаимной обратной связью

Проектировщики в конце каждой итерации поставляют разработчикам инкремент дизайна, реализующийся в следующей итерации

Трек проектирования идет всегда хотя бы на одну итерацию впереди

Акцент на потенциально отгружаемые инкременты по которым можно получить обратную связь от конечного пользователя

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

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

Очень быстро станет понятно, что не хватает ресурсов

Тройная нагрузка в  UX- команде. Увеличение времени разработчиков

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

Сделайте проектировщиков взаимодействия частью продуктовой команды

Отделите моделирование от дизайна

Моделирование: уровень структуры

Дизайн: уровни компоновки и раскраски

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

Проектируйте в команде и повышайте ее дизайнерскую грамотность

Найдите способы выигрывать время на проектирование

Разделите работы по проектированию на части

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

Прототипируйте в общих чертах, без излишней детализации. На бумаге дешевле всего.

Используйте прототип в качестве спецификации

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

Улучшайте прототипы циклически внутри одной итерации проектирования по методике RITE

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

Выжимайте всё из   встреч с пользователем

Культивируйте группу пользователей для непрерывного мониторинга продукта

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

Активности в нулевую итерацию

Отделение моделирования, проектирования и дизайна от разработки

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

Длится 2-3 недели и завершается до старта разработки

Моделируется ядро: элементы информационной архитектуры и важнейшие особенности взаимодействия

Определяется «большая картина» продукт, на которой будут основаны все последующие инкременты дизайна и неясные пока части

Что на выходе

определен уровень «Структуры» и часть «Компоновки» по Гаррету

определена общая концепция дизайна

Результаты обсуждены со всеми заинтересованными лицами и разработчиками для прикидки сложности исполнения

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

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

Проектировщик интерфейса входит в продуктовую команду

Сосредоточение на дизайне необходимом сейчас

Часть фич может быть сделана наполовину в угоду завершению продукта вовремя

Итерирование дизайна методом RITE . Ранний поиск ошибок на этапе дизайна. Дизайн до встройки изменяется столько сколько необходимо и сколько позволяет время

Итерации разработки и проектирования производятся раздельно, но синхронно

Большие области проектирования делятся на «куски», которые можно охватить в итерации и могут быть инкрементально добавлены в общий дизайн

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

Чётко определить цели проектирования и   обозначить общее направление, в котором движется дизайн

Убедиться, что каждый «кусок» большого дизайн последовательно достигает ряда целей, закрепляемых на планировании итерации

Ранние «куски» должны быть фундаментальными и низкоуровневыми. Ими становятся такие особенности дизайна, которые не изменятся, сколько новых кубиков вы на них не поставите

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

«Перемещение курсора должно быть минимальным при переключении между перемещением, поворотом и масштабированием

Взаимодействие должно быть плавным и естественным

Пользователь должен обнаружить как позиционировать выбранную область, но не обязательно в первый час работы

Функция должна работать схожим образом со слоями»

Пример

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

Похожи на User Stories

Короткие

Конкретные

Содержат цели, которым должен отвечать проектируемый «кусок»

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

Прототипы, зависящие от незавершенной части кода или технологии.

Всё, что относится к уровню процесса ( workflow) в противовес операционному функциональному уровню.

Дополнительный навигационный дизайн для сопровождения пользователя по приложению в целях обучения, например.

Части являющиеся концентраторами для других. Пример, палитра кистей в Sketchbook Pro .

И это всё?

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

Сначала низкоуровневые, фундаментальные части, которые не изменятся при добавлении других частей

Формирование граничных условий для будущей «склейки»

Формирование целей и граничных условий на текущую стадию дизайна

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

Смысл и назначение. Это должно быть определено чётко на само раннем этапе

Модель представления — навязываемая пользователю ментальная модель

Процесс, способ работы, понимание как достичь результата

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

Концепция модели представления

Информационная и   функциональная структуры

Процесс, если он является значимой частью модели

Сетка

Рекомендации по   организации блоков

Первое приближение навигации

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

Отдельные экраны операционного уровня

Улучшение поведения отдельных элементов и   блоков интерфейса

Второстепенная навигация

Всё уровня «раскраски»

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

Стараемся держаться впереди на итерацию с   задачами проектирования

Применяем иногда быстрое прототипирование в продукте на основе бумажных эскизов и   библиотеки элементов и паттернов проекта

Разработчик готовит боевой прототип, который становится частью продукта

Тут же тестируем на пригодность

Если фича хорошо показала себя и не выкинута, проходимся «тяжелым» дизайном

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

Бумажные прототипы

2 синхронизируемых бэклога: продуктовой команды и команды разработчиков

Доска задач по результатам пользовательского тестирования. Доска улучшений интерфейса

Наборы элементов и паттернов, собственные интерфейсные словари проектов

Журналы

наблюдения за поведением пользователей продукта

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

пользовательских тестирований

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

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

Моделирование целостной части в фундаменте (нулевой итерации)

Инкрементальное проектирование кусков в итерациях

Итерирование внутри итерирования . RITE.

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

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

Тренируйте особенно эти 2 навыка

как не сделать развивающийся продукт заложником выбираемой модели

что важно успевать сделать в нулевую итерацию

Откладывайте окончательный выбор модели представления насколько это возможно

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

Прекратите проектировать в одиночку

Инвестируйте время в повышение UX- грамотности команды

Собирайте библиотеку подходов, идиом, паттернов поведения, найденных при юзабилити тестах для каждого проекта и для команды в целом

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

Оставайтесь как можно дольше на бумаге

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

Итерируйте бумажные прототипы — это дешевле и   быстрее

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

Участвуйте в формулировании критериев приёмки при планировании итерации разработки

Что почитать на эту тему 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

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

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

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

Сбор данных об ограничениях из требований

Откидывание углублений, усовершенствований и привнесенных требований

Построение диаграмм близости, ментальных моделей, первые наброски процессов — все это только для того чтобы появились первые цельные образы в голове

Далее идет серия итераций синтеза и проверки первоначальных идей через быстрое эскизирование и  проверку бумажных прототипов

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

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

Отделение всех операционных частей, они пойдут на позднюю проработку

Первые эскизы макетов

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

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

Проверка в кругу основной команды

Формирование ядра и проверка на наращиваемость

Запуск в разработку прототипа с минимальной неопределенностью

Разработка оставшихся неясностей.

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

4. Лекция: Общие подходы к организации проектирования ИС ...

... подходы к ... «Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile ...
Read more

В IT работают умные люди! Спец.выпуск (comp.soft.prog ...

... к ... Шустрый дизайн: подходы к декомпозиции задач проектирования UI в Agile-командах ...
Read more