usability xml xsl intro n.
Skip this Video
Download Presentation
Usability & XML/XSL intro

Loading in 2 Seconds...

play fullscreen
1 / 38

Usability & XML/XSL intro - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Usability & XML/XSL intro' - donoma

Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
usability xml xsl intro

Usability & XML/XSL intro

definition of usability

Nielsen's rules; Fitt's law


server accounts

Homework: XHTML verification. Finish XML/XSLT exercises.

iso definition
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
regarding satisfaction
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!
  • 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.
critical factors
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.

give examples describe
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
jakob nielsen s rules
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.
  • from Don Norman (
    • 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
usability principles heuristics from u s dept of labor
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.

us d of labor heuristics cont
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.

  • 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.
user give name
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.
fitt s rule s
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
server accounts
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
reasons for doing xml
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
  • 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">

xhtml exercise
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 validator
  • 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.
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

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

role of xslt
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.

xslt basics
XSLT basics
  • define templates

<xsl:template match="XPath pattern"> …


  • Templates are invoked (executed, used,…)
    • root template always processed
    • applied

<xsl:apply-templates select="XPath expression">…


    • called (template needs to have name, optionally parameters)

<xsl:call-templates name="name of template">

<xsl:with-param name="parameter name" select"value" />


  • For each construction

<xsl:for-each select="Xpath pattern">

… </xsl:for-each>

in current context

how is this used
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.
canonical example more general
Canonical example (more general)

<?xml version="1.0" ?>

<?xml-stylesheet href="greeting.xsl" type="text/xsl"?>



<target>you all</target>


what do we want to do
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
<?xml version="1.0" encoding="UTF-8" ?>


xmlns:xsl="" version="1.0">

<xsl:output method="html"/>

<xsl:template match="/message">

<html><head><title>Greeting </title> </head>


<xsl:apply-templates />

</body> </html>


<xsl:template match="greeting">

<h1><xsl:value-of select="."/>,



<xsl:template match="target">

<h3><xsl:value-of select="."/> </h3>



could use xsl:stylesheet

  • 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.
execution transformation
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.
try it
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.
new example
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.
<?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 feature="no">

<date>07-Jun-2002 </date>

<team score="2">Sweden </team>

<team score="1">Nigeria </team>


<match feature="no">

<date>07-Jun-2002 </date>

<team score="1">England </team>

<team score="0">Argentina </team>

<picture>soccer1.jpg </picture>


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


</match> </results>

what do we want to do1
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.
<?xml version="1.0" encoding="UTF-8" ?>


xmlns:xsl="" version="1.0">

<xsl:output method="html"/>

<xsl:template match="/results">


<head><title>Results of World Cup </title>

<LINK REL="stylesheet" TYPE="text/css" HREF="results.css"/>



<xsl:apply-templates select="/results/match">

<xsl:sort select="@feature" order="descending"/>


</body> </html>


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


<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

results css file
results.css file

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

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

class work homework
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()