Information Architecture for Designers

HOW INTERACTIVE | INFORMATION ARCHITECTURE | SEPT. 27, 2012 | WASHINGTON, DC

Information Architecture
HOW Interactive Conference
Brian Miller

Brian Miller
Owner of the Brian Miller Design Group

Author
Above the Fold:
Understanding the Principles of Successful Web Site Design
Published by HOW Design Books, March 2011

Adjunct Professor
Shintaro Akatsu School of Design, University of Bridgeport

Service
Type Directors Club
Executive Board Member, Secretary/Treasurer

Above the Fold
Understanding the Principles of Successful Web Site Design

The Number 1 Selling Book in 2011 on My Design Shop
Used in Over 40 Classrooms at Universities Around the Country

“Brian Miller gives a sensible and well thought
out approach to web design.”
JStein

“Anyone who is looking to promote themselves
or business using digital media marketing tools
should own a copy of this book.”
B. Crosland

“Miller has written here the perfect handbook for
a student looking to learn more about web design
or a small business owner trying to increase traffic.”
Amazon Review

Information Architecture

What Information Architecture is not

The role of an information architect

Site planning

Content auditing

Site mapping

Elements of Usability

Functional Elements

Wireframing

Experience mapping

CR UX

Information Architecture:
What it’s not

This is not information architecture

Anatomy of a Web page: This is Web design

Anatomy of a Web page: Headers

Headers act as a grounding force for the user
by identifying and visually unifying all the
pages of a site.

Anatomy of a Web page: Navigation

Navigation is a broad term that encompasses
any aspect of a site that links a user to
another area of the site and is the cornerstone
of a site’s usability.

Anatomy of a Web page: Feature area

To achieve hierarchy, designers use a focal
point—an area in the composition that is
perceived before all others.

Anatomy of a Web page: Body/content

Breaks in the content allow users to scan the
layout quickly and gives them multiple entry
points into the page.

Anatomy of a Web page: Sidebar

Sidebars are useful for providing supporting
information as well as advertising space.

Anatomy of a Web page: Footer

The footer has emerged over recent years as a
critical part of Web design, performing tasks
for both the user and search engine
optimization.

Anatomy of a Web page: Background

Backgrounds can be used to create depth or
dimension, add richness with texture and
color to a page, or even expand the content
beyond the borders of the page.

Information Architecture:
A tale of two soda machines

Why?

Complacency: That’s where it’s always been.
Pure aesthetics: That’s where it looked the best.
Convenience: That’s where it was easiest.

User Needs

Information
Architecture

Content Technology

The Role of IA:
From pages to processes

Amazon.com
launches DrudgeReport.com Napster.com, a
CompuServe Craigslist.org
Yahoo.com launches launches peer-to-peer file
NYTimes.com changes its name to expands beyond
sharing Web site,
Image of Microsoft. launches Lycos.com Image of Apple.com San Francisco
launches Wikipedia.org
com from 1994 from 1997 (originally launched
CraigsList.org Cascading style launches
Microsoft releases in 1995)
WC3 is formed to launches sheets (CSS) Ebay.com launches
Mosaic, the Internet Explorer Microsoft releases
standardize HTML introduced Google Adwords Friendster.com
first consumer Microsoft releases Netscape version 5, which Internet Explorer
launches launches
Web-browsing Netscape Navigator Internet Explorer Microsoft releases Communicator Google.com, founded allowed users to version 6, which
application, is Web browser versions 1 (August) Internet Explorer replaces Netscape by Larry Page and save Web pages for Netscape version 6 included support Netscape version 7
released is released and 2 (November) version 4 Navigator Sergey Brin, launches the first time is released for CSS is released

1993 1994 1995 1996 1997 1998 1999 2000 2001 2002

Twitter.com
launches

