Introduction & Course Overview: Design Thinking for User Experience Design, Prototyping Evaluation.pptx

Human Computer Interaction: Introduction

1. Introduction & Course Overview Design Thinking for User Experience Design, Prototyping Evaluation 1

2. Outline Design Thinking for User Experience Design, Prototyping & Evaluation 2

3. AI Needs User Experience (UX) Design Tesla Model S “Autopilot” Future of autonomous cars How do we design the UX? 3

4. AI Needs User Experience (UX) Design 4 Amazon Echo, Google Home & other Smart Speakers use Voice UI How do we design them to deal with natural human conversation? How do we design to support multimodal input? (e.g., + screen or vision) Design Thinking for User Experience Design, Prototyping & Evaluation

5. AI Needs User Experience (UX) Design Skin Cancer Detection 5 What is appropriate to show a patient? What should be the interface for the doctor? Is there a set of design patterns for these Smart UIs? Design Thinking for User Experience Design, Prototyping & Evaluation

6. Balance Design and Technology Design Thinking for User Experience Design, Prototyping & Evaluation

7. Approach to Application Design & Prototyping Design Thinking for User Experience Design, Prototyping & Evaluation 7

8. Design Thinking Process: A non-Linear Process Design Thinking for User Experience Design, Prototyping & Evaluation 8

9. Design Thinking Process: A non-Linear Process Design Thinking for User Experience Design, Prototyping & Evaluation 9

10. How to Design and Build Good UIs Design Thinking for User Experience Design, Prototyping & Evaluation 10

11. Iteration Design Thinking for User Experience Design, Prototyping & Evaluation 11 At every stage! Design Prototype Evaluate

12. Usability(?) According to the ISO: The effectiveness , efficiency , and satisfaction with which specified users achieve specified goals in particular environments . This doesn’t mean you have to create a “ dry ” design Design Thinking for User Experience Design, Prototyping & Evaluation 12

13. Usability 22

14. Poor usability can be 😳  embarrassing

15. Best Picture (?)            

16. Poor usability can be 💸  costly In Finance In e-Commerce In Advertising

17. 31 Poor usability can be 💀  deadly In Cars In Healthcare In Military In Planes

18. Usability is often the main differentiator for  🤑 commercial success

19. “I have a few qualms with this app: 1. For a Linux user, you can already build such a system yourself quite trivially by getting an FTP account, mounting it locally with curlftpfs , and then using SVN or CVS on the mounted filesystem. From Windows or Mac, this FTP account could be accessed through built-in software.” - Hacker News comment on Dropbox's launch, April 5th 2007

20. The user is always right Don’t blame the user for what goes wrong. If users consistently make mistakes with some part of your interface, it's a sign that your interface is wrong, not that the users are dumb. This lesson can be very hard for a designer to swallow!

21. Can’t we just ask users what they want and then do what they say? No! User are not designer

22. The user is not always right “If I had asked my customers what they wanted they would have said faster horses” - Henry Ford “It's not the customer's job to know what they want - Steve Jobs

23. When Google surveys users about how many search results they want per page (10, 20, 30), they overwhelmingly say “30 results”. But when Google deploys 30-result search pages as part of an “A/B test”, usage drops by 20% relative to the conventional 10-result page.

24. Dimensions of Usability

25. Other usability dimensions are relevant But we’ll mostly focus on LES Aesthetics Satisfaction, happiness, pleasure Ergonomics Comfort, fatigue

26. Usability dimensions vary in in Usability dimensions vary in importance by user portance by user Novice users need learnability Experts need efficiency Multiple users may have different experience And even one user isn't uniformly novice or expert

27. Usability dimensions vary in importance by task A visa application website needs learnability Stock trading software needs efficiency Missile launchers need safety

28. So how to improve usability?

29. Learn the Patterns Make things, make mistakes Gain experience, habits, rules of thumb But what  you  know is never enough.

30. Design Critique Design is broad As many issues to think about as there are humans Even with experience, you won't think of everything Many eyes on a design provide coverage, insight Designers rarely work alone Design critique from collaborators is essential to improving design You will learn and practice this in lab Which is why lab is required

31. User testing Get hold of some representative users Ask them to perform representative tasks with the design. Observe what they do, where they succeed, and where they have difficulties.  Shut up and let them do the talking.

32. Usability/User Experience Goals Set goals early & later use to measure progress Goals often have tradeoffs, so prioritize Example goals(?) Learnable faster the 2nd time & so on Memorable from session to session Flexible multiple ways to do tasks Efficient perform tasks quickly Robust minimal error rates good feedback so user can recover Discoverable learn new features over time Pleasing high user satisfaction Fun Design Thinking for User Experience Design, Prototyping & Evaluation

33. User-centered Design “Know thy User” Cognitive abilities perception physical manipulation memory Organizational / educational job abilities Keep users involved throughout developers working with target customers think of the world in users’ terms Design Thinking for User Experience Design, Prototyping & Evaluation 33

34. Accessible Design Design Thinking for User Experience Design, Prototyping & Evaluation 34

35. Sketching & Storyboarding Design Thinking for User Experience Design, Prototyping & Evaluation 35

36. Rapid Prototyping Build a mock-up of design so, you can test it Low fidelity techniques paper sketches cut, copy, paste Interactive prototyping tools HTML, Balsamiq, Axure, proto.io, Sketch+Marvel , Modao , etc. UI builders Expression Blend + Visual Studio, Xcode Interface Builder, etc. Design Thinking for User Experience Design, Prototyping & Evaluation 36

37. Low-fi Prototyping & Testing ➝ Final Hi-Fi Prototype Winter 2022 Design Thinking for User Experience Design, Prototyping & Evaluation 37 Flutter

38. Low-fi Prototyping & Testing Winter 2022 Design Thinking for User Experience Design, Prototyping & Evaluation 38 Vibes

39. Interactive Prototypes Medium Fidelity Winter 2022 Design Thinking for User Experience Design, Prototyping & Evaluation 39 deatz

40. Interactive Prototypes Hi-Fidelity Winter 2022 Design Thinking for User Experience Design, Prototyping & Evaluation 40 off pockets butter thread

41. Interactive Prototypes Hi-Fidelity Does this mean at the quality to go in an app store? for a few yes, but for most no (this is not a requirement & many will push to this in CS194H) You will be building a real app (with code) not a click-thru prototype (e.g., using Figma or InVision ) It should support most of your functionality But it might be missing polish back-end implementation maybe data stored locally, social networks incomplete, etc. CS (intended) majors should have pre- reqs (106B/X, 142/193P/193A or experience building apps) If not… Winter 2022 Design Thinking for User Experience Design, Prototyping & Evaluation 41

42. Evaluation Design Thinking for User Experience Design, Prototyping & Evaluation 42 Test with real customers (participants) w/ interactive prototype low-fi with paper “ computer ” Low-cost techniques expert evaluation (Heuristic Evaluation) online testing

43. Books Winter 2022 Design Thinking for User Experience Design, Prototyping & Evaluation 43

44. Summary UX design is an important part of most software Getting the interface right is hard, but… Solution is Iterative Design including repeated cycles of Design Prototyping Evaluation Winter 2022 Design Thinking for User Experience Design, Prototyping & Evaluation 44