Technology. Introduction zThe right use of the available technology can greatly improve usability:...

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

49

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 … … ...