1 / 19

CS 4963: UI Design

CS 4963: UI Design. Information Architecture. Today:. What is information architecture? What will it help me figure out? What will help me figure it out? What products does it generate? How do I make these products?.

olisa
Download Presentation

CS 4963: UI Design

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. CS 4963: UI Design Information Architecture

  2. Today: • What is information architecture? • What will it help me figure out? • What will help me figure it out? • What products does it generate? • How do I make these products?

  3. “…our concern is always with creating structures to facilitate effective communication. This notion is the core of our discipline.” —Jesse James Garrett, on information architecture

  4. Structure and Flow

  5. Orientation

  6. Navigation

  7. Orientation

  8. Navigation

  9. Card sorts from blog.innovativethought.net

  10. Site maps Task flows

  11. Screenflows from Microsoft SketchFlow from page 176 of Unger & Chandler numbered!! from http://katehorne.com/screenflow.PDF

  12. Swimlanes

  13. Wireframes from Todd ZakiWarfel’sPrototyping, from Rosenfeld Media • Navigation • Content sections • Imagery/media needs • Form elements • Calls to action • Annotations from Andy Rutledge, in uxmag.com, on Where Wireframes Are Concerned

  14. Sketching • Bill Buxton’s criteria: • Quick • Timely • Inexpensive • Disposable • Plentiful • Adaptive Path’s six-up template from http://uxweek.com/slides/ap_good_design_faster_workshop.pdf

  15. Layouts • http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns • (We’ll step through these.)

  16. Annotations Use direct, unambiguous language • NOT “the heading should navigate to page B” • BUT “the heading shall navigate to page B”forsooth! from http://www.jdvogt.com/csueb/

  17. Summary • Information architecture… • is about structure and flow • is about orientation and navigation • is about organizing your information so that users can make a mental model that matches up your information, and find what they’re looking for • can use card sorts, sketching, and layout patterns • (generally) produces screenflows and wireframes

  18. For next time… • Sketch six wireframes for a screen to browse a collection of video files. Think about how to - represent information you have on this media, - categorize it, - navigate it, and- display it, so that you know where you are. 2. Readings for next lesson: on the class blog.

  19. Contact Us Matthias Shapiro matthias.shapiro@gmail.com Jason Alderman Jason.alderman@utah.edu http://huah.net/cs4963

More Related