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)

_wtc_FIRE/index_FIRE.html _wtc_ALERT/index_ALERT.html _wtc_UNITS/index_UNITS.html

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

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.

// 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()>.5) { xsl.load("contacts1.xsl") } else { xsl.load("contacts2.xsl") } // Transform document.write(xml.transformNode(xsl)) wait for load

Peter Ohring Joel Tenenbaum Marty Lewinter Jeanine Meyer

<xsl:stylesheet version="1.0" xmlns:xsl=" xmlns:fo=" My contact list Here is my contact list That's all. is:

<xsl:stylesheet version="1.0" xmlns:xsl=" xmlns:fo=" My contact list Here is my contact list Name

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