Ergonomics for UX Designers

Slide 1

Slide 1 text

Ergonomy for UX Designers UX LX 23RD MAY 2018 KEVIN CANNON @MULTIKEV

Slide 2

Slide 2 text

Good afternoon!

Slide 3

Slide 3 text

Good afternoon! KEVIN CANNON     INTERACTION DESIGNER @MULTIKEV

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

U P T O   N O W

Slide 7

Slide 7 text

Our studios 7 SAN FRANCISCO AUSTIN NEW YORK DELHI BOSTON LONDON MILAN BANGALORE MUNICH SHANGHAI

Slide 8

Slide 8 text

ERGONOMICS FOR INTERACTION DESIGNERS Today

Slide 9

Slide 9 text

9 Intro Ergonomics for UX Designers Exercises: Sketching Design Principles Exercise: Prototyping  Share-out & Feedback  End AGENDA 14:00 17:30

Slide 10

Slide 10 text

10 ERGONOMICS FOR UX DESIGNERS I believe in showing learning by doing, so this workshop will be very hands on. Here’s a sneak preview.

Slide 11

Slide 11 text

Iterative Sketching

Slide 12

Slide 12 text

Design Principles CONSISTENT BEAUTIFUL SIMPLE CLEAN USER-FRIENDLY USER-FRIENDLY UNIQUE FAST CLEAN

Slide 13

Slide 13 text

Prototyping

Slide 14

Slide 14 text

Shareout

Slide 15

Slide 15 text

15 ERGONOMICS FOR UX DESIGNERS Let’s form groups Groups of 5/6 people. Sit with people you don’t know. Introduce yourselves.

Slide 16

Slide 16 text

ERGONOMICS FOR INTERACTION DESIGNERS Introduction

Slide 17

Slide 17 text

17 ERGONOMICS FOR UX DESIGNERS Designing the right thing Designing the thing right

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

ERGONOMICS FOR INTERACTION DESIGNERS Your brief

Slide 20

Slide 20 text

ERGONOMICS FOR UX DESIGNERS Brief:   Design an informational   kiosk for a museum

Slide 21

Slide 21 text

21 ERGONOMICS FOR UX DESIGNERS Each team will have a different form factor 2. Table Large flat table for use by multiple people. 1. Terminal Large widescreen display at an angle. 3. Large Display Large vertical touchscreen display with dual use for advertising and way finding. 4. Portrait Terminal Large vertical touchscreen display   at an angle.

Slide 22

Slide 22 text

ERGONOMICS FOR INTERACTION DESIGNERS Exercise 1  Crazy 8s: Rapid quiet sketching

Slide 23

Slide 23 text

23 ERGONOMICS FOR UX DESIGNERS Crazy 8s: Interaction Model  Take A4 sheets. Fold into 8. Use big markers. Do individually. Rapid sketching. ⏱ 5 mins. 4X

Slide 24

Slide 24 text

Use Case 1:   Help uses find key facilities, such as toilets, the locker room, and main exhibitions.   Standard view > Home screen > find toilet > show location 24 ERGONOMICS FOR UX DESIGNERS

Slide 25

Slide 25 text

ERGONOMICS FOR UX DESIGNERS Part 1. Ergonomics for UX Designers

Slide 26

Slide 26 text

PRIMARY FOOTER 26 ERGONOMICS FOR UX DESIGNERS What is ergonomics

Slide 27

Slide 27 text

27 ERGONOMICS FOR UX DESIGNERS Digital   UX/UI Design Physical Industrial Design

Slide 28

Slide 28 text

28 ERGONOMICS FOR UX DESIGNERS HTTP://WWW.LUKEW.COM/FF/ENTRY.ASP?1927=

Slide 29

Slide 29 text

29 ERGONOMICS FOR UX DESIGNERS Cradling Single-handed Two-handed HTTP://WWW.LUKEW.COM/FF/ENTRY.ASP?1927=

Slide 30

Slide 30 text

