Information Architecture: Making Information Accessible and UsefulDavid Sherwin / t:@changeorderHOW INTERACTIVE CONFERENCE...
Introduction           This is a talk about how           designers can help people           make use of information.    ...
Introduction           Information Architecture (IA):           describing systems well, so people           can find their...
Talk at a glance     01                                                                            02     How we          ...
01: How we move through systems
How we move through systems          We identify places in systems          for people to find and act upon          desire...
How we move through systems          Example: a trip to the museum.            Information Architecture: Making Informatio...
How we move through systems                                PERSONA:                                Designer               ...
vInformation Architecture: Making Information Accessible and Useful   11/02/11       13
Information Architecture: Making Information Accessible and Useful   11/02/11   14
Section title text               Information Architecture: Making Information Accessible and Useful   11/02/11   15
Information Architecture: Making Information Accessible and Useful   11/02/11   16
Information Architecture: Making Information Accessible and Useful   11/02/11   17
Section title text               Information Architecture: Making Information Accessible and Useful   11/02/11   18
Section title text               Information Architecture: Making Information Accessible and Useful   11/02/11   19
Information Architecture: Making Information Accessible and Useful   11/02/11   20
Information Architecture: Making Information Accessible and Useful   11/02/11   21
Section title text               Information Architecture: Making Information Accessible and Useful   11/02/11   22
Information Architecture: Making Information Accessible and Useful   11/02/11   23
Information Architecture: Making Information Accessible and Useful   11/02/11   24
Section title text               Information Architecture: Making Information Accessible and Useful   11/02/11   25
Information Architecture: Making Information Accessible and Useful   11/02/11   26
Section title text               Information Architecture: Making Information Accessible and Useful   11/02/11   27
How we move through systems          That was a great museum          experience… though          what did I leave out?   ...
How we move through systemsExhibit information             Information Architecture: Making Information Accessible and Use...
How we move through systems    Getting there            Information Architecture: Making Information Accessible and Useful...
How we move through systemsChecking hours            Information Architecture: Making Information Accessible and Useful   ...
How we move through systemsCan I share thiswith friends?            Information Architecture: Making Information Accessibl...
Identifying and structuring concepts           Digital and real-world           systems must work in concert           to ...
02: Identifying & structuring concepts
Identifying and structuring concepts           Time, place, and desired actions           give context to information     ...
Identifying and structuring concepts                                  PERSONA:                                  Designer  ...
Identifying and structuring concepts           Plus: responding to email, text           messaging, checking Facebook,    ...
Identifying and structuring concepts                                  PERSONA:                                  Designer  ...
New context    Information Architecture: Making Information Accessible and Useful   11/02/11   39
Identifying and structuring concepts                                  PERSONA:                                  Designer  ...
New context    Information Architecture: Making Information Accessible and Useful   11/02/11   41
Identifying and structuring concepts                                  PERSONA:                                  Designer  ...
Identifying and structuring concepts                                  PERSONA:                                  Tourist   ...
Identifying and structuring concepts                                                                  PERSONAS:           ...
Identifying and structuring concepts           How can we visualize how           multiple personas understand           i...
Identifying and structuring concepts                                                                                      ...
Identifying and structuring concepts                 Designer                                       VISITORS              ...
Identifying and structuring concepts                 Designer                                       VISITORS              ...
A museum experience            Information Architecture: Making Information Accessible and Useful   11/02/11   49
What’s critical                                                                     in context?Information Architecture: M...
Identifying and structuring concepts           PROGRESSIVE DESIGN CHALLENGE           Try concept mapping yourself!       ...
Identifying and structuring concepts                                 LIQUIDS               drunk by             PEOPLE    ...
photo 1449664622 by FrenkeibAttribution 2.0 License on Flickr     03: The core elements of great IA
The core elements of great IA           A: Search           B: Navigation           C: Labeling           D: Organization ...
The core elements of great IA: Search           A: Search           how do users locate information?           (I know a k...
Waiting for search     Information Architecture: Making Information Accessible and Useful   11/02/11   56
Autocomplete &                                                                     Results StructureInformation Architectu...
Filter by CategoryInformation Architecture: Making Information Accessible and Useful      11/02/11   58
The core elements of great IA: Search                                                                                     ...
The core elements of great IA: Search                                                                                   Fi...
The core elements of great IA: Search                                                                                     ...
The core elements of great IA: Navigation           B: Navigation           how do users locate information?           or ...
Section title text               Information Architecture: Making Information Accessible and Useful   11/02/11   63
The core elements of great IA           Search and navigation           should support each other.              Informatio...
The core elements of great IA: Navigation           Levels of navigation:           Global: Across multiple sites/apps (ec...
The core elements of great IA: Navigation                                               shortcuts (secondary, tertiary)   ...
The core elements of great IA: Navigationexposed secondary navigation                                                     ...
breadcrumb trail           (not secondary nav)Information Architecture: Making Information Accessible and Useful   11/02/1...
verticalnavigationeh?                                                                                      http://www.this...
The core elements of great IA: Navigation                                                                                 ...
The core elements of great IA: Navigation           80% cases           New patterns for 4 + more…              Informatio...
The core elements of great IA: Navigation              Information Architecture: Making Information Accessible and Useful ...
The core elements of great IA: Navigation  Content over  navigation…              Information Architecture: Making Informa...
The core elements of great IA: Labeling           C: Labeling           is the information identified           in a way th...
Information Architecture: Making Information Accessible and Useful   11/02/11   75
The core elements of great IA: Labeling                                                                                   ...
The core elements of great IA: Organization & Hierarchy           D: Organization & Hierarchy           is information str...
Information Architecture: Making Information Accessible and Useful   11/02/11   78
The core elements of great IA: Organization & Hierarchy                                                                   ...
The core elements of great IA: Organization & HierarchyWATCH                                   BUY                        ...
The core elements of great IA: Organization & Hierarchy                                                                   ...
The core elements of great IA: Organization & Hierarchy         “Designing in the absence          of content is not desig...
for iPhone, iPod Touch and                   Desktop WebInterlude: TV Chatter v1 -> v2
Home                                                                                + navInformation Architecture: Making ...
Program                                                                                screenInformation Architecture: Mak...
Tweet                                                                                streamInformation Architecture: Makin...
Interlude: TV Chatter           How would a designer           express the elements of IA           for this app?         ...
Interlude: TV Chatter           NAVIGATION SCHEMA           Translates a site/app map into           menu states a user wo...
Interlude: TV Chatter                                    HEADER                                                           ...
Interlude: TV Chatter                        USER FLOWS   Focuses on a singular use case, reaching   desired content via e...
Interlude: TV Chatter              Information Architecture: Making Information Accessible and Useful   11/02/11   91
Interlude: TV Chatter                                                APPLICATION MAPES               0.0 HOME       5.0 SE...
Interlude: TV Chatter           We started with mobile first.           You should too.              Information Architectu...
Interlude: TV Chatter                               Download TV Chatter v2 from the iTunes App Store                      ...
Section title text                                                                                               Extend   ...
Interlude: TV ChatterExtendto live TV               Information Architecture: Making Information Accessible and Useful   1...
04: Practicing information architecture
Practicing information architecture                                                     MAPPING OF WEBSITE/APP CONTENT    ...
Practicing information architecture           What documentation           do I need to know how to create?           Just...
Practicing information architecture              The curse of increasing fidelity       TIME                               ...
Practicing information architecture              The “value” of increasing fidelity       TIME                     TIME COS...
Practicing information architecture            Are you better o            resolving your design            by prototyping...
Practicing information architecture            Prototyping is creating            models of how a system            should...
Practicing information architecture              Want to ship faster?                                                     ...
Practicing information architecture            Don’t try to predict change            through heavy documentation.        ...
Adobe CS???Information Architecture: Making Information Accessible and Useful   11/02/11   106
Practicing information architecture                                                                                       ...
Example: GE                                                                     EcomaginationInformation Architecture: Mak...
Practicing information architecture                                                                                       ...
SITE MAP                                                                                    HOMEPAGE   ANALYSE            ...
Practicing information architecture                                                                                       ...
ZONED WIRE WITH NAVIGATION SCHEMAInformation Architecture: Making Information Accessible and Useful   11/02/11   112
Practicing information architecture                                                                                   MOOD...
Practicing information architecture                                                                                       ...
Practicing information architecture                                                                                       ...
Information Architecture: Making Information Accessible and Useful   11/02/11   118
01                                                                      02Discover the places                             ...
“Less, but better.” —Dieter Rams Information Architecture: Making Information Accessible and Useful   11/02/11   120
Say hello:t: @changeordere: david.sherwin@frogdesign.comb: changeorderblog.comCreative Workshopavailable now from HOWat my...
Information Architecture: Making Information Accessible and Useful
Information Architecture: Making Information Accessible and Useful
Information Architecture: Making Information Accessible and Useful
Information Architecture: Making Information Accessible and Useful
Information Architecture: Making Information Accessible and Useful
Information Architecture: Making Information Accessible and Useful
Upcoming SlideShare
Loading in...5
×

Information Architecture: Making Information Accessible and Useful

31,672

Published on

This is a talk about how designers can help people make use of information—both find and act upon it.

To illustrate this, I take a trip to the SFMOMA to share the work of Dieter Rams, whose ethos of "Less, but better" is a challenge to any designer seeking to create better websites and applications.

I re-explore this trip multiple times over the course of the talk, considering the overlap of information in physical and digital systems—and how conceptually we merge them.

From there, I provide best practices and principles for how to approach information architecture and user experience design in a more iterative, agile fashion through in-line prototyping.

Published in: Design, Education, Technology
0 Comments
180 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
31,672
On Slideshare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
0
Comments
0
Likes
180
Embeds 0
No embeds

No notes for slide

Information Architecture: Making Information Accessible and Useful

  1. 1. Information Architecture: Making Information Accessible and UsefulDavid Sherwin / t:@changeorderHOW INTERACTIVE CONFERENCE | NOVEMBER 2, 2011
  2. 2. Introduction This is a talk about how designers can help people make use of information. Information Architecture: Making Information Accessible and Useful 11/02/11 2
  3. 3. Introduction Information Architecture (IA): describing systems well, so people can find their way around them Information Architecture: Making Information Accessible and Useful 11/02/11 7
  4. 4. Talk at a glance 01 02 How we Identifying & move through structuring systems concepts 03 04 The core Practicing elements information of great IA architecture Information Architecture: Making Information Accessible and Useful 11/02/11 8
  5. 5. 01: How we move through systems
  6. 6. How we move through systems We identify places in systems for people to find and act upon desired information. Information Architecture: Making Information Accessible and Useful 11/02/11 10
  7. 7. How we move through systems Example: a trip to the museum. Information Architecture: Making Information Accessible and Useful 11/02/11 11
  8. 8. How we move through systems PERSONA: Designer GOAL: GET INSPIRED AT THE SFMOMA WALK to museum VIEW the exhibit RETURN to work Information Architecture: Making Information Accessible and Useful 11/02/11 12
  9. 9. vInformation Architecture: Making Information Accessible and Useful 11/02/11 13
  10. 10. Information Architecture: Making Information Accessible and Useful 11/02/11 14
  11. 11. Section title text Information Architecture: Making Information Accessible and Useful 11/02/11 15
  12. 12. Information Architecture: Making Information Accessible and Useful 11/02/11 16
  13. 13. Information Architecture: Making Information Accessible and Useful 11/02/11 17
  14. 14. Section title text Information Architecture: Making Information Accessible and Useful 11/02/11 18
  15. 15. Section title text Information Architecture: Making Information Accessible and Useful 11/02/11 19
  16. 16. Information Architecture: Making Information Accessible and Useful 11/02/11 20
  17. 17. Information Architecture: Making Information Accessible and Useful 11/02/11 21
  18. 18. Section title text Information Architecture: Making Information Accessible and Useful 11/02/11 22
  19. 19. Information Architecture: Making Information Accessible and Useful 11/02/11 23
  20. 20. Information Architecture: Making Information Accessible and Useful 11/02/11 24
  21. 21. Section title text Information Architecture: Making Information Accessible and Useful 11/02/11 25
  22. 22. Information Architecture: Making Information Accessible and Useful 11/02/11 26
  23. 23. Section title text Information Architecture: Making Information Accessible and Useful 11/02/11 27
  24. 24. How we move through systems That was a great museum experience… though what did I leave out? Information Architecture: Making Information Accessible and Useful 11/02/11 28
  25. 25. How we move through systemsExhibit information Information Architecture: Making Information Accessible and Useful 11/02/11 29
  26. 26. How we move through systems Getting there Information Architecture: Making Information Accessible and Useful 11/02/11 30
  27. 27. How we move through systemsChecking hours Information Architecture: Making Information Accessible and Useful 11/02/11 31
  28. 28. How we move through systemsCan I share thiswith friends? Information Architecture: Making Information Accessible and Useful 11/02/11 32
  29. 29. Identifying and structuring concepts Digital and real-world systems must work in concert to be accessible and usable. (How much of this can a designer control?) Information Architecture: Making Information Accessible and Useful 11/02/11 33
  30. 30. 02: Identifying & structuring concepts
  31. 31. Identifying and structuring concepts Time, place, and desired actions give context to information situated in the flow of a well-designed experience. Information Architecture: Making Information Accessible and Useful 11/02/11 35
  32. 32. Identifying and structuring concepts PERSONA: Designer GOAL: GET INSPIRED AT THE SFMOMA BEFORE DURING AFTER FIND the museum LOCATE the exhibit BUY a snack at the cafe CHECK business hours VIEW the exhibit LOOK at mobile site WAIT in line VIEW another exhibit RETURN to work PAY for admission Information Architecture: Making Information Accessible and Useful 11/02/11 36
  33. 33. Identifying and structuring concepts Plus: responding to email, text messaging, checking Facebook, tweeting a friend, et cetera. Information Architecture: Making Information Accessible and Useful 11/02/11 37
  34. 34. Identifying and structuring concepts PERSONA: Designer GOAL: GET INSPIRED AT THE SFMOMA BEFORE DURING AFTER FIND the museum LOCATE the exhibit BUY a snack at the cafe CHECK business hours VIEW the exhibit WRITE text message WALK to museum SHOOT photographs REVIEW photographs WAIT in line STATUS on Facebook LOOK at mobile site CHECK my email VIEW another exhibit SHARE site with friends PAY for admission RESPOND to text msg RETURN to work Information Architecture: Making Information Accessible and Useful 11/02/11 38
  35. 35. New context Information Architecture: Making Information Accessible and Useful 11/02/11 39
  36. 36. Identifying and structuring concepts PERSONA: Designer GOAL: GET INSPIRED AT THE SFMOMA CONTEXT: PLANNING MY VISIT TO THE SFMOMA WHILE AT WORK HIGH PRIORITY MEDIUM PRIORITY LOW PRIORITY FIND the museum RESEARCH the art LOCATE the exhibit CHECK business hours VIEW another exhibit VIEW the exhibit PAY for admission WAIT in line BUY a snack at the cafe Information Architecture: Making Information Accessible and Useful 11/02/11 40
  37. 37. New context Information Architecture: Making Information Accessible and Useful 11/02/11 41
  38. 38. Identifying and structuring concepts PERSONA: Designer GOAL: GET INSPIRED AT THE SFMOMA CONTEXT: JUST ENTERED THE MUSEUM HIGH PRIORITY MEDIUM PRIORITY LOW PRIORITY LOCATE the exhibit VIEW another exhibit FIND the museum VIEW the exhibit BUY a snack at the cafe PAY for admission RESEARCH the art WAIT in line CHECK business hours Information Architecture: Making Information Accessible and Useful 11/02/11 42
  39. 39. Identifying and structuring concepts PERSONA: Tourist GOAL: SHOW MY KIDS THE BEST OF SF CONTEXT: JUST ENTERED THE MUSEUM HIGH PRIORITY MEDIUM PRIORITY LOW PRIORITY BUY a snack at the cafe LOCATE desired exhibit FIND the museum RESEARCH events VIEW desired exhibits PAY for admission SIGN UP for a tour VIEW another exhibit WAIT in line CHOOSE exhibits CHECK business hours Information Architecture: Making Information Accessible and Useful 11/02/11 43
  40. 40. Identifying and structuring concepts PERSONAS: Designer + Tourist GOAL: GET INSPIRED AT THE SFMOMA GOAL: SHOW MY KIDS THE BEST OF SF CONTEXT: JUST ENTERED THE MUSEUM HIGH PRIORITY MEDIUM PRIORITY LOW PRIORITY FIND the museum? LOCATE an exhibit? WAIT in line? CHECK business hours? RESEARCH events? PAY for admission? SIGN UP for a tour? Information Architecture: Making Information Accessible and Useful 11/02/11 44
  41. 41. Identifying and structuring concepts How can we visualize how multiple personas understand information in a shared place? Information Architecture: Making Information Accessible and Useful 11/02/11 45
  42. 42. Identifying and structuring concepts CONCEPT MAPS Determining relationships between concepts for your users.photo 3920008870 by Anderbill / Attribution 2.0 License on Flickr Information Architecture: Making Information Accessible and Useful 11/02/11 46
  43. 43. Identifying and structuring concepts Designer VISITORS Tourist who need to EAT who who view who wants to find want want to see goes to the SHOP TOURS / EVENTS EXHIBITS TRAVEL to get CAFE to the visiting buys with buys selling FOOD GIFTS buys ART PHYSICAL SPACE "MUSEUM" DIGITAL SPACE Information Architecture: Making Information Accessible and Useful 11/02/11 47
  44. 44. Identifying and structuring concepts Designer VISITORS Tourist who HOW TO VISIT need to EAT who who view who wants to find want want to see goes to the SHOP SHOPPING TOURS / TRAVEL EXHIBITS & EVENTS EVENTS EXHIBITS to get CAFE to the visiting buys with buys selling FOOD GIFTS THE WHOLE ART buys COLLECTION PHYSICAL SPACE "MUSEUM" ABOUT SFMOMA DIGITAL SPACE Information Architecture: Making Information Accessible and Useful 11/02/11 48
  45. 45. A museum experience Information Architecture: Making Information Accessible and Useful 11/02/11 49
  46. 46. What’s critical in context?Information Architecture: Making Information Accessible and Useful 11/02/11 50
  47. 47. Identifying and structuring concepts PROGRESSIVE DESIGN CHALLENGE Try concept mapping yourself! Visualize how users might relate to the content in your magazine. Information Architecture: Making Information Accessible and Useful 11/02/11 51
  48. 48. Identifying and structuring concepts LIQUIDS drunk by PEOPLE who go to STORES want made to eat who that carry into eating are that carry also eating formed TRUFF- HOME: PASTRI CHOCOLAT- baked into that carry into LES CHOCOLATE ES IERS made in into which sold to BARS is formed into FARMERS grown by RAW CACAO Information Architecture: Making Information Accessible and Useful 11/02/11 52
  49. 49. photo 1449664622 by FrenkeibAttribution 2.0 License on Flickr 03: The core elements of great IA
  50. 50. The core elements of great IA A: Search B: Navigation C: Labeling D: Organization & Hierarchy Information Architecture: Making Information Accessible and Useful 11/02/11 54
  51. 51. The core elements of great IA: Search A: Search how do users locate information? (I know a keyword…) Information Architecture: Making Information Accessible and Useful 11/02/11 55
  52. 52. Waiting for search Information Architecture: Making Information Accessible and Useful 11/02/11 56
  53. 53. Autocomplete & Results StructureInformation Architecture: Making Information Accessible and Useful 11/02/11 57
  54. 54. Filter by CategoryInformation Architecture: Making Information Accessible and Useful 11/02/11 58
  55. 55. The core elements of great IA: Search Sorting vs. Filtering Information Architecture: Making Information Accessible and Useful 11/02/11 59
  56. 56. The core elements of great IA: Search Filtering Patterns Information Architecture: Making Information Accessible and Useful 11/02/11 60
  57. 57. The core elements of great IA: Search Multiple Inputs Information Architecture: Making Information Accessible and Useful 11/02/11 61
  58. 58. The core elements of great IA: Navigation B: Navigation how do users locate information? or a place that might contain it? (I have a scent of what I’m looking for…) Information Architecture: Making Information Accessible and Useful 11/02/11 62
  59. 59. Section title text Information Architecture: Making Information Accessible and Useful 11/02/11 63
  60. 60. The core elements of great IA Search and navigation should support each other. Information Architecture: Making Information Accessible and Useful 11/02/11 64
  61. 61. The core elements of great IA: Navigation Levels of navigation: Global: Across multiple sites/apps (ecosystem) Primary: First level visible (parent) Secondary: Second level (child) Tertiary: Third level deep (grandchild), et cetera Information Architecture: Making Information Accessible and Useful 11/02/11 65
  62. 62. The core elements of great IA: Navigation shortcuts (secondary, tertiary) dropdown exposes one level Information Architecture: Making Information Accessible and Useful 11/02/11 66
  63. 63. The core elements of great IA: Navigationexposed secondary navigation you are here Information Architecture: Making Information Accessible and Useful 11/02/11 67
  64. 64. breadcrumb trail (not secondary nav)Information Architecture: Making Information Accessible and Useful 11/02/11 68
  65. 65. verticalnavigationeh? http://www.thisisleaf.co.uk Information Architecture: Making Information Accessible and Useful 11/02/11 69
  66. 66. The core elements of great IA: Navigation Fused site/app navigation http://www.bloomberg.com/company/ Information Architecture: Making Information Accessible and Useful 11/02/11 70
  67. 67. The core elements of great IA: Navigation 80% cases New patterns for 4 + more… Information Architecture: Making Information Accessible and Useful 11/02/11 71
  68. 68. The core elements of great IA: Navigation Information Architecture: Making Information Accessible and Useful 11/02/11 72
  69. 69. The core elements of great IA: Navigation Content over navigation… Information Architecture: Making Information Accessible and Useful 11/02/11 73
  70. 70. The core elements of great IA: Labeling C: Labeling is the information identified in a way that users understand? Information Architecture: Making Information Accessible and Useful 11/02/11 74
  71. 71. Information Architecture: Making Information Accessible and Useful 11/02/11 75
  72. 72. The core elements of great IA: Labeling CARD SORTING Validate labeling & content categories for sites and apps Get Card Sorting: Creating Usable Categories by Donna Spencer (Rosenfeld Media) Information Architecture: Making Information Accessible and Useful 11/02/11 76
  73. 73. The core elements of great IA: Organization & Hierarchy D: Organization & Hierarchy is information structured in a way that reflects my priorities and needs? Information Architecture: Making Information Accessible and Useful 11/02/11 77
  74. 74. Information Architecture: Making Information Accessible and Useful 11/02/11 78
  75. 75. The core elements of great IA: Organization & Hierarchy Make hierarchy obvious Information Architecture: Making Information Accessible and Useful 11/02/11 79
  76. 76. The core elements of great IA: Organization & HierarchyWATCH BUY Show the right info at the right level Information Architecture: Making Information Accessible and Useful 11/02/11 80
  77. 77. The core elements of great IA: Organization & Hierarchy Test with usersphoto 2247745929 by psd / Attribution 2.0 License on Flickr (& real content) Information Architecture: Making Information Accessible and Useful 11/02/11 81
  78. 78. The core elements of great IA: Organization & Hierarchy “Designing in the absence of content is not design. It’s decoration.” —Je rey Zeldman Information Architecture: Making Information Accessible and Useful 11/02/11 82
  79. 79. for iPhone, iPod Touch and Desktop WebInterlude: TV Chatter v1 -> v2
  80. 80. Home + navInformation Architecture: Making Information Accessible and Useful 11/02/11 84
  81. 81. Program screenInformation Architecture: Making Information Accessible and Useful 11/02/11 85
  82. 82. Tweet streamInformation Architecture: Making Information Accessible and Useful 11/02/11 86
  83. 83. Interlude: TV Chatter How would a designer express the elements of IA for this app? Information Architecture: Making Information Accessible and Useful 11/02/11 87
  84. 84. Interlude: TV Chatter NAVIGATION SCHEMA Translates a site/app map into menu states a user would see. FAVES HOT NEXT FEATURED SEARCH (ALL) Shows Popular What’s Promoted Full I love shows on next? Shows catalog FAVES HOT NEXT FEATURED ALL Information Architecture: Making Information Accessible and Useful 11/02/11 88
  85. 85. Interlude: TV Chatter HEADER ZONED WIREFRAMES HOME SCREEN Establishing screen CONTENT templates and design patterns NAVIGATION Information Architecture: Making Information Accessible and Useful 11/02/11 89
  86. 86. Interlude: TV Chatter USER FLOWS Focuses on a singular use case, reaching desired content via explicit interactions.
  87. 87. Interlude: TV Chatter Information Architecture: Making Information Accessible and Useful 11/02/11 91
  88. 88. Interlude: TV Chatter APPLICATION MAPES 0.0 HOME 5.0 SEARCH Establishes relationships between content & functionality. Conveys spatial metaphors. 6.0 SHOW HOME 7,0 TWEETSTREAM Should happen at lowest fidelities first.
  89. 89. Interlude: TV Chatter We started with mobile first. You should too. Information Architecture: Making Information Accessible and Useful 11/02/11 93
  90. 90. Interlude: TV Chatter Download TV Chatter v2 from the iTunes App Store to see how we refined the information architecture. Information Architecture: Making Information Accessible and Useful 11/02/11 94
  91. 91. Section title text Extend to web Information Architecture: Making Information Accessible and Useful 11/02/11 95
  92. 92. Interlude: TV ChatterExtendto live TV Information Architecture: Making Information Accessible and Useful 11/02/11 96
  93. 93. 04: Practicing information architecture
  94. 94. Practicing information architecture MAPPING OF WEBSITE/APP CONTENT Designer VISITORS Tourist who HOMEPAGE need to EAT who who view who wants to find want want to see goes to the SHOWCASE PORTFOLIO PROGRESS TOURS / SHOP EVENTS EXHIBITS TRAVEL to get CAFE to the Filters Filters Sort buys By the Numbers New Business visiting with buys selling SITE MAP CONCEPT MAP buys GIFTS FOOD APP MAP ART PHYSICAL SPACE "MUSEUM" DIGITAL SPACE SCREEN COMPOSITION & PLACEMENT OF FUNCTIONALITY NAVIGATION SCHEMA ZONED WIREFRAMES WIREFRAME FLOWS WEBSITE APP Information Architecture: Making Information Accessible and Useful 11/02/11 98
  95. 95. Practicing information architecture What documentation do I need to know how to create? Just enough of what’s needed. Information Architecture: Making Information Accessible and Useful 11/02/11 99
  96. 96. Practicing information architecture The curse of increasing fidelity TIME TIME COST OF BIG DESIGN UP FRONT SKETCH LOW-FI HIGH-FI PIXEL-PERFECT WIRES WIRES COMPS Information Architecture: Making Information Accessible and Useful 11/02/11 100
  97. 97. Practicing information architecture The “value” of increasing fidelity TIME TIME COST OF EXPLAINING DESIGN IDEAS SKETCH LOW-FI HIGH-FI PIXEL-PERFECT WIRES WIRES COMPS Information Architecture: Making Information Accessible and Useful 11/02/11 101
  98. 98. Practicing information architecture Are you better o resolving your design by prototyping, not by documenting? Information Architecture: Making Information Accessible and Useful 11/02/11 102
  99. 99. Practicing information architecture Prototyping is creating models of how a system should behave in use. (It does not have to be working, shippable code!) Information Architecture: Making Information Accessible and Useful 11/02/11 103
  100. 100. Practicing information architecture Want to ship faster? DOCUMENTATION TIME TIME DESIGN TIME INCLUDING IN-LINE PROTOTYPING SKETCH LOW-FI IN-LINE PIXEL- SHIPPABLE WIRE PROTOTYPING PERFECT CODE COMPS HIGH-FI WIRE Information Architecture: Making Information Accessible and Useful 11/02/11 104
  101. 101. Practicing information architecture Don’t try to predict change through heavy documentation. Redesign your IA process so it can adapt to change through prototyping your IA. Information Architecture: Making Information Accessible and Useful 11/02/11 105
  102. 102. Adobe CS???Information Architecture: Making Information Accessible and Useful 11/02/11 106
  103. 103. Practicing information architecture DISCOVERY WITH 1. INVENTORY CLIENT & USERS CREATE DESIGN 2. STRUCTURE & PROTOTYPE HYPOTHESES VALIDATE & 3. VALIDATE GENERATE IDEAS DESIGN & 4. EXTEND DEVELOPMENT ITERATION Information Architecture: Making Information Accessible and Useful 11/02/11 107
  104. 104. Example: GE EcomaginationInformation Architecture: Making Information Accessible and Useful 11/02/11 108
  105. 105. Practicing information architecture DISCOVERY WITH 1. INVENTORY CLIENT & USERS CREATE DESIGN 2. STRUCTURE & PROTOTYPE HYPOTHESES VALIDATE & 3. VALIDATE GENERATE IDEAS DESIGN & 4. EXTEND DEVELOPMENT ITERATION Information Architecture: Making Information Accessible and Useful 11/02/11 109
  106. 106. SITE MAP HOMEPAGE ANALYSE INVENT COMMIT SHOWCASE PORTFOLIO PROGRESS GREEN ROOM SUBSCRIBE SEARCH Filters Filters Sort Filters FEATURE FEATURE FEATURE By the Numbers New Business ASK AN EXPERT Product DETAIL PAGE DETAIL PAGE DETAIL PAGE On the Road Home Year DETAIL PAGE Showcase On the Web Business A-Z Articles City BEHIND THE SCENES FEATURETTE FEATURETTE FEATURETTE DETAIL PAGE DETAIL PAGE DETAIL PAGE DETAIL PAGE SEARCH SHOWCASE PRODUCT DETAIL PAGE DETAIL PAGE RESULTS PAGE ECO CONVERSATION (ECO 2.0 CONTENT) AGGREGATED AGGREGATED AGGREGATED DETAIL PAGE DETAIL PAGE DETAIL PAGEGLOBAL ELEMENTS ADDITIONAL PAGE DRAWER OVERLAY MISSION STATEMENT FOOTER Information Architecture: Making Information Accessible and Useful 11/02/11 110
  107. 107. Practicing information architecture DISCOVERY WITH 1. INVENTORY CLIENT & USERS CREATE DESIGN 2. STRUCTURE & PROTOTYPE HYPOTHESES VALIDATE & 3. VALIDATE GENERATE IDEAS DESIGN & 4. EXTEND DEVELOPMENT ITERATION Information Architecture: Making Information Accessible and Useful 11/02/11 111
  108. 108. ZONED WIRE WITH NAVIGATION SCHEMAInformation Architecture: Making Information Accessible and Useful 11/02/11 112
  109. 109. Practicing information architecture MOOD BOARDS Sets tone and art direction for visual design & interaction. Information Architecture: Making Information Accessible and Useful 11/02/11 113
  110. 110. Practicing information architecture DISCOVERY WITH 1. INVENTORY CLIENT & USERS CREATE DESIGN 2. STRUCTURE & PROTOTYPE HYPOTHESES VALIDATE & 3. VALIDATE GENERATE IDEAS DESIGN & 4. EXTEND DEVELOPMENT ITERATION Information Architecture: Making Information Accessible and Useful 11/02/11 116
  111. 111. Practicing information architecture DISCOVERY WITH 1. INVENTORY CLIENT & USERS CREATE DESIGN 2. STRUCTURE & PROTOTYPE HYPOTHESES VALIDATE & 3. VALIDATE GENERATE IDEAS DESIGN & 4. EXTEND DEVELOPMENT ITERATION Information Architecture: Making Information Accessible and Useful 11/02/11 117
  112. 112. Information Architecture: Making Information Accessible and Useful 11/02/11 118
  113. 113. 01 02Discover the places Identify the rightpeople act upon concepts to expressdesired information needed information03 04Work in modules Document toto establish clear understand,design patterns prototype to know Information Architecture: Making Information Accessible and Useful 11/02/11 119
  114. 114. “Less, but better.” —Dieter Rams Information Architecture: Making Information Accessible and Useful 11/02/11 120
  115. 115. Say hello:t: @changeordere: david.sherwin@frogdesign.comb: changeorderblog.comCreative Workshopavailable now from HOWat mydesignshop.com &amzn.to/CWTheBook© 2011 frog. All rights reserved.

×