UX and VIMM @ LTUX (jul18)

This is my talk from Ladies That UX in Fort Worth about how to improve the user experience by designing for visual, intellect, mental and motor loads.

1. Unleash the Power of VIMM Ladies that UX – Fort Worth July 2018 By Kris Courtney, UX Research Principal

2. 2 V I M M Visual Intellect Motor Mental

3. Agenda 1 User Experience 2 VIMM Model 3 Visual 5 Motor 4 Intellect 6 Mental

4. User Experience

5. User Experience ©2018 Sabre GLBL Inc. All rights reserved. 5 PLACE WEB APP OR SITE SCREENSHOT HERE

6. User Experience PLACE TABLET SCREENSHOT HERE PLACE WEB APP OR SITE SCREENSHOT HERE

7. User Experience (UX) A holistic, multifaceted outcome resulting from an end-user’s interaction with the company, its services and its products

8. No product is an island. A product is more than the product. It is a cohesive, integrated set of experiences. Don Norman Co-founder Nielsen Norman Group IDEO Fellow, IDEO First User Experience Architect, Apple ©2018 Sabre GLBL Inc. All rights reserved. 8

9. V I M M Visual Intellect Motor Mental

10. Visual Load VIMM Model Motor Load Memory Load Intellectual Load VIMM is an easy mnemonic to remember the potential ways interfaces can make users think too much or work too hard. https://www.hansoninc.com/how-the-vimm-model-can-improve-usability-of-your-site-or-application/

11. Visual V I M M

12. Visual Load Optimize visual comprehension Use visual hierarchy to guide the user’s eye Emphasize what is important; eliminate or diminish everything else Make content grouping and labels intuitive Deliver thoughtful and purposeful use of color Be meticulous with alignment and text formatting

13. What did you notice?

14. Similarity Continuity Gestalt Laws of Perception Closure Proximity Items closer together are perceived as related Items that are similar are perceived as related We have a natural tendency to make sense of the world around us by finding patterns or grouping. Items that are perceived as a whole if they are co-linear or follow a direction. Unfinished or partially obscured items can be perceived as whole or complete

15. Optimize visual comprehension: Use visual hierarchy to guide the user’s eye Emphasize what is important; eliminate or diminish everything else Make content grouping and labels intuitive Deliver thoughtful and purposeful use of color Be meticulous with alignment and text formatting Visual Load

16. Intellect V I M M

17. Simplify decision making Don’t make users think Provide previews and easy escape Speak the users’ language, eliminate jargon Ensure controls function consistently Provide good system feedback Intellect Load

18. Simplify decision making Source: https://www.interaction-design.org/literature/article/bad-design-vs-good-design-5-examples-we-can-learn-frombad-design-vs-good-design-5-examples-we-can-learn-from-130706 Don’t make users think

19. 23 Don’t make users think Simplify decision making

20. Memory V I M M

21. Memory Load Limit use of memory resources Design for recognition versus recall Provide clear navigational feedback Increase response time Make options visible Provide sensible defaults Reference: https://www.nngroup.com/articles/recognition-and-recall/

22. 3 8 4 8 5 9 0 1 7 3 26 Memorize these numbers Short-Term Memory

23. Short-term memory has 3 key aspects: Short-Term Memory 27 Limited capacity Only about 7 items can be stored at a time Limited duration Storage is fragile and information can be lost with distraction or passage of time Encoding Paying attention and processing information

24. 28 3 8 4 8 5 9 0 1 7 3 How well did you remember? Short-Term Memory

25. Recognition Over Recall 29 What’s on the head of a penny?

26. Recognition Over Recall 30 Lincoln’s right profile In God We Trust Liberty Year

27. ©2018 Sabre GLBL Inc. All rights reserved. 31 Which one is the penny? Recognition Over Recall

28. Did Toni Morrison write Beloved ? Who wrote Beloved? Recognition Over Recall

29. Motor V I M M

30. Minimize movement & interactions Avoid switching input devices Use short distances and large targets ( Fitt’s Law) Optimize for the input devise Reduce scrolling, multiple screens and steps Motor Load 34

31. Check Deposit

32. Motor Load Steps for depositing checks: Enter bank card Enter PIN Select account type Select action Enter check Transaction Ends Repeat for each check!!!

33. ©2018 Sabre GLBL Inc. All rights reserved. Check Deposit

34. Visual Optimize visual comprehension by… Matching screen flow to task flow Good grouping and labeling Careful use of color Intellect Simplify decision making by… Providing pre-views and easy escapes Using controls consistently Providing good system feedback Memory Conserve memory resources by… Making options visible Designing for recognition vs. recall Providing defaults Motor Minimize movement time & interactions by… Using short distances and large targets Optimizing for the input device Using natural response mappings Reducing scrolling, windows and steps

35. Unleash the Power of VIMM to improve user experience by Kris Courtney @kmcourrtney01 Q&A