Embed Size (px)
Citation preview
Process of interface design
Instant Saxon
XML/XSLT to JavaScript
Design process, sampling
Class time for work on user projects
Homework: complete user observation assignment. Decide on
project
View source on browser
• Original file: xml pointing to xsl:– Source will be the xml file.
• Original file: HTML/Javascript manipulating xml objects:– Source will be the HTML/Javascript file
• (Original file php/asp on server.– Source will be the HTML file produced by the
middleware )
Instant Saxon
• XSLT parser• find on Web and download• Used to debug next examples
– IE doesn't display the results of the transformation
• Sample call (from Run command line)– put output (-o) in file named stuff.html from xml file
names, using the xsl file named in the xml file (-a)
saxon –o stuff.html –a pics2.xml
XML/XSLT HTML with JavaScript
• Simple mouseover image swap
• Real example: multiple sets of images, determined by xml
• Makes use of external javascript file– avoids problems of characters in script being
'escaped'.
content file
<?xml version="1.0" ?>
<?xml-stylesheet href="mouseover2.xsl" type="text/xsl"?>
<pictures>
<oimage>Liz-book.jpg</oimage>
<nimage>Darcy3.jpg</nimage>
</pictures>
Transformation logic
• Produce the constants: the html head, first part of body, including the script tag
• From the xml data for the original image and the new image– produce appropriate values for the
onMouseOver and onMouseOut attributes– produce appropriate image tag
<?xml version="1.0" ?>
<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" />
<xsl:template match="/pictures">
<html> <head> <title> Rollover test </title>
<script language="JavaScript" type="text/javascript" src="movein.js">
</script> </head> <body>
Note: using separate file avoids XHTML problems
<xsl:element name="a">
<xsl:attribute name="href"></xsl:attribute>
<xsl:attribute name="onMouseOver">movein('<xsl:value-of select="nimage"/>');</xsl:attribute>
<xsl:attribute name="onMouseOut">movein('<xsl:value-of select="oimage"/>');</xsl:attribute>
<xsl:attribute name="onClick">return false;</xsl:attribute>
<xsl:element name="img">
<xsl:attribute name="src"><xsl:value-of select="oimage"/></xsl:attribute>
<xsl:attribute name="name">picture1</xsl:attribute>
</xsl:element>
</xsl:element>
</body> </html>
</xsl:template> </xsl:transform>
not id (which doesn't work in IE
movein.js
function movein(image)
{
window.document.picture1.src=image;
}
Multiple image sets example
• xml file can contain any number of pairs of images
• Problem: need to refer to specific img tags.– Solution: use document.images[n].src in
JavaScript function– explicitly convert string to number
<?xml version="1.0" ?><?xml-stylesheet href="mouseoversets.xsl"
type="text/xsl"?><sets> <set> <oimage>Liz-book.jpg</oimage> <nimage>Darcy3.jpg</nimage> </set> <set> <oimage>soccer1.jpg</oimage> <nimage>soccer2.jpg</nimage> </set></sets>
<?xml version="1.0" ?><xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0"><xsl:output method="html" /><xsl:template match="/sets"><html><head><title> Rollover test </title><script language="JavaScript" type="text/javascript" src="moveins.js"></script></head><body>Pictures <br/> <xsl:apply-templates select="/sets/set"/></body></html></xsl:template>
<xsl:template match="set"> <xsl:variable name="imagenum" select="position()"/> <xsl:element name="a"> <xsl:attribute name="href"></xsl:attribute> <xsl:attribute name="onMouseOver">moveins('<xsl:value-of
select="nimage"/>','<xsl:value-of select="$imagenum"/>');</xsl:attribute>
<xsl:attribute name="onMouseOut">moveins('<xsl:value-of select="oimage"/>','<xsl:value-of select="$imagenum"/>');</xsl:attribute>
<xsl:attribute name="onClick">return false;</xsl:attribute> <xsl:element name="img"> <xsl:attribute name="src"><xsl:value-of
select="oimage"/></xsl:attribute> </xsl:element> </xsl:element> <br/></xsl:template></xsl:transform>
moveins.js
function moveins(image,idn)
{
var n = parseInt(idn);
window.document.images[n-1].src=image;
}
Process of building interface
• Identify/define user (give user(s) name(s)).• Build & study content.• Focus on functionality (in users' terms) independent
of technology.• Be creative (allow creativity to happen).• Involve real users in testing.• After deploying system, monitor use and be willing
to modify system to improve usability.– Build system that supports this: system must collect
information and be adaptible.
User-centered designEdward Tufte (and others)• Don't condescend.• Don't make the metaphor the bureaucracy of the
organization.• quotes Alan Cooper: "No matter how cool, how
beautiful the interface, it would be better if there were less of it…"
Also• Be careful of use of computer jargon or business jargon
(unless you are sure the audience uses it.)– Use spell-check and don't add new words.– Citibank story.
User testing
• mainly qualitative: help you understand problem.– User testing should prevent big failures, but is not a
substitute for ideas.
• Set of test subjects should include representatives of different classes of users (for example, using different platforms) but sample itself does not need be representative.
• Be open to any and all feedback.
Sampling
• Say you do want to prepare for the 'real world' by using a panel.– For example, for determining amount of server
space required
• You need to determine significant categories and the size of each in the population
• Do panel test and multiple!!!
Example
• Category A, category B, category C represent 500, 300, 200 respectively
• Your panel is 4, 5, 3– If 3 of the 4 As do something, assume 3/4ths of
500 will do it (375). – If 3 of the 5 Bs did something, assume 3/5ths of
200 will do it (120).
• No guarantees, because it is a sample…
Work session
• user observation study
• (preliminary discussions on project)
