Information Architecture for Designers

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

Information ArchitectureHOW Interactive ConferenceBrian Miller

Brian Miller

Owner of the Brian Miller Design Group

Author

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

Adjunct ProfessorShintaro Akatsu School of Design, University of Bridgeport

ServiceType Directors ClubExecutive 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

http://www.amazon.com/review/R397M3PYGLA5OG/ref=cm_cr_quotes_dprb_0?ie=UTF8&ASIN=144030842X&nodeID=283155&store=books




http://www.amazon.com/review/R2YJ5HLNZYM32K/ref=cm_cr_quotes_dprb_2?ie=UTF8&ASIN=144030842X&nodeID=283155&store=books






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 a football

This is the Internet

This is not information architecture

Anatomy of a Web page: This is Web design

1

2

3 5

4

6

7

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

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

Why?

Content Technology

User Needs

InformationArchitecture

The Role of IA:From pages to processes

Google.com, founded by Larry Page and Sergey Brin, launches

Napster.com, a peer-to-peer file sharing Web site, launches

Microsoft releases Internet Explorer version 5, which allowed users to save Web pages for the first time

Craigslist.org expands beyond San Francisco (originally launched in 1995)

Google Adwords launches

Netscape version 6 is released

Wikipedia.org launches

Microsoft releases Internet Explorer version 6, which included support for CSS

Friendster.com launches

Netscape version 7 is released

1998 1999 2000 2001 2002

Mosaic, the first consumer Web-browsing application, is released

Yahoo.com launches

Image of Microsoft.com from 1994

WC3 is formed to standardize HTML

Netscape Navigator Web browser is released

Amazon.com launches

NYTimes.com launches

CraigsList.org launches

Microsoft releases Internet Explorer versions 1 (August) and 2 (November)

CompuServe changes its name to Lycos.com

Cascading style sheets (CSS) introduced

Microsoft releases Internet Explorer version 4

DrudgeReport.com launches

Image of Apple.com from 1997

Ebay.com launches

Netscape Communicator replaces Netscape Navigator

1993 1994 1995 1996 1997

Candidate Web sites and social media play a pivotal role in the U.S. elections

Mozilla Firefox version 3 is released

Microsoft launches Bing.com to compete with Google

Microsoft releases Internet Explorer version 8 with improved support for Ajax, CSS, and RSS

Twitter.com is used to organize and mobilize relief efforts in Haiti following the devastating earthquake.

Mozilla Firefox version 3.6 is released

2008 2009 2010

MySpace.com launches

WordPress blogging software is introduced.

Apple releases the Safari Web browser

Facebook.com launches

Flickr.com launches

Mozilla Firefox Web browser is released, which utilizes the Gecko layout engine to display Web pages

YouTube.com launches

Twitter.com launches

Microsoft releases Internet Explorer version 7, which introduced tabbed browsing and a content feed reader

Mozilla Firefox version 2 is released with tabbed browsing

Apple introduces the iPhone and mobile apps

Netscape Navigator version 9 is released

2003 2004 2005 2006 2007

1995—c.2000

Web sites were “information spaces” News sitesMedical sitesMarketing brochure sites

1995—c.2000

Information ArchitectsOrganize contentDirect users to find the content[Period]

1995—c.2000

A B

IA DeliverablesSite mapsTaxonomiesLabeling systemsWireframes

1995—c.2000

c.2001—c.2005

Web Sites Became TransactionalEcommerceAuctionsUser-generated content

c.2001—c.2005

Information Architects became Interaction DesignersIllustrate discrete user tasksMap out user flowsDesign the functionality of individual components that would allow users to complete tasks

c.2001—c.2005

Interaction Designer DeliverablesUser scenarios showing the paths to desired user outcomes

c.2001—c.2005

c.2005—present

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

c.2005—present

Interaction Designers become User Experience (UX) DesignersDevelop contextual experiences

c.2005—present

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

c.2005—present

Site Planning: Starting at the beginning

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

Phase 1: Planning

Content sortingSitemapsWireframesUsability diagrams

Phase 2: Information Architecture

MoodboardsGrid buildingLayoutsUI Details

Phase 3: Creative

Information Architecture: Tools of the trade

Microso! Visio

Adobe Proto

MockFlow.com

A Pencil

Adobe InDesign and Illustrator

Site planning: Information architecture

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

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

Content Collection and Creation

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

Information Architecture Documents

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


+RPH

+HDOWK�&RQFHUQV )LWQHVV�3UHYHQWLRQ

6WRUH

�9LGHRV�/LEUDU\

&RPPXQLW\

$ERXW &RQWDFW

