Interactions, Usability testing, XML

1
Interactions, Usability testing, XML JavaScript

• Discuss observations on sites
• JavaScript review
• Homework Usability test
• (catch up posting). Start planning project

2
Site observations

• Mine
• Philip Glass site
• New York Times 9/11 interactives
• Chocolate buying site

3
(No Transcript)
4
(No Transcript)
5
philipglass

• Users music students, musicians, specifically,
  Philip Glass fans, Philip Glass!
• Task exploring the music using the dimensions.
  Accuracy is not critical, but the site needs to
  serve Glass himself.
• Data dimension model invented for this purpose.
  The site is the organization/interface in a way
  that most sites are not and should not be!
• Success high (because of how I've defined the
  task)

6
(No Transcript)
7
(No Transcript)
8
(No Transcript)
9
(No Transcript)
10
(No Transcript)
11
(No Transcript)
12

• http//www.nytimes.com//packages/html/nyregion/200
  20707_wtc_FIRE/index_FIRE.html
• http//www.nytimes.com//packages/html/nyregion/200
  20707_wtc_ALERT/index_ALERT.html
• http//www.nytimes.com/packages/html/nyregion/2002
  0707_wtc_UNITS/index_UNITS.html
• http//www.nytimes.com/packages/html/nyregion/2002
  0707_wtc_UNITS/index_UNITS.html

13
http//www.nytimes.com/2002/05/26/nyregion/26NTOW
ER.html

• Users families of victims, rescuers, officials,
  New Yorkers, others.
• Task understanding (?) what happened.
• Data organized by time and place, location of
  fire companies. Wealth of material (content).
  Audio overlays. Combinations of photos and
  diagrams.
• Success (for me, as a member of 'other') High.
  Not sure about others.
• Note later 'interactive' supplemented news
  articles indicating problem with phones.

14
(No Transcript)
15
(No Transcript)
16
(No Transcript)
17
www.dans.com

• User buyer potential buyer of chocolate new
  repeat customer
• marketing terms on spectrum, fairly committed to
  buying something.
• Task making a purchase
• Data chocolate items, small, not especially
  complex inventory (NOT TRUE for other areas, such
  as books CDs).
• Success very good both when I know what I want
  and also when I 'shop around'.

18
Yours

• User
• Task
• Data/Content organization
• Assessment?

19
JavaScript review

• JavaScript is so-called scripting language for
  client side and server side programming
• scripting implies not 'full' language. It is not
  compiled (translated) beforehand. It is not
  strongly typed (variables don't have pre-set
  datatype, can be string or number or boolean)
• JavaScript code goes in header or inside tags.
• Examine examples from newmedia.purchase.edu/Jeani
  ne

20
If you need help with JavaScript

• Look at the examples on-line and re-create them.
  Make changes.
• Test yourself can you combine a date program
  with the image swap? Can you make a mouseover
  one image cause another image to change?
• Make an appointment to come see me!

21
Virtual Dog

• vdog.xml
• virtual.xsl takes a vdog.xml file (or equivalent)
  and produces HTML with JavaScript to be an
  on-line virtual pet
• Go to newmedia.purchase.edu/Jeanine
• Take link to xml stuff
• See files, including a word document

22
Two distinct situations

• JavaScript (IE6 only) to handle xml files,
  including calling an xsl file to do a
  transformation
• XML XSLT to produce an HTML file with
  JavaScript
• vdog.xml virtual.xsl are examples of this.

23
JavaScript XML

• The following client side example works only in
  IE
• seems to be religious war on transformnode being
  appropriate
• Example demonstrates using more than one XSL file
  with an XML file
• choice here is made by call to random.

24

• lthtmlgt ltbodygt ltscript type"text/javascript"gt
• // Load XML
• var xml new ActiveXObject("Microsoft.XMLDOM")
• xml.async false
• xml.load("contactsnoref.xml")
• // Load the XSL
• var xsl new ActiveXObject("Microsoft.XMLDOM")
• xsl.async false
• // choose specific xsl file
• if (Math.random()gt.5)
• xsl.load("contacts1.xsl")
• else
• xsl.load("contacts2.xsl")
• // Transform
• document.write(xml.transformNode(xsl))
• lt/scriptgt lt/bodygt lt/htmlgt

wait for load
25
(No Transcript)
26
(No Transcript)
27

• lt?xml version"1.0" ?gt
• ltmylistgt
• ltcontactgt
• ltnamegtPeter Ohringlt/namegt
• ltemailgtpeter.ohring_at_purchase.edult/emailgt
• lt/contactgt
• ltcontactgt
• ltnamegtJoel Tenenbaumlt/namegt
• ltemailgtjoel_at_zephyr.ns.purchase.edult/emailgt
  
