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

13
(No Transcript)
14
Example of fake dimension, much chart ink, poor
use of imageExercise 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 ltigtltbgtbold, italic stuff lt/igt lt/bgt
• all system tags lower case
• NOT ltH1gt
• all attribute values quoted
• empty tags with closing
• ltimg src"bird.gif" /gt

19
ltresultsgt ltmatch feature"no"gt
ltdategt04-Jun-2002 lt/dategt ltteam score"2"gtKorea
lt/teamgt ltteam score"0"gtPoland
lt/teamgt lt/matchgt ltmatch feature"yes"gt
ltdategt05-Jun-2002lt/dategt ltheadlinegtUSA
Winslt/headlinegt ltstorygtThe 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.lt/storygt ltteam score"3"gtUSA
lt/teamgt ltteam score"2"gtPortugal lt/teamgt
ltpicturegtsoccer2.jpglt/picturegt lt/matchgt
lt/resultsgt
20
(No Transcript)
21
(No Transcript)
22
lt?xml version"1.0" encoding"UTF-8"
?gt ltxsltransform xmlnsxsl"http//www.w3.org/19
99/XSL/Transform" version"1.0"gt ltxsloutput
method"html"/gt ltxsltemplate match"/results"gt
lthtmlgt ltheadgtlttitlegtResults of World Cup
lt/titlegt ltLINK REL"stylesheet" TYPE"text/css"
HREF"results.css"/gt lt/headgt ltbodygt
ltxslapply-templates select"/results/match"gt
ltxslsort select"_at_feature" order"descending"/gt
lt/xslapply-templatesgt lt/bodygt
lt/htmlgt lt/xsltemplategt
23
ltxsltemplate match"match_at_feature'yes'"gt
lth2gtltxslvalue-of select"headline"/gtltbr/gt lt/h2gt
lttablegt lttdgt ltxslvalue-of select"story"/gt
lt/tdgt lttdgtltimg src"picture" /gt lt/tdgt
lt/tablegt ltpgtScores follow....lt/pgt lt/xsltemplate
gt ltxsltemplate match"match"gt lth3gt
ltxslvalue-of select"team1"/gt versus
ltxslvalue-of select"team2"/gt lt/h3gt
ltpgtPlayed on ltxslvalue-of select"date"/gt lt/pgt
ltpgtResult ltxslvalue-of select"team1
"/gt ltxslvalue-of select"team1/_at_score "
/gt ltxsltextgt, lt/xsltextgt
ltxslvalue-of select"team2 "/gt
ltxslvalue-of select"team2/_at_score " /gt
lt/pgt lt/xsltemplategt lt/xsltransformgt
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
lt?xml version"2.0"?gt ltvxml version"2.0"gt
ltformgt ltfield name"childid"gt ltpromptgt
ltaudio src"whosthis.wav"gtHello. Who is
calling?lt/audiogt lt/promptgt ltgrammar
type"application/x-gsl" mode"voice"gt lt!CDATA
dan daniel (daniel meyer) (dan meyer)
ltchildid "daniel"gt aviva (aviva meyer)
ltchildid "aviva"gt esther (esther minkin)
ltchildid "esther"gt gt lt/grammargt
26
ltcatch event"noinput nomatch"gt ltaudio
src"sorry.wav"gtSorry. I didn't get that.lt/audiogt
ltexit/gt lt/catchgt ltfilledgt ltif
cond"'daniel'childid"gt ltgoto
next"danfollowup"/gt ltelseif
cond"'aviva'childid"/gt ltgoto
next"avivafollowup"/gt ltelseif
cond"'esther'childid"/gt ltgoto
next"estherfollowup"/gt ltelse/gt
ltreprompt/gt lt/ifgt lt/filledgt
lt/fieldgt lt/formgt
27
ltform id"avivafollowup"gt ltvar name"rest"
expr"1000"/gt ltfield name"bcount"
type"number"gt ltpromptgt ltaudio
src"howmanycranes.wav"gtHello, Aviva. How many
cranes have you made? lt/audiogt
lt/promptgt ltgrammar type"application/x-gsl"
mode"voice" gt lt!CDATA NATURAL_NUMBER_THRU_9999
gt lt/grammargt ltcatch event"noinput nomatch"gt
ltaudio src"sorry.wav"gtSorry. I didn't get
that.lt/audiogt ltexit/gt lt/catchgt
28
ltfilledgt ltassign name"rest"
expr"1000-bcount"/gt ltaudiogt ltvalue
expr"rest" /gt lt/audiogt ltaudio
src"togo.wav"gt to go. lt/audiogt ltif
cond"restlt200" gt ltaudio src"homestretch.wav"
gtYou're in the home stretch lt/audiogt
ltelseif cond"restlt500" /gt ltaudio
src"morethanhalf.wav"gtMore than half way
lt/audiogt ltelseif cond"restlt800" /gt
ltaudio src"goodstart.wav"gtOff to a good
start lt/audiogt ltelse/gt ltaudiogt
Get a move on lt/audiogt lt/ifgt ltaudio
src"goodbye.wav"gtGood bye. lt/audiogt
lt/filledgt lt/fieldgt lt/formgt
29
Wireless phones

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