+HDOWK�1HZV)RU�*ROIHUV$UWLFOH

*ROI�,QMXU\$UWLFOH�/LVW

)RUXP�7RS3DJH

7RSLF�3DJH

$GG�5HSO\

$GG�1HZ�7RSLF

6LJQ�,Q

-RLQ

)RUJRW3DVVZRUG�8VHUQDPH

6HDUFK�5HVXOWV

)LWQHVV�3UHYHQWLRQ$UWLFOH�/LVW

*ROI�,QMXU\$UWLFOH

)LWQHVV�3UHYHQWLRQ$UWLFOH

0DLQ�1DYLJDWLRQ

3URGXFW�'HWDLO

6KRSSLQJ�+HOS

&KHFNRXW

6KRSSLQJ�&DUW

2UGHU�5HYLHZ

2UGHU&RQILUPDWLRQ

*ROI�1HZV�$UWLFOH

/RJJHG�,Q"

/RJJHG�,Q"

<HV

1R

<HV

1R

/HJDO 5HSRUW�D�%XJ 6LWH�0DS 3ULYDF\ &RQWDFW

)RRWHU

&OLFN�³7RS��*ROI+HDOWK�&RQFHUQV´

/RJLQ�5HTXLUHG

(TXLSPHQW

(TXLSPHQW$UWLFOH�/LVW

(TXLSPHQW$UWLFOH

([SHUWV

([SHUW�9LGHR 9LGHR+HOS

3RSXS�:LQGRZ

(PDLO�8SGDWHV

+RPH


6WRUH

�9LGHRV�/LEUDU\

&RPPXQLW\

$ERXW &RQWDFW



)RUXP�7RS3DJH

7RSLF�3DJH

$GG�5HSO\

$GG�1HZ�7RSLF

6LJQ�,Q

-RLQ


6HDUFK�5HVXOWV




0DLQ�1DYLJDWLRQ

3URGXFW�'HWDLO

6KRSSLQJ�+HOS

&KHFNRXW

6KRSSLQJ�&DUW

2UGHU�5HYLHZ

2UGHU&RQILUPDWLRQ


/RJJHG�,Q"

/RJJHG�,Q"

<HV

1R

<HV

1R


)RRWHU


/RJLQ�5HTXLUHG

(TXLSPHQW


(TXLSPHQW$UWLFOH

([SHUWV


3RSXS�:LQGRZ

(PDLO�8SGDWHV

+RPH


6WRUH

�9LGHRV�/LEUDU\

&RPPXQLW\

$ERXW &RQWDFW



)RUXP�7RS3DJH

7RSLF�3DJH

$GG�5HSO\

$GG�1HZ�7RSLF

6LJQ�,Q

-RLQ


6HDUFK�5HVXOWV




0DLQ�1DYLJDWLRQ

3URGXFW�'HWDLO

6KRSSLQJ�+HOS

&KHFNRXW

6KRSSLQJ�&DUW

2UGHU�5HYLHZ

2UGHU&RQILUPDWLRQ


/RJJHG�,Q"

/RJJHG�,Q"

<HV

1R

<HV

1R


)RRWHU


/RJLQ�5HTXLUHG

(TXLSPHQW


(TXLSPHQW$UWLFOH

([SHUWV


3RSXS�:LQGRZ

(PDLO�8SGDWHV

+RPH


6WRUH

�9LGHRV�/LEUDU\

&RPPXQLW\

$ERXW &RQWDFW



)RUXP�7RS3DJH

7RSLF�3DJH

$GG�5HSO\

$GG�1HZ�7RSLF

6LJQ�,Q

-RLQ


6HDUFK�5HVXOWV




0DLQ�1DYLJDWLRQ

3URGXFW�'HWDLO

6KRSSLQJ�+HOS

&KHFNRXW

6KRSSLQJ�&DUW

2UGHU�5HYLHZ

2UGHU&RQILUPDWLRQ


/RJJHG�,Q"

/RJJHG�,Q"

<HV

1R

<HV

1R


)RRWHU


/RJLQ�5HTXLUHG

(TXLSPHQW


(TXLSPHQW$UWLFOH

([SHUWV


3RSXS�:LQGRZ

(PDLO�8SGDWHV

HOME [start page]

Connects via Scrolling Prompt

ModelsPure Coupe

ModelsPassion Coupe

ModelsPassion Cabriolet

ModelsElectric Drive

DesignIn Our Genes

DesignWhat a Body

DesignLet’s Tailgate

DesignSafety First Looks

Customize Me

BeliefsMain

Beliefs

BeliefsUnbig

Friends Find a Smart Center

Find a Smart Center

“Like Us” toFacebook

Login Form

“Send” toFacebook

Login Form

“Follow” toCustomized Twitter

Login Form

“## Followers” toAbbreviated Twitter

Feed Pop-up

on Twitter

Get Updates Full WebsiteSC

TwitterPage

SmartCar on YouTube

SmartCarFacebook

Page

SmartCarFacebook

Page

Internal Page

Internal Form

External Form

External Page Connects via clickable link

Model Specs on Full Website

2

Build Your Own SmartCar

3

Find a Smart Center1

3

12

3

12

3

12

3

12

3

12

3

12

3

12

3

12

Main Navigation

Secondary Navigation

Tertiary Navigation

[present on all pages, except HOME]

Primary Footer

Secondary Footer

[present only on FRIENDS page]

NAVIGATION LINK DESTINATIONS

METHODS OF NAVIGATION

ABBREVIATED LINK KEY

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

CLIENT: SmartCarSITE URL: www.smartusa.comSITEMAP AUTHOR: Terry Carter

Connects via Scrolling Prompt

ModelsElectric Drive

DesignLet’s Tailgate

Find a Smart Center

“Like Us” toFacebook

Login Form

“SenFacebook

Login

Internal Page

Internal Form

External Form

External Page Connects via clickable link

Model Specs on Full Website

2

Build Your Own SmartCar

3

Find a Smart Center1

3

12

3

12

Main Navigation

Secondary Navigation

Tertiary Navigation

[present on all pages, except HOME]

Primary Footer

Secondary Footer

[present only on FRIENDS page]

NAVIGATION LINK DESTINATIONS

METHODS OF NAVIGATION

ABBREVIATED LINK KEY

Full Website About Us Contact Us Sitemap Privacy Policy SmartWorldwide

© 2005 MODEM MEDIA CONFIDENTIAL & PROPRIETARY

Page

KEY

On-Page Functionality(e.g., a menu)

Not Available In All Areas

Template Type

Unique Page Type

T

P

U.S. Home

New Realities(Showcased Ad)

Countries About Us Careers Publications Press Room PwC Portal Contact Us

Privacy Legal About Site Provider

E-mail Webmaster Site Map

Search

Industry Category

Industry Sector

Events & Seminars & Webcasts

Case Study

- White Paper- POV/Opinion- Surveys/Report- Thought Leadership

Opinion/POV

Case Study

Survey/Report

Newsletter

Related Service

Of Further Interest

RSS Feed(s)

Service Category

Service Subcategory

Related Publication

Related Issue

Related Industry

Of Further Interest

RSS Feed(s)

Service Offering

Challenges For CEOs

Challenges For HR Execs

Challenges For Audit

Committees

Challenges For Legal Counsel

Challenge

Related Publication

Related Event


Related Service

Reality ##

Related Publication

Related Event


Related Service

Ad Campaign

Newsletter Registration

Thought Leadership

Ad Campaigns

RFP ProcessNewsletter Registration

U.S. Global Navigation

Upcoming

Events Archive

Current Releases

Press Release Archive

Footer

Related Publication

ContactsAll

U.S. Partner Contacts


ContactsAll


Related Industry/Sector


ContactsAll


ContactsAll


- TV- Print

View Magazine PDFs

The Story of Casey

Realities 01-09

PCS Industry Category

PCS Value Proposition

Challenges For PCS Owners

PCS Service Category

PCS Service Subcategory

PCS Service Offering

Related Event


Of Further Interest

RSS Feed(s)

Case Study


Related Publication

ContactsAll


Related PCS Service

Related Publication

Related Event


Of Further Interest

RSS Feed(s)


RFP Process

ContactsAll


Related PCS Industry/Sector

PCS Challenge

Related Publication

Related Event


ContactsAll


Related PCS Service

PCS Industry Sector

Related Event- Conference- Webcast- Seminar

Industry Category

Publications

Related Issue - Deeper Dive Into Section

All Industry Events

Industries Index Services Index

Related Event

Case Study


- Conference- Webcast- Seminar

- Deeper Dive Into Section

Challenges For CFOs

Case Study

Today’s Challenges


Case Study





PCS Industry Publications

All PCS Industry Events


Case Study


Service Category

Publications

PCS Service Publications

Case Study



RSS PR Feeds

All Service Events

All PCS Service Events

T1 P1

T2 P2 T2 P2

T3 P3

T2 P5

T3 P4

T3 P5

T3 P3

T3 P4

T2 P5

T2 P5

T3 P4

T2 P6

T2 P7

T2 P7

T2 P7

T2 P7

T2 P7

T2 P8

T2 P7

T2 P8

T2 P9

T2 P10

T2 P11

View Magazine

T2 P5

T3 P4

T3 P5

T3 P3 T3 P3

T2 P5

T3 P4

T3 P5

T3 P4

T3 P12

T2 P13

Browse Issues

Browse Industries

Browse Publication

Type

Publications Search

T2 P14a

T2 P14b

T2 P14a

Browse Subcategory

Search Results

T2 P5

T3 P15

T3 P16

Newsletters Past Issues

T3 P17

Newsletter Subscription

Thanks

T3 P18

T2 P19

© 2005 MODEM MEDIA CONFIDENTIAL & PROPRIETARY

Page

KEY

On-Page Functionality(e.g., a menu)

Not Available In All Areas

Template Type

Unique Page Type

T

P

U.S. Home

New Realities(Showcased Ad)

Countries About Us Careers Publications Press Room PwC Portal Contact Us

Privacy Legal About Site Provider

E-mail Webmaster Site Map

Search

Industry Category

Industry Sector

Events & Seminars & Webcasts

Case Study


Opinion/POV

Case Study

Survey/Report

Newsletter

Related Service

Of Further Interest

RSS Feed(s)

Service Category

Service Subcategory

Related Publication

Related Issue

Related Industry

Of Further Interest

RSS Feed(s)

Service Offering

Challenges For CEOs

Challenges For HR Execs

Challenges For Audit

Committees

Challenges For Legal Counsel

Challenge

Related Publication

Related Event


Related Service

Reality ##

Related Publication

Related Event


Related Service

Ad Campaign


Thought Leadership

Ad Campaigns

RFP ProcessNewsletter Registration

U.S. Global Navigation

Upcoming

Events Archive

Current Releases

Press Release Archive

Footer

Related Publication

ContactsAll



ContactsAll




ContactsAll


ContactsAll


- TV- Print

View Magazine PDFs

The Story of Casey

Realities 01-09

PCS Industry Category

PCS Value Proposition

Challenges For PCS Owners

PCS Service Category

PCS Service Subcategory

PCS Service Offering

Related Event


Of Further Interest

RSS Feed(s)

Case Study


Related Publication

ContactsAll


Related PCS Service

Related Publication

Related Event


Of Further Interest

RSS Feed(s)


RFP Process

ContactsAll



PCS Challenge

Related Publication

Related Event


ContactsAll


Related PCS Service

PCS Industry Sector

Related Event- Conference- Webcast- Seminar

Industry Category

Publications


All Industry Events

Industries Index Services Index

Related Event

Case Study



- Deeper Dive Into Section

Challenges For CFOs

Case Study

Today’s Challenges


Case Study





PCS Industry Publications

All PCS Industry Events


Case Study


Service Category

Publications

PCS Service Publications

Case Study



RSS PR Feeds

All Service Events

All PCS Service Events

T1 P1

T2 P2 T2 P2

T3 P3

T2 P5

T3 P4

T3 P5

T3 P3

T3 P4

T2 P5

T2 P5

T3 P4

T2 P6

T2 P7

T2 P7

T2 P7

T2 P7

T2 P7

T2 P8

T2 P7

T2 P8

T2 P9

T2 P10

T2 P11

View Magazine

T2 P5

T3 P4

T3 P5

T3 P3 T3 P3

T2 P5

T3 P4

T3 P5

T3 P4

T3 P12

T2 P13

Browse Issues

Browse Industries

Browse Publication

Type

Publications Search

T2 P14a

T2 P14b

T2 P14a

Browse Subcategory

Search Results

T2 P5

T3 P15

T3 P16

Newsletters Past Issues

T3 P17

Newsletter Subscription

Thanks

T3 P18

T2 P19

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


+RPH %ORJ 3URI��'HYHORSPHQW .QRZOHGJH�5HVRXUFHV

6HWWLQJV _ +HOS _ /RJRXW/RJR B6,7(�1$0(B

6HDUFK)LQG�D�&ROOHDJXH�� _ %URZVH�%\�7DJ7XHVGD\��)HEUXDU\�� _

3DJH��

0DUNHWLQJ�([FHOOHQFH ��0\�3URILOH

:HOFRPH��6ZKLWH

&RS\ULJKW��)RUG�0RWRU�&RPSDQ\��$OO�ULJKWV�UHVHUYHG�

6WHUOLQJ�+D\GHQ�RQ�)HE��

,QWHJHU�FRQVHTXDW��6HG�VHG�ODFXV��$OLTXDP�HUDW�YROXWSDW��3HOOHQWHVTXH�IDFLOLVLV�XUQD�TXLV�RGLR��&XUDELWXU�UKRQFXV�

*R�7R�3RVW�!

$OLTXDP�HUDW��'RQHF�DW�OLEHUR�YHO�PL�GLJQLVVLP�DFFXPVDQ��1DP�DQWH�WHOOXV��SRUWD�XW��VROOLFLWXGLQ�LG��1XOODP�IHUPHQWXP�OXFWXV�OHR��

/DWHVW�%ORJ�3RVW

&DPSDLJQV��_��.QRZOHGJH�%DVH&DPSDLJQV

)HDWXUHG�&RQWHQW

�WK�$QQLYHUVD\�RI�9ROYR¶V�DZDUGV�SURJUDP�KRQRULQJ

*R�7R�&DPSDLJQ�!

&DPSDLJQ��³9ROYR�)RU�/LIH´0HGLD��79��2QOLQH��3ULQW��(YHQW

$PHULFD¶V�IDYRULWH�KRPHWRZQ�KHURHV��

+DYH�VRPH�JUHDW�FRQWHQW�DQG�IHDWXUH�LGHDV�IRU�WKH�VLWH"�'LVFXVV�WKHP�LQ�WKH�6LWH�6XJJHVWLRQV�EORJ�

6XJJHVWLRQV�)RU�7KH�6LWH"

(YHQWV�&DOHQGDU

%X]]0HWULFV�6WDWV

*R�7R�5HSRUW�!

%UDQG� 9ROYR

7RWDO�LGHQWLILHG�EORJV��1HZ�EORJV�LQ�ODVW��KRXUV��%ORJ�SRVWV�LQGH[HG�LQ�ODVW��KRXUV��

6HH�)XOO�&DOHQGDU�!

��

��

)RUG�0DUNHWLQJ�&RQIHUHQFH 1HZ�<RUN��1<86$

$GYHUWLVLQJ�$JH��0DUNHWLQJ�,Q�7KH�'LJLWDO�$JH

/RQGRQ��(QJODQG8.

+RPH

1HZV��$OO�7RSLFV

9LHZV��

��6HFUHWV�RI�6XFFHVVIXO�2QOLQH�&RPPXQLW\

$YJ��5DWLQJ��YRWHV�7XH�)HE��30��B6285&(B�

9LHZV� �� 7DJV�� B7$*�1$0(B

7KH�8OWLPDWH�6RFLDO�1HWZRUN�<RX�+DYHQW�+HDUG�2I


9LHZV� �� 7DJV�� B7$*�1$0(B��B7$*�1$0(B

+\XQGDL�4DUPD4¶V�3ODVWLF�6NLQ��5HGXFHV�:HLJKW��6DYHV�*DV


� � ��3UHYLRXV � � � � � � �� 1H[W�!!��

7DJV�� B7$*�1$0(B��B7$*�1$0(B

6HOHFW�)HHGV

0RVW�5HFHQW��_��0RVW�9LHZHG��_��7RS�5DWHG��_��$OO�6WRULHV

&OLS�6KHHWV1HZV

0RVW�5HFHQW

9LHZV� �� 7DJV�� 1RW�7DJJHG

*RRJOH�6KLIWLQJ�5HVRXUFHV�WR�<RX7XEH�0RQHWL]DWLRQ

$YJ��5DWLQJ��YRWHV�7XH�)HE��$0��B6285&(B�

6HDUFK�1HZV

,Q�7KH�6SRWOLJKW

1LNH�WR�&KDQJH�6KRSSLQJ�([SHULHQFH

'LVFXVV�RQ�WKH�%ORJ�!

�&RQVXPHUV�ZDQW�D�PRUH�FRPSHOOLQJ�DQG�UHOHYDQW�H[SHULHQFH�ZKHUHYHU�DQG�ZKHQHYHU�WKH\�VKRS��1LNH�3UHVLGHQW�DQG�&KLHI�([HFXWLYH�0DUN�3DUNHU�VDLG�

9LHZV� � 7DJV�� B7$*�1$0(B��B7$*�1$0(B

6KDULQJ�LV�VDYLQJ��*0�WR�VDYH�XS�WR��PLOOLRQ�RQ�=HWD�5:'�SODWIRUP

$YJ��5DWLQJ��YRWHV�7XH�)HE��$0��B6285&(B�

1LNH�ZDQWV�WR�FKDQJH�WKH�ZD\�FRQVXPHUV�VKRS�

$SSHDUV�RQ�UROORYHU�RI�OLQN��VHH�&RRO,ULV�FRP��&OLFN�WR�RSHQ�DUWLFOH�LQ�OD\HU�DV�VKRZQ�RQ�QH[W�

ZLUHIUDPH�

,I�WKHUH�LV�D�SUHPLXP�RQ�VSDFH�DQG�D�GHVLUH�WR�GLVSOD\�PRUH�KHDGOLQHV�DERYH�WKH�IROG��FRQVLGHU�127�VKRZLQJ�WKH�³9LHZV��5DWLQJ��7DJ´�OLQH��7KH�YDOXHV�DUH�LPSOLFLW�LQ�WKH�ILOWHULQJ�FKRLFHV�RQ�WKH�WRS�

EDU�DQG�YLD�WKH�7DJV�RSWLRQ�LQ�WKH�6HDUFK�1HZV�GURSGRZQ��7KH\�DUH�DOVR�H[SOLFLWO\�GLVSOD\HG�ZKHQ�WKH�DUWLFOH�LV�RSHQHG�

truedelta_wireframes_v1.0

Page 6 of 6

Document Information

Project:

Document Name:

Publishing Date:

TrueDelta

20 Dec, 2010

Notes

Page ID: Title:

BMDG 2010 CONFIDENTIAL & PROPRIETARY

Home | Reliability | Gas Mileage | Reviews | Prices | Specs | Community

Join | Sign InLOGO

Over members<TAGLINE>

5 0, 0 0 0

Welcome, Guest

My Garage

2004 - 2010 TrueDelta. All rights reserved.

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

C

TrueDelta is not affiliated with any car manufacturer or their trademarks.Privacy Policy | Terms and Conditions

Dealer Price Quotes Sponsored content

PriceQuotes.com App

Ad(Cadillac, Sprint, Etc.)

Ads by Google

Car Reliability >> Acura MDX

Acura MDX Reliability

3 Text Ads

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

Sort By: Year High - Low Sort

Include Competing Car Models

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

2010 Acura - MDX Join to ViewFewest Most

- - - - View

2009 Acura - MDX 38Fewest Most

Better View


Average View


Better View

Could be an icon.

Acura MDX Quick Links

?

Select Another Model

* Low sample size

Odds It’s a Lemon

Repair Histories

Real-World Gas Mileage

Owner Reviews

Price Comparisons

MDX Specs

Additional Links

Extended Warranty Tips

Full Car Reliability Survey Results (one huge table!)

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

Acura MDX Owners Forums (TrueDelta Partners)

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.

Tire Decision Guide Sponsored content

Tire Rack App


Extended Warranty Sponsored content

CarChex AdLink To This Page

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]

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.

Help (triggered by clicking the ?-symbol) is displayed in a separate popup window. Should include column definitions and the “general” notes from the current site.

Columns can be sorted by clicking or by using the Sort By pulldown.- 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 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. 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,


Page 6 of 6


Project:

Document Name:

Publishing Date:

TrueDelta

20 Dec, 2010

Notes

Page ID: Title:



Join | Sign InLOGO


5 0, 0 0 0

Welcome, Guest

My Garage



C



PriceQuotes.com App


Ads by Google



3 Text Ads






- - - - View


Better View


Average View


Better View

Could be an icon.


?


* Low sample size

Odds It’s a Lemon

Repair Histories


Owner Reviews

Price Comparisons

MDX Specs

Additional Links




Want More Results?




www.mdxers.org

Our Methodology



Tire Rack App












Page 6 of 6


Project:

Document Name:

Publishing Date:

TrueDelta

20 Dec, 2010

Notes

Page ID: Title:



Join | Sign InLOGO


5 0, 0 0 0

Welcome, Guest

My Garage



C



PriceQuotes.com App


Ads by Google



3 Text Ads






- - - - View


Better View


Average View


Better View

Could be an icon.


?


* Low sample size

Odds It’s a Lemon

Repair Histories


Owner Reviews

Price Comparisons

MDX Specs

Additional Links




Want More Results?




www.mdxers.org

Our Methodology



Tire Rack App












Page 6 of 6


Project:

Document Name:

Publishing Date:

TrueDelta

20 Dec, 2010

Notes

Page ID: Title:



Join | Sign InLOGO


5 0, 0 0 0

Welcome, Guest

My Garage



C



PriceQuotes.com App


Ads by Google



3 Text Ads






- - - - View


Better View


Average View


Better View

Could be an icon.


?


* Low sample size

Odds It’s a Lemon

Repair Histories


Owner Reviews

Price Comparisons

MDX Specs

Additional Links




Want More Results?




www.mdxers.org

Our Methodology



Tire Rack App











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


2Q�%RDUGLQJ�)ORZ

&UHDWH�5HFUXLWHU�$FFRXQW

5HWULHYH�5HFUXLWHU�,'�)URP�'DWDEDVH

(QWHU�&RQWUDFW�,QIR�,QWR�$FFRXQW�6\VWHP

:HOFRPH�(PDLO�7R�5HFUXLWHU

�3DVVZRUG�85/!

&RQJUDWXODWH,QVHUW�85/�WR�FUHDWH�SDVVZRUG,QIRUP�WKH\�ZLOO�ZDON�WKUX�;�VLPSOH�VWHSV�WR�VHW�XS�DFFRXQW�XSRQ�ORJJLQJ�LQ

2SWV�,Q��&KDQJHV�3DVVZRUG 0\�&RQWDFW�,QIR

0\�+LULQJ�1HHGV

0\�3URILOH�,QFOXGHV�

1HWZRUNLQJ�6LWHV�

8SORDG�3KRWR

+RZ�&DQGLGDWHV�:LOO�6HH�<RX

³+RZ�7R´�9LGHR2Q�6LWH�:L]DUG

3RVW�-RE�)RUP

2XU�,QWHUQDO�6DOHV�5HS )LQDQFH�'HSW

5HFUXLWHU�&XVWRPHU�5HODWLRQV

5HFUXLWHU�&OLFNV�

3DVVZRUG�85/"

*R�&UHDWH�<RXU�3DVVZRUG��+RXUV�6LQFH�

(PDLO�6HQW"

<HV

1R <HV

6HDUFK

&RPH�%DFN��&RPSOHWH�3URILOH

3URILOH�$SSURYHG"

&RPSOHWHG�3URILOH"

7KDQN�<RX�)RU�6XEPLWWLQJ��:LOO�(PDLO�:KHQ�$SSURYHG�

��+RXUV�)LUVW�:L]DUG�$FFHVV"

1R

<HV

6HDUFK�5HVXOWV��&DQGLGDWH�&RQWDFW�,QIR�%ODFNHG�2XW�

([LVWLQJ�6LWH�3DJH

1HZ�6LWH�3DJH

1HZ�(PDLO��&RQILUPLQJ�

5HYLVHG�(PDLO��&RQILUPLQJ�

1HZ�(PDLO��5HPLQGLQJ�

/HJHQG

$SSURYHG��&RPSOHWH

$SSURYHG��%XW�0LVVLQJ�6WXII

5HFUXLWHU�$GGV�0LVVLQJ�6WXII"

+H\��*R�$GG�<RXU�6WXII�

��+RXUV�6LQFH�$SSURYDO�(PDLO�

6HQW"1R <HV

7KDQN�<RX��:H�1HHG�WR�$SSURYH�:DWFK�³+RZ�7R´�9LGHR�RU�3RVW�-RE�

6HDUFK

<HV

<HV

1R

&RQWHQW�WDLORUHG�WR�WKH�VWHS�DW�ZKLFK�WKH�UHFUXLWHU�EDLOHG��

(PDLO�,'�7R�)LQDQFH

5HFUXLWHU�5HODWLRQV�&DOOV�

5HFUXLWHU

2II�/LQH�3URFHVV






�3DVVZRUG�85/!



0\�+LULQJ�1HHGV



8SORDG�3KRWR



3RVW�-RE�)RUP




3DVVZRUG�85/"


(PDLO�6HQW"

<HV

1R <HV

6HDUFK


3URILOH�$SSURYHG"




1R

<HV



1HZ�6LWH�3DJH




/HJHQG






6HQW"1R <HV


6HDUFK

<HV

<HV

1R




5HFUXLWHU







�3DVVZRUG�85/!



0\�+LULQJ�1HHGV



8SORDG�3KRWR



3RVW�-RE�)RUP




3DVVZRUG�85/"


(PDLO�6HQW"

<HV

1R <HV

6HDUFK


3URILOH�$SSURYHG"




1R

<HV



1HZ�6LWH�3DJH




/HJHQG






6HQW"1R <HV


6HDUFK

<HV

<HV

1R




5HFUXLWHU







�3DVVZRUG�85/!



0\�+LULQJ�1HHGV



8SORDG�3KRWR



3RVW�-RE�)RUP




3DVVZRUG�85/"


(PDLO�6HQW"

<HV

1R <HV

6HDUFK


3URILOH�$SSURYHG"




1R

<HV



1HZ�6LWH�3DJH




/HJHQG






6HQW"1R <HV


6HDUFK

<HV

<HV

1R




5HFUXLWHU







�3DVVZRUG�85/!



0\�+LULQJ�1HHGV



8SORDG�3KRWR



3RVW�-RE�)RUP




3DVVZRUG�85/"


(PDLO�6HQW"

<HV

1R <HV

6HDUFK


3URILOH�$SSURYHG"




1R

<HV



1HZ�6LWH�3DJH




/HJHQG






6HQW"1R <HV


6HDUFK

<HV

<HV

1R




5HFUXLWHU







�3DVVZRUG�85/!



0\�+LULQJ�1HHGV



8SORDG�3KRWR



3RVW�-RE�)RUP




3DVVZRUG�85/"


(PDLO�6HQW"

<HV

1R <HV

6HDUFK


3URILOH�$SSURYHG"




1R

<HV



1HZ�6LWH�3DJH




/HJHQG






6HQW"1R <HV


6HDUFK

<HV

<HV

1R




5HFUXLWHU


TypeConnection.com User Flow

TypeConnection.com

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.

Breadcrumbs

Text Links

Elements of Usability: Site Search

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

Home Blog Prof. Development Knowledge Resources

Settings | Help | LogoutLogo _SITE NAME_

SearchFind a Colleague | Browse By TagTuesday, February 20, 2007 |

Page 25

Marketing Excellence My Profile

Welcome, Swhite

Copyright 2007 Ford Motor Company. All rights reserved.

Knowledge Resources

Best Practices Saved Articles Reports Podcasts Tutorials Bibliograpy Webliography

Popular Tags

10 Secrets of Successful Online Community

TAG-NAME

Saved Articles

View

Top Rated

Most Viewed

Most Recent

The Ultimate Social Network You Haven't Heard Of

Yahoo! Pipes Offers The Next Evolution of Marketing with RSS

Pimping Comes Standard: Galpin Lincoln Navigator LUX

Sharing is saving: GM to save up to $750 million on Zeta RWD platform

Google Shifting Resources to YouTube Monetization

Tags: _TAG NAME_, _TAG NAME_, _TAG NAME_

Tags: _TAG NAME_

Tags: _TAG NAME_, _TAG NAME_


Tags: _TAG NAME_, _TAG NAME_


View all tags...

Saved Articles

Saved by 649 other people






Tue Feb 20, 2007 02:37 PM (_SOURCE_)

Tue Feb 20, 2007 01:54 PM (_SOURCE_)

Tue Feb 20, 2007 01:20 PM (_SOURCE_)

Tue Feb 20, 2007 11:23 AM (_SOURCE_)

Mon Feb 19, 2007 09:09 AM (_SOURCE_)

Mon Feb 19, 2007 09:02 AM (_SOURCE_)

1 2 3<< Previous 4 5 6 7 8 9 10 Next >>105 106...

Search Articles

Enter Keyword(s)

Show Articles

Avg. Rating (648 votes)




[ Edit / Delete ]

[ Edit / Delete ]

[ Edit / Delete ]

[ Edit / Delete ]



TAG-NAME TAG-NAME

TAG-NAME TAG-NAME

TAG-NAME TAG-NAME

TAG-NAME TAG-NAME

TAG-NAME TAG-NAME TAG-NAME

TAG-NAME TAG-NAMETAG-NAME TAG-NAME

TAG-NAME TAG-NAME

TAG-NAME TAG-NAMETAG-NAME TAG-NAME

Most Recent | Top Rated | All StoriesMost Recent

Elements of Usability: Submission Forms

Users don’t like forms, so it’s the job of the UX designer to make the process of filling out a form as pain-free as possible.

Home Blog Prof. Development Knowledge Resources

Settings | Help | LogoutLogo _SITE NAME_

SearchFind a Colleague | Browse By TagTuesday, February 20, 2007 |

Page 33

Marketing Excellence My Profile

Welcome, Swhite

Copyright 2007 Ford Motor Company. All rights reserved.

Knowledge Resources

Best Practices Saved Articles Reports Podcasts Tutorials Bibliograpy WebliographyBibliography

Bibliography: Add Book

Enter the title or ISBN of the book you want to add and Click Search Amazon.

_TITLE TITLE TITLE_

Title ISBN

Search Amazon

TITLEBy AUTHOR

BOOK COVERAmazon Rating:

Comments/Review

Category:

Search Results X

_TITLE TITLE TITLE TITLE_by _AUTHOR FIRSTNAME LASTNAME_

_TITLE TITLE TITLE TITLE TITLE TITLE_by _AUTHOR FIRSTNAME LASTNAME_

_TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE_by _AUTHOR FIRSTNAME LASTNAME_

Add Book Cancel

Elements of Usability: Error Messaging

Error messaging alerts the user to a required action.

404 example

Project Walkthrough: Sarah Embly

End: Q&A

End: Thank you!