Process of interface design

1
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

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

3
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

4
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'.

5
content file

• lt?xml version"1.0" ?gt
• lt?xml-stylesheet href"mouseover2.xsl"
  type"text/xsl"?gt
• ltpicturesgt
• ltoimagegtLiz-book.jpglt/oimagegt
• ltnimagegtDarcy3.jpglt/nimagegt
• lt/picturesgt

6
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

7

• lt?xml version"1.0" ?gt
• ltxsltransform xmlnsxsl"http//www.w3.org/1999/X
  SL/Transform" version"1.0"gt
• ltxsloutput method"html" /gt
• ltxsltemplate match"/pictures"gt
• lthtmlgt ltheadgt lttitlegt Rollover test lt/titlegt
• ltscript language"JavaScript" type"text/javascrip
  t" src"movein.js"gt
• lt/scriptgt lt/headgt ltbodygt

Note using separate file avoids XHTML problems
8

• ltxslelement name"a"gt
• ltxslattribute name"href"gtlt/xslattributegt
• ltxslattribute name"onMouseOver"gtmovein('ltxslv
  alue-of select"nimage"/gt')lt/xslattributegt
• ltxslattribute name"onMouseOut"gtmovein('ltxslva
  lue-of select"oimage"/gt')lt/xslattributegt
• ltxslattribute name"onClick"gtreturn
  falselt/xslattributegt
• ltxslelement name"img"gt
• ltxslattribute name"src"gtltxslvalue-of
  select"oimage"/gtlt/xslattributegt
• ltxslattribute name"name"gtpicture1lt/xslattri
  butegt
• lt/xslelementgt
• lt/xslelementgt
• lt/bodygt lt/htmlgt
• lt/xsltemplategt lt/xsltransformgt

not id (which doesn't work in IE
9
movein.js

• function movein(image)
• window.document.picture1.srcimage

10
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.imagesn.src in
  JavaScript function
• explicitly convert string to number

11

• lt?xml version"1.0" ?gt
• lt?xml-stylesheet href"mouseoversets.xsl"
  type"text/xsl"?gt
• ltsetsgt
• ltsetgt
• ltoimagegtLiz-book.jpglt/oimagegt
• ltnimagegtDarcy3.jpglt/nimagegt
• lt/setgt
• ltsetgt
• ltoimagegtsoccer1.jpglt/oimagegt
• ltnimagegtsoccer2.jpglt/nimagegt
• lt/setgt
• lt/setsgt

12

• lt?xml version"1.0" ?gt
• ltxsltransform xmlnsxsl"http//www.w3.org/1999/X
  SL/Transform" version"1.0"gt
• ltxsloutput method"html" /gt
• ltxsltemplate match"/sets"gt
• lthtmlgt
• ltheadgt
• lttitlegt Rollover test lt/titlegt
• ltscript language"JavaScript" type"text/javascrip
  t" src"moveins.js"gt
• lt/scriptgt
• lt/headgt
• ltbodygt
• Pictures ltbr/gt
• ltxslapply-templates select"/sets/set"/gt
• lt/bodygt
• lt/htmlgt
• lt/xsltemplategt

13

• ltxsltemplate match"set"gt
• ltxslvariable name"imagenum" select"position()"/
  gt
• ltxslelement name"a"gt
• ltxslattribute name"href"gtlt/xslattributegt
• ltxslattribute name"onMouseOver"gtmoveins('ltxsl
  value-of select"nimage"/gt','ltxslvalue-
  of select"imagenum"/gt')lt/xslattributegt
• ltxslattribute name"onMouseOut"gtmoveins('ltxslv
  alue-of select"oimage"/gt','ltxslvalue-o
  f select"imagenum"/gt')lt/xslattributegt
• ltxslattribute name"onClick"gtreturn
  falselt/xslattributegt
• ltxslelement name"img"gt
• ltxslattribute name"src"gtltxslvalue-of
  select"oimage"/gtlt/xslattributegt
• lt/xslelementgt
• lt/xslelementgt
• ltbr/gt
• lt/xsltemplategt
• lt/xsltransformgt

14
moveins.js

• function moveins(image,idn)
• var n parseInt(idn)
• window.document.imagesn-1.srcimage

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

16
User-centered design

• Edward 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.

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

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

19
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

20
Work session

• user observation study
• (preliminary discussions on project)