• lt/contactgt
• ltcontactgt
• ltnamegtMarty Lewinterlt/namegt
• ltemailgtmathman_at_purchase.edult/emailgt
• lt/contactgt
• ltcontactgt
• ltnamegtJeanine Meyerlt/namegt
• ltemailgtjeanine.meyer_at_purchase.edult/emailgt
• lt/contactgt
• lt/mylistgt

28

• lt?xml version"1.0" encoding"UTF-8"?gt
• ltxslstylesheet version"1.0"
• xmlnsxsl"http//www.w3.org/1999/XSL/Transform"
  
• xmlnsfo"http//www.w3.org/1999/XSL/Format"gt
• ltxsloutput method"html"/gt
• ltxsltemplate match"/mylist"gt
• lthtmlgt
• ltheadgt
• lttitlegtMy contact list lt/titlegt
• lt/headgt
• ltbodygt lth1gtHere is my contact list lt/h1gt ltbr/gt
• ltxslapply-templates/gt
• ltbr/gt That's all.
• lt/bodygt
• lt/htmlgt
• lt/xsltemplategt
• ltxsltemplate match"contact"gt
• ltbgtltxslvalue-of select"name"/gtlt/bgt ltbr/gt
• Email is ltxslvalue-of select"email"/gt

29

• lt?xml version"1.0" encoding"UTF-8"?gt
• ltxslstylesheet version"1.0"
• xmlnsxsl"http//www.w3.org/1999/XSL/Transform"
• xmlnsfo"http//www.w3.org/1999/XSL/Format"gt
• ltxsloutput method"html"/gt
• ltxsltemplate match"/"gt
• lthtmlgt
• ltheadgt
• lttitlegtMy contact list lt/titlegt
• lt/headgt
• ltbodygt lth1gtHere is my contact list lt/h1gt ltbr/gt
• lttable border"2"gt
• lttrgtltthgtName lt/thgt ltthgt E-mail lt/thgt lt/trgt

30

• ltxslfor-each select"mylist/contact"gt
• ltxslsort select"name"/gt
• lttrgtlttdgt
• ltxslvalue-of select"name"/gtlt/tdgt
• ltxslchoosegt
• ltxslwhen test"name'Jeanine Meyer'"gt
• lttd bgcolor"red"gt
• ltxslvalue-of select"email"/gtlt/tdgt
• lt/xslwhengt
• ltxslotherwisegt
• lttdgt
• ltxslvalue-of select"email"/gtlt/tdgt
• lt/xslotherwisegt
• lt/xslchoosegt
• lt/trgt
• lt/xslfor-eachgt
• lt/tablegtlt/bodygt lt/htmlgt
• lt/xsltemplategt

31
Classwork repeat contacts exercise

• Create 1 xml file with NO reference to a
  stylesheet
• Create 2 style sheets for that type of xml
• Create an HTML file, mostly JavaScript with the
  code with random choice
• Change to make choice based on day of the week
  even days one way, odd days the other! (could
  also use date).
• var today new Date()
• var day today.getDay()
• var even day 2
• if (even0)
• else

32
Alternative

• For Mozilla or IE or Netscape
• May be problems
• create two xml files, with identical content,
  referring to the two different xsl files
• use JavaScript
• window.open
• Also do transform on server and produce
  different HTML files. Send the one you want over
  to client.
• Tool for this is saxon

33
Case study butterfly ballot

• Hindsight is wonderful.
• Could this have been prevented?

34
Lessons

• violates a heuristic to avoid multi-directional
  associations.
• User testing was limited (apparently) was it
  tried by older people, looking down in case?
• Improved (computer based) system should have
• validity checking you voted for 2 people or you
  didn't cast a vote yet
• confirmation you voted for Pat Buchanan. Click
  ok or redo.
• If your system is not just for one day, and you
  keep track of validity/confirmation results, this
  can trigger re-design.

35
Usability testing

• Choice
• finding almost placing order for specific
  book (you identify beforehand)
• finding almost placing order for gift
  (chocolate?) (not specific product known
  beforehand, define limits)
• Purchase library system tasks (to be defined by
  you)
• cell phone tasks (adding new person/number,
  changing number, resetting monthly time, etc.)
• your own definition, with my approval
• Due as presentation and as hardcopy report a week
  from today.

36
Requirements

• recruit 'real' users, novice and experienced
  (identify accurately)
• observe actions (record actions time)
• prepare short list of questions to ask afterwards
• Gather information and
• Show respect for participant
• report results your conclusions as to
  effectiveness, efficiency, and satisfaction
• how is system good how could it be improved
• how could the study have been improved

37
Requirements

• Study is NOT casual observation
• PLAN
• what you will ask your users to do
• how you will give them the task(s)
• how you will record their performance
• if and how you will respond to problems
• Prepare presentation and written report
• diagrams, tables, charts appropriate