SlideShare a Scribd company logo
1 of 121
Information Architecture: Making Information Accessible and Useful
David Sherwin / t:@changeorder

HOW 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
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
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
v




Information 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 systems




Exhibit 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 systems




Checking hours




            Information Architecture: Making Information Accessible and Useful   11/02/11   31
How we move through systems




Can I share this
with 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 Frenkeib
Attribution 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 Structure


Information Architecture: Making Information Accessible and Useful     11/02/11   57
Filter by Category

Information 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: Navigation




exposed 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
vertical
navigation

eh?




                                                                                      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 & Hierarchy




WATCH
                                   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 users
photo 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 Web




Interlude: TV Chatter v1 -> v2
Home
                                                                                + nav


Information Architecture: Making Information Accessible and Useful   11/02/11    84
Program
                                                                                screen


Information Architecture: Making Information Accessible and Useful   11/02/11    85
Tweet
                                                                                stream


Information 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 MAP



ES               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 Chatter




Extend
to 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
                                                                     Ecomagination


Information 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 PAGE




GLOBAL 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 SCHEMA




Information 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
Information Architecture: Making Information Accessible and Useful
Information Architecture: Making Information Accessible and Useful
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                                                                      02
Discover the places                                                     Identify the right
people act upon                                                         concepts to express
desired information                                                     needed information


03                                                                      04
Work in modules                                                         Document to
to 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: @changeorder
e: david.sherwin@frogdesign.com
b: changeorderblog.com




Creative Workshop
available now from HOW
at mydesignshop.com &
amzn.to/CWTheBook


© 2011 frog. All rights reserved.

More Related Content

Viewers also liked

Writing surveysthatwork
Writing surveysthatworkWriting surveysthatwork
Writing surveysthatworkrebeccaweiss
 
10 tips for a better UX survey
10 tips for a better UX survey10 tips for a better UX survey
10 tips for a better UX surveyCaroline Jarrett
 
Better Ideas Faster: How to Brainstorm More Effectively
Better Ideas Faster: How to Brainstorm More EffectivelyBetter Ideas Faster: How to Brainstorm More Effectively
Better Ideas Faster: How to Brainstorm More EffectivelyDavid Sherwin
 
Designing Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureDesigning Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureChristina Wodtke
 
10 Usability Heuristics explained
10 Usability Heuristics explained10 Usability Heuristics explained
10 Usability Heuristics explainedCraft Design
 
Content Strategy for Everything
Content Strategy for EverythingContent Strategy for Everything
Content Strategy for EverythingKristina Halvorson
 

Viewers also liked (6)

Writing surveysthatwork
Writing surveysthatworkWriting surveysthatwork
Writing surveysthatwork
 
10 tips for a better UX survey
10 tips for a better UX survey10 tips for a better UX survey
10 tips for a better UX survey
 
Better Ideas Faster: How to Brainstorm More Effectively
Better Ideas Faster: How to Brainstorm More EffectivelyBetter Ideas Faster: How to Brainstorm More Effectively
Better Ideas Faster: How to Brainstorm More Effectively
 
Designing Structure Part II: Information Archtecture
Designing Structure Part II: Information ArchtectureDesigning Structure Part II: Information Archtecture
Designing Structure Part II: Information Archtecture
 
10 Usability Heuristics explained
10 Usability Heuristics explained10 Usability Heuristics explained
10 Usability Heuristics explained
 
Content Strategy for Everything
Content Strategy for EverythingContent Strategy for Everything
Content Strategy for Everything
 

Similar to Information Architecture: Making Information Accessible and Useful

Machine learning and multimedia information retrieval
Machine learning and multimedia information retrievalMachine learning and multimedia information retrieval
Machine learning and multimedia information retrievalSi Krishan
 
Leverage Personal Technology to Streamline Your Days
Leverage Personal Technology to Streamline Your DaysLeverage Personal Technology to Streamline Your Days
Leverage Personal Technology to Streamline Your DaysRhett Laubach
 
What business are we in?
What business are we in?What business are we in?
What business are we in?lisld
 
Walsh - Martini Information Literacy: How does “anytime, anyplace, anywhere” ...
Walsh - Martini Information Literacy: How does “anytime, anyplace, anywhere” ...Walsh - Martini Information Literacy: How does “anytime, anyplace, anywhere” ...
Walsh - Martini Information Literacy: How does “anytime, anyplace, anywhere” ...IL Group (CILIP Information Literacy Group)
 
