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

Facebook

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?