Introduction to HCI Research

1
Introduction to HCI Research
2
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.

3
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

4
This weeks 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)

5
This weeks 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 wont make

6
Where is todays 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.

7
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 wont happen
• Even if there are clear usability disasters

8
More (positive) reality

• LoFi prototyping methods do work
• The advantages weve 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

9
Why UI design needs HCI research

• How to gather data to reach decisions / select
  among alternatives
• How to analyze and interpret data
• Awareness of whats been tried, what works, and
  what doesnt gives you a big advantage in
  designing new features for your product

10
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 peoples individual and group behavior in
  relevant contexts

11
HCI History
12
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

13
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

14
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

15
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

16
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

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

18
Douglas Engelbart

• The Vision (Early 50s)
• 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

19
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

20
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

21
Engelbarts workstation
22
Engelbarts mouse, 1964
23
Engelbarts vision

• Shared work
• shared files and personal annotations
• electronic messaging
• shared displays with multiple pointers
• audio/video conferencing
• ideas of an Internet

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

25
Anyone know what the first desktop environment
was?
26
Anyone know what the first desktop environment
was?

• Xerox PARC
• Alto mid 1970s
• Star 1981

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

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

29
Xerox Star Hardware
30
Keyboard Mouse
31
Display
32
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

33
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

34
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

35
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 email etc., etc., I didn't
  even see that.

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

37
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!

38
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
• developers 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