Sva Intro to Information Architecture & Design Fall 09
1. 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
2. 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
3. About You
Hello Class
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
4. Let’s Go
Let’s get started
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
5. About the class
Lectures
Discussions
Exercises
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
6. 3 I’s
Information + (Interactions + Interfaces)
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
7. 3 I’s
Information + ( Interactions + Interfaces )
• Understanding content
• Organize content
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
8. 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
9. Discussion Point
What is IA?
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
12. Venn Diagram
CONTEXT
IA
CONTENT USERS
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
13. IA/ID Pyramid
INTERFACE
INFORMATION ARCHITECTURE
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
14. Discussion Point
What is GOOD design?
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
15. 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
16. 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
17. *****ADDPICTURE******
Exercise 1
DESIGN LIGHTNING ROUND
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
18. Quote
“Don’t make me think.”
STEVE KRUG
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
32. ORGANIZING
INFORMATION
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
33. “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
34. 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
35. 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
36. 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
37. 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
38. 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
39. 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
40. Example: Vietnam War Memorial
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
41. CASe Study: NYT Homepage (category)
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
42. Case StudyL Times Wire (time)
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
43. *****ADDPICTURE******
Exercise 2
SHOPPING ON ETSY
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
44. 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
47. Technique Card Sorting
CARD SORTING
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
48. 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
49. 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
50. VISUALIZING
INFORMATION
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
51. 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
52. 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
53. Jock Mackinlay’s Visual Features
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
54. 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
55. *****ADDPICTURE******
Examples
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
60. Case Study: Gap Minder
Hans Rosling
GAP MINDER
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
61. Lunch
LUNCH
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
62. INTERACTIONS
&
INTERFACES
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
63. “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
64. Donald Norman
http://www.jnd.org/NNg-Photographs/DonNorman2003-5.jpg
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
65. 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
66. 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
67. Principle: Design Concepts
Key Design Concepts
Affordance
Mapping
Constraints
Visibility
Feedback
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
68. 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
71. 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
72. Mapping
http://flickr.com/photos/annavsculture/441610821/
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
74. Contraints
CONSTRAINTS
Limitations that constrain
possible interactions
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
75. Constraints
http://flickr.com/photos/annavsculture/441610821/
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
77. 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
80. 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
82. Feedback
http://flickr.com/photos/huladancer22/530743543/
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
83. *****ADDPICTURE******
Exercise 3
ZIPTHRU
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
84. 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
86. 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
87. HEURISTIC EVALUATION
http://www.flickr.com/photos/mollivan_jon/67850029
/
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
88. 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
89. Technique Task Flows
TASK FLOWS
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
90. 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
92. Sketching
SKETCHING
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
93. 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
94. 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
95. 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
96. Paper Prototyping
PAPER PROTOTYPING
http://www.flickr.com/photos/arrrika/2298422351/
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
97. 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
98. User Testing
USER TESTING
http://www.flickr.com/photos/psd/2247745929/
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
99. 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
100. 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
101. THE END.
Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
