«Шустрый дизайн: подходы к декомпозиции задач...
Post on 23-Jan-2015
2.315 Views
Preview:
DESCRIPTION
TRANSCRIPT
«Шустрый» дизайн Как делить неделимое
Андрей Шапиропроектировщик интерфейса, руководитель проектов
О чём будембудем говорить
• В чем суть проблемы, что такое опыт взаимодействия (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
– Исследования пользователя, тесты юзабилити и сбор данных о предыдущих релизах
– Разработка прототипов для следующей итерации с помощью быстрого итерирования
– Текущие консультации разработчиков
Agile + UX = как? Опыт мирового Agile-сообщества
3. Сделайте проектировщиков взаимодействия частью продуктовой команды
4. Отделите моделирование от дизайна
– Моделирование: уровень структуры
– Дизайн: уровни компоновки и раскраски
Agile + UX = как? Опыт мирового Agile-сообщества
5. Проектируйте в команде и повышайте ее дизайнерскую грамотность
6. Найдите способы выигрывать время на проектирование
7. Разделите работы по проектированию на части
0-я итерация
Сложные для разработки, но простые для дизайна задачи
Agile + UX = как? Опыт мирового Agile-сообщества
8. Прототипируйте в общих чертах, без излишней детализации. На бумаге дешевле всего.
9. Используйте прототип в качестве спецификации
Agile + UX = как? Опыт мирового Agile-сообщества
10. Улучшайте прототипы циклически внутри одной итерации проектирования по методике RITE
RITE — Rapid Iterative Testing and Evaluation
Agile + UX = как? Опыт мирового Agile-сообщества
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
andrew@ashapiro.ru
x-raizor.livejournal.com
Процесс моделирования в нулевой итерации
1. Сбор данных об ограничениях из требований
2. Откидывание углублений, усовершенствований и привнесенных требований
3. Построение диаграмм близости, ментальных моделей, первые наброски процессов — все это только для того чтобы появились первые цельные образы в голове
4. Далее идет серия итераций синтеза и проверки первоначальных идей через быстрое эскизирование и проверку бумажных прототипов
Процесс моделирования в нулевой итерации
4. Продумывание процесса взаимодействия и выявления граничных условий, которым должны соответствовать «кубики» для поздней склейки
5. Отделение всех операционных частей, они пойдут на позднюю проработку
6. Первые эскизы макетов
Процесс моделирования в нулевой итерации
7. Проверка макетов и сущностей на состоятельность и работоспособность
8. Проверка в кругу основной команды
9. Формирование ядра и проверка на наращиваемость
10. Запуск в разработку прототипа с минимальной неопределенностью
11. Разработка оставшихся неясностей.
top related