Usability

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)