1. Technology

2. Introduction zThe right use of the available technology can greatly improve usability: ySpeed yAccessibility yVisibility

3. Platforms zBear in mind that there are many different sorts of platforms zThe types are expanding zPhones, handheld, Web TV, computers, aural browsers,...

4. W3C Accessibility Guidelines zProvide equivalents for sound and visuals zDon’t rely on colour alone zUse markup and style sheets, properly zClarify natural language use zTables should transform gracefully zUse of new technologies should transform zAllow control of time-based changes

5. (guidelines) zEnsure embedded interfaces are accessible zBe device-independent zUse interim solutions zUse W3C technologies and guidelines zProvide context and orientation zProvide clear navigation zDocuments should be clear and simple

6. Guideline validation z‘Bobby’: www.cast.org/bobby

7. Correct use of HTML zMuch existing software produces bad HTML yCharacter sets yFixed fonts and sizes yInaccessible content zCheck the output on as many devices as possible

8. Use of HTML: presentation zHTML is really a structure language zAvoid display-oriented tags (font, blink, …) zAvoid the use of images for text zAvoid using tables for layout zAlways use the ALT attribute on images zEven better: use zDon’t assume anything about pixels!

9. CSS zInstead of using HTML as presentation language, use a stylesheet language, such as CSS

10. HTML and SGML zHTML (up to now) has been an SGML application. zSGML is intended to define the structure of documents For instance, defines a heading without specifying how it should look. … specifies a list of items.

11. Semantics in tags zThese classifications often have semantic significance (e.g. ) z and were mistakes, use and instead

12. Contamination zNetscape started to add their own tags, based on the idea that with their market penetration they could get a head start. zUnfortunately most tags added are presentation-oriented tags such as and

13. The problem with the new tags zPresentation 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

14. Style Sheets zIn 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.

15. Aims of CSS zeasy to write zeasy to implement zhas a development path. zCSS is a 90% solution zFor all typesetting possibilities XSL is being developed

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

17. Advantages zSeparates content from presentation zMakes HTML a structure language again zMakes HTML easier to write (and read) zAll HTML styles (and more) are possible zYou can define a house style in one file zAccessible for the sight-impaired zStill visible on non-CSS browsers

18. XML is coming zCSS is also an enabling technology for XML (more later)

19. Levels zCSS has been designed with upwards and downwards compatibility in mind. yCSS1: basic formatting, fonts, colours, layout; quick and easy to implement yCSS2: more advanced formatting; aural style sheets yCSS3: printing, multi-column,...

20. Compatibility zIn general a valid CSS1 style sheet is also a valid CSS2 style sheet. zIn general a CSS2 style sheet can be read and used by a CSS1-supporting browser.

21. Check your log files! zMore than 95% of surfers now use a CSS1-compatible browser: yMicrosoft IE 3, 4, 5 yNetscape 4 yOpera 3.5 zWhile the quality of the support for CSS on these browsers is varied, you never need to use the tag again!

22. Why is CSS good for usability? zPresentation is not hard-wired in the HTML zUsers can make their own choices (font size, colours, etc), and override the documents zPages load faster

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

24. Why is CSS good for the author? zDocuments become easier to write (and read) zPresentation is centralised zEasier to provide a house style zWider range of presentation possibilities zSeparation of concerns

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

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

27. CSS Presentation zApart from standard HTML effects, CSS can generate a wide range of presentational effects

28. Language zUsers can specify a language preference; the server can identify this and serve pages in that language zAccept-Language: en-gb,en;q=0.8,nl;q=0.5,fr;q=0.3 zShow language encoding z zUse and

29. Character encoding z zOr make sure your server sends the right fields zDon’t use platform-specific encodings

30. Document structuring zUse HTML to structure your documents zConsider switching to XML

31. XML zXML is going to replace HTML as delivery language. zXHTML is an XML-ised version of HTML

32. Specification Techniques

33. Overview zIntroduction zWhat specifications can and can’t do zHow and when to use specifications zSpecifications in the design process zDifferent techniques, example zConclusions

34. Introduction zspecification means abstraction zdifferent specification techniques stress different features zspecifications can range from mock-up and natural language to formal methods

35. Benefits of specifications zidentification of system properties zerror and inconsistency detection zspecifications can establish communication between designers and programmers z(formal) specifications can be used to create (interactive) prototypes

36. What specifications can’t do zguarantee a system is perfect zavoid miscommunication z7 myths and more

37. When to use specifications zcomplex systems (e.g. multi-agent systems, multimodal systems) ztrustworthy systems (e.g. e-commerce) znot for complete systems

38. Role of specifications in design process zuse formal specification linked to empirical methods for design and evaluation zspecification techniques can be used throughout the entire design process zthe design process used does not matter

39. Empirical Design Methods & Formal methods zEmpirical methods (like usability engineering or the prototyping approach) have much attention for the user’s needs. zSpecification techniques add attention for the system’s behaviour in critical situations (see benefits)

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

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

42. Which Specification Technique? zGOMS zGTA zZ zCSP z...

43. Different Techniques (I) zGoals, Operators, Methods and Selection (GOMS). Hierarchical description of the user’s goals and tasks zGroupware Task Analysis (GTA).Task modeling in environments where many people interact with a system

44. Different Techniques (II) zZ. Mathematical description of entities and their relations. Best fitted for the description of static properties of systems zCSP. Algebraic description of interacting, dynamic processes.

45. Example zgame to play slide puzzles zspecified by using natural language and CSP-alike

46. Which Specification Technique zthe use of the specification in the design process determines the choice of technique zuse combinations (e.g. Z or CSP combined with natural language)

47. Accessibility of Specification Techniques zthe more formal/mathematical the specification technique the steeper the learning curve: yreadability. Especially specification in for example Z can scare people of. yeasy to write?

48. Conclusions zuse formal methods complementary to empirical design methods zuse formal methods for critical parts, zi.e. parts that: yeither must function properly, yor are likely to give trouble zthe right technique at the right spot

49. 49 Exercise Optimizing Situation Awareness in a Virtual Music Center

50. Introduction zSituation Awareness yPerception yComprehension yPrediction

51. Virtual Music Center Copyright CTIT

52. General Information zVirtual Music Center contains: ya music theater booking service ya music shop zUsers yvisitors of all sorts of concerts ybuyers of Jazz and Classical music

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

54. Design Task zGeneral Structure zSituation Awareness support zStoryboard

55. Procedure zSplit into groups zDesign zShort presentation

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