Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Information Architecture for Designers

1,053 views

Published on

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.

Published in: Design
  • Be the first to comment

Information Architecture for Designers

  1. 1. HOW INTERACTIVE | INFORMATION ARCHITECTURE | SEPT. 27, 2012 | WASHINGTON, DC
  2. 2. Information ArchitectureHOW Interactive ConferenceBrian Miller
  3. 3. Brian MillerOwner of the Brian Miller Design GroupAuthorAbove the Fold:Understanding the Principles of Successful Web Site DesignPublished by HOW Design Books, March 2011Adjunct ProfessorShintaro Akatsu School of Design, University of BridgeportServiceType Directors ClubExecutive Board Member, Secretary/Treasurer
  4. 4. Above the FoldUnderstanding the Principles of Successful Web Site DesignThe Number 1 Selling Book in 2011 on My Design ShopUsed in Over 40 Classrooms at Universities Around the Country“Brian Miller gives a sensible and well thoughtout approach to web design.”JStein “Anyone who is looking to promote themselvesor business using digital media marketing toolsshould own a copy of this book.”B. Crosland“Miller has written here the perfect handbook fora student looking to learn more about web designor a small business owner trying to increase traffic.”Amazon Review
  5. 5. Information ArchitectureWhat Information Architecture is notThe role of an information architectSite planningContent auditingSite mappingElements of UsabilityFunctional ElementsWireframingExperience mappingCR UX
  6. 6. Information Architecture:What it’s not
  7. 7. This is a football
  8. 8. This is the Internet
  9. 9. This is not information architecture
  10. 10. Anatomy of a Web page: This is Web design
  11. 11. 123 5467
  12. 12. Anatomy of a Web page: HeadersHeaders act as a grounding force for the userby identifying and visually unifying all thepages of a site.
  13. 13. Anatomy of a Web page: NavigationNavigation is a broad term that encompassesany aspect of a site that links a user toanother area of the site and is the cornerstoneof a site’s usability.
  14. 14. Anatomy of a Web page: Feature areaTo achieve hierarchy, designers use a focalpoint—an area in the composition that isperceived before all others.
  15. 15. Anatomy of a Web page: Body/contentBreaks in the content allow users to scan thelayout quickly and gives them multiple entrypoints into the page.
  16. 16. Anatomy of a Web page: SidebarSidebars are useful for providing supportinginformation as well as advertising space.
  17. 17. Anatomy of a Web page: FooterThe footer has emerged over recent years as acritical part of Web design, performing tasksfor both the user and search engineoptimization.
  18. 18. Anatomy of a Web page: BackgroundBackgrounds can be used to create depth ordimension, add richness with texture andcolor to a page, or even expand the contentbeyond the borders of the page.
  19. 19. Information Architecture:A tale of two soda machines
  20. 20. 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.
  21. 21. User Needs Information ArchitectureContent Technology
  22. 22. The Role of IA:From pages to processes
  23. 23. 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 launchesMosaic, the Internet Explorer Microsoft releases standardize HTML introduced Google Adwords Friendster.comfirst consumer Microsoft releases Netscape version 5, which Internet Explorer launches launchesWeb-browsing Netscape Navigator Internet Explorer Microsoft releases Communicator Google.com, founded allowed users to version 6, whichapplication, 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 7released 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
  24. 24. Twitter.com launches Microsoft releases Twitter.com is Internet Explorer used to organize Facebook.com version 7, which Microsoft launches and mobilizeMySpace.com launches introduced tabbed Bing.com to compete relief efforts inlaunches Flickr.com launches browsing and a Candidate Web sites with Google Haiti followingWordPress content feed reader Apple introduces and social media play a the devastating Mozilla Firefox Web Microsoft releasesblogging software is the iPhone and pivotal role in the earthquake. browser is released, Mozilla Firefox Internet Explorerintroduced. mobile apps U.S. elections which utilizes the version 2 is released version 8 with Mozilla FirefoxApple releases the Gecko layout engine YouTube.com with tabbed Netscape Navigator Mozilla Firefox improved support for version 3.6 isSafari 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
  25. 25. 1995—c.2000
  26. 26. 1995—c.2000Web sites were “information spaces”News sitesMedical sitesMarketing brochure sites
  27. 27. A B1995—c.2000Information ArchitectsOrganize contentDirect users to find the content[Period]
  28. 28. 1995—c.2000IA DeliverablesSite mapsTaxonomiesLabeling systemsWireframes
  29. 29. c.2001—c.2005
  30. 30. c.2001—c.2005Web Sites Became TransactionalEcommerceAuctionsUser-generated content
  31. 31. c.2001—c.2005Information Architects becameInteraction DesignersIllustrate discrete user tasksMap out user flowsDesign the functionality of individual componentsthat would allow users to complete tasks
  32. 32. c.2001—c.2005Interaction Designer DeliverablesUser scenarios showing the pathsto desired user outcomes
  33. 33. c.2005—present
  34. 34. c.2005—presentThe Web becomes user-centric and mobileThe Web is now a functional utilityUsers expect more than just content — delight
  35. 35. c.2005—presentInteraction Designers becomeUser Experience (UX) DesignersDevelop contextual experiences
  36. 36. c.2005—presentUser Experience DeliverablesUser flow diagrams, or user journey stories, oftenacross multiple platforms and media—from desktopand mobile experiences to in-store and appinteractions
  37. 37. Site Planning: Starting at the beginning
  38. 38. Phase 1: PlanningObjective Setting — SWAT AnalysisCompetitive AnalysisDemographicsHow will people find the site?Functional Requirements
  39. 39. Phase 2: Information ArchitectureContent sortingSitemapsWireframesUsability diagrams
  40. 40. Phase 3: CreativeMoodboardsGrid buildingLayoutsUI Details
  41. 41. Information Architecture: Tools of the trade
  42. 42. Microsoft Visio
  43. 43. Adobe Proto
  44. 44. MockFlow.com
  45. 45. Adobe InDesign and Illustrator A Pencil
  46. 46. Site planning: Information architectureInformation Architecture (IA) is the blueprintthat maps out the pages of a site and
  47. 47. Content Collection and CreationAn asset inventory is the evaluation of theclients existing brand element that will benecessary and available.
  48. 48. Information Architecture DocumentsContent sorting is a means of cataloging andcategorizing the content of a site in order tounderstand the big picture of a project.
  49. 49. Information Architecture DocumentsA sitemap is a schematic for a site showing thepages and the lined relationships among them.
  50. 50. CLIENT: SmartCarSITE URL: www.smartusa.comSITEMAP 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 YouTubeNAVIGATION[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
  51. 51. 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 SmartWorldwideNAVIGATION[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
  52. 52. 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 SearchT3 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 Related Issue Section © 2005 MODEM MEDIA CONFIDENTIAL & PROPRIETARY
  53. 53. T2 P2 T2 P2Industries 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
  54. 54. Information Architecture DocumentsA wireframe is a blueprint that maps out thehierarchy of information, as well as the featuresand functionality of an individual page.
  55. 55. 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 | Mikes 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
  56. 56. 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
  57. 57. Acura MDX Reliability Select Another ModelSuccessful 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 Most2009 Acura - MDX 38 Better View Fewest Most2008 Acura - MDX 47 Average View Fewest Most2007 Acura - MDX 39 Better View Fewest Most Tire Decision* Low sample size TirAcura MDX Quick Links Additional LinksOdds It’s a Lemon Owner Reviews Full Car Reliability Survey Results (one huge table!)Repair Histories Price Comparisons Extended Warranty Tips
  58. 58. 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 | Mikes 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
  59. 59. Information Architecture DocumentsA usability diagram combines a sitemap withother user interactions to plan out a specific actiona user could take on a site.
  60. 60. TypeConnection.com User Flow
  61. 61. TypeConnection.com
  62. 62. Elements of Usability: Under consideredparts of a Web site.
  63. 63. Elements of Usability: NavigationNavigation is a broad term that encompassesany aspect of a site that connects a user withanother area of a site or other sites.
  64. 64. Breadcrumbs
  65. 65. Text Links
  66. 66. Elements of Usability: Site SearchSearch forms quickly examine a database ofsite content and display the results to a user.

×