Usability & XML/XSL intro

1. Usability & XML/XSL intro definition of usability Nielsen's rules; Fitt's law XHTML, XML, XSLT server accounts Homework: XHTML verification. Finish XML/XSLT exercises.

2. ISO definition usability of an interface is "the effectiveness, efficiency, and satisfaction with which specified users can achieve specified goals in a particular environment". • effectiveness=does it do the job • efficiency=how well it does it in terms of time, effort, costs (system & user) other factors • satisfaction=perception of user

3. Regarding satisfaction… • IBM usability study story…. • DOS, Windows, OS • two part study: setup versus use • Set up of OS was too painful for group to continue • use part included tests on specific tasks: looking up addresses, writing a letter, sending e-mail, etc. • Performance was poor! Participants said systems were easy to use!

4. Interface • in most/many? cases… • success means the interface is less obvious, not more • User's objective is not to use the interface but to get something accomplished. • Complex interactions (data-rich) require more than simple interactions.

5. Critical factors • Need to define (know) • purpose • process (what goes on before and after, what are the steps, etc.) • user purpose & owner purpose may be different: • Web site with ads: the 'content' is there to 'capture the eyeballs'. • Even in intranet web sites, system owners and system users can have different views. • environment--audience • costs of success and failure Cannot really talk about interface if you don't know these factors.

6. Give examples & describe Purpose(s), Audience/Users, Environment, Measures • Web sites • information, customized and/or personalized information • transactions, including buying and selling of 'shelf goods' and/or customized products • education/training (different type of information, may also include 'transaction', namely testing) • Phone • information, as above • transactions, as above • Other: kiosk, virtual reality

7. Jakob Nielsen's Rules • Simple and natural dialogue-- Minimising complexity, principles of graphical layout. • Speak the user's language– Affordances*, mappings, metaphors and using the user's perspective. • Minimise the user's memory load--Limits of human short-term memory load. Recognition versus recall. • Consistency--Importance of generalisation in learning and use. • Feedback--Types, persistence and response times. • Clearly marked exits--Cancel, undo and action priorities. • Shortcuts--Power-user options* including macros, history and agents. • Good error messages--Guidelines for error messages. • Prevent errors--Interface modes, interface syntactic correctness and commensurate effort. • Help and documentation--Task centred minimal manuals.

8. Affordances • from Don Norman (www.jnd.org) • The word "affordance" was invented by the perceptual psychologist J. J. Gibson (1977, 1979) to refer to the actionable properties between the world and an actor (a person or animal). • perceived affordance: what the user believes to be possible (as way of communicating with system) • for example: using mouse to move cursor to click on specific region

9. Usability Principles (Heuristics) from U. S Dept of Labor 1. Speak the users' language. Use words, phrases, and concepts familiar to the user. Present information in a natural and logical order. 2. Be Consistent. Indicate similar concepts through identical terminology and graphics. Adhere to uniform conventions for layout, formatting, typefaces, labeling, etc. 3. Minimize the users' memory load. Take advantage of recognition rather than recall. Do not force users to remember key information across documents. 4. Build flexible and efficient systems. Accommodate a range of user sophistication and diverse user goals. Provide instructions where useful. Lay out screens so that frequently accessed information is easily found. 5. Design aesthetic and minimalist systems. Create visually pleasing displays. Eliminate information which is irrelevant or distracting.

10. US D. of Labor Heuristics, cont. 6. Use chunking. Write material so that documents are short and contain exactly one topic. Do not force the user to access multiple documents to complete a single thought. 7. Provide progressive levels of detail. Organize information hierarchically, with more general information appearing before more specific detail. Encourage the user to delve as deeply as needed, but to stop whenever sufficient information has been received. 8. Give navigational feedback. Facilitate jumping between related topics. Allow the user to determine her/his current position in the document structure. Make it easy to return to an initial state. 9. Don't lie to the user. Eliminate erroneous or misleading links. Do not refer to missing information.

11. Caution • Usability inspection is NOT as important as consulting with users and [observing] testing by users or as close as you can get to 'real' users. • Still, do it! • Continual monitoring of usage, system performance, etc. is also important. • Prepare for change. • Users liking the system is probably not as important as users 'using' the system [fairly] successfully.

