1 / 25

Principles of HCI Design

Principles of HCI Design. CS774 Human-Computer Interaction Spring 2004. HCI Design Principles. Design involves choices Big choices - primary interaction styles Little choices - button label, color, position HCI design is art, not science No algorithm to make choices for you

milly
Download Presentation

Principles of HCI Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Principles of HCI Design CS774 Human-Computer Interaction Spring 2004

  2. HCI Design Principles • Design involves choices • Big choices - primary interaction styles • Little choices - button label, color, position • HCI design is art, not science • No algorithm to make choices for you • Principles help make choices • Heuristics -- rule of thumb, wise guess • etymology:from Greek heuriskein to discover, to find CS774 HCI Spring 2004

  3. Proliferation of Principles • Shneiderman - 3 principles, 8 golden rules • Norman - 7 principles • Borenstein - 10 commandments • Mandel - 3 golden rules • Johnson (GUI Bloopers) - 9 principles, 82 bloopers and rules to prevent them • How to learn what everyone has to say? CS774 HCI Spring 2004

  4. What have we learned so far? • Knowledge in the world • Books, notes, bookmarks - organize the world • Magic number 7 • Keep the number in mind small • Learn • Accommodate/assimilate/habituate • Mnemonics • Use patterns, mental images, to organize your mind CS774 HCI Spring 2004

  5. Principles vs. Guidelines • General Principles • Applicable to many interface systems • Big and small designs • Verified by research experience • Widget Guidelines • Designed for specific GUI systems • Gives grammar and vocabulary for interface • Mostly for smaller decisions • Apple, Windows, Java guidelines CS774 HCI Spring 2004

  6. Process vs. Usability • Process principles • Such as make prototypes, involve user, etc. • Focuses on what you do • Usability principles • Such as provide feedback, be consistent, etc. • Focuses on what you create • Good for evaluation of interface CS774 HCI Spring 2004

  7. Chapter 2 Principles • Principle 1: Recognize the diversity • Characterize users, tasks and interaction styles • Foreshadows rest of book - will get back to • Principle 2: Use the Eight Golden Rules • Will do now • Principle 3: Prevent Errors • Your homework CS774 HCI Spring 2004

  8. 1. Strive for Consistency • Make the elements of your interface consistent. • What elements? • Consistent with what? CS774 HCI Spring 2004

  9. Consistency • With what? • Within your own program? • With other programs? • With the user’s experience in the world? • What elements? • Actions • Widgets • Data CS774 HCI Spring 2004

  10. 2. Enable shortcuts • Let the interface grow with the user • How? CS774 HCI Spring 2004

  11. Shortcut options • Keyboard short cuts • Toolbars • Re-configurable menus and toolbars • Alternative representations CS774 HCI Spring 2004

  12. A counter opinion • Jeff Raskin • One button mouse • Monotonous interfaces - only one way to do X • Multiple options can result from • Legacy options • Management indecision (oh, include them all) • Myth of beginner/expert users • Current GUIs mix of two inferior interfaces • Inefficient menu system + incomplete keyboard system CS774 HCI Spring 2004

  13. 3. Offer informative feedback • Let the user know what happened • How? CS774 HCI Spring 2004

  14. Feedback • Responsiveness • Do it quickly • If it’s going to be a while, tell the user • Use watch cursors, progress bars • When? What is a complete action to report on? • How? • Change appearance of object (WYSIWYG) • Dialog boxes • Status of interface (grey out menu items, highlight, etc) CS774 HCI Spring 2004

  15. 4. Design for closure • Let the user know the task is done • How? CS774 HCI Spring 2004

  16. Computers as Theatre • Brenda Laurel - started as game designer • Computer Screen as stage on which we enact scripts • Think of interface in terms of • Narrative flow - beginning, middle, end • Actors/Agents - who saved your file? Who gave you the error message? • Stage with actors carrying out an action CS774 HCI Spring 2004

  17. 5. Offer error prevention • Design the system to prevent errors • How? CS774 HCI Spring 2004

  18. Avoid errors - control input • Grey out inappropriate commands • Forcing functions • Control field input • No letters innumber field • Know causes/frequency CS774 HCI Spring 2004

  19. Responding to errors • Error messages should be in user’s language • Actions should be clear • Avoid guessing user intent • PL/I and parens • Do nothing (???) CS774 HCI Spring 2004

  20. 6. Permit easy reversal • Let the user undo actions • How and why? CS774 HCI Spring 2004

  21. Easy undos • Allow the user to feel safe • Less risk of damaging data • (Why is data ever damaged? Why not retain everything? Problem of the Mac trash can.) • Correct errors • Allow experimentation • How • Revert to saved, undo (how long? What is a single action?), automatic backup files CS774 HCI Spring 2004

  22. 7. Support internal locus of control • Keep the user in control • How? CS774 HCI Spring 2004

  23. User in control • Avoid modal dialogs (with Java threads!) • Avoid long guided sequences • Be permissive • Provide exits • Cancel, undo,interrupt, quit CS774 HCI Spring 2004

  24. 8. Reduce short-term memory load • Magic number 7+/-2 • How do we manage this? CS774 HCI Spring 2004

  25. Reducing memory load • Rely on recognition, not memory (see and point) • Provide cues (affordances, toolbars, menus) • Visual clarity (Greek temple, not strip mall) • Progressive disclosure (hide advanced stuff) CS774 HCI Spring 2004

More Related