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