Tweet
Tweet

Slide 1

Slide 1 text

Techniques to scale UX teamwork js conf be Mai 30, 2018 @Ka_TriN_F freihofner.at

Slide 2

Slide 2 text

@Ka_TriN_F Design Operations Engineer at Dynatrace

Slide 3

Slide 3 text

Design System @Ka_TriN_F

Slide 4

Slide 4 text

Barista

Slide 5

Slide 5 text

Workflow What can/will go wrong? Challenges 6 tips for better teamwork

Slide 6

Slide 6 text

@Ka_TriN_F

Slide 7

Slide 7 text

Workflow @Ka_TriN_F

Slide 8

Slide 8 text

@Ka_TriN_F https://www.smashingmagazine.com/2016/02/efficient-responsive-design-process/

Slide 9

Slide 9 text

developer designer @Ka_TriN_F

Slide 10

Slide 10 text

@Ka_TriN_F https://www.smashingmagazine.com/2016/02/efficient-responsive-design-process/

Slide 11

Slide 11 text

@Ka_TriN_F https://www.smashingmagazine.com/2016/02/efficient-responsive-design-process/

Slide 12

Slide 12 text

@Ka_TriN_F

Slide 13

Slide 13 text

@Ka_TriN_F

Slide 14

Slide 14 text

@Ka_TriN_F

Slide 15

Slide 15 text

@Ka_TriN_F

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

@Ka_TriN_F

Slide 18

Slide 18 text

@Ka_TriN_F

Slide 19

Slide 19 text

@Ka_TriN_F

Slide 20

Slide 20 text

@Ka_TriN_F

Slide 21

Slide 21 text

@Ka_TriN_F

Slide 22

Slide 22 text

It‘s not fine @Ka_TriN_F

Slide 23

Slide 23 text

...let‘s find out why. @Ka_TriN_F

Slide 24

Slide 24 text

@Ka_TriN_F

Slide 25

Slide 25 text

@Ka_TriN_F

Slide 26

Slide 26 text

I’m a programmer. I like clean code. @Ka_TriN_F developer

Slide 27

Slide 27 text

I’m an artist. I want a beautiful look & feel. @Ka_TriN_F designer

Slide 28

Slide 28 text

Challenges from the developer‘s perspective @Ka_TriN_F

Slide 29

Slide 29 text

Corner cases are not covered in the design @Ka_TriN_F developer

Slide 30

Slide 30 text

It‘s not possible to implement as designed (without hacking it) @Ka_TriN_F developer

Slide 31

Slide 31 text

Challenges from the designer‘s perspective @Ka_TriN_F

Slide 32

Slide 32 text

Things are not at all implemented as designed @Ka_TriN_F designer

Slide 33

Slide 33 text

Developers did not pay any attention to details @Ka_TriN_F designer

Slide 34

Slide 34 text

Example @Ka_TriN_F

Slide 35

Slide 35 text

@Ka_TriN_F

Slide 36

Slide 36 text

@Ka_TriN_F

Slide 37

Slide 37 text

@Ka_TriN_F

Slide 38

Slide 38 text

@Ka_TriN_F

Slide 39

Slide 39 text

@Ka_TriN_F Default Hover Active

Slide 40

Slide 40 text

@Ka_TriN_F Default Hover Active

Slide 41

Slide 41 text

.beautifulBtn:hover { border-width: 2px; } @Ka_TriN_F

Slide 42

Slide 42 text

.beautifulBtn:hover { border-width: 2px; } @Ka_TriN_F

Slide 43

Slide 43 text

1px border inside 14px font 2px border inside 14px font @Ka_TriN_F

Slide 44

Slide 44 text

1px border inside @Ka_TriN_F

Slide 45

Slide 45 text

@Ka_TriN_F 2px border inside

Slide 46

Slide 46 text

Let‘s solve this @Ka_TriN_F

Slide 47

Slide 47 text

