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
– 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
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)
Myths of Interface Design
• Maximal functionality -- “anything goes”
– text editors that allow letters off line
• 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
Overcoming Myths
• Anything goes
• Minimalism
• Focus on Task
• Accommodate Range
of Users
• WYSIWYG superiority • Accommodate
Technical Needs
•
User-Controller
• “Do what I mean”
Interface Functions
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
History: Usability before computers
•Shape of handle,
direction of sharp edge
indicate proper use
•Carelman: Coffeepot
for Masochists
Different Layers of Interaction
• Operating System
Interface
• Application Interface
• Website Interface
User Interface Focal Points
• Issues
– Purpose
– Audience
– Media
• Many disciplines involved
• Graphical Communication principles apply!
– Screen presents information in two dim.
Presentation Topics
• History of usability
• Theory of usability:
–
–
–
–
Norman
Shneidermann
Nardi
Dix
• Usability outside ICT
Usability Overview
•
•
•
•
•
•
•
Introduction
History
Theory
Computer User Interfaces
World Wide Web
Assignment
Accompanying Website
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
Research Terminology
•
•
•
•
Human Factors (US)
Cognitive Ergonomics (Europe)
Human-Computer Interaction
Usability
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
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
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
…
Usability Overview
•
•
•
•
•
•
•
Introduction
History
Theory
Computer User Interfaces
World Wide Web
Assignment
Accompanying Website
Usability Theory
•
•
•
•
•
•
Theory presented is based on Norman
Affordances
Mental and Conceptual Models
Natural Mapping
Direct Manipulation
User Centered Design
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/
Norman’s Homepage
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
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
Mental Models
• Experience of users
• Culturally determined
• ‘Model of the world’
• Design in line with mental model makes
errors less likely to occur
Mental Models
• Excel suggests a clear model
– accountants’ ledgers
• Internal complexity hidden
• Immediately popular
– Word Processors -- Paper Document
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
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
“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
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
Usability Overview
•
•
•
•
•
•
•
Introduction
History
Theory
Computer User Interfaces
World Wide Web
Assignment
Accompanying Website
Computer User Interfaces
• Different layers
– Operating System
– Graphical User Interface of Operating System
– Graphical User Interface of Application
• Why so many Layers?
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 textbased word processing application
• Learning commands difficult
• Once learned, quick to apply
Apple
• Introduction of first widespread Graphical
User Interface
• Use of direct manipulation
• Intuitive to learn
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 !
Apple iMac GUI
• Colour GUI
• Concepts stayed the
same!
– Click to “open”
– Drag to move
– Trash to remove
•
•
•
•
File
Floppies
CDs
…
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
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,…)
Sun Solaris
Motif
FVWM & FVWM 95
GNOME and KDE
Microsoft
• Based on MS-DOS
• First MS-Windows version similar to XWindows:
– OS = MS-DOS
– MS-Windows = MS-DOS application
• MS-DOS more and more hidden
• Still requires ‘DOS-box’ for some
commands
MS Windows 3.1
Windows 95
Windows NT 3.51
Windows NT 4
Windows Millenium Edition
Windows 2000
Windows XP
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)
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
Usability Overview
•
•
•
•
•
•
•
Introduction
History
Theory
Computer User Interfaces
World Wide Web
Assignment
Accompanying Website
World Wide Web
• Initially text-based
• Application Interface to texts on different
computers
• Many different interfaces
• Increasing complexity
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: <em>important</em>
• Contains also representational tags
– Bold: <bold>important</bold>
The Early Days
Layout Issues
• Work-around
limitations
• Abuse of semantical
tagging to achieve
layout
– E.g. tables
• Browser War
– Add features
– Incompatibility
Basic Navigation
• Semantical tag <a>
• 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
Frameset code
Frameset Displayed
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
Why Semantical Tagging
• Enhances searching capabilities
• Enhances ability to format for different
media
– Paper
– Screen
– CD
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
Web Applictions
• Each page on Internet is application
• Provides navigation
• Complex applications
– Perseus Project
– Visually Sorting Data Applet
Perseus Project
• Web interface to database
• Information on Greek and Latin History
• Allows for different views based on browser
capabilities
• http://www.perseus.tufts.edu/
Perseus Project Home
Iliad in Transliteration
Perseus Settings
Iliad in Greek Font
Commentaries on Iliad
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
• http://hagen.let.rug.nl/~s0863408/Vis/VisPage.html
Visually Sorting Data Applet
Usability Overview
•
•
•
•
•
•
•
Introduction
History
Theory
Computer User Interfaces
World Wide Web
Exercise
Accompanying Website
(Optional) Exercise
• Usability evaluation
– Faculty homepages
– Faculty members homepages
http://odur.let.rug.nl/~evdhout/usability/assignment/index.html
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.
Usability Overview
•
•
•
•
•
•
•
Introduction
History
Theory
Computer User Interfaces
World Wide Web
Assignment
Accompanying Website
Accompanying website
http://let.rug.nl/~evdhout/usability/index.html
• Provides:
– Theory
– Background websites
– Further reading materials and pointers