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 Liz-book.jpg Darcy3.jpg

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. Rollover test Note: using separate file avoids XHTML problems

8. movein(' '); return false; picture1 not id (which doesn't work in IE

9. movein.js function movein(image) { window.document.picture1.src=image; }

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.images[n].src in JavaScript function –explicitly convert string to number

11. Liz-book.jpg Darcy3.jpg soccer1.jpg soccer2.jpg

12. Rollover test Pictures

13. moveins(' ',' '); return false;

14. moveins.js function moveins(image,idn) { var n = parseInt(idn); window.document.images[n-1].src=image; }

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)