.beautifulBtn:hover { outline: 1px solid #00a1b2; } @Ka_TriN_F

Slide 48

Slide 48 text

.beautifulBtn:hover { outline: 1px solid #00a1b2; } @Ka_TriN_F

Slide 49

Slide 49 text

.beautifulBtn:hover { box-shadow: inset 0 0 1px #00a1b2; } @Ka_TriN_F

Slide 50

Slide 50 text

.beautifulBtn:hover { box-shadow: inset 0 0 1px #00a1b2; } @Ka_TriN_F

Slide 51

Slide 51 text

@Ka_TriN_F A lot of implementation details ???

Slide 52

Slide 52 text

@Ka_TriN_F

Slide 53

Slide 53 text

@Ka_TriN_F

Slide 54

Slide 54 text

@Ka_TriN_F

Slide 55

Slide 55 text

@Ka_TriN_F

Slide 56

Slide 56 text

Structure + logic vs. Look + feel @Ka_TriN_F

Slide 57

Slide 57 text

@Ka_TriN_F 6techniques for better ux teamwork

Slide 58

Slide 58 text

Put yourself in their shoes @Ka_TriN_F 1

Slide 59

Slide 59 text

A B C @Ka_TriN_F Designers need to see things!

Slide 60

Slide 60 text

A B C @Ka_TriN_F

Slide 61

Slide 61 text

@Ka_TriN_F Meet early and review 2

Slide 62

Slide 62 text

Full picture and requirements @Ka_TriN_F

Slide 63

Slide 63 text

Full picture and requirements @Ka_TriN_F

Slide 64

Slide 64 text

@Ka_TriN_F

Slide 65

Slide 65 text

@Ka_TriN_F Invalid font-size Wrong active state Is this centered?

Slide 66

Slide 66 text

@Ka_TriN_F Recognize the other’s skills 3

Slide 67

Slide 67 text

@Ka_TriN_F

Slide 68

Slide 68 text

@Ka_TriN_F

Slide 69

Slide 69 text

@Ka_TriN_F Speak one language 4

Slide 70

Slide 70 text

@Ka_TriN_F

Slide 71

Slide 71 text

@Ka_TriN_F

Slide 72

Slide 72 text

@Ka_TriN_F

Slide 73

Slide 73 text

padding: 16px color: #00a1b2 @Ka_TriN_F

Slide 74

Slide 74 text

@Ka_TriN_F Find a common ground 5

Slide 75

Slide 75 text

@Ka_TriN_F vs.

Slide 76

Slide 76 text

@Ka_TriN_F

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

@Ka_TriN_F Get a checklist 6

Slide 79

Slide 79 text

ü Define use case and behavior of the component and separate it from other components ü Define how this component behaves with different amounts of text/content ü Define how this component behaves on different screen sizes ü Define accessibility rules and keyboard support ü Define different variations and/or themes ü Define animations ü Define the combination with other components/a huge amount of this component ü Define loading and empty state of the component ü Define if the component needs a validation/gives feedback and how it should work Dynatrace ui components checklist

Slide 80

Slide 80 text

Example barista.dynatrace.com @Ka_TriN_F

Slide 81

Slide 81 text

Full picture and requirements @Ka_TriN_F

Slide 82

Slide 82 text

@Ka_TriN_F

Slide 83

Slide 83 text

@Ka_TriN_F

Slide 84

Slide 84 text

@Ka_TriN_F

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

Put yourself in their shoes How will designers and developers work with it Meet early Developers and designers included in the process Recognize the other’s skills Clearly defined responsibilities Speak one language Component naming Find a common ground Code and style on one page Get a checklist It works for projects too @Ka_TriN_F

Slide 87

Slide 87 text

What (the hell) is she trying to tell us? @Ka_TriN_F

Slide 88

Slide 88 text

• Put yourself in their shoes • Meet early • Recognize the other’s skills • Speak one language • Find a common ground and learn from each other • Get a checklist @Ka_TriN_F

Slide 89

Slide 89 text

@Ka_TriN_F [email protected] freihofner.at