Creating Interfaces

RecapFlash XML exampleProject II assignment

Homework: plan project II.

Recap

• WML, XHTML-MP and VoiceXML each examples of XML languages

• Syntax similar but very different in how they function• WML is mostly display with do/go tags for soft buttons.

Logic, if needed, is in a wmls file• XHTML-MP is HTML (cleaned up XHTML with different

DTD file)• VoiceXML contains logic & calculation in multiple ways:

– If tag for conditional testing & assign tag for calculation– Grammar construct to define possible inputs– Can define and reference script

Recap: uses of XML

• XML is used for structuring data so…– data can be used in various ways– separate content from formatting

• XML is used for structuring data for communications between applications

• XML is a structure for several (new-er) programming languages/scripting languages– WML, VoiceXML, XSL

Comment

• You may or may not be the one who creates/defines/designs the XML tags.

• If and when you do…– what is a child of what is dependent on the data– choice of child versus attribute may be a matter of

taste (assuming only one child)

• May set up DTD or XML Schema to document definition and use validating parser to confirm correctness.

MaintainabilityUsability for the developers/system owners• need to establish system to handle change• change from/in

– content• including growth (scale up)

– expansion of functions (new features)– corrections (bug fixes)– new workers (documentation)– new technology

• supports new features (new capability)• improves function (improved productivity)

Projects

Now (in school)• "one of a kind"• limited audience• individual or very small teamLater (career)• multiple projects & projects have extended

lifetimes• large[r] audience• complex team for production

Flash XML example• See last example on schools. Copy down and

examine .fla files, last one is

newmedia.purchase.edu/~Jeanine/interfaces/xmlandlisttest8.html

• Read in XML file and use to set up an array. The names of schools are used to populate a listbox

• Clicking on a name causes display of information on individual school

standard start

schoolXML=new XML();

schoolXML.onLoad=transXML;

display1="loading data";

schoolXML.load("schools.xml");

keyTag = new XML();

schoolList = new Array();

function transXML() {if (this.loaded) {

display1 = "XML data is loaded."; } keyTag=this.lastChild; schoolList= keyTag.childNodes; schooldata = new Array(); display = ""; for (sch = 0; sch<=schoolList.length; sch +=1) {

schooldata = schoolList[sch].childNodes; for (i=0; i<=schooldata.length; i++) {

if (schooldata[i].nodeName=="name") {

lista.additem(schooldata[i].firstchild.nodeValue,sch); } } // end i loop } // end school loop

} // end transXML function

change handler for listbox

function showschool(component) {display="";pick = component.getSelecteditem().label;pickv = component.getSelecteditem().data;schooldata = schoolList[pickv].childnodes;for (i=0; i<=schooldata.length; i++) {

if (schooldata[i].nodeName=="name") { display = display + newline+

schooldata[i].firstchild.nodeValue; } if (schooldata[i].nodeName=="url") {

urlis = "http://"+schooldata[i].firstchild.nodeValue;

display = display+newline + "<a href='"+urlis+"'> <FONT COLOR='#0000FF'><U>"+

urlis+"</U></FONT></a>"; }

if (schooldata[i].nodeName=="type") { display =

display+newline+schooldata[i].firstchild.nodeValue; } if (schooldata[i].nodeName=="family_member") {

display = display+newline+schooldata[i].firstchild.nodeValue;

if (schooldata[i].attributes.role=="teacher") {

display = display + " is/was a teacher at the school"

} }

} // end i loop}

Usability

• Not something just tacked on

• Includes, but not limited to, use of alt tags and avoiding images that take too much time to download and clutter the information

Focus on user (name user). User-centered design

Focus on content & structure of content

From recent Jakob Nielsen interview

• Feature design• Information architecture (structure design)• Interaction design• Appearance design (visual design)• Content design (writing and sometimes

multimedia)

Usability is learnability, efficiency, memorability, error avoidance, and subjective satisfaction

Error avoidance

• My term: offensive error handling. Design interface to limit possibility of errors occurring

• Defensive: do the check afterwards.

• Generally need to do both.

Testing

• Involve real users early• Pay attention

– may need to interpret responses

• Use [automatic] tools for usability, accessibility– Composing alt, desc, summary tags helps you

focus on what is needed

• Offensive and defensive validation

(old) IBM product

• Major effort to deliver 'multimedia'• Columbus: Encounter and Exploration• Letters from a Birmingham Jail• Black Elk Speaks• Ulysses (Tennyson)• …User responses: too slowMe (others): fancy titles, poor organization, no use of old

technologies of abstracts, keywords, meant that users/students often clicked/invoked video clips they really did not want. Yes, this took time, but it wasn't that 'the system' was under-powered.

Technology

• technology push versus demand pull

• what are appropriate uses of technology?– May be unexpected

• Exercise: write down [new] use of– cell phone (i.e., ubiquitous, potential for

sound, image and text– regular phone (sound only)

To learn more:

• VoiceXML– Tellme studio has tutorials, examples– Also, use google for other tutorials.

• Note: different types of grammars.

• WML and XHTML-MP– Nokia Mobile Internet Toolkit and OpenWave

each have samples– Use google for on-line tutorials

Learning to learn

• Technologies do change!

• You need to practice finding things out. Previous classes/previous students have been much more willing to do this.– keep doing postings. Comment on sources.

Investigate controversies, etc.

Project II

Web site with interactionsXML (content) based. Can use XSLT and/or JavaScript. Substantially enhance project II or do second project (with

interaction) May have server-side programming. May use Flash.

bilingual web site (XML, character codes)

SSB with interactions: meaningful, credible application. Should include a script file (at least one function) and images. You can try this from your phone (if enabled) directly!

VoiceXML with interactions: meaningful, credible application: dialog tree should have branching and depth. Some error handling (phased prompts)

OR use same XML to define both a Web site and one or both of the others!

Project II deliverables

• Post proposal– comment on other proposals

• Formal presentation of proposal– Charts (PowerPoint or HTML)– Define purpose, audience, content– Diagram of interactions (may not be complete)– 5-10 minutes

• Presentation of complete work– demonstrate– charts (PowerPoint or HTML)– 10-15 minutes

BE PROFESSIONAL

• Why?– It will count for your grade– It is good experience– People do judge a book by its cover… and

presentation is more than superficial.– May produce something you can re-use

Schedule

• Make posting on project for my approval (due before Monday)

• One week from today (Monday of Thanksgiving week): – Present project plan (function, dialogue

map, audience, measurements)

• Week after holiday, time in class to work (some lecturing)

• Following week: presentations

(Final) presentations

• Include feedback from at least one user other than yourself or member of this class.

• Define beforehand protocol for testing.• Include how you would enhance and scale up

project – some of scaling up should be implicit in XML

definition, if it is XML based.– can 'fake' server-side programming, for example, use

array in place of database.

Possible topics• Museum Kiosk: add [more] options for questions from visitor,

posting comments• Classroom/lesson: add hints, scores, other.• School Web site for Major/Program/Certificate Requirements:

add [more] options for questions, such as completion of program

• Directions/instruction (origami, camera, sound equipment, cooking, etc.): must be data-based (XML and/or server-side database), mixed media (consider recording short audio wav files)

• VoiceXML: request information on topic (bus schedule?); game, cooking instructions, driving instructions

• SSB: request information on topic, including expanded version of find example; game

What do I mean by

• Meaningful, credible: application that is reasonable to do in this way (that is, phone/small screen or Voice phone)

• Measurements: how will you judge whether or not you have done a good job

Class time / Homework

• Catch up on VoiceXML exercise

• Plan project