Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
1
Historical Perspective
CS160: User InterfacesManeesh Agrawala
Slides based on those of John Canny, Francois Guimbretiere and James Landay
Upcoming ScheduleInteractive Prototype (pick up after class today)
– Mean 89.71– Stdev 8.45
Final Presentation and Report (due Nov 27)– Revise interface based on pilot study– Last chance to finish implementation– Presentations held in my office Nov 27 and 29
• Sign up next week– We are planning a project fair for Dec 4
2
Review: 3 Functions of Vis.Record information
– Photographs, blueprints, …
Support reasoning about information (analyze)– Process and calculate– Reason about data– Feedback and interaction
Convey information to others (present)– Share and persuade– Collaborate and revise– Emphasize important aspects of data
Review: Data and ImageN - Nominal (labels)
– Fruits: Apples, oranges, …
O - Ordered– Quality of meat: Grade A, AA, AAA
Q - Quantitative– Ordered, with measurable distances, or amounts– Physical measurement: Length, Mass, Temp, …
Visual Variables– Position– Size– Value– Texture– Color– Orientation– Shape
3
Review: Magnitude EstimationMost accurate Position (common) scale
Position (non-aligned) scale
Length
Slope
Angle
Area
Volume
Least accurate Color hue-saturation-density
Review: Encoding DataN Nominal O OrdinalQ Quantitative
N O Q
N O Q
N O Q
N O
N
N
N
Position
Size
Value
Texture
Color
Orientation
Shape
Note: Q < O < N
4
Review: Deconstruction
Review: Deconstruction
x-axis: time (Q)y-axis: price (Q)
5
Napoleon’s March [Minard 1869]
+
Single Axis Composition
=[based on slide from Mackinlay]
6
y-axis: temperature (Q)
x-axis: time (Q)
Mark Composition
+
=
[based on slide from Mackinlay]
temp over time (Q x Q)
y-axis: longitude (Q)
x-axis: latitude (Q)
width: army size (Q)
+
Mark Composition
+=
[based on slide from Mackinlay]
army position (Q x Q) and army size (Q)
7
longitude (Q)
latitude (Q)
army size (Q)
temperature (Q)
time (Q)
[based on slide from Mackinlay]
• Depicts at least 5 quantitative variables• Any others?
Napoleon’s March [Minard 1869]
8
SummaryWe create visualizations to
– Record information– Support reasoning about the information– Convey information to others
Choose the right mark for your data– Position good for N, O, Q, but Hue best only for N– …
With careful design it is possible to display many dimensions at once
Topics• Precursors• 1940’s Early Visions• 1960’s Visionary Demos• 1970’s Personal Computing• 1980’s Graphical User Interfaces• 1990’s Mobile and Ubiquitous
9
Precursors
Astrolabe (Middle Ages)Convenient interface to complex computation
10
Mechanical Control & Computation
Jacquard Loom (1804) Babbage Difference Engine (1849)
Hollerith Punch Cards (1890)
Hollerith Electric Tabulator, US Census Bureau, Washington, DC, 1908,Photograph by Waldon Fawcett. Library of Congress, LC-USZ62-45687.
11
Teletype (ca. 1910)
1940’s Early Visions
12
ENIAC (1943)World’s first numerical integrator and computer
From IBM Archives.
Harvard Mark I (1944)
55 feet long, 8 feet high, 5 tons
13
Harvard Mark I (1944)Hardware
– Physical switches (before microprocessors)
– Paper tape
Uses– Ballistics calculations– Simple arithmetic & fixed
calculations (before programs)
– 3 seconds to multiply
Adm. Grace Murray Hopper
First programmer of Mark I
14
Adm. Grace Murray Hopper
First programmer of Mark I
Filed first bug report
Vannevar Bush• Name rhymes with "Beaver"• Faculty member MIT• Coordinated WWII effort with
6000 US scientists• Social contract for science
– Federal government funds universities– Universities do basic research– Research helps economy & national defense
1890 - 1974
15
As We May Think• Published in the Atlantic Monthly in 1945!• What will the computer of the future look like?
– Wearable cameras for photographic records– Encyclopedia Brittanica for a nickel– Automatic transcripts of speech– Memex– Trails of discovery– Direct capture of nerve impulses
Memex
16
Memex• Store all personal books, records, communications• Items retrieved through indexing, keywords, cross references,...• Can annotate text with margin notes, comments...• Can construct a trail through the material and save it• Acts as an external memory
1960’s Visionary Demos
17
Context - Computing in 1960s• Transistor (1948)• ARPA (1958)• Timesharing (1950s) • Terminals and keyboards
• Computers still primarily for scientists and engineers
Vacuum Tube Transistor
Sketchpad (1963)• Ivan E Sutherland’s PhD thesis• Modern pen-based system supporting
– CAD design – 3D modeling
• Key: Interactivity (real-time computing was non-existent)
Video: 4:30
18
• Established Computer Graphics • Turing award 1988• Now a fellow at Sun and visiting
Professor at Berkeley
Ivan Sutherland (1938 - )
Doug Engelbart (1925 - )
Strongly influenced by Bush– How would you implement the Memex in 1963?
19
NLS: oNLine System (1968)• 1968 Fall Joint Computer Conference (SF)• Demonstrated NLS to1000 computer scientists
– Video screen, chording keyboard, mouse, videoconferencing, hyperlinking, word processing, email,
– User testing– Extremely influential
Video: 10:54
Chording Keyboard and Mouse
Advantages/Disdvantages?
20
Doug Engelbart (1925 - )• Graduate of Berkeley (EE '55)
– bi-stable gaseous plasma digital devices• Stanford Research Institute (SRI)
– Augmentation Research Center 1959• ARPA funding in 1963
– Starts work on NLS• Funding dwindles in 70’s, AI↑ HCI↓• McDonnell-Douglas 1984-1989
– Worked on open hypertext systems• Started Bootstrap institute in 1989• Turing award 1997
1970’s Personal Computing
21
Altair (1975)
Apple I (1976)
22
Personal Computers
Apple II 1977
IBM PC 1981
VisiCalc (Bricklin, 1979)
23
1980’s Graphical User Interfaces
Xerox Star (1982)
Bitmapped display, windows, icons, menus, pointer, desktop, direct manipulation, WYSIWYG …
Video: 1:11
24
Designing the StarDesign team developed new methodology
– Task analysis– Wide range of users– Usage scenarios– Decomposition of design:
• Display and control interface• User’s conceptual model
– Many prototyping cycles
User centered design
But the Star was expensive and slow ($25k).
Steve Jobs visits PARC in 1979– Sees Alto (precursor to Star)– Lisa ships in 1983 at $10,000,
• 1-button mouse• Menu bar (instead of pop-up menus)
– Fails in marketplace
Macintosh ships in 1984 at $2500– Most consistent WIMP UI
• Look and feel guidelines– Personal computing market
changes for good
Star Mac
25
1990’s Mobile & Ubiquitous
Personal Digital Assistants
Apple Newton (1993)
Palm Pilot (1996)
26
Mobile Devices
Ubiquitous Computing (1991)Marc Weiser’s vision
– 100s of computers work together
– Will disappear (invisible)
Liveboard(Yard scale)
PARC tab (Inch scale)
PARC pad (Foot scale)
27
Ubiquitous Computing (1991)Context awareness through active badges
– Privacy and security
Marc Weiser (1952 – 1999)• Ph.D Univ. of Michigan 1979• Prof at Univ. of Maryland 79-87• Joined Xerox PARC 1987
– Head of Computer Science Lab 1988
Coined term “ubiquitous computing”in 1988
28
What’s Next?• Smart rooms, cars & homes• Wearable computers• Multimodal and tangible UIs• Context-aware and “anywhere” interfaces
Summary• Many seminal ideas came from early years of computing• Considering the user leads to new ideas• Innovation happened in bursts• A modern design process led to GUI (the Xerox Star)
– User-centered design • Some appealing kinds of interaction haven’t taken over
– VR– Speech– Agents – Beware naïve models of human behavior
29
Next TimeScott Klemmer - Getting a grip on ubiquitous
computing through prototyping– Reflective physical prototyping through integrated design,
test, and analysis. UIST 2006. Hartmann et al.