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?

This tutorial

About ‘diversity and technology’:

  • recognising that people are different
  • recognising that cultures are different
  • identifying the technology and techniques to support such differences

Today

Individualisation

Internationalisation

Technology to support usability

Specification techniques

About the speakers

Members of a team: UWISH

 

Universal Accessibility

Design for All

General Principles
Vanderheiden (1997)

Guidelines for Elderly
Czaja (1997)

Web Content Guidelines (W3C) http://www.w3.org/TR/WAI-WEBCONTENT

Conclusions

 

® Cognitive engineering framework

Cognitive Engineering (1)

Cognitive Engineering (2)

Practical Cognitive Theory

Factors that affect Web-navigation:

  • Spatial ability for mental modeling
  • Memory capacity for task-set switching
  • Situation awareness during interaction

Theoretical and Empirical Based User Requirements
for Elderly

Web-Navigation Performance

Spatial Ability

Þ spatial representation

Memory Capacity

Þ scheduler and goal creation

Situation Awareness

Þ multi-media, context and goal refinement

Transform User Requirements
into Navigation Support
for Elderly

Analysis

 

Þ synthesize support concepts

Design and Implementation

Three support functions:

  • categorizing landmarks
  • history map
  • navigation assistant

Evaluation

Three usability measures:

  • effectiveness
  • efficiency
  • satisfaction

Example Satisfaction Results

Conclusions

Internationalisation

The Culture is in the Detail

Internationalisation

Culture

The World Wide Web

Email and News

User Interfaces

User interfaces have three aims

  • Efficiency
  • Effectiveness
  • Satisfaction

 

Transparency should be an aim

Games have special needs

So why internationalisation?

Are there ‘Cultural’ UI’s?

Cultural Interfaces

(White
American
Women)

Perhaps there are...

 

 

Currently: culture is exposed in the details

What is American here?

Folders

Whose computer?

Neighbours?

Pay attention to the detail

For instance:

  • Addresses
  • Dates
  • Beeps
  • Languages
  • Currency and other units
  • Icons

Addresses (stupid stupid)

Example

Dates

12/10/2000 is ambiguous

Beeps

Languages (and not flags)

Doubly bad example

Good example

Acceptable use of flags

Currency

Wrong use of currency

Other units are just as important

Icons

‘Script’ icon in Windows

The Role of Colours

Don’t assume meanings to colours that you would expect.

  • Black/white
  • Red/green

Characters

Greek version

French version

Characters

Conclusion

 

Technology

Introduction

 

Platforms

W3C Accessibility Guidelines

(guidelines)

Guideline validation

Correct use of HTML

Use of HTML: presentation

CSS

HTML and SGML

For instance, <H1> </H1> defines a heading without specifying how it should look. <UL> <LI>… </UL>

specifies a list of items.

Semantics in tags

Contamination

The problem with the new tags

Style Sheets

Aims of CSS

 

CSS

Advantages

XML is coming

 

Levels

Compatibility

Check your log files!

Why is CSS good for usability?

...

Why is CSS good for the author?

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

Language

en-gb,en;q=0.8,nl;q=0.5,fr;q=0.3

Character encoding

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

 

Document structuring

XML

Specification Techniques

Overview

Introduction

Benefits of specifications

What specifications can’t do

When to use specifications

Role of specifications
in design process

 

Empirical Design Methods
& Formal methods

 

 

Usability Engineering

Prototyping approach

(Pressman, 1997)

Which Specification Technique?

Different Techniques (I)

Different Techniques (II)

Example

Which Specification Technique

Accessibility of
Specification Techniques

Conclusions

Exercise

Optimizing Situation Awareness in a Virtual Music Center

Introduction

 

Virtual Music Center

General Information

 

 

Scenario-based design

Design Task

 

  • Situation Awareness support

 

  • Storyboard

Procedure

 

  • Design

 

  • Short presentation

Evaluation

SA Structure Screens Dialog

 

Perception … … ...

Comprehension … … …

 

Prediction … … ...