1. Usability Techniques for Web-based Services Diversity and Technology

2. Introduction A thought experiment: What is special about sites that you return often to? What gets you coming back?

3. Why do people return to a site?

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

5. Today 17:15 Universal accessibility Individualisation Internationalisation 18:30 Break 19:00 Web-design Technology to support usability Specification techniques

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

7. Universal Accessibility Design for All

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

9. 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)

10. Web Content Guidelines (W3C) http://www.w3.org/TR/WAI-WEBCONTENT 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

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

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

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

14. Practical Cognitive Theory Factors that affect Web-navigation: Spatial ability for mental modeling Memory capacity for task-set switching Situation awareness during interaction

15. Theoretical and Empirical Based User Requirements for Elderly

16. Web-Navigation Performance

17. Spatial Ability Mental rotation task => spatial representation

18. Memory Capacity => scheduler and goal creation memory task

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

20. Transform User Requirements into Navigation Support for Elderly

21. Analysis Map user requirements on current support functions Prioritize according to “Web-service objectives” Estimate implementation costs => synthesize support concepts

22. Design and Implementation Three support functions: categorizing landmarks history map navigation assistant

23. Evaluation Three usability measures: effectiveness efficiency satisfaction

24. Example Satisfaction Results

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

26. Internationalisation The Culture is in the Detail

27. Internationalisation Often referred to as I18N Could just as well be D16N: Deparochialisation

28. Culture We all walk, eat, sleep, talk Culture is the difference Cultures are everywhere: national, gender, regional, technical...

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

30. 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 with each other

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

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

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

34. Cultural Interfaces (White American Women)

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

36. What is American here?

37. Folders

38. Whose computer?

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

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

41. 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)

42. Beeps Beware of generating beeps from an application

43. 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)

44. Currency Makes the user feel at home.

45. 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’

46. The Role of Colours Don’t assume meanings to colours that you would expect. Black/white Red/green

47. Characters Don’t assume standard meanings to characters “?” vs “;” vs “i”

48. Greek version

49. French version

50. Characters Checkbox: “x” can mean “no”, tick doesn’t necessarily mean yes This is a tick on homework in the Netherlands:

51. Conclusion Culture is in the details Being aware of the issues is an important first step Making the user feel at home builds trust

52. Technology

53. Introduction The right use of the available technology can greatly improve usability: –Speed –Accessibility –Visibility

54. Platforms Bear in mind that there are many different sorts of platforms The types are expanding Phones, handheld, Web TV, computers, aural browsers,...

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

56. 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!

57. CSS Instead of using HTML as presentation language, use a stylesheet language, such as CSS

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

59. Semantics in tags These classifications often have semantic significance (e.g. ) and were mistakes, use and instead

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

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

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

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

64. CSS CSS is a language that allows you to specify how a document, or set of documents, should look.

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

66. XML is coming CSS is also an enabling technology for XML (more later)

67. 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,...

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

69. 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!

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

71. ... Pages become more accessible for the sight-impaired (who can use speech browsers) Pages are viewable on a wider range of platform types

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

73. Example <link rel=”stylesheet” type=”text/css” href=”http://www.cwi.nl/style.css”>...

74. Example... h1, h2, h3 { font-family: helvetica, sans-serif } body { color: white; background-color: black } p { text-align: justify }

75. CSS Presentation Apart from standard HTML effects, CSS can generate a wide range of presentational effects

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

77. Character encoding Or make sure your server sends the right fields Don’t use platform-specific encodings

78. Document structuring Use HTML to structure your documents Consider switching to XML

79. XML XML is going to replace HTML as delivery language. XHTML is an XML-ised version of HTML

80. Specification Techniques

81. Overview Introduction What specifications can and can’t do How and when to use specifications Specifications in the design process Different techniques, example Conclusions

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

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

84. What specifications can’t do guarantee a system is perfect avoid miscommunication 7 myths and more

85. When to use specifications complex systems (e.g. multi-agent systems, multimodal systems) trustworthy systems (e.g. e-commerce) not for complete systems

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

87. 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)

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

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

90. Which Specification Technique? GOMS GTA Z CSP...

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

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

93. Example game to play slide puzzles specified by using natural language and CSP-alike

94. 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)

95. 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?

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

97. Exercise Optimizing Situation Awareness in a Virtual Music Center

98. Introduction Situation Awareness –Perception –Comprehension –Prediction

99. Virtual Music Center Copyright CTIT

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

101. Scenario-based design An older woman from Germany buys a ticket for a Jazz concert and a CD of the performing artist.

102. Design Task General Structure Situation Awareness support Storyboard

103. Procedure Split into groups Design Short presentation

104. Evaluation SA Structure ScreensDialog Perception… …... Comprehension… …… Prediction… …...