Practicum presentation
Practicum presentationPracticum presentation
Practicum presentationannarybakov
 
Info design presentation[1]
Info design presentation[1]Info design presentation[1]
Info design presentation[1]17elisem
 
Info design presentation2
Info design presentation2Info design presentation2
Info design presentation217elisem
 
Knowledge management manifesto_mkwi2012_20120301
Knowledge management manifesto_mkwi2012_20120301Knowledge management manifesto_mkwi2012_20120301
Knowledge management manifesto_mkwi2012_20120301Jan Pawlowski
 
Info design presentation-3
Info design presentation-3Info design presentation-3
Info design presentation-317elisem
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information ArchitectureAndy Fitzgerald
 
Leveraging Site Search to Optimize the User Experience
Leveraging Site Search to Optimize the User ExperienceLeveraging Site Search to Optimize the User Experience
Leveraging Site Search to Optimize the User ExperienceJohn Judge
 

Similar to Information Architecture: Making Information Accessible and Useful (11)

Machine learning and multimedia information retrieval
Machine learning and multimedia information retrievalMachine learning and multimedia information retrieval
Machine learning and multimedia information retrieval
 
Leverage Personal Technology to Streamline Your Days
Leverage Personal Technology to Streamline Your DaysLeverage Personal Technology to Streamline Your Days
Leverage Personal Technology to Streamline Your Days
 
What business are we in?
What business are we in?What business are we in?
What business are we in?
 
Walsh - Martini Information Literacy: How does “anytime, anyplace, anywhere” ...
Walsh - Martini Information Literacy: How does “anytime, anyplace, anywhere” ...Walsh - Martini Information Literacy: How does “anytime, anyplace, anywhere” ...
Walsh - Martini Information Literacy: How does “anytime, anyplace, anywhere” ...
 
Practicum presentation
Practicum presentationPracticum presentation
Practicum presentation
 
Info design presentation[1]
Info design presentation[1]Info design presentation[1]
Info design presentation[1]
 
Info design presentation2
Info design presentation2Info design presentation2
Info design presentation2
 
Knowledge management manifesto_mkwi2012_20120301
Knowledge management manifesto_mkwi2012_20120301Knowledge management manifesto_mkwi2012_20120301
Knowledge management manifesto_mkwi2012_20120301
 
Info design presentation-3
Info design presentation-3Info design presentation-3
Info design presentation-3
 
Mobile Information Architecture
Mobile Information ArchitectureMobile Information Architecture
Mobile Information Architecture
 
Leveraging Site Search to Optimize the User Experience
Leveraging Site Search to Optimize the User ExperienceLeveraging Site Search to Optimize the User Experience
Leveraging Site Search to Optimize the User Experience
 

More from frog

Re-Designing Citizenship
Re-Designing CitizenshipRe-Designing Citizenship
Re-Designing Citizenshipfrog
 
The rise of digital humanitarianism
The rise of digital humanitarianismThe rise of digital humanitarianism
The rise of digital humanitarianismfrog
 
Aging By Design: An Overview
Aging By Design: An OverviewAging By Design: An Overview
Aging By Design: An Overviewfrog
 
Understanding human motivation_in_the_age_of_connected_machines
Understanding human motivation_in_the_age_of_connected_machinesUnderstanding human motivation_in_the_age_of_connected_machines
Understanding human motivation_in_the_age_of_connected_machinesfrog
 
Off the Page Into the Wild: Designing For the Internet of Things
Off the Page Into the Wild: Designing For the Internet of ThingsOff the Page Into the Wild: Designing For the Internet of Things
Off the Page Into the Wild: Designing For the Internet of Thingsfrog
 
Envisioning the Balance: The Dyanmic Role of Design in Entrepreneurship
Envisioning the Balance: The Dyanmic Role of Design in EntrepreneurshipEnvisioning the Balance: The Dyanmic Role of Design in Entrepreneurship
Envisioning the Balance: The Dyanmic Role of Design in Entrepreneurshipfrog
 
WIAD: Design For Everyday Life
WIAD: Design For Everyday LifeWIAD: Design For Everyday Life
WIAD: Design For Everyday Lifefrog
 
SXSW: Designing Smart Objects for Emotional People
SXSW: Designing Smart Objects for Emotional PeopleSXSW: Designing Smart Objects for Emotional People
SXSW: Designing Smart Objects for Emotional Peoplefrog
 
