cs 4963: ui design
DESCRIPTION
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?. - PowerPoint PPT PresentationTRANSCRIPT
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?
“…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
Structure and Flow
Orientation
Navigation
Orientation
Navigation
Card sorts
from blog.innovativethought.net
Site maps Task flows
Screenflows
from http://katehorne.com/screenflow.PDF
from Microsoft SketchFlow from page 176 of Unger & Chandler
numbered!!
Swimlanes
Wireframes• Navigation• Content
sections• Imagery/
media needs• Form
elements• Calls to action• Annotations
from Todd Zaki Warfel’s Prototyping,
from Rosenfeld
Media
from Andy Rutledge, in uxmag.com,
on Where Wireframes Are Concerned
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
Layouts• http://designing
webinterfaces.com/designing-web-interfaces-12-screen-patterns
• (We’ll step through these.)
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/
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
For next time…1. 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.
