Information Architecture: Making Information Accessible and Useful

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 ﬁnd 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 ﬁnd 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

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 ﬂow 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 ﬁnd 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 ﬁnd 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

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 identiﬁed in a way that users understand? Information Architecture: Making Information Accessible and Useful 11/02/11 74

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 reﬂects my priorities and needs? Information Architecture: Making Information Accessible and Useful 11/02/11 77

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 ﬁdelities ﬁrst.

Interlude: TV Chatter We started with mobile ﬁrst. 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 reﬁned 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 ﬁnd 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 ﬁdelity 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 ﬁdelity 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

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

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

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

http://changeorder.typepad.com	5365
http://designmind.frogdesign.com	3880
http://www.coprosystem.co.jp	1070
http://comunicacionmorelli.blogspot.com	106
http://feeds.feedburner.com	73
http://absolutne.tumblr.com	58
http://sjors.posterous.com	46
http://www.psfk.com	45
http://a0.twimg.com	28
http://www.scoop.it	27
http://labo.coprosystem.co.jp	25
http://varun-dhanda.blogspot.com	23
http://www.twylah.com	18
http://paper.li	15
http://www.changeorder.typepad.com	14
http://us-w1.rockmelt.com	10
http://translate.googleusercontent.com	8
http://fig.ly	8
http://www.fig.ly	7
http://lanyrd.com	7
http://www.techgig.com	7
http://neubee.tumblr.com	6
http://opencms-auth.soma.salesforce.com	6
http://www.varun-dhanda.blogspot.com	5
http://dm3.localhost.com	3
http://207.46.192.232	3
http://varun-dhanda.blogspot.in	2
http://tweetedtimes.com	2
http://www.linkedin.com	2
http://webcache.googleusercontent.com	2
http://feeds.frogdesign.com	2
https://online.cdu.edu.au	2
http://thomashordern.posterous.com	1
http://www.hanrss.com	1
http://www.blogger.com	1
http://zootool.com	1
http://twitter.com	1
http://xianguo.com	1

Information Architecture: Making Information Accessible and Useful

by frog on Nov 02, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

38 Embeds 10,881

Statistics

Information Architecture: Making Information Accessible and Useful — Presentation Transcript