frog POV: Now That Data is Everything
frog POV: Now That Data is Everythingfrog POV: Now That Data is Everything
frog POV: Now That Data is Everythingfrog
 
Tech Trends 2014
Tech Trends 2014 Tech Trends 2014
Tech Trends 2014 frog
 
frog Wearables
frog Wearablesfrog Wearables
frog Wearablesfrog
 
Investing in local communities by sharing the power of design
Investing in local communities by sharing the power of design Investing in local communities by sharing the power of design
Investing in local communities by sharing the power of design frog
 
Shaping a Technology Strategy for Mobile Development
Shaping a Technology Strategy for Mobile DevelopmentShaping a Technology Strategy for Mobile Development
Shaping a Technology Strategy for Mobile Developmentfrog
 
Wearable Technology and the Connected City
Wearable Technology and the Connected City Wearable Technology and the Connected City
Wearable Technology and the Connected City frog
 
Data in the city
Data in the cityData in the city
Data in the cityfrog
 
Is This Progress? More Meaning in Our Digital Life
Is This Progress? More Meaning in Our Digital LifeIs This Progress? More Meaning in Our Digital Life
Is This Progress? More Meaning in Our Digital Lifefrog
 
Teaching Old Markets New Tricks
Teaching Old Markets New Tricks Teaching Old Markets New Tricks
Teaching Old Markets New Tricks frog
 
Design Is Hacking How We Learn
Design Is Hacking How We LearnDesign Is Hacking How We Learn
Design Is Hacking How We Learnfrog
 
2013 Tech Trends
2013 Tech Trends2013 Tech Trends
2013 Tech Trendsfrog
 
Design Research Super Teams
Design Research Super TeamsDesign Research Super Teams
Design Research Super Teamsfrog
 

More from frog (20)

Re-Designing Citizenship
Re-Designing CitizenshipRe-Designing Citizenship
Re-Designing Citizenship
 
The rise of digital humanitarianism
The rise of digital humanitarianismThe rise of digital humanitarianism
The rise of digital humanitarianism
 
Aging By Design: An Overview
Aging By Design: An OverviewAging By Design: An Overview
Aging By Design: An Overview
 
Understanding human motivation_in_the_age_of_connected_machines
Understanding human motivation_in_the_age_of_connected_machinesUnderstanding human motivation_in_the_age_of_connected_machines
Understanding human motivation_in_the_age_of_connected_machines
 
Off the Page Into the Wild: Designing For the Internet of Things
Off the Page Into the Wild: Designing For the Internet of ThingsOff the Page Into the Wild: Designing For the Internet of Things
Off the Page Into the Wild: Designing For the Internet of Things
 
Envisioning the Balance: The Dyanmic Role of Design in Entrepreneurship
Envisioning the Balance: The Dyanmic Role of Design in EntrepreneurshipEnvisioning the Balance: The Dyanmic Role of Design in Entrepreneurship
Envisioning the Balance: The Dyanmic Role of Design in Entrepreneurship
 
WIAD: Design For Everyday Life
WIAD: Design For Everyday LifeWIAD: Design For Everyday Life
WIAD: Design For Everyday Life
 
SXSW: Designing Smart Objects for Emotional People
SXSW: Designing Smart Objects for Emotional PeopleSXSW: Designing Smart Objects for Emotional People
SXSW: Designing Smart Objects for Emotional People
 
frog POV: Now That Data is Everything
frog POV: Now That Data is Everythingfrog POV: Now That Data is Everything
frog POV: Now That Data is Everything
 
Tech Trends 2014
Tech Trends 2014 Tech Trends 2014
Tech Trends 2014
 
frog Wearables
frog Wearablesfrog Wearables
frog Wearables
 
Investing in local communities by sharing the power of design
Investing in local communities by sharing the power of design Investing in local communities by sharing the power of design
Investing in local communities by sharing the power of design
 
Shaping a Technology Strategy for Mobile Development
Shaping a Technology Strategy for Mobile DevelopmentShaping a Technology Strategy for Mobile Development
Shaping a Technology Strategy for Mobile Development
 
Wearable Technology and the Connected City
Wearable Technology and the Connected City Wearable Technology and the Connected City
Wearable Technology and the Connected City
 
Data in the city
Data in the cityData in the city
Data in the city
 
Is This Progress? More Meaning in Our Digital Life
Is This Progress? More Meaning in Our Digital LifeIs This Progress? More Meaning in Our Digital Life
Is This Progress? More Meaning in Our Digital Life
 
