Creating Interfaces

1. Creating Interfaces Introductions & overview Administration Courseinfo/Blackboard orientation HW: Complete survey. Make posting report on on-line resources.

2. Introductions • Jeanine Meyer, • Full Professor, Math/Computer Science & New Media. • Ph.D. in Computer Science • Previous experience: IBM Research (robotics & manufacturing systems), IBM EduQuest (corporate grants). Pace University. Consulting/k-12 Faculty development • books: Multimedia in the Classroom, Programming Games using Visual Basic, Creating Database Web Applications with PHP and ASP • You

3. Courseinfo/Blackboard • Instructional support tool • IT IS A REQUIREMENT that you check this regularly. • I will assume that you have read what I have posted. This will include schedule, class notes, grade allocation, etc. • You will be required to make postings to specific Discussion Forums. Hopefully, you will make additional postings.

4. My site and Backup Site http://newmedia.purchase.edu/~Jeanine http://members.verizon.net/~vze2s839 • Class schedule • Lecture notes (in PowerPoint format)

5. Course subject • Concepts, tools, practice in creating applications for [practical] purpose • 'HCI': exchange of information, perhaps with side effects • Success or quality of interaction can be determined. • Did client/customer/user see right information? • Was the intended transaction processed (correctly)? • Was effort or time acceptable? Focus in course is the 'front end', the interface with the client/user/visitor/etc. Back-end/back office processing is the subject of other courses, including Creating Data Bases for Web Applications.

6. Course content • Concepts • analysis of screen use, dimension of data • usability testing • attention to audience needs • Accessibility issues • Platforms • regular Web • normal (full capability), text only, for visually impaired • telephone • wireless phone & PDA • Technologies • XML, used with XSLT (and Flash): role in all platforms • VoiceXML • WML, XHTML-MP

7. Course structure Each day may include lecture and computer work Postings, homework, midterm & final quiz plus user observation report two projects (can be team). See schedule. • data driven Web site (XML to HTML/JavaScript/CSS) • One of • Web site, may use Flash, server-side programming, etc. • Possible option to build on 1st project with significant new function • VoiceXML • WML or XHTML-MP • bilingual application • other non-Web

8. Project idea • Design a format for elections • adapt to small and large numbers • flexibility on information shown with each candidate • fairness in terms of order, while still helping voters find their candidates. • (feedback)

9. Questions? • Now to overview on content

10. Goal • Raise level of analysis of interfaces (not exclusively web sites viewed on desktop computers) • concepts and terms • experts: Jakob Nielsen, Edward Tufte, others • practice: looking & reporting, observing use, building Content-driven interfaces: use XML to hold content. There are other possibilities.

11. Edward Tufte • Background: revealed problems with ineffective presentation for the Challenger • News (last year): found problems with the reporting in the Columbia disaster! • called it typical bad PowerPoint presentation • double filtering

12. Page concepts • Screen real estate • content • navigation • decoration • white space • chartjunk, data ink • data dimension • answers to question: Compared to …? • above the fold versus below the fold • flow • scanning versus reading • chunking information

14. Example of fake dimension, much chart ink, poor use of image…Exercise: write about this data!

15. Application concepts • metaphor • user-centered, user expectations • shallow versus deep organization • bread crumb trails • data dimension (as relevant to overall design) • functions of audio, video, animation

16. User testing • First task: decide on [better] name for your users • Determine function(s), metrics • Formative evaluation: what does it take to get to information/perform task successfully • Observe performance • can include asking for opinion(s) • Correct/improve

17. eXtensible Markup Language • used for content • Document Type Definition DTD • basis of eXtensible stylesheet language transform: XSLT transform written in the form of XML tags • basis of VoiceXML: language for telephone (speech recognition) applications • basis of WML and XHTML-MP: wireless markup language and XHTML-Mobile Profile: for Web enabled phones.

18. XHTML proper HTML • nesting of tags • NOT <i><b>bold, italic stuff </i> </b> • all system tags lower case • NOT <H1> • all attribute values quoted • empty tags with closing <img src="bird.gif" />

