interactions, usability testing, xml & javascript discuss observations on sites javascript...
TRANSCRIPT
Interactions, Usability testing, XML & JavaScript
Discuss observations on sites
JavaScript review
Homework: Usability test
(catch up posting). Start planning project
Site observations
• Mine:– Philip Glass site– New York Times 9/11 interactives– Chocolate buying site
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)
• http://www.nytimes.com//packages/html/nyregion/20020707_wtc_FIRE/index_FIRE.html
• http://www.nytimes.com//packages/html/nyregion/20020707_wtc_ALERT/index_ALERT.html
• http://www.nytimes.com/packages/html/nyregion/20020707_wtc_UNITS/index_UNITS.html
• http://www.nytimes.com/packages/html/nyregion/20020707_wtc_UNITS/index_UNITS.html
http://www.nytimes.com/2002/05/26/nyregion/26NTOWER.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.
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'.
Yours
• User
• Task
• Data/Content & organization
• Assessment?
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/~Jeanine
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!
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
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.
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.
<html> <body> <script type="text/javascript">// Load XML var xml = new ActiveXObject("Microsoft.XMLDOM")xml.async = falsexml.load("contactsnoref.xml")// Load the XSLvar xsl = new ActiveXObject("Microsoft.XMLDOM")xsl.async = false// choose specific xsl fileif (Math.random()>.5) { xsl.load("contacts1.xsl") }else { xsl.load("contacts2.xsl")}// Transformdocument.write(xml.transformNode(xsl))</script> </body> </html>
wait for load
<?xml version="1.0" ?><mylist> <contact>
<name>Peter Ohring</name> <email>[email protected]</email> </contact> <contact>
<name>Joel Tenenbaum</name> <email>[email protected]</email> </contact> <contact>
<name>Marty Lewinter</name> <email>[email protected]</email> </contact><contact>
<name>Jeanine Meyer</name> <email>[email protected]</email> </contact></mylist>
<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format"> <xsl:output method="html"/> <xsl:template match="/mylist"> <html> <head> <title>My contact list </title> </head> <body> <h1>Here is my contact list </h1> <br/> <xsl:apply-templates/> <br/> That's all. </body> </html> </xsl:template> <xsl:template match="contact"> <b><xsl:value-of select="name"/></b> <br/> Email is: <xsl:value-of select="email"/> <hr/> </xsl:template></xsl:stylesheet>
<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"xmlns:fo="http://www.w3.org/1999/XSL/Format"><xsl:output method="html"/> <xsl:template match="/"> <html> <head> <title>My contact list </title> </head> <body> <h1>Here is my contact list </h1> <br/><table border="2"><tr><th>Name </th> <th> E-mail </th> </tr>
<xsl:for-each select="mylist/contact"> <xsl:sort select="name"/> <tr><td> <xsl:value-of select="name"/></td> <xsl:choose> <xsl:when test="name='Jeanine Meyer'"> <td bgcolor="red"> <xsl:value-of select="email"/></td> </xsl:when> <xsl:otherwise> <td> <xsl:value-of select="email"/></td> </xsl:otherwise> </xsl:choose> </tr> </xsl:for-each></table></body> </html></xsl:template></xsl:stylesheet>
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 (even==0){ }else { }
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
Case study: butterfly ballot• Hindsight is wonderful….
• Could this have been prevented?
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.
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.
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
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