usability techniques for web-based services diversity and technology
TRANSCRIPT
![Page 1: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/1.jpg)
Usability Techniques for Web-based Services
Diversity and Technology
![Page 2: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/2.jpg)
Introduction
A thought experiment:
What is special about sites that you return often to? What gets you coming back?
![Page 3: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/3.jpg)
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)
![Page 4: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/4.jpg)
This tutorial
About ‘diversity and technology’:recognising that people are differentrecognising that cultures are
differentidentifying the technology and
techniques to support such differences
![Page 5: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/5.jpg)
Today
17:15 Universal accessibilityIndividualisationInternationalisation
18:30 Break19:00 Web-design
Technology to support usabilitySpecification techniques
![Page 6: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/6.jpg)
About the speakers
Members of a team: UWISH
Usability of Web-based Information Services for Hypermedia
![Page 7: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/7.jpg)
Universal Accessibility
Design for All
![Page 8: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/8.jpg)
General PrinciplesVanderheiden (1997)
Use: equitable, flexible, simple and intuitive.
Perceptible information and error tolerance.
Low physical effort and appropriate size and space for approach.
![Page 9: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/9.jpg)
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)
![Page 10: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/10.jpg)
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
![Page 11: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/11.jpg)
Conclusions
Guidelines are availableA coherent, complete, well-
founded and practical set is lackingTechniques for application of the
guidelines are scarce
Cognitive engineering framework
![Page 12: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/12.jpg)
empiricalsummative
analysis
designempiricalformative
analyticalformative
AssessmentSpecification
implemen-tation
flow of spec/assess task/processflow of iteration
Cognitive Engineering (1)
![Page 13: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/13.jpg)
practicaltheory
effectiveness,efficiency and
satisfaction
objectivesWeb-service
users, goals,info/ supportneeds and use context
specification
assessment
data/info
task or process
Cognitive Engineering (2)
![Page 14: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/14.jpg)
Practical Cognitive Theory
Factors that affect Web-navigation:Spatial ability for mental modelingMemory capacity for task-set
switchingSituation awareness during
interaction
![Page 15: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/15.jpg)
Theoretical and Empirical Based User Requirements for Elderly
![Page 16: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/16.jpg)
Web-Navigation Performance
0
20
40
60
80
100
young elderly
% c
orre
ct in
fo a
cqui
sitio
n
![Page 17: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/17.jpg)
Spatial Ability
0
5
10
15
20
25
30
35
young elderly
# co
rrec
t ch
oice
s
Mentalrotation
task
spatial representation
![Page 18: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/18.jpg)
Memory Capacity
scheduler and goal creation
memorytask
0
10
20
30
40
50
60
70
young elderly
task
com
ple
tion
tim
e (s
)
![Page 19: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/19.jpg)
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
![Page 20: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/20.jpg)
Transform User Requirements into Navigation Supportfor Elderly
![Page 21: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/21.jpg)
Analysis
Map user requirements on current support functions
Prioritize according to “Web-service objectives”
Estimate implementation costs
synthesize support concepts
![Page 22: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/22.jpg)
Design and Implementation
Three support functions:categorizing landmarkshistory mapnavigation assistant
![Page 23: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/23.jpg)
Evaluation
Three usability measures:effectivenessefficiencysatisfaction
![Page 24: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/24.jpg)
Example Satisfaction Results
1
2
3
4
5
None Landmarks Hist. map Assistant Combined
subj
ectiv
e us
abili
ty r
atin
g
youngelderly
![Page 25: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/25.jpg)
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
![Page 26: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/26.jpg)
Internationalisation
The Culture is in the Detail
![Page 27: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/27.jpg)
Internationalisation
Often referred to as I18NCould just as well be D16N:
Deparochialisation
![Page 28: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/28.jpg)
Culture
We all walk, eat, sleep, talkCulture is the differenceCultures are everywhere: national,
gender, regional, technical...
![Page 29: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/29.jpg)
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
![Page 30: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/30.jpg)
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 !
![Page 31: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/31.jpg)
User Interfaces
User interfaces have three aimsEfficiencyEffectivenessSatisfaction
Transparency should be an aimGames have special needs
![Page 32: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/32.jpg)
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
![Page 33: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/33.jpg)
Are there ‘Cultural’ UI’s?
Aaron Marcus 1993(This is for aEuropean Male)
![Page 34: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/34.jpg)
Cultural Interfaces
(WhiteAmericanWomen)
![Page 35: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/35.jpg)
Perhaps there are...
Maybe worth a design competition…
Currently: culture is exposed in the details
![Page 36: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/36.jpg)
What is American here?
![Page 37: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/37.jpg)
Folders
![Page 38: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/38.jpg)
Whose computer?
![Page 39: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/39.jpg)
Neighbours?
![Page 40: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/40.jpg)
Pay attention to the detail
For instance:AddressesDatesBeepsLanguagesCurrency and other unitsIcons
![Page 41: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/41.jpg)
Addresses (stupid stupid)
Don’t require fields that not everyone has
Don’t impose an order on the fields
![Page 42: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/42.jpg)
Example
![Page 43: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/43.jpg)
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)
![Page 44: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/44.jpg)
Beeps
Beware of generating beeps from an application
![Page 45: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/45.jpg)
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)
![Page 46: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/46.jpg)
Doubly bad example
![Page 47: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/47.jpg)
Good example
![Page 48: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/48.jpg)
Acceptable use of flags
![Page 49: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/49.jpg)
Currency
Makes the user feel at home.
![Page 50: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/50.jpg)
Wrong use of currency
![Page 51: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/51.jpg)
Other units are just as important
![Page 52: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/52.jpg)
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’
![Page 53: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/53.jpg)
‘Script’ icon in Windows
![Page 54: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/54.jpg)
The Role of Colours
Don’t assume meanings to colours that you would expect.
Black/whiteRed/green
![Page 55: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/55.jpg)
Characters
Don’t assume standard meanings to characters
“?” vs “;” vs “i”#
![Page 56: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/56.jpg)
Greek version
![Page 57: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/57.jpg)
French version
![Page 58: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/58.jpg)
Characters
Checkbox: “x” can mean “no”, tick doesn’t necessarily mean yes
This is a tick on homework in the Netherlands:
![Page 59: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/59.jpg)
Conclusion
Culture is in the detailsBeing aware of the issues is an
important first stepMaking the user feel at home builds
trust
![Page 60: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/60.jpg)
Technology
![Page 61: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/61.jpg)
Introduction
The right use of the available technology can greatly improve usability: Speed Accessibility Visibility
![Page 62: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/62.jpg)
Platforms
Bear in mind that there are many different sorts of platforms
The types are expandingPhones, handheld, Web TV,
computers, aural browsers, ...
![Page 63: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/63.jpg)
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
![Page 64: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/64.jpg)
(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
![Page 65: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/65.jpg)
Guideline validation
‘Bobby’: www.cast.org/bobby
![Page 66: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/66.jpg)
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
![Page 67: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/67.jpg)
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!
![Page 68: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/68.jpg)
CSS
Instead of using HTML as presentation language, use a stylesheet language, such as CSS
![Page 69: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/69.jpg)
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.
![Page 70: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/70.jpg)
Semantics in tags
These classifications often have semantic significance (e.g. <H1>)
<I> and <B> were mistakes, use <EM> and <STRONG> instead
![Page 71: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/71.jpg)
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>
![Page 72: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/72.jpg)
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
![Page 73: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/73.jpg)
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.
![Page 74: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/74.jpg)
Aims of CSS
easy to writeeasy to implementhas a development path.CSS is a 90% solutionFor all typesetting possibilities XSL is
being developed
![Page 75: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/75.jpg)
CSS
CSS is a language that allows you to specify how a document, or set of documents, should look.
![Page 76: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/76.jpg)
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
![Page 77: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/77.jpg)
XML is coming
CSS is also an enabling technology for XML (more later)
![Page 78: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/78.jpg)
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, ...
![Page 79: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/79.jpg)
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.
![Page 80: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/80.jpg)
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!
![Page 81: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/81.jpg)
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
![Page 82: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/82.jpg)
...
Pages become more accessible for the sight-impaired (who can use speech browsers)
Pages are viewable on a wider range of platform types
![Page 83: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/83.jpg)
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
![Page 84: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/84.jpg)
Example
<html><head><link rel=”stylesheet” type=”text/css” href=”http://www.cwi.nl/style.css”></head><body> ...</body></html>
![Page 85: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/85.jpg)
Example...
h1, h2, h3 { font-family: helvetica, sans-serif }body { color: white; background-color: black }p { text-align: justify }
![Page 86: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/86.jpg)
CSS Presentation
Apart from standard HTML effects, CSS can generate a wide range of presentational effects
![Page 87: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/87.jpg)
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>
![Page 88: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/88.jpg)
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
![Page 89: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/89.jpg)
Document structuring
Use HTML to structure your documents
Consider switching to XML
![Page 90: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/90.jpg)
XML
XML is going to replace HTML as delivery language.
XHTML is an XML-ised version of HTML
![Page 91: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/91.jpg)
Specification Techniques
![Page 92: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/92.jpg)
Overview
IntroductionWhat specifications can and can’t doHow and when to use specificationsSpecifications in the design processDifferent techniques, exampleConclusions
![Page 93: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/93.jpg)
Introduction
specification means abstractiondifferent specification techniques
stress different featuresspecifications can range from mock-
up and natural language to formal methods
![Page 94: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/94.jpg)
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
![Page 95: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/95.jpg)
What specifications can’t do
guarantee a system is perfectavoid miscommunication7 myths and more
![Page 96: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/96.jpg)
When to use specifications
complex systems (e.g. multi-agent systems, multimodal systems)
trustworthy systems (e.g. e-commerce)
not for complete systems
![Page 97: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/97.jpg)
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
![Page 98: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/98.jpg)
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)
![Page 99: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/99.jpg)
empiricalsummative
analysis
designempiricalformative
analyticalformative
AssessmentSpecification
implemen-tation
flow of spec/assess task/processflow of iteration
Usability Engineering
![Page 100: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/100.jpg)
(Pressman, 1997)
requirements quick design
prototype
evaluation & refinement
implementation
Prototyping approach
![Page 101: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/101.jpg)
Which Specification Technique?
GOMSGTAZCSP...
![Page 102: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/102.jpg)
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
![Page 103: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/103.jpg)
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.
![Page 104: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/104.jpg)
Example
game to play slide puzzlesspecified by using natural language
and CSP-alike
![Page 105: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/105.jpg)
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)
![Page 106: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/106.jpg)
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?
![Page 107: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/107.jpg)
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
![Page 108: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/108.jpg)
108
Exercise
Optimizing Situation Awareness in a Virtual Music Center
![Page 109: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/109.jpg)
Introduction
Situation Awareness
Perception Comprehension Prediction
![Page 110: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/110.jpg)
Virtual Music Center
Copyright CTIT
![Page 111: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/111.jpg)
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
![Page 112: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/112.jpg)
Scenario-based design
An older woman from Germany buys a ticket for a Jazz concert and a CD of the performing artist.
![Page 113: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/113.jpg)
Design Task
General Structure
Situation Awareness support
Storyboard
![Page 114: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/114.jpg)
Procedure
Split into groups
Design
Short presentation
![Page 115: Usability Techniques for Web-based Services Diversity and Technology](https://reader035.vdocuments.mx/reader035/viewer/2022062713/56649f425503460f94c623ba/html5/thumbnails/115.jpg)
Evaluation
SA Structure ScreensDialog
Perception … … ...
Comprehension … … …
Prediction … … ...