Creating user interfacescritique: the Edge (Jakob Nielsen)

catch-up: xml, xslsets of image swaps

User observation study reports

Project I assignment

Homework: posting, presentation

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, includingwww.haribon.org.phcriticized 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.

Problems in article• I was immediately told I needed to download a new

Flash player (even though I had Flash 6—it 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.

Interactive image

• Directly in HTML: http://www.petermu.net/pepsi/design/mapexample.html<img src="peterfamily.jpg" usemap="#map1"><map name="map1"> <area shape="circle" coords="300,250,75" href="#rachel"> <area shape="rect" coords="302,419,440, 567" href="#isaac"> <area shape="rect" coords="342,83,456,194" href="#peter"> </map>

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

User observation reports

• Show site or describe

• Describe subjects, questions

• Give conclusions– on site– on study

Class (audience): constructive comments on site and study!

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– include naming everyone in the team: MORE IS

EXPECTED FROM A TEAM

• Present plan next class

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

• ????

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?