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

Email

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