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 bold, italic stuff
• all system tags lower case
• NOT
• all attribute values quoted
• empty tags with closing

19

04-Jun-2002 Korea
Poland

05-Jun-2002 USA
Wins 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. USA
Portugal
soccer2.jpg

20
(No Transcript)
21
(No Transcript)
22
?
99/XSL/Transform" version"1.0"
method"html"/
Results of World Cup

HREF"results.css"/




23





Scores follow....

versus

Played on
Result
"/
/ ,



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


Hello. Who is
calling? type"application/x-gsl" mode"voice" dan daniel (daniel meyer) (dan meyer)
aviva (aviva meyer)
esther (esther minkin)

26
src"sorry.wav"Sorry. I didn't get that.
cond"'daniel'childid" next"danfollowup"/ cond"'aviva'childid"/ next"avivafollowup"/ cond"'esther'childid"/ next"estherfollowup"/


27
expr"1000"/ type"number" src"howmanycranes.wav"Hello, Aviva. How many
cranes have you made?
mode"voice"
Sorry. I didn't get
that.
28
expr"1000-bcount"/ expr"rest" / src"togo.wav" to go. cond"restlt200" You're in the home stretch
src"morethanhalf.wav"More than half way

Off to a good
start
Get a move on src"goodbye.wav"Good bye.

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

• 1.3//EN" "http//www.wapforum.org/DTD/wml13.dtd"
  
• newcontext"true"
• Select, type in name, click on ok, click on
  options, select find

32
More of WML example

• (key) is in (location).
  

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

• Mobile 1.0//EN"
• "http//www.wapforum.org/DTD
  /xhtml-mobile10.dtd"
• Origami
• type"text/css"/

37

• 
  
• Origami models
• 
  
• .

38

• 1 Wiggle
  r
• 2 href"wbomb.xhtml"Water bomb
• 3 Frog
  face
• 4 href"mbox.xhtml"Magazine cover box
  
• 5 href"cup.xhtml"
• Drinking cup

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.