Transcript Creating User Interfaces - Purchase College Faculty Web Server

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 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
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,
building
Content-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!
90
80
70
60
50
East
West
North
40
30
20
10
0
1st Qtr
2nd Qtr
3rd Qtr
4th Qtr
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.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"; }
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/xhtmlmobile10.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; backgroundcolor:#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 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
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: ServerSide 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.