1 / 10

Creating user interfaces

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. the Edge (last year). Macromedia newsletter (delivered by e-mail)

noelfrancis
Download Presentation

Creating user interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  5. User observation reports • Show site or describe • Describe subjects, questions • Give conclusions • on site • on study Class (audience): constructive comments on site and study!

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

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

  8. 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?

More Related