Introduction to HCI Research
Last Chance <ul><li>I have five “yes” and five “no” responses.  That means that four of you failed to respond to my multip...
Objectives for this week <ul><li>Today : Get an overview of HCI research </li></ul><ul><ul><li>History and how we got wher...
This week’s deliverables <ul><li>User test result report and highlight video </li></ul><ul><ul><li>Raw notes </li></ul></u...
This week’s deliverables <ul><li>Prioritized change list </li></ul><ul><ul><li>a list of design changes that you </li></ul...
Where is today’s topic coming from?? <ul><li>My goal is that you learn a little more than JUST design. </li></ul><ul><li>Y...
The Reality of UI Design <ul><li>For the most part, outdated processes are still followed </li></ul><ul><ul><li>Waterfall ...
More (positive) reality <ul><li>LoFi prototyping methods  do work   </li></ul><ul><ul><li>The advantages we’ve discussed h...
Why UI design needs HCI research <ul><li>How to gather data to reach decisions / select among alternatives </li></ul><ul><...
HCI Research <ul><li>Invents new technologies, techniques, and methods for creating, implementing, and evaluating interact...
HCI History Ubiquitous Computing   Apple Newton Palm Pilot (Graffiti) Large displays Sensors Wireless Annotated reality Ge...
Vannevar Bush –  “As We May Think” (1945) <ul><li>Visionary paper that introduced many of the themes that have preoccupied...
The Memex (Memory Extender) <ul><li>Based on technologies available in 1945 </li></ul><ul><li>A personal extensible  micro...
More on the technology he envisioned using <ul><li>Mini camera (image capture) </li></ul><ul><li>Microfilm (storage techno...
Significance to HCI <ul><li>A compelling and profound vision: using technology to augment human capabilities to structurin...
Sketchpad <ul><li>Ivan Sutherland, 1963 </li></ul><ul><li>Display and manipulation of graphical objects </li></ul><ul><li>...
Douglas Engelbart <ul><li>The Problem (early ‘50s) </li></ul><ul><ul><li>“ ...The world is getting more complex, and probl...
Douglas Engelbart  <ul><li>The Vision (Early 50’s)   </li></ul><ul><ul><li>… I had the image of sitting at a big CRT scree...
Douglas Engelbart <ul><ul><li>... I also had a clear picture that one's colleagues could be sitting in other rooms with si...
AFIP Fall Joint Conference, 1968 <ul><li>NLS  system </li></ul><ul><li>Document Processing </li></ul><ul><ul><li>modern wo...
Engelbart’s “workstation”                                                                                                 ...
Engelbart’s mouse, 1964
Engelbart’s vision <ul><li>Shared work </li></ul><ul><ul><li>shared files and personal annotations </li></ul></ul><ul><ul>...
Alan Kay’s Vision of a  Personal Computer – 1969 <ul><ul><li>Dynabook vision (and cardboard prototype) of a notebook compu...
Anyone know what the first “desktop” environment was?
Anyone know what the first “desktop” environment was? <ul><li>Xerox PARC </li></ul><ul><li>Alto – mid 1970s </li></ul><ul>...
Desktop Metaphor <ul><li>File Cabinet = The Hard Drive  </li></ul><ul><li>The hard drive (and other kinds of storage media...
Desktop Metaphor <ul><li>Documents = Documents  </li></ul><ul><li>These are files you create and edit.  </li></ul><ul><li>...
Xerox Star Hardware
Keyboard & Mouse
Display
Significance <ul><li>A commercial machine that incorporated features that defined the PC for the next 20 years </li></ul><...
The Star was the first machine based on usability engineering <ul><li>inspired design </li></ul><ul><li>extensive paper pr...
But most of you have never heard of this! <ul><li>But a commercial failure </li></ul><ul><ul><li>cost ($15,000) - IBM had ...
Significance <ul><li>Steve Jobs, Apple Co-founder </li></ul><ul><li>&quot;And they showed me really three things. But I wa...
Significance <ul><li>“…  I was so blinded by the first thing they showed me which was the graphical user interface. I thou...
Commercial Success: Apple <ul><li>Apple Lisa (1983) </li></ul><ul><ul><ul><li>based upon many ideas in the Star </li></ul>...
Why did the Mac succeed? <ul><li>aggressive pricing ($2500) </li></ul><ul><li>did not need to blaze a trail </li></ul><ul>...
Upcoming SlideShare
Loading in...5
×

Introduction to HCI

432

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
432
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Introduction to HCI

  1. 1. Introduction to HCI Research
  2. 2. Last Chance <ul><li>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 </li></ul><ul><li>Unless I hear something still today, I will reserve the smaller vehicle tomorrow. </li></ul>
  3. 3. Objectives for this week <ul><li>Today : Get an overview of HCI research </li></ul><ul><ul><li>History and how we got where we are today </li></ul></ul><ul><li>Wed: Look at one research area in some detail: designing information spaces for the web </li></ul><ul><li>Friday : Studio on user test results and TWO separately graded deliverables </li></ul>
  4. 4. This week’s deliverables <ul><li>User test result report and highlight video </li></ul><ul><ul><li>Raw notes </li></ul></ul><ul><ul><li>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) </li></ul></ul><ul><ul><li>An overall list of usability problems discovered with possible solutions </li></ul></ul><ul><ul><li>Other information discovered during user testing </li></ul></ul><ul><ul><li>Video highlighting both the good and the bad (3-5 minutes) </li></ul></ul>
  5. 5. This week’s deliverables <ul><li>Prioritized change list </li></ul><ul><ul><li>a list of design changes that you </li></ul></ul><ul><ul><ul><li>have made (since the first prototype) </li></ul></ul></ul><ul><ul><ul><li>would like to make based on what you are learning </li></ul></ul></ul><ul><ul><li>prioritize the list and label each item with: </li></ul></ul><ul><ul><ul><li>importance rating (critical, medium, low) </li></ul></ul></ul><ul><ul><ul><li>difficulty rating. (hard, medium, easy). </li></ul></ul></ul><ul><ul><li>Also might include a list of things you really would LIKE to make but know that you won’t make </li></ul></ul>
  6. 6. Where is today’s topic coming from?? <ul><li>My goal is that you learn a little more than JUST design. </li></ul><ul><li>You should learn a little more about the field that has “created/influenced” these design processes. </li></ul>
  7. 7. The Reality of UI Design <ul><li>For the most part, outdated processes are still followed </li></ul><ul><ul><li>Waterfall model </li></ul></ul><ul><li>Unproductive divisions still common </li></ul><ul><li>User-centered design often ignored </li></ul><ul><li>Politics a big issue </li></ul><ul><ul><li>Management must believe in user-centered design, or it won’t happen… </li></ul></ul><ul><ul><li>Even if there are clear “usability disasters” </li></ul></ul>
  8. 8. More (positive) reality <ul><li>LoFi prototyping methods do work </li></ul><ul><ul><li>The advantages we’ve discussed have been shown in formal research </li></ul></ul><ul><ul><li>The challenge is to get engineers to accept them </li></ul></ul><ul><li>Designers must be able to make their case </li></ul><ul><ul><li>Methods to reach decisions, not just argue based on personal opinions and taste </li></ul></ul>
  9. 9. Why UI design needs HCI research <ul><li>How to gather data to reach decisions / select among alternatives </li></ul><ul><li>How to analyze and interpret data </li></ul><ul><li>Awareness of what’s been tried, what works, and what doesn’t gives you a big advantage in designing new features for your product </li></ul>
  10. 10. HCI Research <ul><li>Invents new technologies, techniques, and methods for creating, implementing, and evaluating interactive systems and devices </li></ul><ul><li>Creates novel applications of new technologies and techniques; subjects them to rigorous evaluation </li></ul><ul><li>Studies people’s individual and group behavior in relevant contexts </li></ul>
  11. 11. HCI History Ubiquitous Computing Apple Newton Palm Pilot (Graffiti) Large displays Sensors Wireless Annotated reality Gesture recognition Speech recognition Ubicomp 1990s … 1980s 1970s 1960s 1940s Design and Evaluation Methods Virtual Reality Collaborative filtering Social navigation Cell phones Online communities Instant messaging Blogs WWW Search engines MS Windows VisiCalc/Spreadsheets Professional coalescence User-centered design GOMS MUDs Many research prototypes Apple Macintosh Internet Usenet Xerox Star Bitmapped displays Direct Manipulation Desktop metaphor Office productivity Engelbart/NLS Email Dynabook Xanadu Engelbart/NLS SketchPad Mouse Bush: As We May Think Misc. CMC Hypertext Desktop/DM
  12. 12. Vannevar Bush – “As We May Think” (1945) <ul><li>Visionary paper that introduced many of the themes that have preoccupied the field of HCI </li></ul><ul><li>The goal was to make information more accessible, specifically to educated professionals </li></ul><ul><li>http://www.theatlantic.com/unbound/ flashbks/computer/bushf.htm </li></ul>
  13. 13. The Memex (Memory Extender) <ul><li>Based on technologies available in 1945 </li></ul><ul><li>A personal extensible microfilm library </li></ul><ul><li>Users can add pictures, annotations etc into the library </li></ul><ul><li>User can build a trail by associating documents </li></ul><ul><li>Trails can be shared </li></ul>
  14. 14. More on the technology he envisioned using <ul><li>Mini camera (image capture) </li></ul><ul><li>Microfilm (storage technology) </li></ul><ul><li>Dry photography (printing technology) </li></ul><ul><li>Vocoder running stenotype </li></ul><ul><li>Advance arithmetical computational device </li></ul><ul><li>Note: this was the infancy of the digital computer, and he did not consider it </li></ul>
  15. 15. Significance to HCI <ul><li>A compelling and profound vision: using technology to augment human capabilities to structuring and retrieving information. </li></ul><ul><li>Inspired all the seminal systems in the field </li></ul><ul><ul><li>Ivan Sutherland (SketchPad) </li></ul></ul><ul><ul><li>Douglas Engelbart (NLS) </li></ul></ul><ul><ul><li>Ted Nelson (Hypertext) </li></ul></ul><ul><ul><li>Alan Kay (The Reactive Engine) </li></ul></ul><ul><li>Again gained currency in the 1990s </li></ul><ul><ul><li>Social navigation </li></ul></ul>
  16. 16. Sketchpad <ul><li>Ivan Sutherland, 1963 </li></ul><ul><li>Display and manipulation of graphical objects </li></ul><ul><li>Operations: grab, move, resize, … </li></ul><ul><li>Enabled by hardware developments </li></ul><ul><ul><li>“ low-cost” graphics terminals </li></ul></ul><ul><ul><li>input devices such as light pens and data tablets </li></ul></ul><ul><ul><li>display processors capable of real-time manipulation of images </li></ul></ul>
  17. 17. Douglas Engelbart <ul><li>The Problem (early ‘50s) </li></ul><ul><ul><li>“ ...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. </li></ul></ul><ul><ul><li>If you could do something to improve human capability to deal with these problems, then you'd really contribute something basic.” </li></ul></ul>
  18. 18. Douglas Engelbart <ul><li>The Vision (Early 50’s) </li></ul><ul><ul><li>… 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 </li></ul></ul>
  19. 19. Douglas Engelbart <ul><ul><li>... 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.&quot; </li></ul></ul><ul><ul><li> ...Doug Engelbart </li></ul></ul>
  20. 20. AFIP Fall Joint Conference, 1968 <ul><li>NLS system </li></ul><ul><li>Document Processing </li></ul><ul><ul><li>modern word processing </li></ul></ul><ul><ul><li>outline processing </li></ul></ul><ul><ul><li>hypermedia </li></ul></ul><ul><li>Input / Output </li></ul><ul><ul><li>the mouse and one-handed chorded keyboard </li></ul></ul><ul><ul><li>high resolution displays </li></ul></ul><ul><ul><li>multiple windows </li></ul></ul><ul><ul><li>specially designed furniture </li></ul></ul>
  21. 21. Engelbart’s “workstation”                                                                                                                                                   
  22. 22. Engelbart’s mouse, 1964
  23. 23. Engelbart’s vision <ul><li>Shared work </li></ul><ul><ul><li>shared files and personal annotations </li></ul></ul><ul><ul><li>electronic messaging </li></ul></ul><ul><ul><li>shared displays with multiple pointers </li></ul></ul><ul><ul><li>audio/video conferencing </li></ul></ul><ul><ul><li>ideas of an Internet </li></ul></ul>
  24. 24. Alan Kay’s Vision of a Personal Computer – 1969 <ul><ul><li>Dynabook vision (and cardboard prototype) of a notebook computer: </li></ul></ul><ul><ul><li>“ 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...” </li></ul></ul>
  25. 25. Anyone know what the first “desktop” environment was?
  26. 26. Anyone know what the first “desktop” environment was? <ul><li>Xerox PARC </li></ul><ul><li>Alto – mid 1970s </li></ul><ul><li>Star – 1981 </li></ul>
  27. 27. Desktop Metaphor <ul><li>File Cabinet = The Hard Drive </li></ul><ul><li>The hard drive (and other kinds of storage media like floppy disks) store files and folder. </li></ul><ul><li>Folders = Folders </li></ul><ul><li>Folders (also known as directories or sub-directories) allow you to organized files and other folders. </li></ul>
  28. 28. Desktop Metaphor <ul><li>Documents = Documents </li></ul><ul><li>These are files you create and edit. </li></ul><ul><li>Trash or Recycle Bin =Trash </li></ul><ul><li>This is where you put files and folders that you want to delete or get rid of. </li></ul>
  29. 29. Xerox Star Hardware
  30. 30. Keyboard & Mouse
  31. 31. Display
  32. 32. Significance <ul><li>A commercial machine that incorporated features that defined the PC for the next 20 years </li></ul><ul><ul><li>Direct manipulation </li></ul></ul><ul><ul><li>Desktop metaphor… the very idea of using a metaphor </li></ul></ul><ul><ul><li>WYSIWYG </li></ul></ul><ul><ul><li>Icons </li></ul></ul><ul><ul><li>Dialog boxes </li></ul></ul><ul><ul><li>Windows </li></ul></ul><ul><ul><li>Mouse </li></ul></ul><ul><ul><li>Bitmapped displays </li></ul></ul><ul><ul><li>Local hard disk </li></ul></ul><ul><ul><li>Network connectivity </li></ul></ul>
  33. 33. The Star was the first machine based on usability engineering <ul><li>inspired design </li></ul><ul><li>extensive paper prototyping and usage analysis </li></ul><ul><li>usability testing with potential users </li></ul><ul><li>iterative refinement of interface </li></ul>
  34. 34. But most of you have never heard of this! <ul><li>But a commercial failure </li></ul><ul><ul><li>cost ($15,000) - IBM had just announced a less expensive machine </li></ul></ul><ul><ul><li>limited functionality, e.g., no spreadsheet </li></ul></ul><ul><ul><li>closed architecture: 3rd party vendors could not add applications </li></ul></ul><ul><ul><li>perceived as slow </li></ul></ul><ul><ul><li>over reliance on direct manipulation </li></ul></ul>
  35. 35. Significance <ul><li>Steve Jobs, Apple Co-founder </li></ul><ul><li>&quot;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…. “ </li></ul>
  36. 36. Significance <ul><li>“… 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.&quot; </li></ul>
  37. 37. Commercial Success: Apple <ul><li>Apple Lisa (1983) </li></ul><ul><ul><ul><li>based upon many ideas in the Star </li></ul></ul></ul><ul><ul><ul><li>predecessor of Macintosh </li></ul></ul></ul><ul><ul><ul><li>somewhat cheaper ($10,000) </li></ul></ul></ul><ul><ul><ul><li>commercial failure as well </li></ul></ul></ul><ul><li>Apple Macintosh (1984) </li></ul><ul><ul><ul><li>“old ideas” but well done! </li></ul></ul></ul>
  38. 38. Why did the Mac succeed? <ul><li>aggressive pricing ($2500) </li></ul><ul><li>did not need to blaze a trail </li></ul><ul><ul><li>learnt from mistakes of Lisa and corrected them; ideas now “mature” </li></ul></ul><ul><ul><li>market now ready </li></ul></ul><ul><li>developer’s toolkit encouraged 3rd party non-Apple software </li></ul><ul><li>interface guidelines encouraged consistency between applications </li></ul><ul><li>domination in desktop publishing because of affordable laser printer and excellent graphics </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×