• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Information Architecture: Making Information Accessible and Useful
 

Information Architecture: Making Information Accessible and Useful

on

  • 30,463 views

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

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.

Statistics

Views

Total Views
30,463
Views on SlideShare
11,425
Embed Views
19,038

Actions

Likes
170
Downloads
0
Comments
0

52 Embeds 19,038

http://changeorder.typepad.com 10112
http://designmind.frogdesign.com 4549
http://www.coprosystem.co.jp 1966
http://www.davidsherwin.com 1313
http://ixdmorelli.blogspot.com 264
http://feeds.feedburner.com 117
http://comunicacionmorelli.blogspot.com 106
http://www.scoop.it 84
http://absolutne.tumblr.com 66
http://www.psfk.com 62
http://sjors.posterous.com 50
http://xxx.broceliand.fr 34
http://a0.twimg.com 28
https://online.cdu.edu.au 26
http://labo.coprosystem.co.jp 25
http://varun-dhanda.blogspot.com 23
http://www.changeorder.typepad.com 19
https://david-sherwin.squarespace.com 19
http://lanyrd.com 18
http://www.twylah.com 18
http://translate.googleusercontent.com 17
http://paper.li 15
http://localhost 13
http://us-w1.rockmelt.com 10
http://www.techgig.com 9
http://neubee.tumblr.com 8
http://fig.ly 8
http://www.fig.ly 7
http://opencms-auth.soma.salesforce.com 6
http://www.varun-dhanda.blogspot.com 5
http://varun-dhanda.blogspot.in 4
http://webcache.googleusercontent.com 4
https://twitter.com 4
http://www.linkedin.com 3
http://dm3.localhost.com 3
http://207.46.192.232 3
http://tweetedtimes.com 2
http://thomashordern.posterous.com 2
https://www.linkedin.com 2
http://feeds.frogdesign.com 2
http://safe.txmblr.com 1
http://dm.frog.localhost.com 1
http://david-sherwin.squarespace.com 1
http://www.pinterest.com 1
http://www.techgig.timesjobs.com 1
http://techgig.in 1
http://ixdmorelli.blogspot.com.es 1
http://www.hanrss.com 1
http://www.blogger.com 1
http://xianguo.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Information Architecture: Making Information Accessible and Useful Information Architecture: Making Information Accessible and Useful Presentation Transcript

    • Information Architecture: Making Information Accessible and UsefulDavid Sherwin / t:@changeorderHOW INTERACTIVE CONFERENCE | NOVEMBER 2, 2011
    • 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
    • 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
    • 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
    • 01: How we move through systems
    • 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
    • How we move through systems Example: a trip to the museum. Information Architecture: Making Information Accessible and Useful 11/02/11 11
    • 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
    • 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? Information Architecture: Making Information Accessible and Useful 11/02/11 28
    • How we move through systemsExhibit information Information Architecture: Making Information Accessible and Useful 11/02/11 29
    • How we move through systems Getting there Information Architecture: Making Information Accessible and Useful 11/02/11 30
    • How we move through systemsChecking hours Information Architecture: Making Information Accessible and Useful 11/02/11 31
    • How we move through systemsCan I share thiswith friends? Information Architecture: Making Information Accessible and Useful 11/02/11 32
    • 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
    • 02: Identifying & structuring concepts
    • 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
    • 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
    • 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
    • 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
    • New context Information Architecture: Making Information Accessible and Useful 11/02/11 39
    • 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
    • New context Information Architecture: Making Information Accessible and Useful 11/02/11 41
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • A museum experience Information Architecture: Making Information Accessible and Useful 11/02/11 49
    • What’s critical in context?Information Architecture: Making Information Accessible and Useful 11/02/11 50
    • 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
    • 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
    • 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 & Hierarchy Information Architecture: Making Information Accessible and Useful 11/02/11 54
    • 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
    • Waiting for search Information Architecture: Making Information Accessible and Useful 11/02/11 56
    • Autocomplete & Results StructureInformation Architecture: Making Information Accessible and Useful 11/02/11 57
    • Filter by CategoryInformation Architecture: Making Information Accessible and Useful 11/02/11 58
    • The core elements of great IA: Search Sorting vs. Filtering Information Architecture: Making Information Accessible and Useful 11/02/11 59
    • The core elements of great IA: Search Filtering Patterns Information Architecture: Making Information Accessible and Useful 11/02/11 60
    • The core elements of great IA: Search Multiple Inputs Information Architecture: Making Information Accessible and Useful 11/02/11 61
    • 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
    • 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. Information Architecture: Making Information Accessible and Useful 11/02/11 64
    • 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
    • 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
    • The core elements of great IA: Navigationexposed secondary navigation you are here Information Architecture: Making Information Accessible and Useful 11/02/11 67
    • breadcrumb trail (not secondary nav)Information Architecture: Making Information Accessible and Useful 11/02/11 68
    • verticalnavigationeh? http://www.thisisleaf.co.uk Information Architecture: Making Information Accessible and Useful 11/02/11 69
    • 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
    • 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
    • The core elements of great IA: Navigation Information Architecture: Making Information Accessible and Useful 11/02/11 72
    • The core elements of great IA: Navigation Content over navigation… Information Architecture: Making Information Accessible and Useful 11/02/11 73
    • 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
    • Information Architecture: Making Information Accessible and Useful 11/02/11 75
    • 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
    • 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
    • Information Architecture: Making Information Accessible and Useful 11/02/11 78
    • The core elements of great IA: Organization & Hierarchy Make hierarchy obvious Information Architecture: Making Information Accessible and Useful 11/02/11 79
    • 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
    • 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
    • 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
    • for iPhone, iPod Touch and Desktop WebInterlude: TV Chatter v1 -> v2
    • Home + navInformation Architecture: Making Information Accessible and Useful 11/02/11 84
    • Program screenInformation Architecture: Making Information Accessible and Useful 11/02/11 85
    • Tweet streamInformation Architecture: Making Information Accessible and Useful 11/02/11 86
    • 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
    • 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
    • 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
    • Interlude: TV Chatter USER FLOWS Focuses on a singular use case, reaching desired content via explicit interactions.
    • Interlude: TV Chatter Information Architecture: Making Information Accessible and Useful 11/02/11 91
    • 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.
    • Interlude: TV Chatter We started with mobile first. You should too. Information Architecture: Making Information Accessible and Useful 11/02/11 93
    • 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
    • Section title text Extend to web Information Architecture: Making Information Accessible and Useful 11/02/11 95
    • Interlude: TV ChatterExtendto live TV Information Architecture: Making Information Accessible and Useful 11/02/11 96
    • 04: Practicing information architecture
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Adobe CS???Information Architecture: Making Information Accessible and Useful 11/02/11 106
    • 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
    • Example: GE EcomaginationInformation Architecture: Making Information Accessible and Useful 11/02/11 108
    • 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
    • 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
    • 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
    • ZONED WIRE WITH NAVIGATION SCHEMAInformation Architecture: Making Information Accessible and Useful 11/02/11 112
    • 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
    • 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
    • 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
    • Information Architecture: Making Information Accessible and Useful 11/02/11 118
    • 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
    • “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 mydesignshop.com &amzn.to/CWTheBook© 2011 frog. All rights reserved.