$30 off During Our Annual Pro Sale. View Details »

Ergonomics for UX Designers

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.

Kevin Cannon

May 23, 2018
Tweet

Other Decks in Design

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

  4. None
  5. None
  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
  18. None
  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=

  32. None
  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 ∞

  38. 38

  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

  59. None
  60. None
  61. None
  62. 62 How do you test a rear seat UI quickly?

  63. 63 Act it out

  64. 64

  65. ERGONOMICS FOR UX DESIGNERS What about 3D?

  66. 66

  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.
  70. None
  71. None
  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
  89. None
  90. RECAP 90 Prototype early. Act it out. Get your hands

    dirty!
  91. Thanks! KEVIN CANNON 
 
 INTERACTION DESIGNER @MULTIKEV