Title: Usability
1Usability
- Graphical Communication 2001
- John Nerbonne and Erik van den Hout
- Nerbonne_at_let.rug.nl
2Usability Overview
- Introduction
- History
- Theory
- Computer User Interfaces
- World Wide Web
- Assignment
- Accompanying Website
3Introduction
- 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
4Motivation
- Everyday machines much more complex
- cars, video recorders, mobile phones, PCs, ...
- Some people never use complex machines
- 10 Dutch cant use ATM
- Most people cant program video recorder
- Even technical people have gaps
- Kenneth Olsen, engineer DEC founder, couldnt
use a microwave (in D.Normans Psychology of
Everyday Things)
5Myths of Interface Design
- Maximal functionality -- anything goes
- text editors that allow letters
- Minimal Functionality -- just whats needed
- but simplified products dont sell
- LetterPerfect (simplified WordPerfect), Microsoft
Writer - Philips Easy Line radios, TVs, 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
line
off
6Overcoming Myths
- Anything goes
- Minimalism
- WYSIWYG superiority
- Do what I mean
- Focus on Task
- Accommodate Range of Users
- Accommodate Technical Needs
- User-Controller Interface Functions
7UsabilityShared 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
8History Usability before computers
- Shape of handle, direction of sharp edge indicate
proper use
- Carelman Coffeepot for Masochists
9Different Layers of Interaction
- Operating System Interface
- Application Interface
- Website Interface
10User Interface Focal Points
- Issues
- Purpose
- Audience
- Media
- Many disciplines involved
- Graphical Communication principles apply!
- Screen presents information in two dim.
11Presentation Topics
- History of usability
- Theory of usability
- Norman
- Shneidermann
- Nardi
- Dix
- Usability outside ICT
12Usability Overview
- Introduction
- History
- Theory
- Computer User Interfaces
- World Wide Web
- Assignment
- Accompanying Website
13Early Usability
- Lucy Suchman filmed dozens of hours of use of
Xerox copiers in 1970s - complex machines allow magnification, reduction,
two-sided copying, collation - most users couldnt operate machines easily
- most uses involved single copies of 1-2 pp.
- Solution green button
- Lesson analyze task, frequency
14Research Terminology
- Human Factors (US)
- Cognitive Ergonomics (Europe)
- Human-Computer Interaction
- Usability
15Usability Principles
- Design
- with the user in mind
- with the users usage in mind
- to make errors hard, if not impossible
- to provide proper feedback
- Logical but not obvious
16Why 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
17Usability 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
-
18Usability Overview
- Introduction
- History
- Theory
- Computer User Interfaces
- World Wide Web
- Assignment
- Accompanying Website
19Usability Theory
- Theory presented is based on Norman
- Affordances
- Mental and Conceptual Models
- Natural Mapping
- Direct Manipulation
- User Centered Design
20Donald 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/
21Normans Homepage
22Affordances
- Oxford Advanced Learners 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
23Incorrect 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
24Mental Models
- Experience of users
- Culturally determined
- Model of the world
- Design in line with mental model makes errors
less likely to occur
25Mental Models
- Excel suggests a clear model
- accountants ledgers
- Internal complexity hidden
- Immediately popular
- Word Processors -- Paper Document
26Conceptual Models
- Model of objects behaviour
- Based on mental model
- User infers conceptual model from design!
- Goal keep this inference easy, exploit prior
mental models - Example thermostat
27Natural 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
28Direct 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
29User-Centered Design
- Standardise, but provide aids
- Provide feedback to visualise the invisible
- Automate but keep task the same
- Do not over-automate!
- Change tasks nature
- Simplification
- Breaking up complex tasks
30Usability Overview
- Introduction
- History
- Theory
- Computer User Interfaces
- World Wide Web
- Assignment
- Accompanying Website
31Computer User Interfaces
- Different layers
- Operating System
- Graphical User Interface of Operating System
- Graphical User Interface of Application
- Why so many Layers?
32Early Computer Interfaces
- Text based due to technology
- Complex vocabulary
- rm unix command to remove a file
- CTRLK CTRLB make text bold in a text-based
word processing application - Learning commands difficult
- Once learned, quick to apply
33Apple
- Introduction of first widespread Graphical User
Interface - Use of direct manipulation
- Intuitive to learn
34Apple 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 !
35Apple iMac GUI
- Colour GUI
- Concepts stayed the same!
- Click to open
- Drag to move
- Trash to remove
- File
- Floppies
- CDs
-
36Apples Direct Manipulation
- Only GUI exists
- OS is invisible except through GUI
- No cryptic commands
- Standardised to keep things consistent
- All tasks available through GUI
37X-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,)
38Sun Solaris
39Motif
40FVWM FVWM 95
41GNOME and KDE
42Microsoft
- 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
43MS Windows 3.1
44Windows 95
45Windows NT 3.51
46Windows NT 4
47Windows Millenium Edition
48Windows 2000
49Windows XP
50Applications
- 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)
51GUI issues
- Inconsistency
- Managing complexity
- Superfluous GUI complexity
- decoration (Tuftes 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
52Usability Overview
- Introduction
- History
- Theory
- Computer User Interfaces
- World Wide Web
- Assignment
- Accompanying Website
53World Wide Web
- Initially text-based
- Application Interface to texts on different
computers - Many different interfaces
- Increasing complexity
54What is WWW?
- Segment of the internet
- Tim Berners-Lee (CERN)
- Roots in SGML gt HTML
- Initially only simple texts
- Semantical mark-up language based on tags
- Emphasis ltemgtimportantlt/emgt
- Contains also representational tags
- Bold ltboldgtimportantlt/boldgt
55The Early Days
56Layout Issues
- Work-around limitations
- Abuse of semantical tagging to achieve layout
- E.g. tables
- Browser War
- Add features
- Incompatibility
57Basic Navigation
- Semantical tag ltagt
- 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
58Frameset code
59Frameset Displayed
60Alternative 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
61Why Semantical Tagging
- Enhances searching capabilities
- Enhances ability to format for different media
- Paper
- Screen
- CD
62Cascading 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
63Web Applictions
- Each page on Internet is application
- Provides navigation
- Complex applications
- Perseus Project
- Visually Sorting Data Applet
64Perseus Project
- Web interface to database
- Information on Greek and Latin History
- Allows for different views based on browser
capabilities - http//www.perseus.tufts.edu/
65Perseus Project Home
66Iliad in Transliteration
67Perseus Settings
68Iliad in Greek Font
69Commentaries on Iliad
70Visually 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
- http//hagen.let.rug.nl/s0863408/Vis/VisPage.html
71Visually Sorting Data Applet
72Usability Overview
- Introduction
- History
- Theory
- Computer User Interfaces
- World Wide Web
- Exercise
- Accompanying Website
73(Optional) Exercise
- Usability evaluation
- Faculty homepages
- Faculty members homepages
- http//odur.let.rug.nl/evdhout/usability/assignme
nt/index.html
74Exercise 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.
75Usability Overview
- Introduction
- History
- Theory
- Computer User Interfaces
- World Wide Web
- Assignment
- Accompanying Website
76Accompanying website
- http//let.rug.nl/evdhout/usability/index.html
- Provides
- Theory
- Background websites
- Further reading materials and pointers