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
<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?
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
- 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
- Situation Awareness support
Procedure
Evaluation
SA Structure Screens Dialog
Perception … … ...
Comprehension … … …
Prediction … … ...