The document traces the evolution of human-computer interaction from early text-based interfaces to modern graphical user interfaces and web design. It discusses pioneering systems from the 1960s that introduced concepts like time-sharing, command languages, and conversational interfaces. Major developments included the graphical user interface of the Xerox Star in 1981, direct manipulation interfaces using a mouse, and the desktop metaphor popularized by the Apple Macintosh in 1984. The rise of the web in the 1990s brought new interaction paradigms like hypertext and forms. The document examines how these innovations shaped modern interactive design.
9. Paradigms
• User’s has control
• Command languages
• Query languages
• Line editors
• Adventure game
• Computer has control
• Q&A
• Advisory system
• Conversations
• Eliza
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
9
11. Query languages
GIVE THE NAMES OF ALL EMPLOYEES WHO HAVE
JOBS WORKING AS A SECRETARY IN THE CITY OF
CHICAGO.
PRINT THE NAME OF ANY EMPLOYEE WITH
CITY=CHICAGO AND JOB=SECRETARY
THE NUMBER OF RECORDS TO RETRIEVE IS 30
SMITH
JONES
BROWN
...
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
11
12. Adventure games
You are standing at the end of a road before a
small brick building. Around you is a forest.
A small stream flows down a gully.
ENTER BUILDING
You are inside a building, a well house for a
large spring. There are some keys on the
ground here. There is a shiny brass lamp
nearby. There is a bottle of water here.
GET WATER
Okay
GET KEYS
Okay
(Adventure, 1975)
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
12
13. Expert systems
(1) Patient’s name: (first-last)
**FRED SMITH
(2) Sex:
**MALE
(3) Age:
**55
(4) Have you been able to obtain positive
cultures
from a site at which Fred
Smith has an infection?
**YES
(5) What is the infection?
**PRIMARY-BACTEREMIA
(6) Please give the date and approximate time
when signs of symptoms first appeared
(Mycin)
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
13
15. Interaction, a definition
Mutual and simultaneous
activity on the part of both
participants usually
working towards some goal
but not necessarily.
Andy Lippman, MIT
Stewart Brand, The Media Lab: Inventing the Future at M.I.T. (Penguin, 1988), p. 46
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
15
17. Lippman on Interactivity, corollaries
• Interruptibility
• Graceful degradation
• Limited look ahead
• No default
• Impression of infinite database
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
17
18. Interruptibility
• Lippman contrasts the ability of any
participant to interrupt the others with
alternating (turn taking). He proposes a
model of interaction closer to a conversation
than a lecture. He refers to the granularity of
the interactive system to raise the question
of the human interval where participants
understand they are not being ignored (e.g.
word, sentence, paragraph). See phatic
function in Jakobson's model of
communication.
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
18
19. Graceful degradation
• Something the system cannot
handle crops up. An example:
a system responds to a
question without an
immediate answer with a
promise to come back to the
point later. The interaction
continues; it does not
collapse. Lippman asks "in
what manner does it degrade,
productively or not?"
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
19
20. Limited look ahead
• Everything is not precomputed. Related concept "on the fly."
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
20
21. No default
• Lippman suggests avoiding default paths. He considers them boring.
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
21
22. Impression of infinite database
• The distinction between "interactive and selective" gets looped back
into that of "granularity".
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
22
23. Eliza
GOOD MORNING MY NAME IS GAINES AND I WISH TO
TALK TO YOU
I AM NOT INTERESTED IN NAMES
SORRY PERHAPS YOU COULD LET ME KNOW YOUR
INTERESTS
PLEASE DON’T APOLOGIZE
THANK YOU WHAT INTEREST YOU MOST?
WHY DO YOU ASK?
BECAUSE I HAVE TO DEMONSTRATE YOUR INEFFABLE
CAPABILITIES
IS THAT THE REAL REASON?
YES YOUR CAPABILITIES INTEREST ME
YOU SEEM QUITE POSITIVE
...
(Wizenbaum, 1966)
http://www-ai.ijs.si/eliza/eliza.html
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
23
37. IBM PC (1981)
•
•
•
•
•
Interaction
Low cost standard components
Low cost
MS DOS
Huge commercial success
Command line interface
WEB DESIGN NABA 2014 Roberto DADDA
37
40. Xerox
Star (1981)
Double page WYSIWYGET
Direct manipulation
Desktop metaphor
mouse
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
41
41. WYSIWYG
Same image on
screen and
printed pages
For the first time!
• Square pixels
• Good video resolution (72 dpi)
• Even better printers
(300, 600, 1200 dpi)
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
42
45. Xerox star: the philosophy.
Familiar user’s conceptual model
Seeing and pointing versus remembering and typing
What you see is what you get
Universal commands
Consistency
Simplicity
Modeless interaction
User Tailorability
(Smith et al., Designing the Star User Intreface, 1982)
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
46
47. Mouse and Fitts law
d
t 1,03 0,96 * log 2(
s
0,5)
t Time in second to position mouse
D Distance from object in pixels
S Object dimension in pixels
Constants (1.03 and 0.96) are almost the same of manual movements.
The mouse is a optimal pointing device
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
48
50. Direct Manipulation
• Visibility of Object and Actions
• Rapid, reversible, incremental
actions
• Replacement of complex commandlanguage syntax with direct, visual
manipulation of the object of
interest.
Schneiderman (1983)
Interaction
WEB DESIGN NABA 2014 Roberto DADDA
51