introduction to hci
TRANSCRIPT
Introduction to HCI Research
Last Chance
• I have five “yes” and five “no” responses. That means that four of you failed to respond to my multiple requests for an RSVP for the ISU trip
• Unless I hear something still today, I will reserve the smaller vehicle tomorrow.
Objectives for this week
• Today : Get an overview of HCI research– History and how we got where we are today
• Wed: Look at one research area in some detail: designing information spaces for the web
• Friday : Studio on user test results and TWO separately graded deliverables
This week’s deliverables
• User test result report and highlight video– Raw notes– A (1 page) report regarding each user test session (how
did it go, what you learned, where you deviated from the plans, and how you would do it differently next time)
– An overall list of usability problems discovered with possible solutions
– Other information discovered during user testing – Video highlighting both the good and the bad (3-5
minutes)
This week’s deliverables
• Prioritized change list– a list of design changes that you
• have made (since the first prototype)• would like to make based on what you are learning
– prioritize the list and label each item with:• importance rating (critical, medium, low)• difficulty rating. (hard, medium, easy).
– Also might include a list of things you really would LIKE to make but know that you won’t make
Where is today’s topic coming from??
• My goal is that you learn a little more than JUST design.
• You should learn a little more about the field that has “created/influenced” these design processes.
The Reality of UI Design
• For the most part, outdated processes are still followed– Waterfall model
• Unproductive divisions still common• User-centered design often ignored• Politics a big issue
– Management must believe in user-centered design, or it won’t happen…
– Even if there are clear “usability disasters”
More (positive) reality
• LoFi prototyping methods do work – The advantages we’ve discussed have been
shown in formal research– The challenge is to get engineers to accept them
• Designers must be able to make their case– Methods to reach decisions, not just argue
based on personal opinions and taste
Why UI design needs HCI research
• How to gather data to reach decisions / select among alternatives
• How to analyze and interpret data
• Awareness of what’s been tried, what works, and what doesn’t gives you a big advantage in designing new features for your product
HCI Research
• Invents new technologies, techniques, and methods for creating, implementing, and evaluating interactive systems and devices
• Creates novel applications of new technologies and techniques; subjects them to rigorous evaluation
• Studies people’s individual and group behavior in relevant contexts
HCI HistoryDesktop/DM Hypertext CMC Ubicomp Misc.
1940s Bush: As We May Think
1960s SketchPad
Mouse
Xanadu
Engelbart/NLS
Engelbart/NLS
Dynabook
1970s Xerox Star
Bitmapped displays
Direct Manipulation
Desktop metaphor
Office productivity
Internet
Usenet
1980s Apple Macintosh Many research prototypes
MUDs
Gesture recognition
Speech recognition
VisiCalc/Spreadsheets
Professional coalescence
User-centered design
GOMS
1990s …
MS Windows WWW
Search engines
Cell phones
Online communities
Instant messaging
Blogs
Ubiquitous Computing
Apple Newton
Palm Pilot (Graffiti)
Large displays
Sensors
Wireless
Annotated reality
Design and Evaluation Methods
Virtual Reality
Collaborative filtering
Social navigation
Vannevar Bush – “As We May Think” (1945)
• Visionary paper that introduced many of the themes that have preoccupied the field of HCI
• The goal was to make information more accessible, specifically to educated professionals
• http://www.theatlantic.com/unbound/ flashbks/computer/bushf.htm
The Memex (Memory Extender)
• Based on technologies available in 1945
• A personal extensible microfilm library
• Users can add pictures, annotations etc into the library
• User can build a trail by associating documents
• Trails can be shared
More on the technology he envisioned using
• Mini camera (image capture)• Microfilm (storage technology)• Dry photography (printing technology)• Vocoder running stenotype• Advance arithmetical computational device• Note: this was the infancy of the digital
computer, and he did not consider it
Significance to HCI
• A compelling and profound vision: using technology to augment human capabilities to structuring and retrieving information.
• Inspired all the seminal systems in the field– Ivan Sutherland (SketchPad)– Douglas Engelbart (NLS)– Ted Nelson (Hypertext) – Alan Kay (The Reactive Engine)
• Again gained currency in the 1990s– Social navigation
Sketchpad
• Ivan Sutherland, 1963• Display and manipulation of graphical objects• Operations: grab, move, resize, …• Enabled by hardware developments
– “low-cost” graphics terminals
– input devices such as light pens and data tablets
– display processors capable of real-time manipulation of images
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.”
Douglas 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
Douglas Engelbart... 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
AFIP Fall Joint Conference, 1968AFIP Fall Joint Conference, 1968NLSNLS system systemDocument ProcessingDocument Processing
– modern word processingmodern word processing
– outline processingoutline processing
– hypermediahypermedia
Input / OutputInput / Output– the mouse and one-handed the mouse and one-handed
chorded keyboardchorded keyboard
– high resolution displayshigh resolution displays
– multiple windowsmultiple windows
– specially designed furniturespecially designed furniture
Engelbart’s “workstation”
Engelbart’s mouse, 1964
Engelbart’s visionEngelbart’s visionShared workShared work
– shared files and personal annotationsshared files and personal annotations
– electronic messagingelectronic messaging
– shared displays with multiple pointersshared displays with multiple pointers
– audio/video conferencingaudio/video conferencing
– ideas of an Internetideas of an Internet
Alan Kay’s Vision of a Personal Computer – 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...”
Anyone know what the first “desktop” environment was?
Anyone know what the first “desktop” environment was?
Xerox PARC•Alto – mid 1970s
•Star – 1981
Desktop Metaphor
• File Cabinet = The Hard Drive
The hard drive (and other kinds of storage media like floppy disks) store files and folder.
• Folders = Folders
Folders (also known as directories or sub-directories) allow you to organized files and other folders.
Desktop Metaphor
• Documents = Documents
These are files you create and edit.
• Trash or Recycle Bin =Trash
This is where you put files and folders that you want to delete or get rid of.
Xerox Star Hardware
Keyboard & Mouse
Display
Significance• A commercial machine that incorporated features that
defined the PC for the next 20 years– Direct manipulation– Desktop metaphor… the very idea of using a metaphor– WYSIWYG– Icons– Dialog boxes– Windows– Mouse– Bitmapped displays– Local hard disk– Network connectivity
The Star was the first machine based on usability engineering
• inspired design
• extensive paper prototyping and usage analysis
• usability testing with potential users
• iterative refinement of interface
But most of you have never heard of this!
• But a 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 – over reliance on direct manipulation
SignificanceSteve Jobs, Apple Co-founder
"And they showed me really three things. But I was so blinded by the first one I didn't even really see the other two. One of the things they showed me was object orienting programming they showed me that but I didn't even see that. The other one they showed me was a networked computer system...they had over a hundred Alto computers all networked using email etc., etc., I didn't even see that…. “
Significance“… I was so blinded by the first thing they
showed me which was the graphical user interface. I thought it was the best thing I'd ever seen in my life. Now remember it was very flawed, what we saw was incomplete, they'd done a bunch of things wrong. But we didn't know that at the time but still though they had the germ of the idea was there and they'd done it very well and within you know ten minutes it was obvious to me that all computers would work like this some day."
Commercial Success: 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!
Why did the Mac succeed?• aggressive pricing ($2500)• did not need to blaze a trail
– learnt from mistakes of Lisa and corrected them; ideas now “mature”
– market now ready
• 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