Conceptual Models & Interface Metaphors

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

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 Controls to Customer’s Model Map Interface Controls to Customer’s Model

• Which is better for car dashboard speaker front / back control? • Which is better for car dashboard speaker front / back control? • Control should mirror real-world • Control should mirror real-world

Dashboard

1 2

Mercedes Benz Seat Control maps to real world

2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 31 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 32 31 32

Map Interface Controls to Customer’s Model Map Interface Controls to Customer’s Model

Possible fixes?

Problem?

Which knob controls which burner?

2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 33 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 34 33 34

Metaphor Desktop Metaphor

• Definition ? “The transference of the relation between one set of objects to another set for the purpose of brief explanation.”

• Lakoff & Johnson, Metaphors We Live By – “...the way we think, what we experience, and what we do everyday is very much a matter of metaphor.” ß Leap! – in our language & thinking – “argument is war” • … he attacked every weak point • … criticisms right on target • … if you use that strategy

• We use metaphor in UI design to leverage existing conceptual models Engelbart’s windows In today’s Emacs

2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 35 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 36 35 36

6 CS 147: dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation 2021/03/01 Winter 2021 Prof. James A. Landay Stanford University

Desktop Metaphor Example Metaphors

Suggests a conceptual model • Global metaphors – not really an attempt to simulate a real desktop – personal assistant, wallet, clothing, pens, – a way to explain why some windows overlapped cards • Data & function ß Leap! – leverages knowledge about files, folders & trash – to-do list, calendar, documents, find, assist • Collections – drawers, files, books, newspapers, photo albums Xerox PARC’s overlapping windows

Square Card Case 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 37 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 38 37 38

How to Use Metaphor Avoid Metaphor for Metaphor’s Sake • Skeuomorphism • Develop interface metaphor tied to conceptual model – “making items resemble their real-world counterparts” or “a physical ornament or design on an object made to • Communicate that metaphor to the user resemble another material or technique”

• Provide high-level task-oriented operations, not low- • Argument against: takes up space level implementation commands & leads to inconsistent look • Argument for: helps people learn Apple iBooks2

2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 39 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 40 39 40

Ways of Being Consistent Is Consistent Always Better? NO

• Palm PDA example: should “new appointment” & • Interfaces should be consistent in a meaningful way “delete appointment” be in the same place? – e.g., ubiquitous use of same keys for cut/copy/paste • New (add) is common, but delete is not

• Types of consistency – consistent internally • e.g., same terminology & layout throughout app – consistent with other apps • e.g., works like MS Word, uses same keyboard conventions • design patterns (across many apps) – consistent with physical world

2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 41 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 42 41 42

7 CS 147: dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation 2021/03/01 Winter 2021 Prof. James A. Landay Stanford University

Is Consistent Always Better? NO Is Consistent Always Better? NO

Early Palm design Streamlined design Firefox 3 Back/Forward Buttons (like desktop version)

2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 43 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 44 43 44

Is Consistent Always Better? NO Summary

• Conceptual model? – mental representation of how the object works & how interface controls effect it

• Design model should equal customer’s model? Design Model Customer Model – mismatches lead to errors – use customer’s likely conceptual model to design System Image

• Design guides? – provide good conceptual model – make things visible Most Recent Firefox Back/Forward Buttons – map interface controls to customer’s model – provide feedback

2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 45 2021/03/01 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 46 45 46