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 differentrecognising that cultures are
differentidentifying the technology and
techniques to support such differences
Today
17:15 Universal accessibilityIndividualisationInternationalisation
18:30 Break19:00 Web-design
Technology to support usabilitySpecification techniques
About the speakers
Members of a team: UWISH
Usability of Web-based Information Services for Hypermedia
Universal Accessibility
Design for All
General PrinciplesVanderheiden (1997)
Use: equitable, flexible, simple and intuitive.
Perceptible information and error tolerance.
Low physical effort and appropriate size and space for approach.
Guidelines for ElderlyCzaja (1997)
Contrast, screen glare, object sizeMinimal info, consistent location, groupHighlight, color discrimination, key labelClear icons, practiceMinimal demands on memoryConsistency, 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 sheetsNatural language, tables, pagesUser control, access of embedded UIsDevice independence, interim solutionsW3C technologies, context informationClear navigation and simple documents
Conclusions
Guidelines are availableA coherent, complete, well-
founded and practical set is lackingTechniques for application of the
guidelines are scarce
Cognitive engineering framework
empiricalsummative
analysis
designempiricalformative
analyticalformative
AssessmentSpecification
implemen-tation
flow of spec/assess task/processflow of iteration
Cognitive Engineering (1)
practicaltheory
effectiveness,efficiency and
satisfaction
objectivesWeb-service
users, goals,info/ supportneeds and use context
specification
assessment
data/info
task or process
Cognitive Engineering (2)
Practical Cognitive Theory
Factors that affect Web-navigation:Spatial ability for mental modelingMemory capacity for task-set
switchingSituation awareness during
interaction
Theoretical and Empirical Based User Requirements for Elderly
Web-Navigation Performance
0
20
40
60
80
100
young elderly
% c
orre
ct in
fo a
cqui
sitio
n
Spatial Ability
0
5
10
15
20
25
30
35
young elderly
# co
rrec
t ch
oice
s
Mentalrotation
task
spatial representation
Memory Capacity
scheduler and goal creation
memorytask
0
10
20
30
40
50
60
70
young elderly
task
com
ple
tion
tim
e (s
)
News
ProductsIntroduction
FacilitiesDepartments
PeopleProjects
Request for information
Situation Awareness
multi-media, context and goal refinement
0
1
2
3
4
5
6
young elderly
corr
ect c
ateg
oris
atio
ns
categorisetask
Transform User Requirements into Navigation Supportfor 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 landmarkshistory mapnavigation assistant
Evaluation
Three usability measures:effectivenessefficiencysatisfaction
Example Satisfaction Results
1
2
3
4
5
None Landmarks Hist. map Assistant Combined
subj
ectiv
e us
abili
ty r
atin
g
youngelderly
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 I18NCould just as well be D16N:
Deparochialisation
Culture
We all walk, eat, sleep, talkCulture is the differenceCultures 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 kaipanellhnio rekor? Auta ta pragmata ginontai mono stous Olympiakous. Mpravo !
User Interfaces
User interfaces have three aimsEfficiencyEffectivenessSatisfaction
Transparency should be an aimGames have special needs
So why internationalisation?
Make people feel at homeBuild trust (important for e-
commerce)Even spelling in your own language
areaWhy did Toys R Us fail in the
Netherlands?Packing books
Are there ‘Cultural’ UI’s?
Aaron Marcus 1993(This is for aEuropean Male)
Cultural Interfaces
(WhiteAmericanWomen)
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:AddressesDatesBeepsLanguagesCurrency and other unitsIcons
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 formats12/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 insultingMost 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.
Black/whiteRed/green
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 detailsBeing aware of the issues is an
important first stepMaking 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 expandingPhones, handheld, Web TV,
computers, aural browsers, ...
W3C Accessibility Guidelines
Provide equivalents for sound and visualsDon’t rely on colour aloneUse markup and style sheets, properlyClarify natural language useTables should transform gracefullyUse of new technologies should transformAllow control of time-based changes
(guidelines)
Ensure embedded interfaces are accessible
Be device-independentUse interim solutionsUse W3C technologies and guidelinesProvide context and orientationProvide clear navigationDocuments 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 languageAvoid display-oriented tags (font, blink,
…)Avoid the use of images for textAvoid using tables for layoutAlways use the ALT attribute on imagesEven 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 documentsFor 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 writeeasy to implementhas a development path.CSS is a 90% solutionFor 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 presentationMakes HTML a structure language againMakes HTML easier to write (and read)All HTML styles (and more) are possibleYou can define a house style in one fileAccessible for the sight-impairedStill 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 centralisedEasier to provide a house styleWider range of presentation
possibilitiesSeparation 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
IntroductionWhat specifications can and can’t doHow and when to use specificationsSpecifications in the design processDifferent techniques, exampleConclusions
Introduction
specification means abstractiondifferent specification techniques
stress different featuresspecifications can range from mock-
up and natural language to formal methods
Benefits of specifications
identification of system propertieserror and inconsistency detectionspecifications 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 perfectavoid miscommunication7 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)
empiricalsummative
analysis
designempiricalformative
analyticalformative
AssessmentSpecification
implemen-tation
flow of spec/assess task/processflow of iteration
Usability Engineering
(Pressman, 1997)
requirements quick design
prototype
evaluation & refinement
implementation
Prototyping approach
Which Specification Technique?
GOMSGTAZCSP...
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 puzzlesspecified 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
108
Exercise
Optimizing Situation Awareness in a Virtual Music Center
Introduction
Situation Awareness
Perception Comprehension Prediction
Virtual Music Center
Copyright CTIT
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
An older woman from Germany buys a ticket for a Jazz concert and a CD of the performing artist.
Design Task
General Structure
Situation Awareness support
Storyboard
Procedure
Split into groups
Design
Short presentation
Evaluation
SA Structure ScreensDialog
Perception … … ...
Comprehension … … …
Prediction … … ...