Microsoft releases Twitter.com is
Internet Explorer used to organize
Facebook.com
version 7, which Microsoft launches and mobilize
MySpace.com launches
introduced tabbed Bing.com to compete relief efforts in
launches
Flickr.com launches browsing and a Candidate Web sites with Google Haiti following
WordPress content feed reader Apple introduces and social media play a the devastating
Mozilla Firefox Web Microsoft releases
blogging software is the iPhone and pivotal role in the earthquake.
browser is released, Mozilla Firefox Internet Explorer
introduced. mobile apps U.S. elections
which utilizes the version 2 is released version 8 with Mozilla Firefox
Apple releases the Gecko layout engine YouTube.com with tabbed Netscape Navigator Mozilla Firefox improved support for version 3.6 is
Safari Web browser to display Web pages launches browsing version 9 is released version 3 is released Ajax, CSS, and RSS released

2003 2004 2005 2006 2007 2008 2009 2010

1995—c.2000

Web sites were “information spaces”
News sites
Medical sites
Marketing brochure sites

A B

1995—c.2000

Information Architects
Organize content
Direct users to find the content
[Period]

1995—c.2000

IA Deliverables
Site maps
Taxonomies
Labeling systems
Wireframes

c.2001—c.2005

Web Sites Became Transactional
Ecommerce
Auctions
User-generated content

c.2001—c.2005

Information Architects became
Interaction Designers
Illustrate discrete user tasks
Map out user flows
Design the functionality of individual components
that would allow users to complete tasks

c.2001—c.2005

Interaction Designer Deliverables
User scenarios showing the paths
to desired user outcomes

c.2005—present

The Web becomes user-centric and mobile
The Web is now a functional utility
Users expect more than just content — delight

c.2005—present

Interaction Designers become
User Experience (UX) Designers
Develop contextual experiences

c.2005—present

User Experience Deliverables
User flow diagrams, or user journey stories, often
across multiple platforms and media—from desktop
and mobile experiences to in-store and app
interactions

Site Planning: Starting at the beginning

Phase 1: Planning

Objective Setting — SWAT Analysis
Competitive Analysis
Demographics
How will people find the site?
Functional Requirements

Phase 2: Information Architecture

Content sorting
Sitemaps
Wireframes
Usability diagrams

Phase 3: Creative

Moodboards
Grid building
Layouts
UI Details

Information Architecture: Tools of the trade

Adobe InDesign and Illustrator

A Pencil

Site planning: Information architecture

Information Architecture (IA) is the blueprint
that maps out the pages of a site and

Content Collection and Creation

An asset inventory is the evaluation of the
clients existing brand element that will be
necessary and available.

Information Architecture Documents

Content sorting is a means of cataloging and
categorizing the content of a site in order to
understand the big picture of a project.


A sitemap is a schematic for a site showing the
pages and the lined relationships among them.

CLIENT: SmartCar
SITE URL: www.smartusa.com
SITEMAP AUTHOR: Terry Carter HOME [start page]

1 Models Design SC SmartCar
Beliefs Find a Smart
2 Looks Friends Get Updates Full Website Twitter Facebook
Pure Coupe Safety First Main Center
3 Page Page

1
Models Design Beliefs SmartCar
2 Customize Me
Passion Coupe In Our Genes on YouTube
3

1
Models Design SmartCar
Beliefs
2 Facebook
3
Passion Cabriolet What a Body Unbig Page

1
Models Design Find a Smart
2
3
Electric Drive Let’s Tailgate Center

“Like Us” to “Send” to “Follow” to “## Followers” to
Facebook Facebook Customized Twitter Abbreviated Twitter
Login Form Login Form Login Form Feed Pop-up

on Twitter

Full Website About Us Contact Us Sitemap Privacy Policy SmartWorldwide Financing a Vehical Owners Facebook Twitter Flikr YouTube

NAVIGATION
[present on all pages, except HOME] LINK
DESTINATIONS
Main Navigation
Secondary Navigation
ABBREVIATED
Internal Page
LINK KEY METHODS OF
Tertiary Navigation
Internal Form NAVIGATION
1 Find a Smart Center
[present only on FRIENDS page]
External Form Connects via
2 Model Specs on Scrolling Prompt
Primary Footer Full Website
External Page Connects via
Secondary Footer 3 Build Your Own clickable link
SmartCar

