Human-computer dialogue, information & continue with XML/XSLT

Human-computer dialogue, information & continue with XML/XSLT Client side: form verification Dialogue, Measuring information and dimension of data Image map exercise Reprise, catch-up on XSLT exercises HW: report on sites

Form verification/validation • Critical component of interface (assuming design isn't perfect…) is catching errors • 'Offensive' • example: pulldown menus for each of month, day, year for dates. • 'Defensive' • Use scripting language (JavaScript) to check each field for • presence (if required), type and anything else, such as range • consistency between fields. For example, should one field be greater than another.

Warning • Access for Form fields uses the Document Object Model (DOM) • DOM changing • browsers differ! • In example, use name and id for form input elements.

outline • in script section in HTML head section, definition of function: function validate(f){ } • in body: <form action="handler" onSubmit="return validate(this) "> form fields </form> will not go here if validate returns false

function <html><head><title>Form test</title> <script type="text/javascript" language="JavaScript"> function validate(f) { if (parseInt(f.qty.value) != f.qty.value) { if turning it into a number isn't the same as the original, then it wasn't a number…

alert('Please enter number for the quantity'); f.qty.focus();f.qty.select();return false;} } </script> </head>

removes need for form name form <form action="handler" onSubmit="return validate(this) "> Quantity <input type="text" name="qty" id="qty" value="1"> <input type="submit" value="order"> <input type="reset" value="reset"> </form>

Try it! • create an html file called handler.html to see results of the query string. • This would typically be a server-side script.

Regular expressions (Information only. You aren't responsible for knowing this!) • Regular expressions are a system of patterns to perform validation var re_mail = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z])+$/;if (!re_mail.test(email.value)) {

XML/XSLT • Questions?

XSL:reuse element content • Task: Make list of contacts with e-mails both visible and clickable. <?xml version="1.0" ?> <?xml-stylesheet href="contactsclick.xsl" type="text/xsl"?> <mylist> <contact> <name>Marty Lewinter</name> <email>mathman@purchase.edu</email> </contact> … </mylist>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <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/> <table border="2"> <tr><td>Name </td> <td> E-mail </td> </tr> <xsl:apply-templates/> </table> </body> </html> </xsl:template>

<xsl:template match="contact"> <tr><td> <xsl:value-of select="name"/></td> <td><xsl:element name="a"> <xsl:attribute name="href">mailto: <xsl:value-of select="email"/> </xsl:attribute> <xsl:value-of select="email"/> </xsl:element> </td> </tr> </xsl:template> </xsl:stylesheet>

XSLT control Recall <xsl:for-each select=expression> • alternative to use of apply-templates & defining templates • can be used with <xsl:sort select=expression …> • can set order="descending" default is ascending • data-type="number" default is "string"

XSL if <xsl:if test=expression > … </xsl:if> • No else clause <xsl:template match="match"> … whatever is needed for each match <xsl:if test="position()=last()"> <img src="closinglogo.gif" /> </xsl:if> </xsl:template> Note single = sign.

XSL case <xsl:choose> <xsl:when test=expression1> … </xsl:when> <xsl:when test=expression2> … </xsl:when> <xsl:otherwise> … </xsl:otherwise> </xsl:choose>

Human computer interface Human: action/information Computer: response: display/action (including side effect) Human:action/information Computer: response: display/action (including side effect) etc.

Human-computer interface no single diagramming technique • Trees of options • storyboard • Later: VoiceXML specifies dialogue, including grammar • Challenge: come up with one!

HCI • Usually dialogue is one-sided: information from person is much less than information from computer/machine • be suspicious if that isn't true. • Information: technical term. Information is knowledge that is represented in a format to be exchanged. Comes within a context. The unit for measuring information is the bit. • Think of 20 questions or binary search: each yes/no answer can potentially refine the search space.

Data interchange • Data/information goes from human to computer to • determine next display • cause (off-line) action (for example, making a purchase) and/or • update a data base • Data/information may or may not be checked for validity

Display • Form components, for example, pull-down lists • Selection based on graphical representation of subject matter (one implementation being HTML image maps) • geographical/physical map • diagram • ?

User-centered design • How hard (how many clicks?) does the client need to work to get to what he/she wants? • Are there any rewards along the way? • The client/customer is always right, but … you/your system should provide guidance.

Complex data entry • Accuracy more important than speed • provide checking (all you can) and • provide chance to confirm • Absolute checks name—must be present • age—must be ??? • credit card number—can possibly check immediately? • date—use distinct fields to avoid problems • other examples? • Consistency checks • involves two or more input fields and/or input fields versus stored data • Example: date/time of outgoing flight must be prior to return flight.

On-line Store • Shallow (unstructured) organization: all products shown, many to a page, 'page' from page to page • Deep: require customer to keep making choices until finally get to the choice • Multiple ways: opening page shows featured products plus • clear categories • alternative to use print catalog • Options with many products on a page also provide option to click for close-up. Balance giving customer 'what they want' and other options.

o o o o o …..o o o o o o o o o o o deep vs. shallow

Added complexity • pages may be dynamically created from • user input and/or • database contents • Other terms used are • parameterized • customized • (For Web) mass customization

Case: scrabble game • Old system: old monitor adequate to display scrabble board • Flash intro • single player versus 'maven' • option for free guesses (default) • New system: requires high resolution monitor • longer Flash intro • Need to specify: number of human players, may or may not have computer maven • two sets of official rules: neither allows free guesses.

Old scrabble 5 second wait for intro play single player versus maven New scrabble 10 second wait for intro set up single human set up single computer maven What does it take (time & effort) to get to goal…

Data dimension • dimension can refer to physical aspect of object: 2D, 3D, time + space = 4 D • Less formally, dimension can also refer to any group of characteristics that are related (occur over some dimension) • For this informal idea of dimension, values can take on discrete values, even just small finite number of distinct values or vary continuously. • in statistics, refer to scales as • ordered, interval, ratio

Dimension, cont. • different dimensions may or may not be independent • Examples • clothing product line: age & gender, size, style, price, etc. The girl products only come in girl sizes. The boy and girl products may be in a different price range • music: styles, tempos, mood, age, type/size of performing group (unaccompanied solo voice vs singer with guitar vs band vs orchestra, etc.), length, etc.

Relevance? • Analyzing the 'dimensions' of something gives guidance to how to design • display (computer to human) • method of specification (human to computer) • form elements: what should be drop down list boxes, sliders, radio buttons, check boxes, or open-ended textboxes • Data from textbox can still be subject to verification tests.

Organization… • .. may be the critical 'value-add' of your interface • glass engine • stores (e.g., Amazon.com) provides generated lists of 'people who bought this also bought that'.

Probability versus frequency • Statistical data is considered very difficult to understand. • One suggestion is to present data as frequencies and not probability. • Here are two examples…. • Comments?

Image maps • as done with HTML map tags <map name="westchester"> <area shape="poly" coords=" " href=" "> … </map> See Find Daniel game in my HTML/JavaScript examples. • Note: default option did not work. See notes. • Suitable for (geography) maps, diagrams, photos IF regions are meaningful to client AND regions are sufficiently distinct for all members of audience to distinguish.

Homework • Visit sites with interactions and report with posting • Describe the interaction, the underlying data, the devices used to specify choices. • Describe good and bad features. • Be prepared to talk in class. • REQUIRED: one original site and one follow up comment on someone else's.

Questions • Who is the user/audience? • Is there a better name than 'user'? • What is the task for the user? What is the function of the site? • What is the nature of the underlying data? • dimensions • 'universal' (for all users) or customized, and, if so, when/how is it customized • my banking data is my own (constructed based on my logon) • What I order from a store is generated from my inputs that session. • Some sites 'remember' my past orders and may present 'ideas' to me based on data generated from all users.

Human-computer dialogue, information & continue with XML/XSLT