Creating interfaces

Creating interfaces Multi-language example Definition of computer information system VoiceXML example Project proposal presentations Homework: Post proposal, post feedback & work on project

Actual example at ATM machine Enter PIN Espanol Other languages (not ENGLISH) Francais … …

Question/Problem • Was this clear? • (presumably) if you needed a language other than English, click • if English was okay, enter your PIN • (Not sure if there was a chance to choose another language later) • Design a better approach

Definition • A computer information system is a combination of • hardware • software • people • procedures • constructed/organized to accomplish specified functions.

Comments • Old definition • Critical significance [for me, now] is the inclusion of people and procedures • Procedures may be • or may not be well-defined • subject of training or • assumed, learned over time

Examples • Check-out with clerk: • clerk does some things, customer does others • ATM • Email • Others?

Acceptable function • Want a system to be 100% effective but… • It is the total system that needs to work, part of it may work less than all or even much of the time Voice phone systems [typically] have menu, prompts, error handling, including a fall back: eventually going to 'live person' • should be able to pass on information (such as id number) and make use of databases, etc. • LLBean phone example

Voice XML Challenge: random sequence • Produce set of forms, each listening for its own response • Produce random sequence • Unique values (don’t reuse values) • Use expression as target of a goto • Need to use <goto expr= > in place of <goto next= • Working from random sequence, move to successive forms • If successful, move to next. Otherwise, move to form to indicate failure.

<?xml version="1.0" ?> <vxml version="2.0"> <var name="qarray" expr="['#a','#b','#c']"/> <var name="ni" expr="1"/> <form id="start"> <block> <goto expr="qarray[ni]"/> </block> </form> <form id="a"> <block>this is form a </block> </form> <form id="b"> <block>this is form b </block> </form> <form id="c"> <block>this is form c </block> </form> </vxml> Note: expr, not next

Change in tactics • Start off with array of addresses (#id) • Each time, select element randomly. • Remove it from the array • Use slice and concat • Splice did not work!!! • Return it as the next address • Need to check if done enough • Need to check if there are still questions • Used vxmllog to find problems… • Forms just say what they are…

The qarray could hold any number and could be in other files. <?xml version="1.0" ?> <vxml version="2.0"> <script> var qarray=["#a", "#b","#c","#d","#e"]; var asked = 0; var quota = 3; function getnext() { var ch; var chv; var nq = qarray.length; asked++; Will do this 3 times

if (asked>quota) { return "#done"; } if (nq==0) { return "#nomoreques";} ch = Math.floor(Math.random()*nq); chv = qarray[ch]; // now delete this element if (ch==0) { qarray = qarray.slice(1);} else if (ch==(nq-1)) { qarray = qarray.slice(0,ch);} else { qarray= qarray.slice(0, ch).concat(qarray.slice(ch+1));} return chv; } </script>

<form id="start"> <block> Starting <goto expr="getnext()" /> </block> </form> <form id="a"> <block>in form a <break size="medium"/> <goto expr="getnext()" /> </block> </form> <form id="b"> <block>in form b <break size="medium"/> <goto expr="getnext()" /> </block> </form>

<form id="c"> <block>in form c <break size="medium"/> <goto expr="getnext()" /> </block> </form> <form id="d"> <block>in form d <break size="medium"/> <goto expr="getnext()" /> </block> </form> <form id="e"> <block>in form e <break size="medium"/> <goto expr="getnext()" /> </block> </form>

<form id="nomoreques"> <block>No more questions <exit/> </block> </form> <form id="done"> <block>Done <exit/> </block> </form> </vxml>

Now up to you • Code the start, initial prompting • Replace <form id="a"> with <menu id="a"> <prompt> Whatever the a question is</prompt> <choice expr="getnext()"> the a answer </choice> <catch event="nomatch noinput help"> <goto next="#wrong" /> </catch> </menu> • Put in <form id="wrong"> …

Warnings • Use lower case letters as the content of choice tags (and probably in full grammars as well) • Remember the # sign in front of id's. • Use expr in goto and choice if you are using an expression • This includes a function call • …expr ="'#' + vname" • The plus sign is for concatenating strings. The concat method is for concatenating arrays.

Reprise: all interface/applications Focus • Function / purpose • Audience • Dialogue(s) • Content (structure of underlying data) • How to measure / evaluate success

Usability • Effectiveness • did it work? Did [user] achieve purpose? • Efficient • how was job done in terms of resources: yours (the 'system') and the [user] • Satisfactory to [user] • often can be measured in 'repeat business' Identify your user!

Fit of media to application • Does application fit the medium? • Consider B2B, B2C, C2C???? • computer based web site • office, home, factory (see below), retail • phone with tiny screen • probably limitation in graphics, though Nokia Simulator does display color images • on-the-go, factory • speaking/listening phone (POTS) • on-the-go, hands-free, factory (again)

Homework • Work on project! • Make constructive comments as postings to other projects

Creating interfaces