1 / 43

Creating Interfaces

Creating Interfaces. Introductions & overview Administration Courseinfo/Blackboard orientation HW: Complete survey. Make posting report on on-line resources. Introductions. Jeanine Meyer, Full Professor, Math/Computer Science & New Media. Ph.D. in Computer Science

neron
Download Presentation

Creating Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

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

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

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

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

  17. 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" />

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

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

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

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

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

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

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

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

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

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

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

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

  30. 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"; }

  31. 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"); } }

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

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

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

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

  36. 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;}

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

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

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

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

More Related