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

– 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

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.

My site and Backup Site

http://newmedia.purchase.edu/~Jeanine

http://members.verizon.net/~vze2s839

• Class schedule

• Lecture notes (in PowerPoint format)

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.

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

Course structureEach day may include lecture and computer workPostings, homework, midterm & final quiz plus

user observation reporttwo 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

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)

Questions?

• Now to overview on content

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,

buildingContent-driven interfaces: use XML to hold content.

There are other possibilities.

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

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

Example of fake dimension, much chart ink, poor use of image…

Exercise: write about this data!

0

10

20

30

40

50

60

70

80

90

1st Qtr 2nd Qtr 3rd Qtr 4th Qtr

EastWestNorth

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

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

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.

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

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

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

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

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.

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

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

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

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

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

Wireless Markup Language

• a standard for web sites viewed on small devices

• XML language with special tags, for example card

• WMLScript and wbmp graphics

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>

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>

part of find.wmlsextern 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"; }

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

OpenWave Toolkit

XHTML-MP

subset of XHTML tags and CSS features

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>

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

….

</body></html>

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

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

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.

Sources• Patrick Lynch & Sarah Horton:

Web Style Guide, 2nd Editionhttp://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 UsabilityHomesite Usability www.useit.com

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

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.