Teaching Old Markets New Tricks
Teaching Old Markets New Tricks Teaching Old Markets New Tricks
Teaching Old Markets New Tricks
 
Design Is Hacking How We Learn
Design Is Hacking How We LearnDesign Is Hacking How We Learn
Design Is Hacking How We Learn
 
2013 Tech Trends
2013 Tech Trends2013 Tech Trends
2013 Tech Trends
 
Design Research Super Teams
Design Research Super TeamsDesign Research Super Teams
Design Research Super Teams
 

Recently uploaded

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 

Recently uploaded (19)

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 

Information Architecture: Making Information Accessible and Useful

  • 1. Information Architecture: Making Information Accessible and Useful David Sherwin / t:@changeorder HOW INTERACTIVE CONFERENCE | NOVEMBER 2, 2011
  • 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
  • 7. 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
  • 8. 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
  • 9. 01: How we move through systems
  • 10. 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
  • 11. How we move through systems Example: a trip to the museum. Information Architecture: Making Information Accessible and Useful 11/02/11 11
  • 12. 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
  • 13. v Information Architecture: Making Information Accessible and Useful 11/02/11 13
  • 14. Information Architecture: Making Information Accessible and Useful 11/02/11 14
  • 15. Section title text Information Architecture: Making Information Accessible and Useful 11/02/11 15
  • 16. Information Architecture: Making Information Accessible and Useful 11/02/11 16
  • 17. Information Architecture: Making Information Accessible and Useful 11/02/11 17
  • 18. Section title text Information Architecture: Making Information Accessible and Useful 11/02/11 18
  • 19. Section title text Information Architecture: Making Information Accessible and Useful 11/02/11 19
  • 20. Information Architecture: Making Information Accessible and Useful 11/02/11 20
  • 21. Information Architecture: Making Information Accessible and Useful 11/02/11 21
  • 22. Section title text Information Architecture: Making Information Accessible and Useful 11/02/11 22
  • 23. Information Architecture: Making Information Accessible and Useful 11/02/11 23
  • 24. Information Architecture: Making Information Accessible and Useful 11/02/11 24
  • 25. Section title text Information Architecture: Making Information Accessible and Useful 11/02/11 25
  • 26. Information Architecture: Making Information Accessible and Useful 11/02/11 26
  • 27. Section title text Information Architecture: Making Information Accessible and Useful 11/02/11 27
  • 28. 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
  • 29. How we move through systems Exhibit information Information Architecture: Making Information Accessible and Useful 11/02/11 29
  • 30. How we move through systems Getting there Information Architecture: Making Information Accessible and Useful 11/02/11 30
  • 31. How we move through systems Checking hours Information Architecture: Making Information Accessible and Useful 11/02/11 31
  • 32. How we move through systems Can I share this with friends? Information Architecture: Making Information Accessible and Useful 11/02/11 32
  • 33. 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
  • 34. 02: Identifying & structuring concepts
  • 35. 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
  • 36. 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
  • 37. 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
  • 38. 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
  • 39. New context Information Architecture: Making Information Accessible and Useful 11/02/11 39
  • 40. 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
  • 41. New context Information Architecture: Making Information Accessible and Useful 11/02/11 41
  • 42. 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
  • 43. 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
  • 44. 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
  • 45. 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
  • 46. 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
  • 47. 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
  • 48. 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
  • 49. A museum experience Information Architecture: Making Information Accessible and Useful 11/02/11 49
  • 50. What’s critical in context? Information Architecture: Making Information Accessible and Useful 11/02/11 50
  • 51. 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
  • 52. 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
  • 53. photo 1449664622 by Frenkeib Attribution 2.0 License on Flickr 03: The core elements of great IA
  • 54. 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
  • 55. 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
  • 56. Waiting for search Information Architecture: Making Information Accessible and Useful 11/02/11 56
  • 57. Autocomplete & Results Structure Information Architecture: Making Information Accessible and Useful 11/02/11 57
  • 58. Filter by Category Information Architecture: Making Information Accessible and Useful 11/02/11 58
  • 59. The core elements of great IA: Search Sorting vs. Filtering Information Architecture: Making Information Accessible and Useful 11/02/11 59
  • 60. The core elements of great IA: Search Filtering Patterns Information Architecture: Making Information Accessible and Useful 11/02/11 60
  • 61. The core elements of great IA: Search Multiple Inputs Information Architecture: Making Information Accessible and Useful 11/02/11 61
  • 62. 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
  • 63. Section title text Information Architecture: Making Information Accessible and Useful 11/02/11 63
  • 64. The core elements of great IA Search and navigation should support each other. Information Architecture: Making Information Accessible and Useful 11/02/11 64
  • 65. 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
  • 66. 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
  • 67. The core elements of great IA: Navigation exposed secondary navigation you are here Information Architecture: Making Information Accessible and Useful 11/02/11 67
  • 68. breadcrumb trail (not secondary nav) Information Architecture: Making Information Accessible and Useful 11/02/11 68
  • 69. vertical navigation eh? http://www.thisisleaf.co.uk Information Architecture: Making Information Accessible and Useful 11/02/11 69
  • 70. 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
  • 71. 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
  • 72. The core elements of great IA: Navigation Information Architecture: Making Information Accessible and Useful 11/02/11 72
  • 73. The core elements of great IA: Navigation Content over navigation… Information Architecture: Making Information Accessible and Useful 11/02/11 73
  • 74. 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
  • 75. Information Architecture: Making Information Accessible and Useful 11/02/11 75
  • 76. 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
  • 77. 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
  • 78. Information Architecture: Making Information Accessible and Useful 11/02/11 78
  • 79. The core elements of great IA: Organization & Hierarchy Make hierarchy obvious Information Architecture: Making Information Accessible and Useful 11/02/11 79
  • 80. The core elements of great IA: Organization & Hierarchy WATCH BUY Show the right info at the right level Information Architecture: Making Information Accessible and Useful 11/02/11 80
  • 81. The core elements of great IA: Organization & Hierarchy Test with users photo 2247745929 by psd / Attribution 2.0 License on Flickr (& real content) Information Architecture: Making Information Accessible and Useful 11/02/11 81
  • 82. 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
  • 83. for iPhone, iPod Touch and Desktop Web Interlude: TV Chatter v1 -> v2
  • 84. Home + nav Information Architecture: Making Information Accessible and Useful 11/02/11 84
  • 85. Program screen Information Architecture: Making Information Accessible and Useful 11/02/11 85
  • 86. Tweet stream Information Architecture: Making Information Accessible and Useful 11/02/11 86
  • 87. 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
  • 88. 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
  • 89. 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
  • 90. Interlude: TV Chatter USER FLOWS Focuses on a singular use case, reaching desired content via explicit interactions.
  • 91. Interlude: TV Chatter Information Architecture: Making Information Accessible and Useful 11/02/11 91
  • 92. Interlude: TV Chatter APPLICATION MAP ES 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.
  • 93. Interlude: TV Chatter We started with mobile first. You should too. Information Architecture: Making Information Accessible and Useful 11/02/11 93
  • 94. 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
  • 95. Section title text Extend to web Information Architecture: Making Information Accessible and Useful 11/02/11 95
  • 96. Interlude: TV Chatter Extend to live TV Information Architecture: Making Information Accessible and Useful 11/02/11 96
  • 98. 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
  • 99. 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
  • 100. 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
  • 101. 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
  • 102. 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
  • 103. 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
  • 104. 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
  • 105. 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
  • 106. Adobe CS??? Information Architecture: Making Information Accessible and Useful 11/02/11 106
  • 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 107
  • 108. Example: GE Ecomagination Information Architecture: Making Information Accessible and Useful 11/02/11 108
  • 109. 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
  • 110. 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 PAGE GLOBAL ELEMENTS ADDITIONAL PAGE DRAWER OVERLAY MISSION STATEMENT FOOTER Information Architecture: Making Information Accessible and Useful 11/02/11 110
  • 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 111
  • 112. ZONED WIRE WITH NAVIGATION SCHEMA Information Architecture: Making Information Accessible and Useful 11/02/11 112
  • 113. 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
  • 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 116
  • 117. 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
  • 118. Information Architecture: Making Information Accessible and Useful 11/02/11 118
  • 119. 01 02 Discover the places Identify the right people act upon concepts to express desired information needed information 03 04 Work in modules Document to to establish clear understand, design patterns prototype to know Information Architecture: Making Information Accessible and Useful 11/02/11 119
  • 120. “Less, but better.” —Dieter Rams Information Architecture: Making Information Accessible and Useful 11/02/11 120
  • 121. Say hello: t: @changeorder e: david.sherwin@frogdesign.com b: changeorderblog.com Creative Workshop available now from HOW at mydesignshop.com & amzn.to/CWTheBook © 2011 frog. All rights reserved.