1
BETTER ARCHITECTURE WITH UX-DRIVEN DESIGNВАЛЕРИЙ СОРОКОБАТЬКОSOFTWARE ARCHITECT, JAVASCRIPT
UX DESIGNER
ДЕНИС ЯРОВОЙ
2
Hello, World!
3
Frontend statistics4 команды
9 проектов
4
Architecture
5
Application ArchitectureGraphQL Query
ComponentsRelay Store
Actions
Props
Server
GraphQLResponse
GraphQL Write
6
Application ArchitectureБольшинство случаев
Action
Dispatcher
Store
View API
7
Feature Architecture
8
Feature Architecture
9
Feature Architecture
Feature
Feature
Feature
Feature
10
Feature Architecture
Feature
Feature
Feature
Feature
11
Feature Architecture
Feature
Feature
Feature
Feature
12
Feature Architecture
Feature
Feature
Feature
Feature
13
• Чинят то, что не поломано
Feature Architecture
14
• Чинят то, что не поломано• Оптимизируют то, что не нужно
Feature Architecture
15
Feature Architecture
FEATURE
16
Multiple forms
17
Username
Email address
Password
Multiple forms
const formConfig = [ 'username', 'email', 'password', 'confirm'];
render() { return <FormGod config=${formConfig}/>;}
18
Username
Email address
Password
Multiple formsconst formConfig = [{ id: 'username', icon: 'user'}, { id: 'email', icon: 'email'}, { id: 'password', icon: 'password'}, { id: 'confirm'}];
19
Username
Email address
Password
Multiple formsconst formConfig = [{ id: 'username', icon: 'user'}, { id: 'email', icon: 'email'},
[{ id: 'password', icon: 'password' }, { id: 'confirm'
}]];
20
Username
Email address
Password
I agree with the Terms and Conditions
Multiple formsconst formConfig = [{ ...{ id: 'agree', type: 'checkbox'}];
21
Multiple formsconst formConfig = [{ ...{ id: 'new-field', render: value => { return ( <div> <MultiSelect .../> </div> ); }}];
Registration form
Personal details
Username
Email Address
Password
First name Last name
Gender
I agree with the Terms and Conditions
SUBMIT
22
Multiple forms
new npm package: form renderer
23
render() { return ( <div> <Row> <Cell><Input value=${username} /></Cell> </Row> <Row> <Cell><Input value=${email} /></Cell> </Row> <Row> <Cell><Input value=${password} /></Cell> <Cell><Input value=${confirm} /></Cell> </Row> ... </div> );}
Multiple forms
24
Lava Flow
Добавление иконок Изменение верстки
Нормальная верстка
Жалко удалять
npm-пакет Универсальный рендер
Добавление типов
25
Development SpeedVelocity
TimeBugs + New FeaturesIdea
26
Result
27
• Задача верстальщика
Multiple forms
28
• Задача верстальщика
• Программист занимался бы:
- тесты
Multiple forms
29
• Задача верстальщика
• Программист занимался бы:
- тесты - рефакторинг
Multiple forms
30
• Задача верстальщика
• Программист занимался бы:
- тесты - рефакторинг - технический долг
Multiple forms
31
UX-time
32
UX
• UX как конечный результат• UX как процесс
33
UXкак конечный результат
34
User experience is the overall effect created by the interactions and perceptions that someone has when using a product or service"
"
Leah Buley "The User Experience Team of One"
35
UXкак процесс
36
План
37
Методология
38
Методология
• Узнай что-нибудь о реальном мире
39
• Узнай что-нибудь о реальном мире• Придумай решение
Методология
40
• Узнай что-нибудь о реальном мире• Придумай решение• Проверь в реальности
Методология
41
• Узнай что-нибудь о реальном мире• Придумай решение• Проверь в реальности• Повтори
Методология
42
Погружение
• Узнаем что-то о пользователях, бизнесе, технических ограничениях
43
Погружение
• Узнаем что-то о пользователях, бизнесе, технических ограничениях
• Записываем, рассказываем команде
44
Погружение
• Узнаем что-то о пользователях, бизнесе, технических ограничениях
• Записываем, рассказываем команде• Проектируем концепцию
45
Бизнес-целиПотребности пользователей
фичи / хотелки / улучшения
46
Ищем решение
• Проектируем концепцию
47
Ищем решение
• Проектируем концепцию• Рисуем картиночки
48
Ищем решение
• Проектируем концепцию• Рисуем картиночки• Делаем прототип
49
Сталкиваем с реальностью
• Показываем заказчику• Обсуждаем с коллегами• Тестируем с пользователями• Делаем первую версию и запускаем
50
И все по новой
51
Part 2
Problems and examples
52
Blind Development
53
Blind Development
check point
FinishStart A
deadline
B
54
Blind Development
ID
Search Status
Name Status
1 John Smith Employed
2 Randal White Unemployed
3 Stephanie Sanders Employed
4 Steve Brown Employed
55
Blind Development
ID
an Status
Name Status
2 Randal White Unemployed
3 Stephanie Sanders Employed
56
Blind Development
ID
an Status
Name Status
2 Randal White Unemployed
3 Stephanie Sanders Employed
57
Blind Development
FinishStart A B
58
Blind Development
FinishStart A B
59
Blind Development
Start A B Finish
60
Blind Development
Start
refactoring
A B Finish
61
Blind Development
Start
refactoringtests
A B Finish
62
Blind Development
Start
refactoringtestsresearch
A B Finish
63
Over-engineering
64
Username
Email address
Password
Over-engineering
const formConfig = [ 'username', 'email', 'password', 'confirm'];
render() { return <FormGod config=${formConfig}/>;}
*slide № 17
65
New npm package
Over-engineering
*slide № 22
66
Фичеризм
67
Диагноз
68
Диагноз
• Бизнес-цели не определены• Потребности пользователей
не определены• Скоуп не определен
69
Последствия
70
Последствия
71
Последствия
FinishStart A
deadline
B
72
Start
4 месяца 2 года
A B Finish
Последствия
73
Последствия
74
Лечение
75
Feature evolution
76
DEV:
Feature evolution
77
ID Name Status Actions
1 John Smith Employed
2 Randal White Unemployed
3 Stephanie Sanders Employed
4 Steve Brown Employed
Feature evolution
DEV
UX
:
:
78
Feature evolution
ID Name Status Actions
1 John Smith Employed
2 Randal White Unemployed
3 Stephanie Sanders Employed
4 Steve Brown Employed
DEV
UX
:
:
79
Feature evolution
DEV
UX
:
:
ID Name Status
1 John Smith Employed
2 Randal White Unemployed
3 Stephanie Sanders Employed
4 Steve Brown Employed
80
Feature evolution
John Smith
Randal White
Stephanie Sanders
Steve Brown
DEV
UX
:
:
81
Examples
82
Sitemap
83
Sitemap
84
Sitemap
85
Sitemap
86
Sitemap
Games
Form for Chat node
Sparta News Game
About Soldiers Blog Chat
Profile Nords Play Forum
Stormfall
87
Tag multiselect
88
Tag multiselect
89
Tag multiselect
90
13 селектов
91
Задача-решение
92
Задача-решение
Balista
Weapon
Angel
Unit
Trio
Style
Attack
State
1200x627
Size
Platform
Happy
Character expression
Happy
Character expression
Airship
Equipment
Base
Environment
Book
Elements
Elephant
Creature
Red
Dominant color
93
Погружение
94
Погружение
95
Бизнес-цели
96
Идея
97
Возможное решение
98
Автоматизация
99
Google Cloud Vision API
100
Google Cloud Vision API
101
Tech review
102
Username
Email address
Password
const formConfig = [ 'username', 'email', 'password', 'confirm'];
render() { return <FormGod config=${formConfig}/>;}
*slide № 17
Tech review
103
New npm package
*slide № 22
Tech review
104
Questions?