Humancomputer dialogue, information

1
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

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

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

4
outline

• in script section in HTML head section,
  definition of function
• function validate(f)
• in body
• ltform action"handler" onSubmit"return
  validate(this) "gt
• form fields lt/formgt

will not go here if validate returns false
5
function

• lthtmlgtltheadgtlttitlegtForm testlt/titlegt
• ltscript type"text/javascript" language"JavaScrip
  t"gt
• 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

6

• alert('Please enter number for the quantity')
• f.qty.focus()f.qty.select()return false
• lt/scriptgt
• lt/headgt

7
form
removes need for form name

• ltform action"handler" onSubmit"return
  validate(this) "gt
• Quantity ltinput type"text" name"qty" id"qty"
  value"1"gt
• ltinput type"submit" value"order"gt
• ltinput type"reset" value"reset"gt
• lt/formgt

8
Try it!

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

9
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_\.\-)\_at_((a-zA-Z0-9\
  -)\.)(a-zA-Z)/if (!re_mail.test(email.va
  lue))

10
XML/XSLT

• Questions?

11
XSLreuse element content

• Task Make list of contacts with e-mails both
  visible and clickable.
• lt?xml version"1.0" ?gt
• lt?xml-stylesheet href"contactsclick.xsl"
  type"text/xsl"?gt
• ltmylistgt
• ltcontactgt
• ltnamegtMarty Lewinterlt/namegt
• ltemailgtmathman_at_purchase.edult/emailgt
• lt/contactgt
• lt/mylistgt

12

• ltxslstylesheet version"1.0"
• xmlnsxsl"http//www.w3.org/1999/XSL/Transform"
  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
• lttable border"2"gt
• lttrgtlttdgtName lt/tdgt lttdgt E-mail lt/tdgt lt/trgt
• ltxslapply-templates/gt
• lt/tablegt
• lt/bodygt
• lt/htmlgt
• lt/xsltemplategt

13

• ltxsltemplate match"contact"gt
• lttrgtlttdgt
• ltxslvalue-of select"name"/gtlt/tdgt
• lttdgtltxslelement name"a"gt
• ltxslattribute name"href"gtmailto
• ltxslvalue-of select"email"/gt
• lt/xslattributegt
• ltxslvalue-of select"email"/gt
• lt/xslelementgt
• lt/tdgt
• lt/trgt
• lt/xsltemplategt
• lt/xslstylesheetgt

14
XSLT control

• Recall
• ltxslfor-each selectexpressiongt
• alternative to use of apply-templates defining
  templates
• can be used with ltxslsort selectexpression gt
• can set order"descending" default is ascending
• data-type"number" default is "string"

15
XSL if

• ltxslif testexpression gt
• lt/xslifgt
• No else clause
• ltxsltemplate match"match"gt
• whatever is needed for each match
• ltxslif test"position()last()"gt
• ltimg src"closinglogo.gif" /gt
• lt/xslifgt
• lt/xsltemplategt

Note single sign.
16
XSL case

• ltxslchoosegt
• ltxslwhen testexpression1gt
• lt/xslwhengt
• ltxslwhen testexpression2gt
• lt/xslwhengt
• ltxslotherwisegt lt/xslotherwisegt
• lt/xslchoosegt

17
Human computer interface
Human action/information
Computer response display/action (including
side effect)
Humanaction/information
Computer response display/action (including
side effect)
etc.
18
Human-computer interface

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

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

20
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

21
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
• ?

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

23
Complex data entry

• Accuracy more important than speed
• provide checking (all you can) and
• provide chance to confirm
• Absolute checks namemust be present
• agemust be ???
• credit card numbercan possibly check
  immediately?
• dateuse 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.

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

25
deep vs. shallow

• o o o o o ..o o o
• o o o o o o o o

26
Added complexity

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

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

28
What does it take (time effort) to get to goal

• 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

29
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

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

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

32
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'.

33
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?

34
(No Transcript)
35
(No Transcript)
36
Image maps

• as done with HTML map tags
• ltmap name"westchester"gt
• ltarea shape"poly" coords" " href" "gt
• lt/mapgt
• 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.

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

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