INTRODUCTION TO
Information Architecture
&
Design
SCHOOL OF VISUAL ARTS | FALL 2009 | ANH DANG
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

About Me
Anh Dang
Information Architect
NEW YORK TIMES
Adjunct Professor
SCHOOL OF VISUAL ARTS
PRATT INSTITUTE
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

About You
Hello Class
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Let’s Go
Let’s get started
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

About the class
Lectures
Discussions
Exercises
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

3 I’s
Information + (Interactions + Interfaces)
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

3 I’s
Information + ( Interactions + Interfaces )
• Understanding content
• Organize content
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

3 I’s
Information + ( Interactions + Interfaces )
• Understanding content • Mapping task flows • Learning design basics
• Organize content • Evaluating user goals • Creating a concept
• Testing prototypes
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Discussion Point
What is IA?
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

http://flickr.com/photos/dcjohn/
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Venn Diagram
CONTEXT
IA
CONTENT USERS
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

IA/ID Pyramid
INTERFACE
INFORMATION ARCHITECTURE
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Discussion Point
What is GOOD design?
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Braun’s 10 Principles of Good Design
Braun’s 10 Principles of Good Design
GOOD DESIGN IS
1. Innovative
2. Enhances the usefulness of product
3. Is aesthetic
4. Displays the logical structure of a product; it’s form
follows its function
5. Is unobtrusive
6. Is honest
7. Is enduring
8. Is consistent right to the details
9. Is ecologically conscious
10. Is minimal design
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Goals
Goals of User Experience Design
Create designs that effectively communicate a
message and allow users to accomplish their goals
easily, simply, and rapidly.
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

*****ADDPICTURE******
Exercise 1
DESIGN LIGHTNING ROUND
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Quote
“Don’t make me think.”
STEVE KRUG
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

ATM
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Subway ***ADD PHOTO***
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Door 1
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Door 2
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Remote 1
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Remote 2
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Microwave
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Themostat
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Yahoo
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Bing
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Google
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Example Continental
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Example Northwest
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

ORGANIZING
INFORMATION
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

“There are often better ways to organize data
than the traditional ones that first occur to us.
Each organization of the same set of data
expresses different attributes and messages.
It is also important to experiment,
reflect, and chose which organization
best communicates our messages.”
NATHAN SHEDROFF
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Principle: LATCH
Most information can be organized by:
L
A
T
C
H
RICHARD SAUL WURMAN
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Principle: LATCH
Most information can be organized by:
Location
A
T
C
H
RICHARD SAUL WURMAN
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Principle: LATCH
Most information can be organized by:
Location
Alphabet
T
C
H
RICHARD SAUL WURMAN
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Principle: LATCH
Most information can be organized by:
Location
Alphabet
Time
C
H
RICHARD SAUL WURMAN
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Principle: LATCH
Most information can be organized by:
Location
Alphabet
Time
Category
H
RICHARD SAUL WURMAN
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Principle: LATCH
Most information can be organized by:
Location
Alphabet
Time
Category
Hierarchy
RICHARD SAUL WURMAN
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Example: Vietnam War Memorial
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

CASe Study: NYT Homepage (category)
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Case StudyL Times Wire (time)
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

*****ADDPICTURE******
Exercise 2
SHOPPING ON ETSY
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

EXERCISE 1
Exercise 1
Etsy is a site with a lot of products and a lot of categories.
Conduct a card sort and organize the content in a manner
that is useful and interesting. Propose a new navigation
system that is easy for users to find search and browse for
ETSY products
•Group and label with index cards, post-it notes
•Cluster similar items and create categories
•Identify patterns and relationships
•Recommend a new taxonomy
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Technique Card Sorting
CARD SORTING
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Quote
“Card sorting is a great, reliable,
inexpensive method for finding patterns
in how users would expect to find
content or functionality.”
DONNA SPENCER
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Technique Card Sorting
Card Sorting
METHODOLOGY
• Grouping and labeling with index cards,
post-it notes
GOALS
• Find names for groups of content based on
user’s perspective.
• Organize content more efficiently.
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

VISUALIZING
INFORMATION
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Principle: Visual Organization
Visual Variables of Contrast
POSITION SIZE HUE
VALUE ORIENTATION SHAPE
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Principle: Gestalt Principles of Grouping
Gestalt Principles of Grouping
PROXIMITY SIMILARITY CONTINUITY
CLOSURE AREA SYMMETRY
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Jock Mackinlay’s Visual Features
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Principle: Gestalt Principles of Grouping
Information Seeking Mantra BEN SCHNEIDERMAN
• Overview first
• Zoom & filter
• Details on demand
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

*****ADDPICTURE******
Examples
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Example: Map
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Example: Map
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Case Study: Gap Minder
Hans Rosling
GAP MINDER
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Lunch
LUNCH
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

