technology. introduction zthe right use of the available technology can greatly improve usability:...
TRANSCRIPT
![Page 1: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/1.jpg)
Technology
![Page 2: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/2.jpg)
Introduction
The right use of the available technology can greatly improve usability: Speed Accessibility Visibility
![Page 3: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/3.jpg)
Platforms
Bear in mind that there are many different sorts of platforms
The types are expandingPhones, handheld, Web TV,
computers, aural browsers, ...
![Page 4: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/4.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 5: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/5.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 6: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/6.jpg)
Guideline validation
‘Bobby’: www.cast.org/bobby
![Page 7: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/7.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 8: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/8.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 9: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/9.jpg)
CSS
Instead of using HTML as presentation language, use a stylesheet language, such as CSS
![Page 10: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/10.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 11: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/11.jpg)
Semantics in tags
These classifications often have semantic significance (e.g. <H1>)
<I> and <B> were mistakes, use <EM> and <STRONG> instead
![Page 12: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/12.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 13: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/13.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 14: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/14.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 15: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/15.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 16: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/16.jpg)
CSS
CSS is a language that allows you to specify how a document, or set of documents, should look.
![Page 17: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/17.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 18: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/18.jpg)
XML is coming
CSS is also an enabling technology for XML (more later)
![Page 19: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/19.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 20: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/20.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 21: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/21.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 22: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/22.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 23: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/23.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 24: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/24.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 25: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/25.jpg)
Example
<html><head><link rel=”stylesheet” type=”text/css” href=”http://www.cwi.nl/style.css”></head><body> ...</body></html>
![Page 26: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/26.jpg)
Example...
h1, h2, h3 { font-family: helvetica, sans-serif }body { color: white; background-color: black }p { text-align: justify }
![Page 27: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/27.jpg)
CSS Presentation
Apart from standard HTML effects, CSS can generate a wide range of presentational effects
![Page 28: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/28.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 29: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/29.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 30: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/30.jpg)
Document structuring
Use HTML to structure your documents
Consider switching to XML
![Page 31: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/31.jpg)
XML
XML is going to replace HTML as delivery language.
XHTML is an XML-ised version of HTML
![Page 32: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/32.jpg)
Specification Techniques
![Page 33: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/33.jpg)
Overview
IntroductionWhat specifications can and can’t doHow and when to use specificationsSpecifications in the design processDifferent techniques, exampleConclusions
![Page 34: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/34.jpg)
Introduction
specification means abstractiondifferent specification techniques
stress different featuresspecifications can range from mock-
up and natural language to formal methods
![Page 35: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/35.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 36: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/36.jpg)
What specifications can’t do
guarantee a system is perfectavoid miscommunication7 myths and more
![Page 37: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/37.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 38: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/38.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 39: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/39.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 40: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/40.jpg)
empiricalsummative
analysis
designempiricalformative
analyticalformative
AssessmentSpecification
implemen-tation
flow of spec/assess task/processflow of iteration
Usability Engineering
![Page 41: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/41.jpg)
(Pressman, 1997)
requirements quick design
prototype
evaluation & refinement
implementation
Prototyping approach
![Page 42: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/42.jpg)
Which Specification Technique?
GOMSGTAZCSP...
![Page 43: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/43.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 44: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/44.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 45: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/45.jpg)
Example
game to play slide puzzlesspecified by using natural language
and CSP-alike
![Page 46: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/46.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 47: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/47.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 48: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/48.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 49: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/49.jpg)
49
Exercise
Optimizing Situation Awareness in a Virtual Music Center
![Page 50: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/50.jpg)
Introduction
Situation Awareness
Perception Comprehension Prediction
![Page 51: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/51.jpg)
Virtual Music Center
Copyright CTIT
![Page 52: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/52.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 53: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/53.jpg)
Scenario-based design
An older woman from Germany buys a ticket for a Jazz concert and a CD of the performing artist.
![Page 54: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/54.jpg)
Design Task
General Structure
Situation Awareness support
Storyboard
![Page 55: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/55.jpg)
Procedure
Split into groups
Design
Short presentation
![Page 56: Technology. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility](https://reader034.vdocuments.us/reader034/viewer/2022051619/56649e3c5503460f94b2eb48/html5/thumbnails/56.jpg)
Evaluation
SA Structure ScreensDialog
Perception … … ...
Comprehension … … …
Prediction … … ...