Spring /6.831 User Interface Design and Implementation1 Lecture 2: Learnability

UI Hall of Fame or Shame? Spring /6.831 User Interface Design and Implementation2 Source: Interface Hall of Shame

UI Hall of Shame! Spring /6.831 User Interface Design and Implementation3 Source: Interface Hall of Shame

UI Hall of Shame Spring /6.831 User Interface Design and Implementation4 mouse over Source: 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. NQ

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 Source: Interface Hall of Shame Spring 20118

6.813/6.831 User Interface Design and Implementation9 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-term Memory Working Memory

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 I Easier: MWB CRA LOA BIM BFI Easiest: BMW RCA AOL IBM FBI Spring /6.831 User Interface Design and Implementation10

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 Spring /6.831 User Interface Design and Implementation11

Gulfs of Execution and Evaluation Spring /6.831 User Interface Design and Implementation Evaluation Interpretation Perception Intention Planning Execution User Goals System GULF OF EVALUATION GULF OF EXECUTION 12

Interaction Styles Command language Menus & forms Direct manipulation Spring /6.831 User Interface Design and Implementation13

Command Language User types in commands in an artificial language Spring /6.831 User Interface Design and Implementation14 ls -l *.java site:mit.edu Unix shell search engine query URL

Menus and Forms User is prompted to choose from menus and fill in forms Spring /6.831 User Interface Design and Implementation15

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 /6.831 User Interface Design and Implementation16 Files & folders on desktop Scrollbar Selection handles

Spring /6.831 User Interface Design and Implementation17

Comparison of Interaction Styles Knowledge in the head vs. world Error messages Efficiency User experience Synchrony Programming difficulty Accessibility Spring /6.831 User Interface Design and Implementation18

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 Spring /6.831 User Interface Design and Implementation19

Models in UI Design Three models are relevant to UI design: Spring /6.831 User Interface Design and Implementation20 User model Interface model System model

Interface Model Hides System Model Interface model should be: –Simple –Appropriate: reflect user ’ s model of the task –Well-communicated Spring /6.831 User Interface Design and Implementation21

User Model May Be Wrong Sometimes harmless –Electricity as water Sometimes misleading –Thermostat as a valve Spring /6.831 User Interface Design and Implementation22

Example: the Back Button Spring /6.831 User Interface Design and Implementation23

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 Spring /6.831 User Interface Design and Implementation24

Affordances Perceived and actual properties of a thing that determine how the thing could be used Perceived vs. actual Spring /6.831 User Interface Design and Implementation25

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 Spring /6.831 User Interface Design and Implementation26

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 invisible Spring /6.831 User Interface Design and Implementation27 mouse over

Feedback Actions should have immediate, visible effects –Push buttons –Scrollbars –Drag & drop Kinds of feedback –Visual –Audio –Haptic Spring /6.831 User Interface Design and Implementation28

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 Spring /6.831 User Interface Design and Implementation29

Consistency of Layout Spring /6.831 User Interface Design and Implementation30

Consistency in Wording Spring /6.831 User Interface Design and Implementation31

Speak the User’s Language Use common words, not techie jargon –But use domain-specific terms where appropriate Allow aliases/synonyms in command languages Spring /6.831 User Interface Design and Implementation32 Source: Interface Hall of Shame

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 Spring /6.831 User Interface Design and Implementation33

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 decisions Spring /6.831 User Interface Design and Implementation34 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 Spring /6.831 User Interface Design and Implementation35

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 Spring /6.831 User Interface Design and Implementation36

Next Time: UI Hall of Fame or Shame? Spring /6.831 User Interface Design and Implementation37 Suggested by Vishy Venugopalan