19. <results> <match feature="no"> <date>04-Jun-2002 </date> <team score="2">Korea </team> <team score="0">Poland </team> </match> <match feature="yes"> <date>05-Jun-2002</date> <headline>USA Wins</headline> <story>The USA team upsets Portugal in its first game in Round 1 of the World Cup. The score was 3 to 2. Portugal was considered a superior team. This means that the USA will not finish last as it did in the previous outing.</story> <team score="3">USA </team> <team score="2">Portugal </team> <picture>soccer2.jpg</picture> </match> … </results>

22. <?xml version="1.0" encoding="UTF-8" ?> <xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="html"/> <xsl:template match="/results"> <html> <head><title>Results of World Cup </title> <LINK REL="stylesheet" TYPE="text/css" HREF="results.css"/> </head> <body> <xsl:apply-templates select="/results/match"> <xsl:sort select="@feature" order="descending"/> </xsl:apply-templates> </body> </html> </xsl:template>

23. <xsl:template match="match[@feature='yes']"> <h2><xsl:value-of select="headline"/><br/> </h2> <table> <td> <xsl:value-of select="story"/> </td> <td><img src="{picture}" /> </td> </table> <p>Scores follow....</p> </xsl:template> <xsl:template match="match"> <h3> <xsl:value-of select="team[1]"/> versus <xsl:value-of select="team[2]"/> </h3> <p>Played on <xsl:value-of select="date"/> </p> <p>Result: <xsl:value-of select="team[1] "/> <xsl:value-of select="team[1]/@score " /> <xsl:text>, </xsl:text> <xsl:value-of select="team[2] "/> <xsl:value-of select="team[2]/@score " /> </p> </xsl:template> </xsl:transform>

24. VoiceXML • XML language. Set of tags, including form, field, grammar. A special language for grammars. • A company named Tellme offers a testing service for developers. • You can (will) register as Tellme developer. • Terms of (free) service has changed since last course, but this is still valuable. • Uploaded example on my account asks name. You can reply Daniel, Aviva or Esther. The system replies with a question.

25. <?xml version="2.0"?> <vxml version="2.0"> <form> <field name="childid"> <prompt> <audio src="whosthis.wav">Hello. Who is calling?</audio> </prompt> <grammar type="application/x-gsl" mode="voice"> <![CDATA[ [ [dan daniel (daniel meyer) (dan meyer)] {<childid "daniel">} [aviva (aviva meyer)] {<childid "aviva">} [esther (esther minkin) ] {<childid "esther">} ] ]]> </grammar>

26. <catch event="noinput nomatch"> <audio src="sorry.wav">Sorry. I didn't get that.</audio> <exit/> </catch> <filled> <if cond="'daniel'==childid"> <goto next="#danfollowup"/> <elseif cond="'aviva'==childid"/> <goto next="#avivafollowup"/> <elseif cond="'esther'==childid"/> <goto next="#estherfollowup"/> <else/> <reprompt/> </if> </filled> </field> </form>

27. <form id="avivafollowup"> <var name="rest" expr="1000"/> <field name="bcount" type="number"> <prompt> <audio src="howmanycranes.wav">Hello, Aviva. How many cranes have you made? </audio> </prompt> <grammar type="application/x-gsl" mode="voice" > <![CDATA[ NATURAL_NUMBER_THRU_9999 ]]> </grammar> <catch event="noinput nomatch"> <audio src="sorry.wav">Sorry. I didn't get that.</audio> <exit/> </catch>

28. <filled> <assign name="rest" expr="1000-bcount"/> <audio> <value expr="rest" /> </audio> <audio src="togo.wav"> to go. </audio> <if cond="rest&lt;200" > <audio src="homestretch.wav">You're in the home stretch </audio> <elseif cond="rest&lt;500" /> <audio src="morethanhalf.wav">More than half way </audio> <elseif cond="rest&lt;800" /> <audio src="goodstart.wav">Off to a good start </audio> <else/> <audio> Get a move on </audio> </if> <audio src="goodbye.wav">Good bye. </audio> </filled> </field> </form>