12. User (give name!) • Power-user: frequent, 'expert', repeat client • Novice user: • infrequent user your site • infrequent user in general • Emerging & important phenomenon: users familiar with web sites in general, though not yours. (Nielsen stresses the importance of [following] general standards.) • Need to weigh following conventions versus devices that may better reflect your subject matter.

13. Fitt's Rule(s) • User's ease in using an interface is dependent on distance to targets and size of targets • far is hard[er] • small is hard[er] • edges of screen (specifically, top and left) make good locations since the screen edge is a boundary to movement

14. server accounts • If we don't get them now, will get them … soon. • You will also need a copy of suitable program for file transfer

15. Reasons for 'doing' XML • forces attention on content and • separation of content and display • Appears to be an important, emerging software tool • phone 'speech reco' programmed using VoiceXML • small screen browsers (ssb) (cell phones) use • wml • xhml-mp

16. XHTML • Refinement of HTML to be compatible with XML standard • proper nesting • all lower-case tags (e.g., h1 and not H1) • attribute values quoted • empty tags amended (e.g., <br />, <img … /> • reference to Document Type Definition (including character & language) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

17. XHTML exercise • Create an HTML page or copy-and-paste from something you have done before • upload to your account using ssh (filezilla and we-ftp may also work from on-campus) • use validatorhttp://validator.w3.org/check/referer • Note: well-formed refers to nesting, empty tags, quoting attributes. Validated refers to the DTD, meaning, for XHTML, that the tags are known and in the appropriate place.

18. XML, DTD, XSLT, XPath • XML specifies content in a hierarchical (tree) fashion • You define/specify the tags: a tag is something with a name, possibly attributes, that may package (my term) some content. • DTD defines the structure of content for a particular application • XSLT (extended stylesheet language transform) is written in (as?) XML and specifies how an XML file is to be transformed into something, for example, an HTML file • XPath is the part of XSLT that specifies matches of subtrees of the tree

19. xml … is a format involving • elements (tags) that YOU specify • elements can contain • attributes • text content • other tags A particular organization can define a use of xml for a specific purpose. for example, rss (really simple syndication) specifies an xml format for sharing information on the Web.

20. Role of xslt Take content defined in xml translates by pattern-matching operation into xhtml for (normal) web xhtml-mp or wml for cellphones ??? For example, I used it to get php and asp versions of code for a state capital quiz.

21. XSLT basics • define templates <xsl:template match="XPath pattern"> … </xsl:template> • Templates are invoked (executed, used,…) • root template always processed • applied <xsl:apply-templates select="XPath expression">… </xsl:apply-templates> • called (template needs to have name, optionally parameters) <xsl:call-templates name="name of template"> <xsl:with-param name="parameter name" select"value" /> </xsl:call-template> • For each construction <xsl:for-each select="Xpath pattern"> … </xsl:for-each> in current context

22. How is this used? • IE 6+, Mozilla, others will each accept an XML document, with references to a DTD and a XSLT, and produce a transformed file. These check for 'well-formed', but do not validate against DTD. • demonstrate this in later class. • There are other XSLT processors: SAXON, XALAN, others. • These would be appropriate to do transformation “off-line” • There are websites to check against DTD and against XML Schema.

23. Canonical example (more general) <?xml version="1.0" ?> <?xml-stylesheet href="greeting.xsl" type="text/xsl"?> <message> <greeting>Hi</greeting> <target>you all</target> </message>

24. What do we want to do? • Transform xml into html • format greeting • format target of greeting • Implementation • use 3 templates, the first template will call apply-templates

25. <?xml version="1.0" encoding="UTF-8" ?> <xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html"/> <xsl:template match="/message"> <html><head><title>Greeting </title> </head> <body> <xsl:apply-templates /> </body> </html> </xsl:template> <xsl:template match="greeting"> <h1><xsl:value-of select="."/>, </h1> </xsl:template> <xsl:template match="target"> <h3><xsl:value-of select="."/> </h3> </xsl:template> </xsl:transform> could use xsl:stylesheet

26. Comments • The first template is the root template, that is, it is aimed at the root of the XML file, message. • The construction xsl: is an example of a namespace. These XSL files all use the xsl namespace. • The matches in each template define a current node as the context of all expressions. The "." refers to the current node.

27. Execution (transformation) • Using any browser (e.g., IE or Mozilla), open up the xml file. • The source may be displayed differently in different browsers. • The xsl could have also referenced a css file.

29. Try it! • First, follow as close as you want my xml example and my xsl example • Next, vary the xml file • Next, vary the xsl file • Whatever you want… • Work on examples for homework.

30. New example • Inspired by World Cup • more complex data • do different things depending on data • will show 2 xsl files • Situation: one person/organization prepares information on [each] soccer match; another prepares the formatting. Matches have date, team elements (score as attribute), and, optionally headline, story, pictures.

31. <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet href="results.xsl" type="text/xsl"?> <results group="A"> <match feature="no"> <date>07-Jun-2002 </date> <team score="3">Spain </team> <team score="1">Paraguay </team> </match> <match feature="no"> <date>07-Jun-2002 </date> <team score="2">Sweden </team> <team score="1">Nigeria </team> </match> <match feature="no"> <date>07-Jun-2002 </date> <team score="1">England </team> <team score="0">Argentina </team> <picture>soccer1.jpg </picture> </match>

32. <match feature="yes"> <date>31-May-2002 </date> <headline>France loses to Senegal </headline> <story>The 1998 World Cup Champion France lost the opening game to Senegal. It was Senegal's first appearance in a World Cup. This was a stunning upset for France. The team was playing without one of the stars, Zidane. </story> <team score="1">Senegal </team> <team score="0">France </team> <picture>soccer1.jpg </picture> </match> <match feature="yes"> <date>05-Jun-2002</date> <headline>USA Wins</headline> <story>The USA team upsets Portugal in its first game in Round 1 of the World Cup. The score was 3 to 2. Portugal was considered a superior team. This means that the USA will not finish last as it did in the previous outing.</story> <team score="3">USA </team> <team score="2">Portugal </team> <picture>soccer2.jpg</picture> </match> </results>

33. What do we want to do? • Transform • xml into HTML • for any story that is marked as a feature, display headline (format as headline), story, and picture • for any story that is not a feature, print out results. • make use of cascading style sheet • Implementation • attributes accessed using @ • use templates that specify attribute value • sort matches so that the feature="yes" go before the feature="no". • refer to css by outputting appropriate LINK tag.

34. <?xml version="1.0" encoding="UTF-8" ?> <xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html"/> <xsl:template match="/results"> <html> <head><title>Results of World Cup </title> <LINK REL="stylesheet" TYPE="text/css" HREF="results.css"/> </head> <body> <xsl:apply-templates select="/results/match"> <xsl:sort select="@feature" order="descending"/> </xsl:apply-templates> </body> </html> </xsl:template>

35. <xsl:template match="match[@feature='yes']"> <h2><xsl:value-of select="headline"/><br/> </h2> <table> <td> <xsl:value-of select="story"/> </td> <td><img src="{picture}" /> </td> </table> <p>Scores follow....</p> </xsl:template> <xsl:template match="match"> <h3> <xsl:value-of select="team[1]"/> versus <xsl:value-of select="team[2]"/> </h3> <p>Played on <xsl:value-of select="date"/> </p> <p>Result: <xsl:value-of select="team[1] "/> <xsl:value-of select="team[1]/@score " /> <xsl:text>, </xsl:text> <xsl:value-of select="team[2] "/> <xsl:value-of select="team[2]/@score " /> </p> </xsl:template> </xsl:transform> matches the remaining match nodes

36. results.css file H2 {color: "RED"; font: normal 30pt "Verdana"; text_align:center;} p {text-align: justify; font:10pt/15pt}

38. Class work / homework • Produce, upload and verify XHTML • Try out examples. Make changes. • Do an on-line XML/XSL tutorial. • EXTRA CREDIT opportunity: improve (correct) my example to only output "Scores follow" after last featured match. • hint: use position() and last()