UI Design - Learnability

Post on 30-Dec-2015

26 views 4 download

description

Learnability lecture notes from MIT 6.813 - UI Design and Implementation

transcript

1

L2: Learnability

Spring 2013 6.813/6.831 User Interface Design and Implementation

UI Hall of Fame or Shame?

Spring 2013 6.813/6.831 User Interface Design and Implementation 2

Source: Interface Hall of Shame

UI Hall of Shame!

Spring 2013 6.813/6.831 User Interface Design and Implementation 3

Source: Interface Hall of Shame

UI Hall of Shame

Spring 2013 6.813/6.831 User Interface Design and Implementation 4

mouse over

Source: Interface Hall of Shame

5

Topics

• Learning approaches• Interaction styles• Conceptual models of UIs

Spring 2013 6.813/6.831 User Interface Design and Implementation

6

LEARNING APPROACHES

Spring 2013 6.813/6.831 User Interface Design and Implementation

7

How We Learn a New User Interface

Spring 2013 6.813/6.831 User Interface Design and Implementation

Not by reading a manual* Not by taking a class*

* Standard caveat: “it depends”Not by reading the help first*

8

Learning by Doing

• User has a goal to achieve– “Get rid of the redeye from my photo.”

• User explores interface for features that satisfy the goal

Spring 2013 6.813/6.831 User Interface Design and Implementation

9

Seeking Help

• User resorts to seeking help when they get stuck– So they already have a problem when they arrive,

and they’re usually looking for concrete solutions to it

Spring 2013 6.813/6.831 User Interface Design and Implementation

10

Lessons for Designers

• Know the user’s goals when we design• User interface should communicate how it

works and how to use it• Help must be searchable and goal-directed

Spring 2013 6.813/6.831 User Interface Design and Implementation

11

Try It: Google Autosuggest to Find Learnability Problems

• Look at the suggested queries for prefixes like:– photoshop how to– powerpoint how to– iphone how to– android how to

• What kinds of goals do you see? • What kinds of goals don’t appear?• What does it say about the learnability of the UI for that task?

Spring 2013 6.813/6.831 User Interface Design and Implementation

12

Learning by Watching

Spring 2013 6.813/6.831 User Interface Design and Implementation

How did you learn Alt-Tab?

13

Picoquiz

Consider the new Google Glass UI. (Search the web if you haven’t heard of it.) Which of the following learning approaches should its designers focus on? (choose one)

A. learning by reading a manual

B. learning by taking a class

C. learning by doing

D. learning by watching

Spring 2013 6.813/6.831 User Interface Design and Implementation

14

INTERACTION STYLES

Spring 2013 6.813/6.831 User Interface Design and Implementation

Recognition vs. Recall

• Recognition: remembering with the help of a visible cue– aka “Knowledge in the world”

• Recall: remembering with no help– aka “Knowledge in the head”

• Recognition is much easier!

Spring 2013 6.813/6.831 User Interface Design and Implementation 15

Interaction Style #1: Command Language

• User types in commands in an artificial language– all knowledge in the head; low learnability

Spring 2013 6.813/6.831 User Interface Design and Implementation 16

ls -l *.java

+6.831 site:mit.edu

Unix shell

search engine query

URLhttp://www.mit.edu/admissions/

Interaction Style #2: Menus and Forms

• User is prompted to choose from menus and fill in forms– all knowledge in the world: far more learnable

Spring 2013 6.813/6.831 User Interface Design and Implementation 17

Interaction Style #3: Direct Manipulation

• User interacts with visual representation of data objects– Continuous visual representation– Physical actions or labeled button presses– Rapid, incremental, reversible, immediately visible effects

Spring 2013 6.813/6.831 User Interface Design and Implementation 18

Files & folders on desktop

Scrollbar

Selection handles

19

Interaction Style #4: Speech Dialog

• User speaks in natural language, and system responds the same way

Spring 2013 6.813/6.831 User Interface Design and Implementation

I would like to fly from Boston to London.

Flights from Boston to London. What date will you be travelling?

Next Friday in the evening.

Okay. flights from Boston to London departing between 5:00 pm and midnight on June 25. Can you provide a departure or arrival time?

User

System

Comparison of Interaction Styles

• Knowledge in the head vs. world• Error messages• Efficiency• User experience• Synchrony• Programming difficulty• Accessibility

Spring 2010 6.813/6.831 User Interface Design and Implementation 20

21

Using Multiple Interaction Styles

Spring 2013 6.813/6.831 User Interface Design and Implementation

22

Example: Twitter’s Tweet-Creation UI

Spring 2013 6.813/6.831 User Interface Design and Implementation

What aspects of this UI use knowledge in the head?What aspects use knowledge in the world?

Self-Disclosure

Spring 2013 6.813/6.831 User Interface Design and Implementation 23

24

Picoquiz

Which of the following interaction styles uses knowledge-in-the-world heavily? (choose all good answers)

A. menus and forms

B. speech dialog

C. command languages

D. direct manipulation

Spring 2013 6.813/6.831 User Interface Design and Implementation

25

CONCEPTUAL MODELS

Spring 2013 6.813/6.831 User Interface Design and Implementation

Models

• Model of a system = how it works– its constituent parts and how they work together to

do what the system does

Spring 2013 6.813/6.831 User Interface Design and Implementation 26

Follows Tweets

Three Models in UI Design

Spring 2013 6.813/6.831 User Interface Design and Implementation 27

Usermodel

InterfacemodelSystem

model

Interface model should be:• Simple• Appropriate (matching the task

that needs to be done)• Well-communicated

Example: Back vs. Previous

Spring 2013 6.813/6.831 User Interface Design and Implementation 28

29

Example: Graphical Editing

Spring 2013 6.813/6.831 User Interface Design and Implementation

Edit this text

Structured graphics model(e.g. Illustrator, PowerPoint)

Pixel model, no layers(e.g. MS Paint)

Pixel model with layers(e.g. Photoshop)

30

Example: Text Editing

Spring 2013 6.813/6.831 User Interface Design and Implementation

Typewriter: 2D grid of characters

Text editor: 1D string with linebreak characters

31

Valve?

Switch?

User’s Model May Be Wrong

• Electricity flows like water• Thermostat

Spring 2013 6.813/6.831 User Interface Design and Implementation

System model Interface model

User model

32

Picoquiz

Which of the following statements are true? (choose all good answers)

A. Learning by doing is a primary way that users construct a mental model of a system.

B. The RealCD player’s metaphor of a CD jewel case is an example of a system model.

C. The metaphor that electricity is like water is an example of a user model.

D. A good interface model should match the system model closely.

Spring 2013 6.813/6.831 User Interface Design and Implementation