agile+ux

47

Upload: vladimir-zavertaylov

Post on 24-Jan-2015

655 views

Category:

Design


3 download

DESCRIPTION

Профессиональные команды разработчиков все чаще и чаще практикуют Agile. И для многих уже стало привычной нормой — поставлять заказчику продукт (ценности) итеративно. Это действительно сокращает риски и издержки на разработку, а так же позволяет сконцентрироваться на самых важных фичах продукта, оставив все маловажные „хотелки“ и „свистелки“ — на последнюю очередь. Однако для многих разработчиков интерфейсов, UX-дизайнеров такой подход кажется непривычным. Они предпочитают продумывать концепции проекта целиком, включая различные детали интефейсов и взаимодействия пользователя с системой. Это больше похоже на классический водопад. Более того, от уровня „концепции“ до „визуального дизайна“ зачастую требуется квантовый скачёк, когда дизайнер интерфейсов, сосредоточившись и в одиночку определят самостоятельно внешний вид продукта. Это порождает массу проблем, характерных для „водопадной“ разработки, например: часть отрисованных интерфейсов могут быть нереализуемы на практике. Это приводит к конфликту команды разработчиков и UX-специалистов; часть интерфейсов может быть недостаточно детализирована, что приведет либо к срыву сроков итерации (из-за необходимости экстренно разрабатывать недостающих интерфейс), либо к некачественным деталям в интерфейсах („программистский“ дизайн); преждевременная концентрация на пикселях и шрифтах (вкусовщина), вместо проработки бизнес-требований и юзабилити-концепций проекта. В предлагаемом докладе будут разобран практический кейс создания интерфейса web-приложения, работа над которым шла на основе идей передовых зарубежных специалистов в области разработк

TRANSCRIPT

Page 1: Agile+UX
Page 2: Agile+UX

Специализируемся на приложениях для соцсетейAgile с 2003

ВладимирЗавертайлов

@sibirix

Page 3: Agile+UX

Основная проблемаНа примере разработки красной машины

Page 4: Agile+UX

Основная проблема

Проект, глазами Product Owner-а

Page 5: Agile+UX

Основная проблема

Пришла аналитика:

Няшно, секси,ми-ми-ми

Product Owner + Аналитик:

Page 6: Agile+UX

Проект, глазами дизайнера

Няшно, секси,ми-ми-ми

Page 7: Agile+UX

Основная проблема Проект, глазамиразработчика

Page 8: Agile+UX

Основная проблема Проект, глазамипотребителя

Page 9: Agile+UX

Как вы думаетечто думают дизайнерыпро весь этот Agile?

Page 10: Agile+UX

Постоянные изменения?

Не слышал!

Page 11: Agile+UX

Agile + UX

Как совместить

— целостность интерфейса;

— итеративную разработку;

— валидацию интерфейсов рынком?

Page 12: Agile+UX

Пульс проекта

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

инициация

Page 13: Agile+UX

Пульс проекта

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

инициация

Здравствуйте, хотел бы узнать можете ли Вы создать приложение для вк с помощью которого можнобыло бы зарабатывать деньги, тематика не важна.И если не трудно назовите приблизительную цену.

Стратегия

Page 14: Agile+UX

Пульс проекта

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

инициация

Пусть ваш ДИЗАЙНЕР

ПОДУМАЕТ...

Page 15: Agile+UX

Пульс проекта

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

инициация

Поиграйте со шрифтами...

Page 16: Agile+UX

Пульс проекта

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

инициация

Page 17: Agile+UX

Пульс проекта

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

инициация

Page 18: Agile+UX

Пульс проекта

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

итеррация 0инициация

Page 19: Agile+UX

Пульс проекта

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

итеррация 0инициация

Page 20: Agile+UX

Пульс проекта

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

итеррация 0

Page 21: Agile+UX

Пульс проекта

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

итеррация 0

Page 22: Agile+UX

Пульс проекта

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

итеррация 0

Page 23: Agile+UX

Пульс проекта

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

итеррация 0

Page 24: Agile+UX

Важно, чтобы на проекте наступило СЧАСТЬЕ!

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

итеррация 0

Page 25: Agile+UX

А потом начинается РАЗРАБОТКА...

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

итеррация 0 итеррация 1

Page 26: Agile+UX

Пульс проекта

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

итеррация 1итеррация 0

Page 27: Agile+UX

Пульс проекта

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

итеррация 1

Page 28: Agile+UX

Пульс проекта

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

???

итеррация 1

Page 29: Agile+UX

итеррация 1

Пульс проекта

Стратегия

Фичи

Структура

Компоновка

Раскраска

Реализация

время

воплощенность

итеррация 2

КомпоновкаКомпоновка

— проверка— обратная связь— анализ

Page 30: Agile+UX

Где-то тут и начинается Agile

И проблемы...

Page 31: Agile+UX

N-1

Параллельные потоки

Стратегия

Интерфейс

Реализация

время

воплощенность

N N+1 N+2

Page 32: Agile+UX

N-1

Параллельные потоки

Стратегия

Интерфейс

Реализация

время

воплощенность

N N+1 N+2

Делает N

Page 33: Agile+UX

N-1

Параллельные потоки

Стратегия

Интерфейс

Реализация

время

воплощенность

N N+1 N+2

Делает N

Проверяет N-1

Делает N+1

Page 34: Agile+UX

N-1

Параллельные потоки

Стратегия

Интерфейс

Реализация

время

воплощенность

N N+1 N+2

Делает N

Проверяет N-1

Делает N+1

Проверяет N-1, N, N+1

Планирует N+2

Page 35: Agile+UX
Page 36: Agile+UX

Выводы

— Основная концепция дизайна согласуется на 0-й итеррации

— Разработка дизайна и программирование в параллельных потоках

— Планирование идет на 2 итеррации вперед

Page 37: Agile+UX

Как вы думаетекакие прототипы лучше?

— бумажные— wireframe— axure

Page 38: Agile+UX

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

Page 39: Agile+UX

Axure для демонстрации взаимодействияпользователя и системы

Page 40: Agile+UX

Axure vs Бумага

Дешевле и быстрееДля внешнего клиента

Page 41: Agile+UX

Отрисовка концепции

Page 42: Agile+UX

— Проверять концепции дизайна как можно раньше

— Бумажные прототипы дешевле для внутренних демонстраций

— Для внешних демостраций идеальны кликабельные прототипы

Выводы

Page 43: Agile+UX

А как вы ведете backlog?

Page 44: Agile+UX

Backlog + UX

— Вести два потока

— Мониторить степень реализованности

Page 45: Agile+UX

UX-backlog

— User Story для дизайнеров — «крупнее» чем для разработчиков

— Отслеживаем прогресс и удолетворенность

Page 46: Agile+UX

Корневая проблема:разный взгляд к компановке проекта

Разработку и дизайн ведем в 2 потока

Хитрый backlogс обратной связью

Бумажные прототипы быстрее и дешевле

UX+

Agile

Page 47: Agile+UX

Полезная аналитика:

http://blog.sibirix.ru

ВладимирЗавертайлов[email protected]

@sibirix