1 / 76

Usability

Usability. Graphical Communication 2001 John Nerbonne and Erik van den Hout Nerbonne@let.rug.nl. Usability Overview. Introduction History Theory Computer User Interfaces World Wide Web Assignment Accompanying Website. Introduction. Computers “explain themselves” visually

teigra
Download Presentation

Usability

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. Usability Graphical Communication 2001 John Nerbonne and Erik van den Hout Nerbonne@let.rug.nl

  2. Usability Overview • Introduction • History • Theory • Computer User Interfaces • World Wide Web • Assignment • Accompanying Website

  3. Introduction • Computers “explain themselves” visually • group items in “windows”, mnemonic icons • tool bars, menus, balloon help, scroll bars, “highlighting” (color, motion) • Extremely complex machinery • Freedom in presenting complexity • Differences in clarity, ease of understanding

  4. Motivation • Everyday machines much more complex • cars, video recorders, mobile phones, PC’s, ... • Some people never use complex machines • 10% Dutch can’t use ATM • Most people can’t program video recorder • Even technical people have gaps • Kenneth Olsen, engineer & DEC founder, couldn’t use a microwave (in D.Norman’s Psychology of Everyday Things)

  5. Myths of Interface Design line • Maximal functionality -- “anything goes” • text editors that allow letters • Minimal Functionality -- just what’s needed • but simplified products don’t sell • LetterPerfect (simplified WordPerfect), Microsoft Writer • Philips “Easy Line” radios, TV’s, video recorders • Wysiwyg “What you see is what you get” best • problems: (i) nondocuments; (ii) documents graphics for diff. media? • “Do what I mean, not what I say.” • example problem: overeager spell-checkers off

  6. Anything goes Minimalism WYSIWYG superiority “Do what I mean” Focus on Task Accommodate Range of Users Accommodate Technical Needs User-Controller Interface Functions Overcoming Myths

  7. Usability:Shared Responsibility • Interface “layers”, e.g., Website • Operating system: MS-Windows, iMac, Unix • Browser: Netscape, Opera, Internet Explorer, Mozilla, Konqueror • Site interface: Navigation, design • Inconsistency is confusing to users

  8. History: Usability before computers Shape of handle, direction of sharp edge indicate proper use Carelman: Coffeepot for Masochists

  9. Different Layers of Interaction • Operating System Interface • Application Interface • Website Interface

  10. User Interface Focal Points • Issues • Purpose • Audience • Media • Many disciplines involved • Graphical Communication principles apply! • Screen presents information in two dim.

  11. Presentation Topics • History of usability • Theory of usability: • Norman • Shneidermann • Nardi • Dix • Usability outside ICT

  12. Usability Overview • Introduction • History • Theory • Computer User Interfaces • World Wide Web • Assignment • Accompanying Website

  13. Early Usability • Lucy Suchman filmed dozens of hours of use of Xerox copiers in 1970’s • complex machines allow magnification, reduction, two-sided copying, collation • most users couldn’t operate machines easily • most uses involved single copies of 1-2 pp. • Solution: “green button” • Lesson: analyze task, frequency

  14. Research Terminology • Human Factors (US) • Cognitive Ergonomics (Europe) • Human-Computer Interaction • Usability

  15. Usability Principles • Design: • with the user in mind • with the user’s usage in mind • to make errors hard, if not impossible • to provide proper feedback • Logical but not obvious

  16. Why Usability as CS Research? • Early computer users were the programmers themselves • Aware of illogical design • Aware of cause of misbehaviour by application • Nowadays computer programmers are hardly ever the intended users • Illogical design cannot be explained • Misbehaviour cannot be explained

  17. Usability Focus • Intuitive interface • User does not care about programming issues • Usability Expert ensures • Program purpose, status clear • User is guided through application • User is given proper feedback • Consistency with co-operating interfaces • …

  18. Usability Overview • Introduction • History • Theory • Computer User Interfaces • World Wide Web • Assignment • Accompanying Website

  19. Usability Theory • Theory presented is based on Norman • Affordances • Mental and Conceptual Models • Natural Mapping • Direct Manipulation • User Centered Design

  20. Donald A. Norman • Design of Everyday Things • Focus on making design simple and easy to use • Obvious, but hard to accomplish • Personal Homepage: http://www.jnd.org/

  21. Norman’s Homepage

  22. Affordances Oxford Advanced Learner’s Dictionary: afford … 3. provide sth; give sth. Affordances are the actions an object is obviously suited for. Handle: grabbing, pulling Switch: toggling on and off Dial: turning

  23. Incorrect Affordances • An object gives wrong information on proper action • Doors: sign telling you to pull will not work if a handle is designed improperly • Remember: users tends to blame themselves even though the design is flawed

  24. Mental Models • Experience of users • Culturally determined • ‘Model of the world’ • Design in line with mental model makes errors less likely to occur

  25. Mental Models • Excel suggests a clear model • accountants’ ledgers • Internal complexity hidden • Immediately popular • Word Processors -- Paper Document

  26. Conceptual Models • Model of object’s behaviour • Based on mental model • User infers conceptual model from design! • Goal: keep this inference easy, exploit prior mental models • Example: thermostat

  27. Natural Mapping • Mapping is association • Design to make associations ‘natural’ • files in “trash can” will be discarded • Culturally biased • Western world: red is stop • China (communist): red is go

  28. “Direct” Manipulation • Action on object itself • fix temperature of gas burners vs. electrical coils • Programs • Moving window via x,y coordinates vs. dragging • Dragging, then dropping a file into trash can • Activating a program by pressing a button • Combining Natural Mapping and Direct Manipulation improves ease of use • but not easy -- consider search engine interfaces

  29. User-Centered Design • Standardise, but provide aids • Provide feedback to visualise the invisible • Automate but keep task the same • Do not over-automate! • Change task’s nature • Simplification • Breaking up complex tasks

  30. Usability Overview • Introduction • History • Theory • Computer User Interfaces • World Wide Web • Assignment • Accompanying Website

  31. Computer User Interfaces • Different layers • Operating System • Graphical User Interface of Operating System • Graphical User Interface of Application • Why so many Layers?

  32. Early Computer Interfaces • Text based due to technology • Complex ‘vocabulary’ • rm: unix command to remove a file • CTRL+K CTRL+B: make text bold in a text-based word processing application • Learning commands difficult • Once learned, quick to apply

  33. Apple • Introduction of first widespread Graphical User Interface • Use of direct manipulation • Intuitive to learn

  34. Apple II GUI • Black and White • Standardised • Click to “open” • start a program (.exe) • start appropriate program for data file (.doc, .ppt, etc.) • view directory contents • Drag to move • Trash to remove • Files, Floppies !

  35. Apple iMac GUI • Colour GUI • Concepts stayed the same! • Click to “open” • Drag to move • Trash to remove • File • Floppies • CDs • …

  36. Apple’s Direct Manipulation • Only GUI exists • OS is invisible except through GUI • No cryptic commands • Standardised to keep things consistent • All tasks available through GUI

  37. X-Windows • GUI application on top of UNIX OS • Not one GUI: • Sun Solaris • Motif and derivatives • GNOME and KDE • Command-based actions still required • Terminal Window • Cryptic commands (grep, less, cut, ls,…)

  38. Sun Solaris

  39. Motif

  40. FVWM & FVWM 95

  41. GNOME and KDE

  42. Microsoft • Based on MS-DOS • First MS-Windows version similar to X-Windows: • OS = MS-DOS • MS-Windows = MS-DOS application • MS-DOS more and more hidden • Still requires ‘DOS-box’ for some commands

  43. MS Windows 3.1

  44. Windows 95

  45. Windows NT 3.51

  46. Windows NT 4

  47. Windows Millenium Edition

  48. Windows 2000

  49. Windows XP

  50. Applications • Text Processing • Early Command Based Applications • Emacs (Unix) • Wordstar (DOS) • WYSIWYG: What You See Is What You Get • Word (Microsoft) • Word Perfect (Corel) • StarOffice (Sun)

More Related