Oh, just do what I want, you confounded machine

1
"Oh, just do what I want, you confounded
machine!"

• Introduction to
• User Interface Design

2
Early UI Generations

• Output flashing lights. Input setting
  mechanical switches
• Output printing devices. Input punch cards
• Output Input Teletypes electric paper
  typewriter
• Output Text-only video screens. Input
  typewriter-style video-display keyboards
• Graphics used curses a sequence of characters
  starting with esc that moved the cursor on
  the screen (e.g. 80X24 positions)

3
GUI Generation

• Output Graphics and menus. Input a pointing
  device
• Initially trackballs - a bowling ball inside a
  stand
• Later a smaller upside-down trackball the mouse
• History in brief
• In the 60s, Stanford Research Institutes NLS
  developed mouse, windows and hypertext concepts
• In the 70s, Xerox PARC developed movable,
  overlapping windows in Smalltalk
• From 1981, Xerox Star, Apple Lisa and Macintosh,
  and finally Microsoft Windows came out

4
A Good User Interface Is

• Consistent - principle of least astonishment
• Simple
• Powerful
• Efficient
• Easy - to learn, explore and relearn
• Cognitively direct
• Clear
• Reversible
• Recoverable

5
Consistent Principle of Least Astonishment

• Consistent with the users expectations
• Follows generally accepted standards
• Has rules explains its rules
• Displays the full set of options, dimming those
  that are inappropriate
• Compatibility
• Across different product versions and with
  related, non-computer based systems
• Use common action sequences, terms, units,
  colors, etc. within the program
• Terminology, Prompts, Menus, Help screens, Color,
  Layout, Capitalization, Fonts

6
Simple

• Contains as few modes as possible
• Minimizes the number of modes, recognizing that
  only one mode may be inappropriate
• Indicates the focus of attention within a screen
  by using color or shape
• Minimize the number of panels displayed and the
  number of mouse-clicks or keystrokes
• Avoid "featuritis" - over-abundance of features
  that do not add value to the user
• Avoid clutter

7
Powerful

• Anticipates users' actions allows the user to
  be in control
• Direct visibility manipulation of the object
  and actions of interest
• So users feel a mastery of the interface
• E.g., grabbing and moving a word
• Prevent rather than reject inappropriate user
  actions
• E.g., disable ("gray out) elements that are
  inappropriate under the current conditions

8
Efficient

• Allows efficient navigation among screens
• System that promotes confidence in its
  reliability, security and correctness

9
Easy to learn, explore and relearn

• Allows experiments exploratory learning
• Allows graceful evolution from novice to expert,
  supporting all stages
• And confidence in the capacity to retain mastery
  over time
• Provides feedback to support user growth
• Provides fast tracks for expert users
• Abbreviations, Special keys, Hidden commands,
  Macro facilities
• Allows supporting text files to be changed easily

10
Cognitively direct

• Respects human memory limitations - reduces
  short-term memory load
• Humans recognize 7 information chunks at a time
• They stay 5 to 30 seconds in short-term memory
• Chunk size depends on material familiarity
• Short term and working memory are highly volatile
  
• Disruptions cause loss of memory
• Delays require that memory be refreshed
• Includes intuitive interface that fits the
  cognitive model
• System that is satisfying to use, and to reuse

11
Clear

• Provide constructive feedback (e.g. highlight)
• Uses appropriately worded messages and labels
• Includes proper Printed Manuals, Online Help, and
  Tutorials
• Supports rapid, reversible, incremental actions
• Identifies each screen with a meaningful title
  and navigation tools
• Makes changes of state obvious
• Shows closure to all operations

12
Reversible

• Allows easy recovery from misdirected actions
• E.g., support undo of deselect during select
• Minimizes the consequences of errors
• Allows easy recovery from errors
• Provide undo or require verification if the
  action is irreversible
• Examples

13
Recoverable

• Handle errors constructively positively
• Modify rather than re-enter
• Error messages from a system should (e.g.)
• Take the blame
• Be concise, positive, specific, constructive,
  neat, consistent, and courteously worded
• Be written in correct English and free of jargon,
  codes or abbreviations, with error code for debug
• Place the users in control of the situation
• Address both novice and expert programmers

14
Sources for This Presentation

• Robert E. Beck, Villanova University, PA,
  http//renoir.vill.edu/faculty/beck/html/csc8570/d
  esign.html
• Common Front Group Some Background on User
  Interfaces Concepts of User Interface
  Design, http//cfg.cit.cornell.edu/cfg/cfg.html
• Ben Shneiderman, "Designing the User Interface",
  3rd edition, Addison-Wesley Publishing Company,
  1997
• IBM's "Design concepts" http//www-3.ibm.com/ibm/
  easy/eou_ext.nsf/publish/567
• Cornell University Ergonomics Web Ergonomic
  guidelines for user-interface design -
  http//ergo.human.cornell.edu/ahtutorials/interfac
  e.html