30 ERGONOMICS FOR UX DESIGNERS

Slide 31

Slide 31 text

31 ERGONOMICS FOR UX DESIGNERS HTTP://WWW.LUKEW.COM/FF/ENTRY.ASP?1927=

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Section Subtitle Section Subtitle MICROSOFT TOUCH UI GUIDELINES 33 ERGONOMICS FOR UX DESIGNERS Interaction Reading BEST GOOD OK

Slide 34

Slide 34 text

HTTPS://WWW.LUKEW.COM/FF/ENTRY.ASP?1649 34 ERGONOMICS FOR UX DESIGNERS Top/Bottom Navigation Bottom/Split Navigation

Slide 35

Slide 35 text

35 ERGONOMICS FOR UX DESIGNERS A B Fitts’ Law

Slide 36

Slide 36 text

36 ERGONOMICS FOR UX DESIGNERS Prime Pixels

Slide 37

Slide 37 text

37 ERGONOMICS FOR UX DESIGNERS ∞

Slide 38

Slide 38 text

Slide 39

Slide 39 text

39 ERGONOMICS FOR UX DESIGNERS Prime Edges

Slide 40

Slide 40 text

40 ERGONOMICS FOR UX DESIGNERS 4 Prime Edges Prime Edges?

Slide 41

Slide 41 text

41 ERGONOMICS FOR UX DESIGNERS 4 Prime Edges Prime Edges?

Slide 42

Slide 42 text

42 ERGONOMICS FOR UX DESIGNERS LEAN FORWARD LEAN BACKWARD LARGER FONTS SLOWER BIGGER ITEMS SMALLER FONTS HIGHER INFORMATION DENSITY FASTER

Slide 43

Slide 43 text

43 ERGONOMICS FOR UX DESIGNERS X X X X APPEARANCE OF 24PX FONT

Slide 44

Slide 44 text

44 ERGONOMICS FOR UX DESIGNERS A deskphone presen touchscreen interac reference points, de phone and tablet al interaction. A deskt screen, and manipu - the mouse and key phones are manipu held very close to th A deskphone is furt reducing physical d in movement, and f eyes, making things instances on this de small. Moveover ges not suit the physica Contextual Recommendation Ensure that the phy catered for, that mo such as pinch & zoo removed. Ensure th are large enough fo just the same size as Arm’s length interface. circa. 40cm circa. 80cm

Slide 45

Slide 45 text

ERGONOMICS FOR INTERACTION DESIGNERS Exercise 1.2 Iterating together

Slide 46

Slide 46 text

46 ERGONOMICS FOR UX DESIGNERS Take your design and explore it further, looking at the full brief. A3 sheets In a group. Combine and remix ideas . Create 3 different approaches. ⏱ 30 mins.

Slide 47

Slide 47 text

Share Out 47 ERGONOMICS FOR UX DESIGNERS

Slide 48

Slide 48 text

ERGONOMICS FOR INTERACTION DESIGNERS Part 3 Design Principles

Slide 49

Slide 49 text

CONSISTENT BEAUTIFUL SIMPLE CLEAN USER-FRIENDLY USER-FRIENDLY UNIQUE FAST CLEAN EFFICIENT

Slide 50

Slide 50 text

50 What is unique about this experience or form factor?

Slide 51

Slide 51 text

DESIGN PRINCIPLES 51

Slide 52

Slide 52 text

DESIGN PRINCIPLES 52 Bump-proof Works well with arm outstretched Child-friendly Design for night & day

Slide 53

Slide 53 text

DESIGN PRINCIPLES 53

Slide 54

Slide 54 text

DESIGN PRINCIPLES 54 Fast & efficient Highly learnable Forgiving Empowering

Slide 55

Slide 55 text

55 DESIGN PRINCIPLES

Slide 56

Slide 56 text

56 DESIGN PRINCIPLES A shared experience. Readable from a distance. A comforting experience. Two screens, for different users.

Slide 57

Slide 57 text