29. Wireless phones • Old[er] standard WML • cards • New XHTML-MP • Both are XML languages • Both supported by desktop simulators: • Nokia (also has editors, with validation) • OpenWave

30. Wireless Markup Language • a standard for web sites viewed on small devices • XML language with special tags, for example card • WMLScript and wbmp graphics

31. WML fragment <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd"> <wml> <card id="start" title="Find office" newcontext="true"> <p> Select, type in name, click on ok, click on options, select find <input name="key" type="text"/> <do type="accept" label="Find"> <go href="find.wmls#lookup('$(key)')"/> </do> </p> </card>

32. More of WML example <card id="result" title="Found!"> <p align="center"> <big><b>$(key) is in $(location).</b></big> </p> <do type="accept" label="Repeat?"> <go href="#start" /> </do> <do type="home" label="Map" > <go href="#map" /> </do> </card>

33. part of find.wmls extern function lookup(key) { var place; var found; var dups; var fn; fn = ""; dups = false; place=""; found=false; if (String.find("Jeanine Meyer",key)>=0) { fn="Jeanine Meyer"; found = true; place = "NS"; }

34. more of find.wmls if (dups) { WMLBrowser.setVar("fullnames",fn); WMLBrowser.setVar("location",place); WMLBrowser.go("lookup.wml#dup"); } else if (found) { WMLBrowser.setVar("location",place); WMLBrowser.go("lookup.wml#result"); } else { WMLBrowser.go("lookup.wml#nf"); } }

35. OpenWave Toolkit XHTML-MP subset of XHTML tags and CSS features

36. Start of example <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <head> <title>Origami</title> <link rel="stylesheet" href="style.css" type="text/css"/> </head>

37. <body> <img src="bird.gif" alt="" width="60"/> <br/> <b><i>Origami models</i></b> <br clear="all"> …. </body> </html>

38. <table> <tr class="blue"> <td>1 <a accesskey="1" href="wiggler.xhtml">Wiggler</a></td> </tr> <tr> <td>2 <a accesskey="2" class="bluetext" href="wbomb.xhtml">Water bomb</a></td> </tr> <tr class="blue"> <td>3 <a accesskey="3" href="frogface.xhtml">Frog face</a></td> </tr> <tr> <td>4 <a accesskey="4" class="bluetext" href="mbox.xhtml">Magazine cover box</a></td> </tr> <tr class="blue"> <td><p mode="nowrap">5 <a accesskey="5" href="cup.xhtml"> Drinking cup</a></p></td> </tr> </table>

39. style.css BODY { color:#006699; font-family: Arial, sans-serif; background-color:#FFFFFF} TD { font-family: Arial, sans-serif} .bluetext { color:#006699; } .blue { color:#000000; background-color:#99CCFF;}

40. Attention to variety • telephone • small devices • making something accessible via a screen reader • (different languages/locales: attention to character sets, flow, dates, money formats) is good training & exercise for the 'normal' case.

41. Sources • Patrick Lynch & Sarah Horton: Web Style Guide, 2nd Edition http://info.med.yale.edu/caim/manual/ • Edward R. Tufte: The Visual Display of Quantitative Information; Envisioning Information; Visual Explanations www.edwardtufte.com • Jakob Nielsen: Designing Web Usability Homesite Usability www.useit.com

42. Sources • Elizabeth Castro: XML for the World Wide Web • Jeni Tennison: Beginning XSLT • Michael Kay: XSLT Programmers Reference • Robert B. Mellor: XML Learning by example • William B. Sanders & Mark Winstanley: Server-Side FLASH • Robert Eckstein with Michel Casabianca, XML Pocket Reference

43. Assignments • Complete survey. • Go on-line and find sources, including tutorials for XML, XSL, DTD, XPath. • Report by making CourseInfo posting in the indicated Discussion Forum. Give more than just the site URL: describe what is there! Make the site URL a working link (use a tag, mark posting as HTML). • Your report must be unique; do not report on a site that has already been mentioned.