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

Usability & XML/XSL intro

  • Upload
    donoma

  • View
    62

  • Download
    0

Embed Size (px)

DESCRIPTION

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. ISO definition. - PowerPoint PPT Presentation

Citation preview

Page 1: Usability & XML/XSL intro

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.

Page 2: Usability & XML/XSL intro

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

Page 3: Usability & XML/XSL intro

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!

Page 4: Usability & XML/XSL intro

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.

Page 5: Usability & XML/XSL intro

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.

Page 6: Usability & XML/XSL intro

Give examples & describePurpose(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

Page 7: Usability & XML/XSL intro

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.

Page 8: Usability & XML/XSL intro

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

Page 9: Usability & XML/XSL intro

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.

Page 10: Usability & XML/XSL intro

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.

Page 11: Usability & XML/XSL intro

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.

Page 12: Usability & XML/XSL intro

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.

Page 13: Usability & XML/XSL intro

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

Page 14: Usability & XML/XSL intro

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

Page 15: Usability & XML/XSL intro

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

Page 16: Usability & XML/XSL intro

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">

Page 17: Usability & XML/XSL intro

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.

Page 18: Usability & XML/XSL intro

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

Page 19: Usability & XML/XSL intro

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.

Page 20: Usability & XML/XSL intro

Role of xslt

Take content defined in xml

translates by pattern-matching operation intoxhtml for (normal) webxhtml-mp or wml for cellphones???

For example, I used it to get php and asp versions of code for a state capital quiz.

Page 21: Usability & XML/XSL intro

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

Page 22: Usability & XML/XSL intro

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.

Page 23: Usability & XML/XSL intro

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>

Page 24: Usability & XML/XSL intro

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

Page 25: Usability & XML/XSL intro

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

Page 26: Usability & XML/XSL intro

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.

Page 27: Usability & XML/XSL intro

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.

Page 28: Usability & XML/XSL intro
Page 29: Usability & XML/XSL intro

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.

Page 30: Usability & XML/XSL intro

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.

Page 31: Usability & XML/XSL intro

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

Page 32: Usability & XML/XSL intro

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

Page 33: Usability & XML/XSL intro

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.

Page 34: Usability & XML/XSL intro

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

Page 35: Usability & XML/XSL intro

<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

Page 36: Usability & XML/XSL intro

results.css file

H2 {color: "RED"; font: normal 30pt "Verdana"; text_align:center;}

p {text-align: justify; font:10pt/15pt}

Page 37: Usability & XML/XSL intro
Page 38: Usability & XML/XSL intro

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()