• lt?xml version"1.0"?gt
• lt!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML
  1.3//EN" "http//www.wapforum.org/DTD/wml13.dtd"gt
  
• ltwmlgt
• ltcard id"start" title"Find office"
  newcontext"true"gt
• ltpgt
• Select, type in name, click on ok, click on
  options, select find
• ltinput name"key" type"text"/gt
• ltdo type"accept" label"Find"gt
• ltgo href"find.wmlslookup('(key)')"/gt
• lt/dogt
• lt/pgt
• lt/cardgt

32
More of WML example

• ltcard id"result" title"Found!"gt
• ltp align"center"gt
• ltbiggtltbgt(key) is in (location).lt/bgtlt/biggt
  
• lt/pgt
• ltdo type"accept" label"Repeat?"gt
• ltgo href"start" /gt
• lt/dogt
• ltdo type"home" label"Map" gt
• ltgo href"map" /gt
• lt/dogt
• lt/cardgt

33
part of find.wmls

• extern function lookup(key)
• var place
• var found
• var dups
• var fn
• fn ""
• dups false
• place""
• foundfalse
• if (String.find("Jeanine Meyer",key)gt0)
• 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.wmldup")
• else if (found)
• WMLBrowser.setVar("location",place)
• WMLBrowser.go("lookup.wmlresult")
• else
• WMLBrowser.go("lookup.wmlnf")

35
OpenWave Toolkit XHTML-MP subset of XHTML tags
and CSS features
36
Start of example

• lt?xml version"1.0" encoding"UTF-8"?gt
• lt!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML
  Mobile 1.0//EN"
• "http//www.wapforum.org/DTD
  /xhtml-mobile10.dtd"gt
• ltheadgt
• lttitlegtOrigamilt/titlegt
• ltlink rel"stylesheet" href"style.css"
  type"text/css"/gt
• lt/headgt

37

• ltbodygt
• ltimg src"bird.gif" alt"" width"60"/gt
• ltbr/gt
• ltbgtltigtOrigami modelslt/igtlt/bgt
• ltbr clear"all"gt
• .
• lt/bodygt
• lt/htmlgt

38

• lttablegt lttr class"blue"gt
• lttdgt1 lta accesskey"1" href"wiggler.xhtml"gtWiggle
  rlt/agtlt/tdgt lt/trgt
• lttrgt lttdgt2 lta accesskey"2" class"bluetext"
  href"wbomb.xhtml"gtWater bomblt/agtlt/tdgt lt/trgt
• lttr class"blue"gt
• lttdgt3 lta accesskey"3" href"frogface.xhtml"gtFrog
  facelt/agtlt/tdgt lt/trgt
• lttrgt lttdgt4 lta accesskey"4" class"bluetext"
  href"mbox.xhtml"gtMagazine cover boxlt/agtlt/tdgt
  lt/trgt
• lttr class"blue"gt
• lttdgtltp mode"nowrap"gt5 lta accesskey"5"
  href"cup.xhtml"gt
• Drinking cuplt/agtlt/pgtlt/tdgt lt/trgt lt/tablegt

39
style.css

• BODY color006699 font-family Arial,
  sans-serif background-colorFFFFFF
• TD font-family Arial, sans-serif
• .bluetext color006699
• .blue color000000 background-color99CCFF

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.