CS 147: dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation 2021/03/01 Winter 2021 Prof. James A. Landay Stanford University + dt UX DESIGN THINKING FOR USER EXPERIENCE DESIGN + PROTOTYPING + EVALUATION Hall of Fame or Shame? • Design based on a top retailer’s site Conceptual Models & Interface Metaphors 刘哲明 Prof. James A. Landay Computer Science Department Stanford University Winter 2021 March 1, 2021 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 2 1 2 Hall of Shame! A Better Design • Design based on a top retailer’s site 1. Instructions at the top for all errors 2. Redundant exclamation icons • Color deficiency 3. Changed color on boxes around – can’t distinguish between red & green input fields with errors • In study, user could not get by this screen! 4. Instructions on what to fix near each error • How to fix? – redundant cues 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 3 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 4 3 4 Hall of Fame or Shame? Hall of Fame or Shame? • M-Pesa mobile payments • M-Pesa mobile payments • Common in Africa • Common in Africa http://africanbusinessmagazine.com/wordpress/wp-content/uploads/2014/07/mobile-payment.png https://techweez.com/2017/04/27/is-our-over-dependence-on-mpesa-a-dangerous-move-can-something/ http://blog.unibulmerchantservices.com/m-pesa-by-the-numbers/ http://africanbusinessmagazine.com/wordpress/wp-content/uploads/2014/07/mobile-payment.png 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 5 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 6 5 6 1 CS 147: dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation 2021/03/01 Winter 2021 Prof. James A. Landay Stanford University + dt UX DESIGN THINKING FOR USER EXPERIENCE DESIGN + PROTOTYPING + EVALUATION Hall of Fame or Shame? • M-Pesa mobile payments • Common in Africa Conceptual Models & • Simple UI but brings banking Interface Metaphors http://africanbusinessmagazine.com/wordpress/wp-content/uploads/2014/07/mobile-payment.png services to the unbanked! 刘哲明 Prof. James A. Landay Computer Science Department Stanford University Winter 2021 March 1, 2021 http://blog.unibulmerchantservices.com/m-pesa-by-the-numbers/ 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 7 7 8 Outline Design of Everyday Things • By Don Norman • Design of Everyday Things – UCSD, Apple, HP, NN Group, NU, UCSD • Conceptual models • Design of everyday objects illustrates • Team break problems faced by designers of systems • Design guides for conceptual models • Explains conceptual models • Interface metaphors – doors, washing machines, digital watches, phones • UI consistency • Resulting design guides ® Highly recommended 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 9 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 10 9 10 Conceptual Model? Affordances as Perceptual Clues Def. Mental representation of how an artifact works & how interface controls affect it Well-designed objects have affordances – clues to their operation • People may have preconceived models that are hard to change – often visual, but not always (e.g., speech) – (4 + 5) vs. (4 5 +) – dragging to trash? iOS7 • iOS7 w/ “button iOS6 deletes file but ejects disk David Shillinglaw shapes” accessibility • Interface must communicate model What affordances do you – visually, possibly physically or using sound see here? 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 11 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 12 11 12 2 CS 147: dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation 2021/03/01 Winter 2021 Prof. James A. Landay Stanford University Affordances as Perceptual Clues Affordances as Perceptual Clues Poorly-designed objects Poorly-designed objects – no clues or misleading clues – no clues or misleading clues “Norman doors” French artist Jacques Carelman Crazy design for a screw punch! https://99percentinvisible.org/article/norman-doors-dont-know-whether-push-pull-blame-design/” (5:31) 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 13 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 14 13 14 Affordances as Perceptual Clues Refrigerator Poorly-designed objects freezer – no clues or misleading clues fresh food Problem: freezer too cold, but fresh food just right http://alistapart.com/article/flat-ui-and-forms 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 15 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 16 15 16 Refrigerator Controls A Common Conceptual Model Normal Settings C and 5 Colder Fresh Food C and 6-7 A B C D E Coldest Fresh Food B and 8-9 cooling Colder Freezer D and 7-8 unit Warmer Fresh Food C and 4-1 OFF (both) 0 9 8 7 6 5 4 3 2 1 A B C D E 9 8 7 6 5 4 3 2 1 cooling unit What is your conceptual model? Spend 30 sec. drawing a diagram showing your model – where the cooling units are & how they are controlled Share with your neighbor independent cooling units 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 17 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 18 17 18 3 CS 147: dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation 2021/03/01 Winter 2021 Prof. James A. Landay Stanford University Actual Conceptual Model Design Model & Customer Model A B C D E Design Model Customer Model cooling unit 9 8 7 6 5 4 3 2 1 System Image Can you fix the problem? • Customers get model from prior experience & usage of new Possible solutions – through system image – make controls map to customer’s model • – make controls map to actual system What if the two models don’t match? 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 19 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 20 19 20 Conceptual Model Mismatch Model Mismatch: Car Automatic Shifter • Mismatch between designer’s & customer’s conceptual models leads to… – slow performance – errors – frustration – ... 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 21 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 22 21 22 Administrivia • Hi-Fi Prototype Assignment posted last week – mid-way milestone due on Thur/Fri Mar. 11/12 (at start of studio) – final prototype due Thur./Fri. Mar. 18-19 (at start of studio) – final presentations at project fair, Fri. Mar. 19, 6-9:30 PM (show starts at 6:30 PM) TEAM BREAK – final write-up due Sat. Mar. 20, 6 PM Talk about how to build your hi-fi prototype • Midterm Monday, March 8th – If you sent us an OAE letter, you should get email from us about accommodations for the exam • If you aren’t in CS47 and want to learn React Native – see CS147 home page for links to CS47 assignments 1-4 and Lectures 1-10 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 23 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 24 23 24 4 CS 147: dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation 2021/03/01 Winter 2021 Prof. James A. Landay Stanford University Design Guides Make Things Visible • Refrigerator? • Provide good conceptual model – make the 1..9 dial something – customer wants to understand how controls affect object about percentage of cooling • Make things visible between the two compartments? – if object has function, interface should show it • Map interface controls to customer’s model • Controls available on watch – infix vs. postfix calculator – whose model is that? w/ 4 buttons? • Provide feedback – too many & they are not visible! – what you see is what you get! (WYSIWYG) 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 25 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 26 25 26 Make Things Visible Make Things Visible http://www.brucesallan.com/wp-content/uploads/2013/03/Becker-Car-Stereo.jpg • Compare to controls on old & new car radios • Compare to controls on old & new car radios – #controls = #functions – #controls = #functions – controls are labeled (?) and grouped together – controls are labeled (?) and grouped together 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 27 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 28 27 28 Make Things Visible Make Things Visible • Compare to controls on old & new car radios • Compare to controls on old & new car radios – #controls = #functions – #controls = #functions – controls are labeled (?) and grouped together – controls are labeled (?) and grouped together – tradeoffs of the “glass UI” (e.g., Tesla)? 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 29 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 30 29 30 5 CS 147: dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation 2021/03/01 Winter 2021 Prof. James A. Landay Stanford University Map Interface