1
Models Design Find a Smart
2
3
Electric Drive Let’s Tailgate Center

“Like Us” to “Sen
Facebook Face
Login Form Login

Full Website About Us Contact Us Sitemap Privacy Policy SmartWorldwide

NAVIGATION
[present on all pages, except HOME] LINK
DESTINATIONS
Main Navigation
Secondary Navigation
ABBREVIATED
Internal Page
LINK KEY METHODS OF
Tertiary Navigation
Internal Form NAVIGATION
1 Find a Smart Center
[present only on FRIENDS page]
External Form Connects via
2 Model Specs on Scrolling Prompt
Primary Footer Full Website
External Page Connects via
Secondary Footer 3 Build Your Own clickable link
SmartCar

T1 P1

U.S. Home

T2 P2 T2 P2 T2 P6 T2 P9

Today’s New Realities
Industries Index Services Index
Challenges (Showcased Ad)

All All All All
T3 P3 Contacts U.S. Partner T3 P3 Contacts U.S. Partner T2 P7 Contacts U.S. Partner T2 P10 Contacts U.S. Partner
Contacts Contacts Contacts Contacts
Industry Service Challenges For
Realities 01-09
Category Category CEOs
- White Paper - White Paper - White Paper - White Paper
Related - POV/Opinion Related - POV/Opinion Related - POV/Opinion Related - POV/Opinion
T3 P4 Publication - Surveys/Report T3 P4 Publication - Surveys/Report T2 P7 Publication - Surveys/Report T2 P11 Publication - Surveys/Report
- Thought Leadership - Thought Leadership - Thought Leadership - Thought Leadership
Service Challenges For
Industry Sector Reality ##
Subcategory CFOs
T2 P8
Case Study Case Study Case Study Case Study
T3 P5 T3 P4 T2 P7
Challenge
Industry
Challenges For
Category - Conference Service Offering - Conference - Conference - Conference
HR Execs
Publications Related Event - Webcast Related Event - Webcast Related Event - Webcast Related Event - Webcast
- Seminar - Seminar - Seminar - Seminar
T2 P5 T2 P5 T2 P7
Service Challenges For
All Industry Newsletter - TV
Category RFP Process Audit Related Service Ad Campaign
Events Registration - Print
Publications Committees

T2 P7
Newsletter Related
RSS Feed(s) T2 P5 Related Service
Registration Challenges For Industry/Sector
Legal Counsel
All Service
Events
Of Further Interest
Related
RSS Feed(s)
Industry/Sector

Related Service
Of Further Interest

- Deeper Dive Into
Related Industry View Magazine Related Issue Section

- Deeper Dive Into
Related Issue Section

T2 P19

- Deeper Dive Into The Story of
Related Issue Section Casey

T3 P12

PCS Value
Proposition
U.S. Global Navigation T2 P13

Countries About Us Careers Publications Press Room PwC Portal Contact Us Search
T3 P3 T3 P3 T2 P7

PCS Industry PCS Service Challenges For
All All
Category Category PCS Owners
Contacts U.S. Partner Contacts U.S. Partner T2 P14a
Contacts Contacts Events &
U.S. Partner
T3 P4 T3 P4 All Opinion/POV Seminars &
Contacts
T2 P8 Contacts U.S. Partner Browse Issues Webcasts
PCS Industry PCS Service Contacts
- White Paper - White Paper
Sector Related - POV/Opinion Subcategory Related - POV/Opinion
PCS Challenge T2 P14b T2 P5
Publication - Surveys/Report Publication - Surveys/Report Thought
- Thought Leadership - Thought Leadership - White Paper Leadership
T3 P5 T3 P4 Upcoming
Related - POV/Opinion Browse Browse
Publication - Surveys/Report Industries Subcategory
PCS Industry PCS Service - Thought Leadership
Case Study Case Study
Publications Offering
T2 P14a Case Study
Events Archive
T2 P5 T3 P5 Case Study Browse
- Conference - Conference Publication T3 P15
Related Event - Webcast Related Event - Webcast Type
All PCS Industry - Seminar
PCS Service - Seminar
Events Publications
- Conference Survey/Report
Related Event - Webcast
T2 P5 - Seminar Ad Campaigns
Newsletter Publications
RFP Process Search Results T3 P16
Registration Search
All PCS Service
Events Related PCS
Newsletter
Service Current
Newsletter Releases
RSS Feed(s)
Registration
T3 P17
Related PCS
Industry/Sector Newsletters Press Release
Of Further Interest
Past Issues Archive
RSS Feed(s)
KEY

