Ergonomics for UX Designers

Workshop deck.

UX design is often focused on desktop or mobile experiences. Increasingly, we’re putting screens on all types of devices, from refrigerators to coffee machines, and everywhere from museums to shopping malls. Many of the conventions we rely on do not apply in these contexts. In think workshop, we'll explore what UX designers need to know about ergonomics.

Transcript

1. Ergonomy for UX Designers UX LX 23RD MAY 2018 KEVIN CANNON @MULTIKEV
2. Good afternoon!
3. Good afternoon! KEVIN CANNON 
 
 INTERACTION DESIGNER @MULTIKEV
6. U P T O 
 N O W
7. Our studios 7 SAN FRANCISCO AUSTIN NEW YORK DELHI BOSTON LONDON MILAN BANGALORE MUNICH SHANGHAI
8. ERGONOMICS FOR INTERACTION DESIGNERS Today
9. 9 Intro Ergonomics for UX Designers Exercises: Sketching Design Principles Exercise: Prototyping
 Share-out & Feedback
 End AGENDA 14:00 17:30
10. 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.
11. Iterative Sketching
12. Design Principles CONSISTENT BEAUTIFUL SIMPLE CLEAN USER-FRIENDLY USER-FRIENDLY UNIQUE FAST CLEAN
13. Prototyping
14. Shareout
15. 15 ERGONOMICS FOR UX DESIGNERS Let’s form groups Groups of 5/6 people. Sit with people you don’t know. Introduce yourselves.
16. ERGONOMICS FOR INTERACTION DESIGNERS Introduction
17. 17 ERGONOMICS FOR UX DESIGNERS Designing the right thing Designing the thing right
19. ERGONOMICS FOR INTERACTION DESIGNERS Your brief
20. ERGONOMICS FOR UX DESIGNERS Brief: 
 Design an informational 
 kiosk for a museum
21. 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.
22. ERGONOMICS FOR INTERACTION DESIGNERS Exercise 1
 Crazy 8s: Rapid quiet sketching
23. 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
24. 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
25. ERGONOMICS FOR UX DESIGNERS Part 1. Ergonomics for UX Designers
26. PRIMARY FOOTER 26 ERGONOMICS FOR UX DESIGNERS What is ergonomics
27. 27 ERGONOMICS FOR UX DESIGNERS Digital 
 UX/UI Design Physical Industrial Design
28. 28 ERGONOMICS FOR UX DESIGNERS HTTP://WWW.LUKEW.COM/FF/ENTRY.ASP?1927=
29. 29 ERGONOMICS FOR UX DESIGNERS Cradling Single-handed Two-handed HTTP://WWW.LUKEW.COM/FF/ENTRY.ASP?1927=
30. 30 ERGONOMICS FOR UX DESIGNERS
31. 31 ERGONOMICS FOR UX DESIGNERS HTTP://WWW.LUKEW.COM/FF/ENTRY.ASP?1927=
33. Section Subtitle Section Subtitle MICROSOFT TOUCH UI GUIDELINES 33 ERGONOMICS FOR UX DESIGNERS Interaction Reading BEST GOOD OK
34. HTTPS://WWW.LUKEW.COM/FF/ENTRY.ASP?1649 34 ERGONOMICS FOR UX DESIGNERS Top/Bottom Navigation Bottom/Split Navigation
35. 35 ERGONOMICS FOR UX DESIGNERS A B Fitts’ Law
36. 36 ERGONOMICS FOR UX DESIGNERS Prime Pixels
37. 37 ERGONOMICS FOR UX DESIGNERS ∞
39. 39 ERGONOMICS FOR UX DESIGNERS Prime Edges
40. 40 ERGONOMICS FOR UX DESIGNERS 4 Prime Edges Prime Edges?
41. 41 ERGONOMICS FOR UX DESIGNERS 4 Prime Edges Prime Edges?
42. 42 ERGONOMICS FOR UX DESIGNERS LEAN FORWARD LEAN BACKWARD LARGER FONTS SLOWER BIGGER ITEMS SMALLER FONTS HIGHER INFORMATION DENSITY FASTER
43. 43 ERGONOMICS FOR UX DESIGNERS X X X X APPEARANCE OF 24PX FONT
44. 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
45. ERGONOMICS FOR INTERACTION DESIGNERS Exercise 1.2 Iterating together
46. 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.
47. Share Out 47 ERGONOMICS FOR UX DESIGNERS
48. ERGONOMICS FOR INTERACTION DESIGNERS Part 3 Design Principles
49. CONSISTENT BEAUTIFUL SIMPLE CLEAN USER-FRIENDLY USER-FRIENDLY UNIQUE FAST CLEAN EFFICIENT
50. 50 What is unique about this experience or form factor?
51. DESIGN PRINCIPLES 51
52. DESIGN PRINCIPLES 52 Bump-proof Works well with arm outstretched Child-friendly Design for night & day
53. DESIGN PRINCIPLES 53
54. DESIGN PRINCIPLES 54 Fast & efficient Highly learnable Forgiving Empowering
55. 55 DESIGN PRINCIPLES
56. 56 DESIGN PRINCIPLES A shared experience. Readable from a distance. A comforting experience. Two screens, for different users.
57. 57 ERGONOMICS FOR UX DESIGNERS
58. ERGONOMICS FOR INTERACTION DESIGNERS Part 4 Prototyping
62. 62 How do you test a rear seat UI quickly?
63. 63 Act it out
65. ERGONOMICS FOR UX DESIGNERS What about 3D?
67. ERGONOMICS FOR UX DESIGNERS This isn’t real life
68. ERGONOMICS FOR UX DESIGNERS Real life is messy
69. ERGONOMICS FOR UX DESIGNERS If you can’t test outside, test inside.
72. ERGONOMICS FOR UX DESIGNERS Know which ways you’re not like your user
73. 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.
74. ERGONOMICS FOR INTERACTION DESIGNERS Exercise:
 Prototype to understand
75. 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⏱
76. ERGONOMICS FOR INTERACTION DESIGNERS Share out
77. 77 ERGONOMICS FOR UX DESIGNERS What changes did you make during this process? What did you learn when you acted it out?
78. ERGONOMICS FOR INTERACTION DESIGNERS Recap
79. 79 ERGONOMICS FOR UX DESIGNERS 20 cm 6 meter 20 meter
80. 80 ERGONOMICS FOR UX DESIGNERS
81. HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 81 ERGONOMICS FOR UX DESIGNERS Hardware restrictions:
 Viewing angle
82. HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 82 ERGONOMICS FOR UX DESIGNERS Viewing angle
83. HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 83 ERGONOMICS FOR UX DESIGNERS Parallax
84. HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 84 ERGONOMICS FOR UX DESIGNERS Parallax ✪ Button ✪ Button vs
85. HTTP://BRIDGEDESIGN.COM/TOUCH-SCREEN-ERGONOMICS/ 85 ERGONOMICS FOR UX DESIGNERS Parallax Button ✪ vs ✪ Button
86. Interaction Area Display Area
87. Interaction Area Display Area
88. 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
90. RECAP 90 Prototype early. Act it out. Get your hands dirty!
91. Thanks! KEVIN CANNON 
 
 INTERACTION DESIGNER @MULTIKEV