57 ERGONOMICS FOR UX DESIGNERS

Slide 58

Slide 58 text

ERGONOMICS FOR INTERACTION DESIGNERS Part 4 Prototyping

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

62 How do you test a rear seat UI quickly?

Slide 63

Slide 63 text

63 Act it out

Slide 64

Slide 64 text

Slide 65

Slide 65 text

ERGONOMICS FOR UX DESIGNERS What about 3D?

Slide 66

Slide 66 text

Slide 67

Slide 67 text

ERGONOMICS FOR UX DESIGNERS This isn’t real life

Slide 68

Slide 68 text

ERGONOMICS FOR UX DESIGNERS Real life is messy

Slide 69

Slide 69 text

ERGONOMICS FOR UX DESIGNERS If you can’t test outside, test inside.

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

ERGONOMICS FOR UX DESIGNERS Know which ways you’re not like your user

Slide 73

Slide 73 text

Many public installations have accessibility requirements. A shopping mall may not, but consider how that might change your system. Description text dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ute enim ad minim veniam, quis exer citation ullamco lorem ipsum. Description text dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ute enim ad minim veniam, quis exer citation ullamco lorem ipsum. Description text dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ute enim ad minim veniam, quis exer citation ullamco lorem ipsum. Accessibility Section Subtitle Section Subtitle Section Subtitle 73 ERGONOMICS FOR UX DESIGNERS Consider wheelchair users and children.

Slide 74

Slide 74 text

ERGONOMICS FOR INTERACTION DESIGNERS Exercise:  Prototype to understand

Slide 75

Slide 75 text

75 EXERCISE 1. Build a full-scale model 2. Act it out 3. Learn 4. Iterate We’ll present observations at the end. ⏱ 45 mins Time: 45⏱

Slide 76

Slide 76 text

ERGONOMICS FOR INTERACTION DESIGNERS Share out

Slide 77

Slide 77 text

77 ERGONOMICS FOR UX DESIGNERS What changes did you make during this process? What did you learn when you acted it out?

Slide 78

Slide 78 text

ERGONOMICS FOR INTERACTION DESIGNERS Recap

Slide 79

Slide 79 text

79 ERGONOMICS FOR UX DESIGNERS 20 cm 6 meter 20 meter

Slide 80

Slide 80 text

80 ERGONOMICS FOR UX DESIGNERS

Slide 81

Slide 81 text

HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 81 ERGONOMICS FOR UX DESIGNERS Hardware restrictions:  Viewing angle

Slide 82

Slide 82 text

HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 82 ERGONOMICS FOR UX DESIGNERS Viewing angle

Slide 83

Slide 83 text

HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 83 ERGONOMICS FOR UX DESIGNERS Parallax

Slide 84

Slide 84 text

HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 84 ERGONOMICS FOR UX DESIGNERS Parallax ✪ Button ✪ Button vs

Slide 85

Slide 85 text

HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 85 ERGONOMICS FOR UX DESIGNERS Parallax Button ✪ vs ✪ Button

Slide 86

Slide 86 text

Interaction Area Display Area

Slide 87

Slide 87 text

Interaction Area Display Area

Slide 88

Slide 88 text

HTTP://IO.HOME.TUDELFT.NL/FILEADMIN/FACULTEIT/IO/OVER_DE_FACULTEIT/AFDELINGEN/INDUSTRIAL_DESIGN/SECTIE_APPLIED_ERGONOMICS_AND_DESIGN/ APPLIED_ERGONOMICS_AND_DESIGN/DYNAMIC_ANTHROPOMETRY/PEOPLE/MOLENBROEK/PUBLICATIONS/DOC/ENHANCING_ANTHROPOMETRY.PDF 88 ERGONOMICS FOR UX DESIGNERS Accessibility strategy DESIGN FOR YOURSELF DESIGN FOR ALL DESIGN FOR THE AVERAGE DESIGN FOR MULTIPLE TYPES DESIGN FOR THE SMALL