Related PCS T3 P18
Page
Service Newsletter
Of Further Interest RSS PR Feeds
Subscription On-Page Functionality
Thanks (e.g., a menu)
Related PCS
Industry/Sector Not Available In All Areas

- Deeper Dive Into T Template Type
Related Issue Footer
Section View Magazine
PDFs P Unique Page Type
About Site E-mail
Privacy Legal Site Map
Provider Webmaster
- Deeper Dive Into

© 2005 MODEM MEDIA CONFIDENTIAL & PROPRIETARY

T2 P2 T2 P2

Industries Index Services Index

All All
T3 P3 Contacts U.S. Partner T3 P3 Contacts U.S. Partner
Contacts Contacts
Industry Service
Category Category
- White Paper - White Paper
Related - POV/Opinion Related - POV/Opinion
T3 P4 Publication - Surveys/Report T3 P4 Publication - Surveys/Report
- Thought Leadership - Thought Leadership
Service
Industry Sector
Subcategory
Case Study Case Study
T3 P5 T3 P4
Industry
Category - Conference Service Offering - Conference
Publications Related Event - Webcast Related Event - Webcast
- Seminar - Seminar
T2 P5 T2 P5
Service
All Industry Newsletter
Category RFP Process
Events Registration
Publications

Newsletter
RSS Feed(s) T2 P5 Registration

All Service
Events
Of Further Interest
RSS Feed(s)

Related Service
Of Further Interest

Related Industry

- Deeper Dive Into

- Deeper Dive Into

T3 P12

PCS Value
Proposition


A wireframe is a blueprint that maps out the
hierarchy of information, as well as the features
and functionality of an individual page.

Page ID: Title: Page 6 of 6

Notes

Welcome, Guest Join | Sign In Help (triggered by clicking the ?-symbol) is
displayed in a separate popup window. Should
LOGO <TAGLINE> include column definitions and the “general”
Over 5 0, 0 0 0 members notes from the current site.

