Interface Design good, bad, and how we got here

1
Interface Design good, bad, and how we got here

• CS 352
• 1/11/07

2
Design Quality

• What makes good design?
• What makes bad design?

3
Examples of bad design
4
What is good design

• Design that takes into account
• Who the users are
• What activities are being carried out
• Where the interaction is taking place
• Is optimised to the interactions users have with
  a product
• Such that they match the users activities and
  needs

5
Understanding users needs

• Need to take into account what people are good
  and bad at
• Consider what might help people in the way they
  currently do things
• Listen to what people want and get them involved
• Use tried and tested user-based methods
• Return to this next week

6
Lightning history round! (detour)

• Why?
• Get a sense of where we are
• Things havent always been this way, wont always
  stay this way, computers and interaction evolving
• Understand lessons from history
• Understand why we are here
• Avoid repeating same mistakes

7
History of computer interaction
?
WIMP (Windows)
User Adoption (not productivity!)
Command Line
Batch
M
B
K
?
1940s 1950s
1980s - Present
1960s 1970s
8
History of computer interaction
?
WIMP (Windows)
User Adoption (not productivity!)
Command Line
Educated
Batch
Professionals
Experts
?
1940s 1950s
1980s - Present
1960s 1970s
9
Eniac (1943)

• A general view of the ENIAC, the world's first
  all electronic numerical integrator and computer.

From IBM Archives.
10
Mark I (1944)

• The Mark I paper tape readers.

From Harvard University Cruft Photo Laboratory.
11
Stretch (1961)

• A close-up of the Stretch technical control
  panel.

From IBM Archives.
12
Batch Processing

• Computer performed one task at a time
• No interaction once computation started
• Switches, wires, punch cards and tapes for I/O
• Very limited, highly trained group of operators

13
Command Line (Mid 1960s)

• Computers hit big business
• More varied tasks text processing, editing,
  email etc
• Need for interactivity
• Used by secretaries, salesmen, accountants, CS
  students etc
• Reduced training

Need for HCI
14
The Ubiquitous ASR 33 Teletype

• ASR Automatic Send / Receive
• Save programs on punched paper tape
• The first direct human-computer interface
  experience for many in the 1960s
• About 10 characters per second - 110 bps

15
The Ubiquitous Glass Teletype

• 24 x 80 characters
• Up to 19,200 bps (Wow - was big stuff!)

Source http//www.columbia.edu/acis/history/vt100
.html
16
Where we are now WIMP / GUI

• Computers in the home, for everyday tasks, no
  training
• From multi-user to multitasking systems
• Windows, Icons, Menus, Pointers
• Graphical User Interface
• WIMP interface allows you to do several things
  simultaneously
• Has become the familiar GUI interface

17
Innovator Ivan Sutherland

• SketchPad - 1963 PhD thesis at MIT
• Hierarchy - pictures subpictures
• Master picture with instances (ie, OOP)
• Constraints
• Icons
• Copying
• Light pen input device
• Recursive operations

18
Douglas Engelbart

• The Problem (early 50s)
• ...The world is getting more complex, and
  problems are getting more urgent. These must be
  dealt with collectively. However, human abilities
  to deal collectively with complex / urgent
  problems are not increasing as fast as these
  problems.
• If you could do something to improve human
  capability to deal with these problems, then
  you'd really contribute something basic.
• ...Doug Engelbart

19
The First Mouse (1964)
20
Xerox Star - 1981

• First commercial PC designed for business
  professionals
• desktop metaphor, pointing, WYSIWYG, high degree
  of consistency and simplicity
• First system based on usability engineering
• Paper prototyping and analysis
• Usability testing and iterative refinement

21
Xerox Star Desktop
22
Lessons form Xerox Star?

• Usability matters, usability sells
• Star flopped, but Mac succeeded
• Cost 15,000
• Lacked spreadsheet, standard business software
• Usability can be engineered
• Birth of HCI as a design discipline

23
Paradigm Direct Manipulation

• 82 Shneiderman describes appeal of
  rapidly-developing graphically-based interaction
• object visibility
• incremental action and rapid feedback
• reversibility encourages exploration
• replace language with action
• syntactic correctness of all actions
• WYSIWYG, Apple Mac

24
Paradigm Metaphor

• All use is problem-solving or learning to some
  extent
• Relating computing to real-world activity is
  effective learning mechanism
• File management on office desktop
• Financial analysis as spreadsheets
• The tension between literalism magic
• Eject disk or CD on Mac by dragging to trash can

25
Evolution from Xerox Star?
1981
26
Evolution from Xerox Star?
1981
1985
Windows 1.0
Mac OS 1.0
27
Evolution from Xerox Star?
1981
1985
1987
Windows 1.0
Mac OS 1.0
Mac OS 5.0
Windows 2.0
28
Evolution from Xerox Star?
1981
1985
1987
1992
Windows 1.0
Mac OS 1.0
Mac OS 5.0
Windows 3.0
Mac OS 7
29
Evolution from Xerox Star?
1981
1985
1987
1992
1998
Windows 1.0
Mac OS 1.0
Mac OS 5.0
Windows 3.0
Mac OS 7
30
Evolution from Xerox Star?
1981
1985
1987
1992
1998
2007
Windows 1.0
Mac OS 1.0
Mac OS 5.0
Windows 3.0
Mac OS 7
31
Evolution from Xerox Star?
1981
1985
1987
1992
1998
2007
Windows 1.0
Mac OS 1.0
Mac OS 5.0
Windows 3.0
Mac OS 7
32
The WIMP Plateau
?
WIMP (Windows)
User Productivity
Command Line
Batch
?
1980s - Present
1940s 1950s
1960s 1970s
Time
33
Examples of new paradigms

• Ubiquitous computing
• Wearable computing
• Tangible bits, augmented reality
• Attentive environments
• Transparent computing
• and many more.

34
Two examples BlueEyes (IBM) and Cooltown (HP)

• Visionary approaches for developing novel
  conceptual paradigms

Almalden.ibm.com/cs/blueeyes/ cooltown.hp.com/mpul
se/backissues/0601/0601-cooltown.asp