Presentation is loading. Please wait.

Presentation is loading. Please wait.

Usability Graphical Communication 2001 John Nerbonne and Erik van den Hout

Similar presentations

Presentation on theme: "Usability Graphical Communication 2001 John Nerbonne and Erik van den Hout"— Presentation transcript:

1 Usability Graphical Communication 2001 John Nerbonne and Erik van den Hout

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 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 line

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

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 Carelman: Coffeepot for Masochists Shape of handle, direction of sharp edge indicate proper use

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:

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)

51 GUI issues Inconsistency Managing complexity Superfluous GUI complexity –decoration (Tufte’s “ducks”), e.g., most web banners –complexity not mirrored in application Conceptual or mental model flaws -- detect –“Which button publishes this on the web?” Mapping errors –not finding existing functionality

52 Usability Overview Introduction History Theory Computer User Interfaces World Wide Web Assignment Accompanying Website

53 World Wide Web Initially text-based Application Interface to texts on different computers Many different interfaces Increasing complexity

54 What is WWW? Segment of the internet Tim Berners-Lee (CERN) Roots in SGML => HTML Initially only simple texts Semantical mark-up language based on tags –Emphasis: important Contains also representational tags –Bold: important

55 The Early Days

56 Layout Issues Work-around limitations Abuse of semantical tagging to achieve layout –E.g. tables Browser War –Add features –Incompatibility

57 Basic Navigation Semantical tag Framesets introduced to create navigational overview Implementation differs –Not guaranteed to work similarly in all browsers –Different attributes needed in different browsers –No semantical tagging

58 Frameset code

59 Frameset Displayed

60 Alternative Navigation Java applets, Javascript, Flash, … –Program inside page –Mostly designed for navigation only Problems –Mostly used in combination with framesets –Content and Action not separated

61 Why Semantical Tagging Enhances searching capabilities Enhances ability to format for different media –Paper –Screen –CD

62 Cascading Style Sheets Introduced to separate content and display Initially used on HTML only Extended to be used on XML –XML allows for more semantic tagging –XML allows for user defined tags One source for many alternative media

63 Web Applictions Each page on Internet is application Provides navigation Complex applications –Perseus Project –Visually Sorting Data Applet

64 Perseus Project Web interface to database Information on Greek and Latin History Allows for different views based on browser capabilities

65 Perseus Project Home

66 Iliad in Transliteration

67 Perseus Settings

68 Iliad in Greek Font

69 Commentaries on Iliad

70 Visually Sorting Data Applet JAVA program to sort data Purpose to acquire information on relationships Interface simple, but complex Requires trial and error to learn how to use even though instructions available Users hardly ever read complex instructions

71 Visually Sorting Data Applet

72 Usability Overview Introduction History Theory Computer User Interfaces World Wide Web Exercise Accompanying Website

73 (Optional) Exercise Usability evaluation –Faculty homepages –Faculty members homepages

74 Exercise Details Short introduction to usability. Analysis of the usability of each websites individually (pick two). Conclusions on the usability of each website individually, providing suggestions for improvement. Focus on graphical elements. Comparative analysis of the websites. A reasoned selection of what you consider to be the better website with respect to usability Overall conclusion and summary.

75 Usability Overview Introduction History Theory Computer User Interfaces World Wide Web Assignment Accompanying Website

76 Accompanying website Provides: –Theory –Background websites –Further reading materials and pointers

Download ppt "Usability Graphical Communication 2001 John Nerbonne and Erik van den Hout"

Similar presentations

Ads by Google