Columns can be sorted by clicking or by using
the Sort By pulldown.
Home | Reliability | Gas Mileage | Reviews | Prices | Specs | Community My Garage - Display triangle next to column heading to show
ascending or descending order.
- Sort By values should update and be in synch
with any column clicks.
Car Reliability >> Acura MDX
As shown in this wireframe, when only the single
Ads by Google Dealer Price Quotes Sponsored content make-model is displayed (i.e., the “include
competing models” checkbox is NOT selected
- Default value is “Year”.
- Other values include “Trips Per Year” and
“Rating”.
3 Text Ads
The “View” link in the table could be an icon.
PriceQuotes.com App Display a small popup on ROLOVER showing:
- Number of cars reporting
- Average months data per car
- Average odometer reading
- Delta value when competing models are shown,
Acura MDX Reliability Select Another Model

Successful Repair Trips Based on our survey results as of September 30, 2010.

Include Competing Car Models

?
Sort By: Year High - Low Sort

Trips Per Year
Year Make - Model Compared To All Models Rating Details
(per 100 vehicles)

Could be
an icon. Ad
2010 Acura - MDX Join to View ---- View
(Cadillac, Sprint, Etc.)
Fewest Most

2009 Acura - MDX 38 Better View
Document Information
Fewest Most
Project: TrueDelta

2008 Acura - MDX 47 Average View Document Name: truedelta_wireframes_v1.0
Fewest Most
Publishing Date: 20 Dec, 2010

Fewest Most

Tire Decision Guide Sponsored content

* Low sample size
Tire Rack App
Acura MDX Quick Links Additional Links

Odds It’s a Lemon Owner Reviews Full Car Reliability Survey Results (one huge table!)
Repair Histories Price Comparisons Extended Warranty Tips
Real-World Gas Mileage MDX Specs Repair Estimate Calculator

Want More Results?

Join TrueDelta! By joining, you can view up to 10 competing car models instead of just five.
Plus, <ADDITIONAL JOIN COPY.>

Ad
Acura MDX Owners Forums (TrueDelta Partners) (Cadillac, Sprint, Etc.)

These forums have helped us make our results possible. For discussions about the Acura MDX among
current and past owners, visit:
www.mdxers.org

Our Methodology

Only successfully completed car repairs are included in our analysis. Routine maintenance and most wear
items are excluded. Learn more about our research process.
Extended Warranty Sponsored content
Car you’re interested in is not listed? It’s either not a common comparison or not enough owners
participated. You can help by telling others about this research.

Link To This Page CarChex Ad

Direct Link:
http://www.truedelta.com/car-reliability.php?stage=pt&bd=Acura&mc=293

Link to Use When Posting to a Forum:
[url=http://www.truedelta.com/car-reliability.php?stage=pt&bd=Acura&mc=293]Acura MDX reliability
comparisons[/url]

Contact Us | Mike's Blog | News | About | Recommend Us | Links

C 2004 - 2010 TrueDelta. All rights reserved. Privacy Policy | Terms and Conditions
TrueDelta is not affiliated with any car manufacturer or their trademarks.

BMDG 2010 CONFIDENTIAL & PROPRIETARY

of 6

Notes

Welcome, Guest Join | Sign In Help (triggered by clicking the ?-symbol) is
displayed in a separate popup window. Should
include column definitions and the “general”
Over 5 0, 0 0 0 members notes from the current site.

Columns can be sorted by clicking or by using
the Sort By pulldown.
Prices | Specs | Community My Garage - Display triangle next to column heading to show
ascending or descending order.
- Sort By values should update and be in synch
with any column clicks.

As shown in this wireframe, when only the single
Dealer Price Quotes Sponsored content make-model is displayed (i.e., the “include
competing models” checkbox is NOT selected
- Default value is “Year”.
- Other values include “Trips Per Year” and
“Rating”.

The “View” link in the table could be an icon.
PriceQuotes.com App Display a small popup on ROLOVER showing:
- Number of cars reporting
- Average months data per car
- Average odometer reading
- Delta value when competing models are shown,

0, 2010.

?

odels Rating Details

Could be
an icon. Ad
---- View
(Cadillac, Sprint, Etc.)
Most

Acura MDX Reliability Select Another Model

Successful Repair Trips Based on our survey results as of September 30, 2010.

Include Competing Car Models

?
Sort By: Year High - Low Sort

Trips Per Year
Year Make - Model Compared To All Models Rating Details
(per 100 vehicles)

Could be
an icon.
2010 Acura - MDX Join to View ---- View
(Cadil
Fewest Most

Fewest Most

2008 Acura - MDX 47 Average View
Fewest Most

Fewest Most

Tire Decision

* Low sample size
Tir
Acura MDX Quick Links Additional Links

Odds It’s a Lemon Owner Reviews Full Car Reliability Survey Results (one huge table!)
Repair Histories Price Comparisons Extended Warranty Tips


A usability diagram combines a sitemap with
other user interactions to plan out a specific action
a user could take on a site.

Elements of Usability: Under considered
parts of a Web site.

Elements of Usability: Navigation

Navigation is a broad term that encompasses
any aspect of a site that connects a user with
another area of a site or other sites.

Elements of Usability: Site Search

Search forms quickly examine a database of
site content and display the results to a user.

Information Architecture for Designers

Information Architecture for Designers

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Information Architecture for Designers

Ähnlich wie Information Architecture for Designers (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Information Architecture for Designers