INTERACTIONS
&
INTERFACES
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

“Most design is intended to be
used by people, so the needs and
requirements of people ought to
be driving much of the work
throughout the entire process.”
DONALD NORMAN
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Donald Norman
http://www.jnd.org/NNg-Photographs/DonNorman2003-5.jpg
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Principle: Things to Consider
Things to consider…
• Who is the target audience?
• What is the purpose of the product?
• When would this product be used?
• Where would this product be used?
• How easy is it to understand what to do?
• What are all the steps needed to accomplish a task?
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Principle: Things to Consider
Things to consider…
• Who is the target audience?
• What is the purpose of the product?
• When would this product be used?
• Where would this product be used?
• How easy is it to understand what to do?
• What are all the steps to accomplish a task?
• What are the business goals?
• What are the user goals?
• What are the product interface goals?
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Principle: Design Concepts
Key Design Concepts
Affordance
Mapping
Constraints
Visibility
Feedback
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Affordance
AFFORDANCE
“Perceived properties that determine how
a thing is used [and] provide strong cues
to the operations of things.”
DONALD NORMAN
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

affordance
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Affordance
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Mapping
MAPPING
“Relationship between two things, in this
case between controls and their
movements and the results in the world.”
DONALD NORMAN
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Mapping
http://flickr.com/photos/annavsculture/441610821/
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Mapping
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Contraints
CONSTRAINTS
Limitations that constrain
possible interactions
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Constraints
http://flickr.com/photos/annavsculture/441610821/
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Constraints
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Visibility
VISIBILITY
“Just the right things have to be visible: to indicate
what parts operate and how, to indicate how
the user is to interact with the device.”
DONALD NORMAN
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Visibility
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Visibility
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Fdback
FEEDBACK
“Sending back to the user information
about what action has actually been done,
what result has been accomplished.”
DONALD NORMAN
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Feedback
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Feedback
http://flickr.com/photos/huladancer22/530743543/
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

*****ADDPICTURE******
Exercise 3
ZIPTHRU
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

EXERCISE 2
Exercise 3
Redesign the interface and user taskflow of Zipthur to improve its
usability. Use information organization principles such as LATCH,
visual variables of contrast, gestalt principles of grouping to improve:
•Affordance
•Mapping
•Visibility
•Constraints
Diagram the task flows to
1.Check balance
2.Get a New Card
3.Add funds to your card
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Design Process
To do…
• Heuristic Evaluation
• Map task flows
• Sketch concepts
• Prototype
• User Test
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

HEURISTIC EVALUATION
http://www.flickr.com/photos/mollivan_jon/67850029
/
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Technique Card Sorting
Heuristic Evaluation
METHODOLOGY
• Use a small set of criteria to evaluate
information and interface to identify
usability problems.
GOALS
• Evaluate usability of current product and
guide design direction.
• Organize content more efficiently.
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Technique Task Flows
TASK FLOWS
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Technique Task Flow
Task Flows
METHODOLOGY
• Identify all the possible pathways of user
tasks
GOALS
• Identify gaps and opportunities of how to
improve the flow of information and
interactions.
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Sketching
SKETCHING
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Quote
“There are techniques and processes
whereby we can put experience front and
center in design. My belief is that the basis for
doing so lies in extending the traditional
practice of sketching. ”
BILL BUXTON
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Technique
Methodology
• Draw!
Goals
• Quickly generate ideas and refine through
iterations.
• Identify key features and functionality.
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Sketching
Attributes of a Sketch BILL BUXTON
• Quick
• Timely
• Inexpensive
• Disposable
• Plentiful
• Clear vocabulary
• Distinct gesture
• Minimal detail
• Appropriate degree of refinement
• Suggest & explore rather than confirm
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Paper Prototyping
PAPER PROTOTYPING
http://www.flickr.com/photos/arrrika/2298422351/
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Quote
“A prototype can answer design questions
and communicate design ideas… ”
FRED BEECHER
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

User Testing
USER TESTING
http://www.flickr.com/photos/psd/2247745929/
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

resources
Resources
SITES
• interactiondesign.sva.edu
• boxesandarrows.com
• konigi.com
• subtraction.com
• smashingmagazine.com
• designmind.frogdesign.com
• adaptivepath.com
• iainstitute.com
ORGANIZATIONS
• Interaction Designers Association (IxDA)
• Usability Professionals’ Association (UPA)
• Human Computer Interactions (HCI)
• AIGA
EVENTS
• Swiss Miss Creative Mornings
• SVA MFA Interaction Design Events
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

Good Design
“Good design will have it all
- aesthetic pleasure, art, creativity -
and at the same time be
usable, workable, and enjoyable.”
DONALD NORMAN
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

THE END.
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang