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 17:15 Universal accessibility Individualisation Internationalisation 18:30 Break 19:00 Web-design Technology to support usability Specification techniques

About the speakers Members of a team: UWISH Usability of Web-based Information Services for Hypermedia

Universal Accessibility Design for All

General Principles Vanderheiden (1997) Use: equitable, flexible, simple and intuitive. Perceptible information and error tolerance. Low physical effort and appropriate size and space for approach.

Guidelines for Elderly Czaja (1997) Contrast, screen glare, object size Minimal info, consistent location, group Highlight, color discrimination, key label Clear icons, practice Minimal demands on memory Consistency, simplicity (e.g. online help)

Web Content Guidelines (W3C) Auditory/visual alternatives/not color alone Markup and style sheets Natural language, tables, pages User control, access of embedded UIs Device independence, interim solutions W3C technologies, context information Clear navigation and simple documents

Conclusions Guidelines are available A coherent, complete, well-founded and practical set is lacking Techniques for application of the guidelines are scarce  Cognitive engineering framework

Cognitive Engineering (1) empirical summative analysis design empirical formative analytical formative Assessment Specification implemen- tation flow of spec/assesstask/processflow of iteration

practical theory effectiveness, efficiency and satisfaction objectives Web-service users, goals, info/ support needs and use context specification Cognitive Engineering (2) assessment data/ info task or process

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 Mental rotation task => spatial representation

Memory Capacity => scheduler and goal creation memory task

News Products Introduction FacilitiesDepartments PeopleProjects Request for information Situation Awareness => multi-media, context and goal refinement categorise task

Transform User Requirements into Navigation Support for 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 landmarks history map navigation assistant

Evaluation Three usability measures: effectiveness efficiency satisfaction

Example Satisfaction Results

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 I18N Could just as well be D16N: Deparochialisation

Culture We all walk, eat, sleep, talk Culture is the difference Cultures 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

and News and news on the other hand were American inventions Greeks (and many others) have to use an agreed mapping to communicate with each other

User Interfaces User interfaces have three aims Efficiency Effectiveness Satisfaction Transparency Games

So why internationalisation? Make people feel at home Trust Even spelling in your own language area Why did Toys R Us fail in the Netherlands? Packing books

Are there ‘Cultural’ UI’s? Aaron Marcus 1993 (This is for a European Male)

Cultural Interfaces (White American Women)

Perhaps there are... Maybe worth a design competition… Currently: culture is exposed in the details

What is American here?

Folders

Whose computer?

Pay attention to the detail For instance Addresses Dates Beeps Languages Currency Icons

Addresses (stupid stupid) Don’t require fields that not everyone has Don’t impose an order on the fields

Dates Don’t use all number formats 12/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)

Currency Makes the user feel at home.

Icons Can be insulting Most combination of hand/finger positions is an insult somewhere in the world, even ‘Thumbs up’! Avoid visual puns, ‘run’, ‘step’, ‘save’, ‘change’, even ‘server’

The Role of Colours Don’t assume meanings to colours that you would expect. Black/white Red/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 details Being aware of the issues is an important first step Making 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 expanding Phones, handheld, Web TV, computers, aural browsers,...

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 language Avoid display-oriented tags (font, blink, …) Avoid the use of images for text Avoid using tables for layout Always use the ALT attribute on images 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 documents For instance, defines a heading without specifying how it should look. … specifies a list of items.

Semantics in tags These classifications often have semantic significance (e.g. ) and were mistakes, use and 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 and

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 write easy to implement has a development path. CSS is a 90% solution For 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 presentation Makes HTML a structure language again Makes HTML easier to write (and read) All HTML styles (and more) are possible You can define a house style in one file Accessible for the sight-impaired Still 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 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 centralised Easier to provide a house style Wider range of presentation possibilities Separation of concerns

Example <link rel=”stylesheet” type=”text/css” href=”

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

Character encoding 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 Introduction What specifications can and can’t do How and when to use specifications Specifications in the design process Different techniques, example Conclusions

Introduction specification means abstraction different specification techniques stress different features specifications can range from mock-up and natural language to formal methods

Benefits of specifications identification of system properties error and inconsistency detection specifications 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 perfect avoid miscommunication 7 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)

Usability Engineering empirical summative analysis design empirical formative analytical formative Assessment Specification implemen- tation flow of spec/assesstask/processflow of iteration

Prototyping approach (Pressman, 1997) requirements quick design prototype evaluation & refinement implementation

Which Specification Technique? GOMS GTA Z CSP...

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 puzzles specified 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

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