Usability Techniques for
Web-based Services
Diversity and Technology
Introduction
A thought experiment:
What is special about sites that you return often to? What gets you coming back?
Why do people return to a site?
Good content (75%)
Usability (66%)
Speed of downloading (58%)
Frequently updated (54%)
(the rest is noise: 14% and lower)
This tutorial
About ‘diversity and technology’:
- recognising that people are different
- recognising that cultures are different
- identifying the technology and techniques to support such differences
Today
17:15 Universal accessibility
Individualisation
Internationalisation
- 18:30 Break
- 19:00 Web-design
Technology to support usability
Specification techniques
About the speakers
Members of a team: UWISH
Universal Accessibility
Design for All
General Principles
Vanderheiden (1997)
Use: equitable, flexible, simple and intuitive.
Perceptible information and error tolerance.
Low physical effort and appropriate size and space for approach.
Guidelines for Elderly
Czaja (1997)
Contrast, screen glare, object size
Minimal info, consistent location, group
Highlight, color discrimination, key label
Clear icons, practice
Minimal demands on memory
Consistency, simplicity (e.g. online help)
Web Content Guidelines
(W3C) http://www.w3.org/TR/WAI-WEBCONTENT
Auditory/visual alternatives/not color alone
Markup and style sheets
Natural language, tables, pages
User control, access of embedded UIs
Device independence, interim solutions
W3C technologies, context information
Clear navigation and simple documents
Conclusions
Guidelines are available
A coherent, complete, well-founded and practical set is lacking
Techniques for application of the guidelines are scarce
®
Cognitive engineering framework
Cognitive Engineering (1)
Cognitive Engineering (2)
Practical Cognitive Theory
Factors that affect Web-navigation:
- Spatial ability for mental modeling
- Memory capacity for task-set switching
- Situation awareness during interaction
Theoretical and Empirical Based User Requirements
for Elderly
Web-Navigation Performance
Spatial Ability
Þ
spatial representation
Memory Capacity
Þ
scheduler and goal creation
Situation Awareness
Þ
multi-media, context and goal refinement
Transform User Requirements
into Navigation Support
for Elderly
Analysis
Map user requirements on current support functions
Prioritize according to "Web-service objectives"
Estimate implementation costs
Þ
synthesize support concepts
Design and Implementation
Three support functions:
- categorizing landmarks
- history map
- navigation assistant
Evaluation
Three usability measures:
- effectiveness
- efficiency
- satisfaction
Example Satisfaction Results
Conclusions
Individualization of Web-interfaces is needed to realize "Universal Accessibility"
Design for all results in adaptive interfaces (no "boring uniformity")
Elderly users need more navigation support
Internationalisation
The Culture is in the Detail
Internationalisation
Often referred to as I18N
Could just as well be D16N: Deparochialisation
Culture
We all walk, eat, sleep, talk
Culture is the difference
Cultures are everywhere: national, gender, regional, technical...
The World Wide Web
The Web: a European invention
(An Englishman and a Dutch-speaking Belgian working on the border between Switzerland and France)
For the first time Europeans can write their names in a platform-independent way
Email and News
Email and news on the other hand were American inventions
Greeks (and many others) have to use an agreed mapping to communicate:
E auto den to perimena. Na afhsei pisw tou ton Darren Campbell kai ton Ato Boldon??? Kai me 20:09??? Pou sta hmitelika ekane 20:20 kai
panellhnio rekor? Auta ta pragmata ginontai mono stous Olympiakous. Mpravo !
User Interfaces
User interfaces have three aims
- Efficiency
- Effectiveness
- Satisfaction
Transparency should be an aim
Games have special needs
So why internationalisation?
Make people feel at home
Build trust (important for e-commerce)
Even spelling in your own language area
Why did Toys R Us fail in the Netherlands?
Packing books
Are there ‘Cultural’ UI’s?
Aaron Marcus 1993
(This is for a
European Male)
Cultural Interfaces
(White
American
Women)
Perhaps there are...
Maybe worth a design competition…
Currently: culture is exposed in the details
What is American here?
Folders
Whose computer?
Neighbours?
Pay attention to the detail
For instance:
- Addresses
- Dates
- Beeps
- Languages
- Currency and other units
- Icons
Addresses (stupid stupid)
Don’t require fields that not everyone has
Don’t impose an order on the fields
Example
Dates
Don’t use all number formats
12/10/2000 is ambiguous
- Don’t require users to use your format (they’ll surely get it wrong)
Beeps
Beware of generating beeps from an application
Languages (and not flags)
Don’t use a French flag to represent the French language: there are many languages in France, and there are many other countries that speak French. (And the same for all other flags)
Doubly bad example
Good example
Acceptable use of flags
Currency
Makes the user feel at home.
Wrong use of currency
Other units are just as important
Icons
Can be insulting
Most combination of hand/finger positions is an insult somewhere in the world, even ‘Thumbs up’!
Avoid visual puns, ‘run’, ‘step’, ‘save’, ‘change’, even ‘server’
‘Script’ icon in Windows
The Role of Colours
Don’t assume meanings to colours that you would expect.
Characters
Don’t assume standard meanings to characters
"?" vs ";" vs "i"
#
Greek version
French version
Characters
Checkbox: "x" can mean "no", tick doesn’t necessarily mean yes
This is a tick on homework in the Netherlands:
Conclusion
Culture is in the details
Being aware of the issues is an important first step
Making the user feel at home builds trust
Technology
Introduction
The right use of the available technology can greatly improve usability:
Speed
Accessibility
Visibility
Platforms
Bear in mind that there are many different sorts of platforms
The types are expanding
Phones, handheld, Web TV, computers, aural browsers, ...
W3C Accessibility Guidelines
Provide equivalents for sound and visuals
Don’t rely on colour alone
Use markup and style sheets, properly
Clarify natural language use
Tables should transform gracefully
Use of new technologies should transform
Allow control of time-based changes
(guidelines)
Ensure embedded interfaces are accessible
Be device-independent
Use interim solutions
Use W3C technologies and guidelines
Provide context and orientation
Provide clear navigation
Documents should be clear and simple
Guideline validation
‘Bobby’: www.cast.org/bobby
Correct use of HTML
Much existing software produces bad HTML
Character sets
Fixed fonts and sizes
Inaccessible content
Check the output on as many devices as possible
Use of HTML: presentation
HTML is really a structure language
Avoid display-oriented tags (font, blink, …)
Avoid the use of images for text
Avoid using tables for layout
Always use the ALT attribute on images
Even better: use <object>
Don’t assume anything about pixels!
CSS
Instead of using HTML as presentation language, use a stylesheet language, such as CSS
HTML and SGML
HTML (up to now) has been an SGML application.
SGML is intended to define the structure of documents
For instance, <H1> </H1> defines a heading without specifying how it should look. <UL> <LI>… </UL>
specifies a list of items.
Semantics in tags
These classifications often have semantic significance (e.g. <H1>)
<I> and <B> were mistakes, use <EM> and <STRONG> instead
Contamination
Netscape started to add their own tags, based on the idea that with their market penetration they could get a head start.
Unfortunately most tags added are presentation-oriented tags such as <BLINK> and <FONT>
The problem with the new tags
Presentation tags do specify how the item should look, and have no inherent semantics – they do not fit in the structure orientation of standard HTML; Microsoft also followed suit with their tags
Style Sheets
In order to get HTML back to being a structure language, W3C hosts work on Style Sheets, and producing a Style Sheet Language CSS – Cascading Style Sheets.
Aims of CSS
easy to write
easy to implement
has a development path.
CSS is a 90% solution
For all typesetting possibilities XSL is being developed
CSS
CSS is a language that allows you to specify how a document, or set of documents, should look.
Advantages
Separates content from presentation
Makes HTML a structure language again
Makes HTML easier to write (and read)
All HTML styles (and more) are possible
You can define a house style in one file
Accessible for the sight-impaired
Still visible on non-CSS browsers
XML is coming
CSS is also an enabling technology for XML (more later)
Levels
CSS has been designed with upwards and downwards compatibility in mind.
CSS1: basic formatting, fonts, colours, layout; quick and easy to implement
CSS2: more advanced formatting; aural style sheets
CSS3: printing, multi-column, ...
Compatibility
In general a valid CSS1 style sheet is also a valid CSS2 style sheet.
In general a CSS2 style sheet can be read and used by a CSS1-supporting browser.
Check your log files!
More than 95% of surfers now use a CSS1-compatible browser:
Microsoft IE 3, 4, 5
Netscape 4
Opera 3.5
While the quality of the support for CSS on these browsers is varied, you never need to use the <FONT> tag again!
Why is CSS good for usability?
Presentation is not hard-wired in the HTML
Users can make their own choices (font size, colours, etc), and override the documents
Pages load faster
...
Pages become more accessible for the sight-impaired (who can use speech browsers)
Pages are viewable on a wider range of platform types
Why is CSS good for the author?
Documents become easier to write (and read)
Presentation is centralised
Easier to provide a house style
Wider range of presentation possibilities
Separation of concerns
Example
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="http://www.cwi.nl/style.css">
</head>
<body> ...</body>
</html>
Example...
h1, h2, h3 {
font-family: helvetica, sans-serif }
body { color: white;
background-color: black }
p { text-align: justify }
CSS Presentation
Apart from standard HTML effects, CSS can generate a wide range of presentational effects
Language
Users can specify a language preference; the server can identify this and serve pages in that language
Accept-Language:
en-gb,en;q=0.8,nl;q=0.5,fr;q=0.3
- Show language encoding
- <html lang="en" xml:lang="en">
- Use <abbr> and <acronym>
Character encoding
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
- Or make sure your server sends the right fields
- Don’t use platform-specific encodings
Document structuring
Use HTML to structure your documents
Consider switching to XML
XML
XML is going to replace HTML as delivery language.
XHTML is an XML-ised version of HTML
Specification Techniques
Overview
Introduction
What specifications can and can’t do
How and when to use specifications
Specifications in the design process
Different techniques, example
Conclusions
Introduction
specification means abstraction
different specification techniques stress different features
specifications can range from mock-up and natural language to formal methods
Benefits of specifications
identification of system properties
error and inconsistency detection
specifications can establish communication between designers and programmers
(formal) specifications can be used to create (interactive) prototypes
What specifications can’t do
guarantee a system is perfect
avoid miscommunication
7 myths and more
When to use specifications
complex systems (e.g. multi-agent systems, multimodal systems)
trustworthy systems (e.g. e-commerce)
not for complete systems
Role of specifications
in design process
use formal specification linked to empirical methods for design and evaluation
specification techniques can be used throughout the entire design process
the design process used does not matter
Empirical Design Methods
& Formal methods
Empirical methods (like usability engineering or the prototyping approach) have much attention for the user’s needs.
Specification techniques add attention for the system’s behaviour in critical situations (see benefits)
Usability Engineering
Prototyping approach
(Pressman, 1997)
Which Specification Technique?
GOMS
GTA
Z
CSP
...
Different Techniques (I)
Goals, Operators, Methods and Selection (GOMS).
Hierarchical description of the user’s goals and tasks
Groupware Task Analysis (GTA). Task modeling in environments where many people interact with a system
Different Techniques (II)
Z. Mathematical description of entities and their relations. Best fitted for the description of static properties of systems
CSP. Algebraic description of interacting, dynamic processes.
Example
game to play slide puzzles
specified by using natural language and CSP-alike
Which Specification Technique
the use of the specification in the design process determines the choice of technique
use combinations (e.g. Z or CSP combined with natural language)
Accessibility of
Specification Techniques
the more formal/mathematical the specification technique the steeper the learning curve:
readability. Especially specification in for example Z can scare people of.
easy to write?
Conclusions
use formal methods complementary to empirical design methods
use formal methods for critical parts,
i.e. parts that:
either must function properly,
or are likely to give trouble
the right technique at the right spot
Exercise
Optimizing Situation Awareness in a Virtual Music Center
Introduction
Situation Awareness
Perception
Comprehension
Prediction
Virtual Music Center
General Information
Virtual Music Center contains:
a music theater booking service
a music shop
- Users
- visitors of all sorts of concerts
- buyers of Jazz and Classical music
Scenario-based design
Design Task
General Structure
- Situation Awareness support
Procedure
Split into groups
Evaluation
SA Structure Screens Dialog
Perception … … ...
Comprehension … … …
Prediction … … ...