«Шустрый дизайн: подходы к декомпозиции задач...

«Шустрый» дизайн Как делить неделимое

Андрей Шапиропроектировщик интерфейса, руководитель проектов

О чём будембудем говорить

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

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

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

Agile + 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-сообщества

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

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

Lynn Miller

Отделение дизайна от разработки

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

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

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

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

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

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

•

К чему вы должны быть готовы при двух треках

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

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

Нагрузка в UX-команде

• Активности UX-команды Autodesk

– Исследования пользователя, тесты юзабилити и сбор данных о предыдущих релизах

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

– Текущие консультации разработчиков


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

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

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

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


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

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

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

0-я итерация

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


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

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


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

RITE — Rapid Iterative Testing and Evaluation


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

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

Основной прорыв исходит из двух тезисах

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

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

Нулевая итерация

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

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

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

• Что на выходе

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

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

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

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

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

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

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

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

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

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

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

Руководство к разбиению

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

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

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

Пример требований. Цели дизайна

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

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

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

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

Компонент перемещения поворота и масштабирования в программе Sketchbook Pro 2

Пример

Требования на UX-итерацию

• Похожи на User Stories

• Короткие

• Конкретные

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

Что можно проектировать позже

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

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

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

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

И это всё?

Общая методология разбиения

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

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

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

Этап целостного дизайна

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

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

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

Целостного видения, а значит проработки на начальном этапе требуют

Проработки на начальном этапе требуют

В компоновкеВ структуре

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

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

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

• Сетка

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

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

Что делится легко и безболезненно

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

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

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

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

Как процесс устроен у нас

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

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

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

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

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

Артефакты продуктовой команды. Мы используем…

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

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

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

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

• Журналы

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

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

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

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

ЭРГО

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

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

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

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

Напутствие и рекомендации проектировщику

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

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

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

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


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

• Инвестируйте время в повышение 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

Спасибо за внимание!

Андрей Шапиропроектировщик интерфейса, руководитель проектов

Спасибо за внимание!

@xraizor

[email protected]

x-raizor.livejournal.com

Процесс моделирования в нулевой итерации

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

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

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

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


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

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

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


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

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

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

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

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

«Шустрый дизайн: подходы к декомпозиции задач...

Documents

Transcript of «Шустрый дизайн: подходы к декомпозиции задач...