lecture 2: learnability

Spring 2011 6.813/6.831 User Interface Design and Implementation 1

Lecture 2: Learnability

UI Hall of Fame or Shame?


Source: Interface Hall of Shame

UI Hall of Shame!



UI Hall of Shame


mouse overSource: Interface Hall of Shame

Nanoquiz

• closed book, closed notes• submit before time is up (paper or web)• we’ll show a timer for the last 20 seconds

1. Which of the following are NOT dimensions of usability?A. satisfaction B. reliability C. efficiency D. functionality E. learnability

2. For the anecdote below:An oil spill was caused by a helm lever on an oil tanker. The lever had three positions: Autopilot – Manual – Disconnected. In a tight passage off English coast, trying to maneuver in a narrow channel with fishing boats, the captain accidentally pushed the lever too far – past Manual to Disconnected. Since the supertanker turned very slowly anyway, the crew didn’t realize at first that they weren’t turning at all. Even then, they had so many other hypotheses for why the helm wasn’t responding (burned-out fuse, interconnect problem, etc.) that they didn’t think of the lever. The tanker hit the rocks, and a large oil spill resulted.

Which dimensions of usability are relevant to the failure in this story?

A. efficiency B. visibility C. learnability D. errors E. satisfaction 3. Why are user interfaces hard to design? (choose all good answers)

A. People are hard to predict.B. Software engineers are different from most people.C. Usability is largely a matter of personal taste.D. It’s hard for designers to forget what they know.E. UI design is an aesthetic process and hard to approach objectively or scientifically.

NQ1

2019181716151413121110 9 8 7 6 5 4 3 2 1 0

Today’s Topics

• Human memory• Interaction styles• User model vs. system model• Learnability principles & design patterns

People Don't Learn Instantly

6.813/6.831 User Interface Design and Implementation


Spring 2011 8


Memory

• Working memory– Small: 7 ± 2 “chunks”– Short-lived: ~10 sec– Maintenance rehearsal fends off decay (but costs

attention)• Long-term memory

– Practically infinite in size and duration– Elaborative rehearsal transfers chunks to long-

term memory

Long-termMemory

WorkingMemory

Chunking

• “Chunk” is a unit of memory or perception– Depends both on presentation and on what you

already know

Hard: M W B C R A L O A B I M B F IEasier: MWB CRA LOA BIM BFIEasiest: BMW RCA AOL IBM FBI


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– so menus are more learnable than command

languages


Gulfs of Execution and Evaluation

Spring 2011 6.813/6.831 User Interface Design and Implementation

Evaluation

Interpretation

Perception

Intention

Planning

Execution

UserGoals

System

GULF OFEVALUATION

GULF OF EXECUTION

12

Interaction Styles

• Command language• Menus & forms• Direct manipulation


Command Language

• User types in commands in an artificial language


ls -l *.java

+6.831 site:mit.eduUnix shell

search engine query

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

Menus and Forms

• User is prompted to choose from menus and fill in forms


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


Files & folders on desktop

Scrollbar

Selection handles

Comparison of Interaction Styles

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


Models

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

do what the system does• Implementation models

– Pixel editing vs. structured graphics– Text file as single string vs. list of lines

• Interface models– RealCD’s online help as liner notes


Models in UI Design

• Three models are relevant to UI design:


Usermodel

Interfacemodel

Systemmodel

Interface Model Hides System Model

• Interface model should be:– Simple– Appropriate: reflect user’s model of the task– Well-communicated


User Model May Be Wrong

• Sometimes harmless– Electricity as water

• Sometimes misleading– Thermostat as a valve


Example: the Back Button


Learnability Principles

• Cues that communicate the system model– Affordances– Natural mapping– Visibility– Feedback

• Consistency– Internal, external, metaphorical– Speak the user’s language– Metaphors– Platform standards


Affordances

• Perceived and actual properties of a thing that determine how the thing could be used

• Perceived vs. actual


Natural Mapping

• Physical arrangement of controls should match arrangement of function

• Best mapping is direct, but natural mappings don’t have to be direct– Light switches– Stove burners– Turn signals– Audio mixer


Visibility

• Relevant parts of system should be visible– Not usually a problem in the real world– But takes extra effort in computer interfaces

• Availability of drag & drop is often invisibleSpring 2011 6.813/6.831 User Interface Design and Implementation 27

mouse over

Feedback

• Actions should have immediate, visible effects– Push buttons– Scrollbars– Drag & drop

• Kinds of feedback– Visual– Audio– Haptic


Consistency

• Also called the “principle of least surprise”– Similar things should look and act similar– Different things should look different

• Kinds of consistency– Internal– External– Metaphorical


Consistency of Layout


Consistency in Wording


Speak the User’s Language

• Use common words, not techie jargon– But use domain-specific terms where appropriate

• Allow aliases/synonyms in command languages



Follow Platform Standards

• Follow platform standards– Apple Human Interface Guidelines– Windows Vista User Experience Guidelines– GNOME Human Interface Guidelines– KDE User Interface Guidelines– Java Look & Feel Design Guidelines

• Or imitate what the popular programs do


Metaphors

• Advantages– Highly learnable when appropriate– Hooks into user’s existing mental

models very easily• Dangers

– Often hard for designers to find– May be deceptive– May be constraining– Metaphor is usually broken somewhere– Use of a metaphor doesn’t excuse other bad

design decisionsSpring 2011 6.813/6.831 User Interface Design and Implementation 34

Desktop metaphor

Trashcan metaphor

Case Against Consistency (Grudin)

• Inconsistency is appropriate when context and task demand it– Arrow keys

• But if all else is (almost) equal, consistency wins– QWERTY vs. Dvorak– OK/Cancel button order


Summary

• Learnable interfaces should clearly communicate the correct mental model to the user– Use affordances, natural mapping, visibility– Consider metaphors– Be consistent internally, externally, metaphorically– Prefer knowledge in the world over knowledge in

the head


Next Time: UI Hall of Fame or Shame?


Suggested by Vishy Venugopalan

lecture 2: learnability

Documents