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?

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

Contact UsMatthias Shapiromatthias.shapiro@gmail.com

Jason AldermanJason.alderman@utah.edu

http://huah.net/cs4963