1. Introduction to HCI Research

2. “For Fun”
Predict when you think each of the following things was “invented”
The personal/”desktop” computer
Graphical “drag and drop” displays
Hyper-text (links in text)
Mouse
Networks of related documents
Real-time manipulation of images
“Windows” like display

3. Introducing HCI
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.

4. 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”

5. 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

6. 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

7. 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

8. HCI History Desktop/DM Hypertext CMC Ubicomp Misc. 1940s 1960s 1970s
Bush: As We May Think
1960s
SketchPad
Mouse
Xanadu
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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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.”

15. 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

16. 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

17. AFIP Fall Joint Conference, 1968
NLS system
Document Processing
modern word processing
outline processing
hypermedia
Input / Output
the mouse and one-handed chorded keyboard
high resolution displays
multiple windows
specially designed furniture

18. Engelbart’s “workstation”
                                                                                                                                                 

19. Engelbart’s mouse, 1964

20. Engelbart’s vision Shared work shared files and personal annotations
electronic messaging
shared displays with multiple pointers
audio/video conferencing
ideas of an Internet

21. 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...”

22. Anyone know what the first “desktop” environment was?

23. Anyone know what the first “desktop” environment was?
Xerox PARC
Alto – mid 1970s
Star – 1981

24. 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.

25. 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.

26. Xerox Star Hardware

27. Keyboard & Mouse

28. Display

29. Significance
A commercial machine that incorporated features that defined the PC for the next 25 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

30. 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

31. 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

32. Significance
Steve 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 etc., etc., I didn't even see that…. “

33. 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."

34. 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!

35. 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

36. The next generation of Screen based “Touch” Interfaces
BumpTop Interfaces
Jeff Han’s “Multi-touch” Computer Screens

37. Tangible User Interfaces
Make “ordinary” physical objects computational input/output devices

38. Media Blocks Ullmer & Ishii, MIT Media Lab
Based on small, electronically tagged wooden blocks
Physical icons ("phicons") for the containment, transport, and manipulation of online media
Media Blocks interface with media input and output devices such as video cameras and projectors, allowing digital media to be rapidly "copied" from a media source and "pasted" into a media display
Media Blocks are compatible with traditional GUIs, providing seamless gateways between tangible and graphical interfaces
Media Blocks act as physical controls for tasks such as sequencing collections of media elements.

39. Media Blocks

40. Senseboard Jacob et al, Tufts University and MIT Media Lab
Use tangible media to manipulate abstract information
Small magnetic “pucks” (with RFIDs) represent pieces of information to be organized, such as a message, file, bookmark, citation, presentation slide, movie scene, or newspaper story
Users arrange pucks on a grid on a special whiteboard
Physical manipulations correspond to digital operations
Supports organizing tasks

41. Senseboard

42. Senseboard