Date post: | 05-Feb-2016 |
Category: |
Documents |
Upload: | wedanurdayat |
View: | 7 times |
Download: | 0 times |
Human-Computer Human-Computer Interaction – OverviewInteraction – Overview
Hanyang University
Jong-Il Park
History of HCI Tech.History of HCI Tech.
Readings Brad A. Myers, ”A brief
history of human-computer interaction technology,” Interactions, Volume 5 Issue 2, March 1998
History of Input/output devicesHistory of Input/output devices
Input Output
Early days connecting wires lights on displaypaper tape & punch cards paperkeyboard teletype
Today keyboard scrolling glass teletype + cursor keys character
terminal + mouse bit-mapped
screen + microphone audio
Soon? data gloves + suits head-mounted displayscomputer jewelry ubiquitous
computingnatural language autonomous
agents
The lesson keyboards & terminals are just artifacts of today’s technologies new input/output devices will change the way we interact with computers
Eniac (1943)Eniac (1943) A general view of the ENIAC, the world's first
all electronic numerical integrator and computer.
From IBM Archives.
Mark I (1944)Mark I (1944) The Mark I paper tape readers.
From Harvard University Cruft Photo Laboratory.
IBM SSEC (1948)IBM SSEC (1948)
From IBM Archives.
Stretch (1961)Stretch (1961) A close-up of the Stretch technical control
panel.
From IBM Archives.
Intellectual and Historical Intellectual and Historical foundations of HCIfoundations of HCI
Vannevar Bush (1945)
“As we may think” article in Atlantic Monthly(Reprinted in Interactions, pp.35-46, March 1996)
Identified the information storage and retrieval problem:new knowledge does not reach the people who could benefit from it
“publication has been extended far beyond our present ability to make real use of the record”
Bush’s MemexBush’s Memex Conceiving Hypertext and the World Wide Web
a device where individuals stores all personal books, records, communications etc
items retrieved rapidly through indexing, keywords, cross references,... can annotate text with margin notes, comments... can construct a trail (a chain of links) through the material and save it acts as an external memory!
Bush’s Memex device based on microfilm records, not computers! but not implemented
mmmm mmmmmmm mmmmmm mmm
mmmm mmmmmmm mmmmmm mmm
mmmm mmmmmmm mmmmmm mmm
mmmm mmmmmmm mm
mmmm mmm
Douglas EngelbartDouglas 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
Douglas EngelbartDouglas Engelbart The Vision (Early 50’s)
…I had the image of sitting at a big CRT screen with all kinds of symbols, new and different symbols, not restricted to our old ones. The computer could be manipulated, and you could be operating all kinds of things to drive the computer
... I also had a clear picture that one's colleagues could be sitting in other rooms with similar work stations, tied to the same computer complex, and could be sharing and working and collaborating very closely. And also the assumption that there'd be a lot of new skills, new ways of thinking that would evolve "
...Doug Engelbart
Douglas EngelbartDouglas Engelbart A Conceptual Framework for Augmenting Human
Intellect (SRI Report, 1962)
"By augmenting man's intellect we mean increasing the capability of a man to approach a complex problem situation, gain comprehension to suit his particular needs, and to derive solutions to problems.
One objective is to develop new techniques, procedures, and systems that will better adapt people's basic information-handling capabilities to the needs, problems, and progress of society."
...Doug Engelbart
J.C.R. Licklider (1960)J.C.R. Licklider (1960)
Outlined “man-computer symbiosis”
“The hope is that, in not too many years, human brains and computing machines will be coupled together very tightly and that the resulting partnership will think as no human brain has ever thought and process data in a way not approached by the information-handling machines we know today.”
J.C.R. Licklider (continued)J.C.R. Licklider (continued) Produced goals that are pre-requisite to “man-computer symbiosis” immediate goals:
time sharing of computers among many users electronic i/o for the display and communication of symbolic and
pictorial information interactive real time system for information processing and
programming large scale information storage and retrieval
intermediate goals: facilitation of human cooperation in the design & programming of
large systems combined speech recognition, hand-printed character recognition &
light-pen editing long term visions:
natural language understanding (syntax, semantics, pragmatics) speech recognition of arbitrary computer users heuristic programming
Direct ManipulationDirect Manipulation
I.Sutherland, Sketchpad(’63) 1st implementation
MIT, Light Handles(’68) 1st widget: graphical potentiometer
D.C.Smith, Pygmalion(’75) Term “icons”
Xerox PARC(in ‘70s) “WYSIWYG”=“What You See Is What You Get” 1st commercial system: Xerox Star(’81)
Ivan Sutherland’s SketchPad Ivan Sutherland’s SketchPad (1963 PhD Thesis)(1963 PhD Thesis)
Sophisticated drawing package introduced many new ideas/concepts now found in today’s interfaces
hierarchical structures defined pictures and sub-pictures object-oriented programming: master picture with instances constraints: specify details which the system maintains through changes icons: small pictures that represented more complex items copying: both pictures and constraints input techniques: efficient use of light pen world coordinates: separation of screen from drawing coordinates recursive operations: applied to children of hierarchical objects
Parallel developments in hardware: “low-cost” graphics terminals input devices such as data tablets (1964) display processors capable of real-time manipulation of images (1968)
MouseMouse
Stanford Research Lab(’64) 1st mouse
Engelbart(’68) Demonstrated 1st mouse of current uses
Xerox PARC, Xerox Star(’81) 1st commercial product
The 1st Mouse [’64 Engelbart]The 1st Mouse [’64 Engelbart]
WindowsWindows
Engelbart (’68) Demonstrated multiple tiled windows
Alan Kay (’69) Idea of overlapping windows Implemented in Smalltalk system at PARC(’74)
Lisp Machine Inc.(’79) 1st commercial uses of windows
Xerox PARC 1st major tiled window manager: Cedar Window
Manager(’81) 1st popular commercial system: Xerox Star(’81)
Text EditingText Editing
Engelbart(’62) Proposed a word processor with
automatic word wrap, search and replace, user-definable macros, scrolling text, various commands…
Stanford, TVEdit(’65) 1st CRT-based display editor
NLS, 1st mouse-based editing(’68) MIT, EMACS(’74) Xerox PARC, Bravo, 1st WYISWYG editor-formatter(’74) Xerox Star, LisaWrite(MacWrite), 1st WYSIWYG
editor(’81)
HyperTextHyperText
Bush, MEMEX(’45) 1st idea of linking documents
Nelson, term “hypertext”(’65) Engelbart’s NLS system(’65)
Extensive use of linking “NLS Journal”, 1st online journals (’70)
Included full linking of articles U.of Vermont, PROMIS(’76)
1st hypertext system released to user community
HyperText(cont’)HyperText(cont’) B. Shneiderman, Hyperties(’83)
Highlighted linked items Apple, HyperCard(’88)
Bring the idea of highlight to wide audience T.Berners-Lee, World Wide Web(’90) NCSA(U.of Illinois), Mosaic
1st popular hypertext browser
Gesture RecognitionGesture Recognition
Teitelman(’64) 1st trainable gesture recognizer
Many light-pen-based systems in ‘60s M.Coleman(CMU, ‘69)
Gesture-based text editor B.Buxton(U. of Toronto, ’80-)
Gesture-based interaction
Drawing ProgramsDrawing Programs I.Sutherland, Sketchpad(’63) Pulfer and Bechthold (’68)
Key-frame animation system using a mouse P.Baudelaire, Draw (’75)
Handling of line and curve D.Shoup(PARC), Superpaint (’74-75)
1st painting program Macintosh, MacPaint and MacDraw (‘84)
1st widely used drawing program
OthersOthers Spreadsheets
VisiCalc: Frankston and Bricklin(’77-78) CAD
D.Ross(MIT), Computer-Aided Design Project (’63) GM’s DAC1, 1st system in industry
Three dimensionality T.Johnson, interactive 3D CAD Sketchpad 3 (’63) L.Roberts, LincolnWand, 3D hidden line elimination(’66) U. of Utah, 3D raster graphics research (late 60s to
early 70s) by Evans, Sutherland, Romney, Gouraud, Phong, Watkins…
Military-industrial flight simulation (60s – 70s), 3D interfaces operate in realtime
Significant Computer Advances Significant Computer Advances from 1960 to 1980from 1960 to 1980
Mid ‘60s computers too expensive for a single person
Time-sharing gives each user the illusion that they are on their own personal
machine led to immediate need to support human-computer interaction
dramatically increased accessibility of machines afforded interactive systems and languages, rather than
“jobs” community as a whole communicated through computer
(and eventually through networks) via email, shared files, etc.
The Personal ComputerThe Personal Computer Alan Kay (1969)
Dynabook vision (and cardboard prototype) of a notebook computer:
“Imagine having your own self-contained knowledge manipulator in a portable package the size and shape of an ordinary notebook. Suppose it had enough power to out-race your senses of sight and hearing, enough capacity to store for later retrieval thousands of page-equivalents of reference materials, poems, letters, recipes, records, drawings, animations, musical scores...”
Ted Nelson 1974: “Computer Lib/Dream Machines” popular book describing what computers can do for
people (instead of business!)
The Personal ComputerThe Personal Computer Xerox PARC, mid-’70s
Alto computer, a personal workstation local processor, bit-mapped display, mouse
modern graphical interfaces text and drawing editing, electronic mail windows, menus, scroll bars, mouse selection, etc
local area networks (Ethernet) for personal workstations
could make use of shared resources
ALTAIR 8800 (1975) Popular electronics article that showed people
how to build a computer for under $400
Commercial machines: Xerox Commercial machines: Xerox Star (1981)Star (1981) First commercial personal computer designed for
“business professionals” First comprehensive GUI used many ideas
developed at Xerox PARC familiar user’s conceptual model (simulated desktop) promoted recognizing/pointing rather than
remembering/typing property sheets to specify appearance/behavior of
objects what you see is what you get (WYSIWYG) small set of generic commands that could be used
throughout the system high degree of consistency and simplicity modeless interaction
Xerox Star (continued)Xerox Star (continued) First system based upon usability engineering
inspired design extensive paper prototyping and usage analysis usability testing with potential users iterative refinement of interface
Commercial failure cost ($15,000);
IBM had just announced a less expensive machine limited functionality
e.g., no spreadsheet closed architecture,
3rd party vendors could not add applications perceived as slow
but really fast! slavish adherence to direct manipulation
Commercial Machines: AppleCommercial Machines: Apple Apple Lisa (1983)
based upon many ideas in the Star; predecessor of Macintosh,
somewhat cheaper ($10,000) commercial failure as well
Apple Macintosh (1984) “old ideas” but well done!
* succeeded because: aggressive pricing ($2500) market now ready for them developer’s toolkit encouraged 3rd party non-Apple
software interface guidelines encouraged consistency between
applications domination in desktop publishing because of affordable
laser printer and excellent graphics
Other events:Other events: MIT Architecture Machine Group and Nicholas Negroponte
(1969-1980+) many innovative inventions, including
wall sized displays use of video disks use of artificial intelligence in interfaces (idea of agents) speech recognition merged with pointing speech production multimedia hypertext ....
ACM SIGCHI (1982) special interest group on computer-human interaction conferences draw between 2000-3000 people
HCI Journals Int J Man Machine Studies (1969) many others since 1982
Recent trendRecent trend 1980s - Interface at the interaction dialogue
level. GUIs spread among the public
1990s - Interface at the work setting networked systems, groupware Keywords: Internet, multimedia
2000s - Interface becomes pervasive RF tags, Bluetooth technology, mobile devices, consumer
electronics, interactive screens, embedded technology
Ubiquitous computing
Summary:Summary:Evolution of HCI ‘interfaces’Evolution of HCI ‘interfaces’
50s - Interface at the hardware level for engineers - switch panels
60-70s - interface at the programming level - COBOL, FORTRAN
70-90s - Interface at the terminal level - command languages
80s - Interface at the interaction dialogue level - GUIs, multimedia
90s - Interface at the work setting - networked systems, groupware
00s - Interface becomes pervasive. Ubiquitous computing
From HCI to Interaction DesignFrom HCI to Interaction Design
Human-computer interaction (HCI) is: “concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them” (ACM SIGCHI, 1992, p.6)
Interaction design (ID) is: “the design of spaces for human communication and interaction”
• Winograd (1997)
Increasingly, more application areas, more technologies and more issues to consider when designing ‘interfaces’
Relationship between ID, HCI Relationship between ID, HCI and other fieldsand other fields
Interdisciplinary fields (e.g HCI, CSCW)
Design practices(e.g. graphic design)
Academicdisciplines(e.g. computer science,psychology)
InteractionDesign
* Evolution of HCI conference in Korea
Eg. Better design(1)Eg. Better design(1)
A B C D
Eg. Better design(2)Eg. Better design(2)
Future of HCI (MR Tech.)Future of HCI (MR Tech.)
Analysis of MR technologies in the movie
“Minority Report”
Technologies Technologies Shown in the “Minority Report”Shown in the “Minority Report” Transparent display Mobile display Interaction using data glove 3D holographic display Holographic storage Interactive hologram Sensing human feeling Visualizing human feeling Real-time newspaper Virtual experience Interactive on-demand advertisement …
MinorityReportMinorityReport
Transparent MediaTransparent Media
MinorityReportMinorityReport
Mobile Transparent DisplayMobile Transparent Display
MinorityReportMinorityReport
Interaction by Gesture(I)Interaction by Gesture(I)
MinorityReportMinorityReport
Interaction by Gesture(II) Interaction by Gesture(II)
MinorityReportMinorityReport
Troubles…Troubles…
MinorityReportMinorityReport
3D Holographic Display3D Holographic Display
MinorityReportMinorityReport
Interactive HolographyInteractive Holography
MinorityReportMinorityReport
Iris RecognitionIris Recognition
MinorityReportMinorityReport
Sensing Human ThinkingSensing Human Thinking
Visualizing human thinking
MinorityReportMinorityReport
Customized AdvertisementCustomized Advertisement
Real-time NewspaperReal-time Newspaper
MinorityReportMinorityReport
Virtual ExperienceVirtual Experience
Future directionFuture direction Ultimate Reality Ultimate Interaction Intelligence
Ubiquitous, pervasive
Human-Machine Symbiosis