This presentation was originally given at the HOW Interactive Conference in Washington, DC on September 27, 2012.
When web designers start a new project, one of the first challenges they face is how to organize the site. What content needs to be accommodated? What information is primary, and what’s secondary? What should the navigation consist of?
In this session, Brian Miller will give you a detailed look at information architecture (and help you answer all those questions). He’ll take you through site map planning, wireframes, information hierarchy, and more. You’ll learn how to think about the elements of a Web page—headers and footers, sidebars and features…everything that contributes to how intuitive a site is to use and navigate. You’ll see what works and why—and also learn what to avoid. You’ll walk away with the ability to put yourself in the user’s shoes, and to think like an information architect.
3. 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
4. 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
5. 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
14. 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.
15.
16.
17. 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.
18.
19.
20. 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.
21.
22.
23. 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.
24.
25.
26. Anatomy of a Web page: Sidebar
Sidebars are useful for providing supporting
information as well as advertising space.
27.
28. 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.
29.
30. 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.
39. 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
40. 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
52. 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
74. 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
75. 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
77. 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
Related Issue Section
- Deeper Dive Into
Related Issue Section
T3 P12
PCS Value
Proposition
78. Information Architecture Documents
A wireframe is a blueprint that maps out the
hierarchy of information, as well as the features
and functionality of an individual page.
79.
80.
81. 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
2007 Acura - MDX 39 Better View
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
82. Page 6 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
83. 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
2009 Acura - MDX 38 Better View
Fewest Most
2008 Acura - MDX 47 Average View
Fewest Most
2007 Acura - MDX 39 Better View
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
84. 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
2007 Acura - MDX 39 Better View
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
85.
86.
87. Information Architecture Documents
A usability diagram combines a sitemap with
other user interactions to plan out a specific action
a user could take on a site.
97. 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.