Creating user interfaces

1
Creating user interfaces

• critique the Edge (Jakob Nielsen)
• catch-up xml, xsl?sets of image swaps
• User observation study reports
• Project I assignment
• Homework posting, presentation

2
the Edge (last year)

• Macromedia newsletter (delivered by e-mail)
• This issue had article by Jakob Nielsen on how
  not to use Flash
• Don't overuse technology. Make links to content
  obvious and clear.
• A modest number of examples, including
• www.haribon.org.ph
• criticized for non-obvious link to interactive
  map. I found problem was making the document
  take the whole screen. Map made me dizzy but did
  have information.

3
Problems in article

• I was immediately told I needed to download a new
  Flash player (even though I had Flash 6it was a
  later version of Flash 6). The download/install
  was troublesome asked why I wanted another Flash
  6 player, no icon on desktop, couldn't work with
  IE
• Article had no real use of Flash 6 pages of
  text. When you clicked on the next page, the page
  'turning' was fancy!
• Article had very small icons to return to
  newsletter.
• Misleading links to ads and not substance.

4
(No Transcript)
5
(No Transcript)
6
Interactive image

• Directly in HTML http//www.petermu.net/pepsi/des
  ign/mapexample.html
• ltimg src"peterfamily.jpg" usemap"map1"gt
• ltmap name"map1"gt
• ltarea shape"circle" coords"300,250,75"
  href"rachel"gt
• ltarea shape"rect" coords"302,419,440, 567"
  href"isaac"gt
• ltarea shape"rect" coords"342,83,456,194"
  href"peter"gt lt/mapgt
• Image slicing (Photo Shop Image ready) slice up
  an image, produces the HTML and the individual
  images reconstructed using a table. Advantage
  can also do mouseover image swaps, though
  somewhat tedious. Disadvantage produces many
  images, all of which need to be copied to server.
• Flash use button symbols, with feature of
  defining new image for mouseover and mousedown.

7
Interactive image

• Go to my JavaScript examples and look at the Find
  Daniel game
• Note the default option did not work.
• Needed to do things to avoid addresses showing up
  on status bar.

8
User observation reports

• Show site or describe
• Describe subjects, questions
• Give conclusions
• on site
• on study
• Class (audience) constructive comments on site
  and study!

9
Project I

• XML/XSLT Web site
• not every page (file) needs to be XML based
• Name the user! Define explicit function or
  functions.
• can be informational (one way) but prefer some
  interactions
• Suggested topics
• other possibilities must get my approval
• Make proposal on Blackboard by tomorrow
• Present plan next class (AFTER MIDTERM)

10
Suggested Topics

• Voting (flexible system that would handle 1 to 2
  to several to over 100 candidates)
• Museum Kiosk interview Neuberger Museum staff
  and museum visitors for basic directions/location
  information
• School Web Site for Major/Program/Certificate
  Requirements test plan against New Media and
  other Purchase majors
• Store catalog include options for special
  pricing, featured items, text images
• Bus/train schedule mixed media (must pass
  Accessibility standard)
• Virtual Pet enhance underlying model (xslt),
  possibly with use of more graphic
• ????

11
Presentation

• (attempt to slow down rush to coding drawing)
• Purpose, audience(s) / user names, functions
• Content
• Diagram(s) indicating interactions (storyboard)
• How will you know if the interface is working?