Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Information Architecture: Or, why the web is not Aunt Mildred's closet

Information Architecture: Or, why the web is not Aunt Mildred's closet

The underlying problem for most organizations’ websites (and certainly most library websites) is that no one has ever asked why the website exists in the first place. Who is it for? What do we want them to accomplish? Trying to decide if your website is a “success” is useless if you don’t have some idea of what you are trying to do. Simply printing out page views and making a colorful graph isn’t going to tell you anything.

In all organizations, once or twice a week someone stops by the office of the Web Wrangler™ to ask, “can we put this document somewhere on the Web?” The implication is that the person who created it doesn’t know where it should go, so stuffing it into the website seems like the easiest solution. The website then becomes the kitchen junk drawer, or Aunt Mildred’s closet, full of stuff that has no home, but collocated in one place for anyone who needs to find something.

Your website is not a junk drawer. It isn’t Aunt Mildred’s closet. Do you like rifling through your junk drawer? Have you ever found what you’re looking for in Aunt Mildred’s closet? What makes you think your users want to do this?

B852b104baed98f4b7f02f5a7a75ab6b?s=128

Matthew Reidsma

April 19, 2011
Tweet

More Decks by Matthew Reidsma

Other Decks in Design

Transcript

  1. ORGANIZING WEB CONTENT OR: The Web is not Aunt Mildred’s

    Closet Matthew Reidsma April 19, 2011
  2. THE WEB IS A BUNCH OF DOCUMENTS

  3. ORGANIZING DOCUMENTS IS EASY, RIGHT?

  4. Paul Freund in his office, courtesy of Harvard Law School

    Special Collections
  5. I WROTE A DOCUMENT

  6. I WROTE A WEBSITE

  7. I A BUILT WEBSITE

  8. THE WEB FEELS LIKE A PLACE

  9. ARCHITECTURE

  10. ARCHITECTURE INFORMATION

  11. ARCHITECTS ORGANIZE BUILDINGS

  12. INFORMATION ARCHITECTS ORGANIZE WEBSITES

  13. ARCHITECTS ARE CAREFUL

  14. ARCHITECTS ARE METHODICAL

  15. ARCHITECTS PLAN AHEAD

  16. ARCHITECTS HAVE GOALS

  17. ALL BUILDINGS REQUIRE PLANS

  18. ALL BUILDINGS REQUIRE PLANS LARGE BUILDINGS REQUIRE ARCHITECTS

  19. ALL WEBSITES REQUIRE PLANS

  20. ALL WEBSITES REQUIRE PLANS LARGE WEBSITES REQUIRE INFORMATION ARCHITECTS

  21. HARD TO ADD A ROOM AFTER CONSTRUCTION

  22. EASY TO ADD A WEBPAGE AFTER LAUNCH

  23. JUST BECAUSE IT’S EASY DOESN’T MEAN IT’S A GOOD IDEA

  24. CAN WE PUT THIS ON THE WEBSITE SOMEWHERE?

  25. EASY TO JUST SHOVE IT IN THE CLOSET

  26. BUT

  27. IF YOU DON’T KNOW WHERE IT SHOULD GO HOW WILL

    YOUR USERS FIND IT?
  28. THE WEB IS NOT AUNT MILDRED’S CLOSET

  29. GREAT.

  30. NEED TO ORGANIZE OUR WEB CONTENT

  31. HOW?

  32. I’M GLAD YOU ASKED.

  33. 01 WHY DO YOU HAVE A WEBSITE?

  34. 01 WHY DO YOU HAVE A WEBSITE? 02 WHAT ARE

    YOUR GOALS?
  35. 01 WHY DO YOU HAVE A WEBSITE? 03 WHO ARE

    YOUR USERS? 02 WHAT ARE YOUR GOALS?
  36. 01 WHY DO YOU HAVE A WEBSITE? 03 WHO ARE

    YOUR USERS? 04 WHAT ARE THEIR GOALS? 02 WHAT ARE YOUR GOALS?
  37. 05 WHAT CONTENT WILL YOU HAVE?

  38. 05 WHAT CONTENT WILL YOU HAVE? • LETS USERS MEET

    THEIR GOALS • LETS YOU MEET YOUR GOALS
  39. BUT THIS WEBPAGE DOESN’T HELP ANYONE MEET THEIR GOALS. WHERE

    DO I PUT IT?
  40. None
  41. TWO APPROACHES

  42. TWO APPROACHES • TOP DOWN • BOTTOM UP

  43. TOP DOWN

  44. HIERARCHY OF CONTENT

  45. DECIDE ON CATEGORIES FIT YOUR CONTENT IN THEM

  46. (HELPS WITH BROWSING)

  47. BOTTOM UP

  48. INVENTORY OF CONTENT

  49. SEE WHAT CONTENT YOU HAVE CREATE CATEGORIES THAT FIT

  50. (HELPS WITH SEARCHING)

  51. BOTH APPROACHES AT ONCE

  52. BOTH APPROACHES AT ONCE DESIGN A HIERARCHY BASED ON YOUR

    GOALS, BUT KNOW WHAT CONTENT YOU HAVE
  53. OKAY.

  54. HOW DO I MAKE CATEGORIES?

  55. TWO APPROACHES

  56. TWO APPROACHES • EXACT SCHEMES • AMBIGUOUS SCHEMES

  57. EXACT SCHEMES

  58. DIVIDE INFORMATION INTO WELL-DEFINED & MUTUALLY EXCLUSIVE GROUPS

  59. EXAMPLES: • ALPHABETICAL • CHRONOLOGICAL • GEOGRAPHICAL

  60. None
  61. AMBIGUOUS SCHEMES

  62. DIVIDE INFORMATION INTO CATEGORIES THAT DEFY EXACT DEFINITION

  63. EXAMPLES: • TOPIC • TASK • AUDIENCE

  64. FRUIT VEGETABLE BERRY

  65. None
  66. WHICH SCHEME TO CHOOSE?

  67. ASK

  68. WHAT MAKES SENSE? WHAT HELPS USERS? ASK

  69. OFFER BOTH APPROACHES

  70. EXACT SCHEMES: • TITLE • AUTHOR AMBIGUOUS SCHEME: • SUBJECT

  71. GOT IT.

  72. LET’S ORGANIZE OUR WEBSITE

  73. LET’S ORGANIZE OUR WEBSITE • RESOURCES WITH MARC METADATA •

    MCNAUGHTON BOOKS • SCHOLARLY PUBLICATIONS WITH STANDING ORDERS • ELECTRONIC RESOURCES WE OWN • ELECTRONIC RESOURCES WE SUBSCRIBE TO
  74. LABEL MUCH?

  75. SPEAK THE USERS’ LANGUAGE

  76. DESCRIBE THE CONTENT

  77. BE CONSISTENT

  78. IS THAT IT?

  79. NOT QUITE.

  80. NAVIGATION

  81. EVER BEEN LOST ON A WEBSITE?

  82. THE WEB FEELS LIKE A PLACE

  83. ORGANIZATION IS ABOUT BUILDING ROOMS.

  84. NAVIGATION ADDS DOORS AND WINDOWS

  85. NAVIGATION SYSTEMS OFTEN MIRROR ORGANIZATION SYSTEMS

  86. NAVIGATION SYSTEMS SHOULD MAKE SENSE TO YOUR USERS

  87. USERS ARE ALWAYS ASKING WHERE AM I NOW?

  88. THAT’S A LOT TO REMEMBER.

  89. TOOLS OF THE TRADE

  90. CONTENT INVENTORY KNOW WHAT YOU HAVE

  91. CONTENT INVENTORY KNOW WHAT YOU HAVE CONTENT STRATEGY KNOW WHY

    YOU HAVE IT
  92. ALWAYS KNOW WHY EVERYTHING IS ON YOUR WEBSITE

  93. CARD SORTS

  94. LABEL INDEX CARDS WITH HEADINGS FROM YOUR CONTENT

  95. ASK USERS TO ORGANIZE THEM IN WAYS THAT MAKE SENSE

    TO THEM
  96. 10 MINUTES + 50 CENTS = HOW YOUR USERS THINK

  97. USER INTERVIEWS

  98. JUST ASK.

  99. WHAT DO THEY WANT FROM YOUR SITE? JUST ASK.

  100. PERSONAS & SCENARIOS

  101. PERSONAS

  102. PERSONAS • STAND IN FOR REAL USERS • BASED ON

    INTERVIEWS AND RESEARCH
  103. Courtesy of Usability.gov

  104. SCENARIOS

  105. SCENARIOS • BRING YOUR PERSONAS TO LIFE • SEE HOW

    USER GOALS ARE ACCOMPLISHED
  106. HELPS YOU SEE YOUR WEBSITE THROUGH YOUR USERS’ EYES

  107. BLUEPRINTS

  108. MAP OUT THE ORGANIZATION LABELS NAVIGATION

  109. None
  110. WIREFRAMES

  111. TRANSLATE THE INFORMATION ARCHITECTURE INTO A VISUAL LAYOUT

  112. Wireframe by Will Evans: http://blog.semanticfoundry.com/2009/01/01/shades-of-gray-wireframes-as-thinking-device/

  113. Mockup by Mark Brooks: http://blog.semanticfoundry.com/2009/01/01/shades-of-gray-wireframes-as-thinking-device/

  114. SO...HOW DOES THIS HELP ME?

  115. DO YOU CREATE WEB CONTENT?

  116. DO YOU WANT PEOPLE TO USE IT?

  117. CREATE PERSONAS FOR YOUR TYPICAL USERS

  118. ALWAYS ASK WHAT WOULD MY USERS DO?

  119. RARELY ASK WHAT WOULD I DO?

  120. GET FEEDBACK FROM YOUR USERS

  121. MAKE MISTAJES

  122. MAKE MISTAKES

  123. MAKE MISTAKES GET FEEDBACK

  124. IMPROVE SOMETHING BASED ON FEEDBACK

  125. RINSE. REPEAT.

  126. QUESTIONS?

  127. THANKS. I WRITE ABOUT THIS STUFF A LOT matthewreidsma.com @mreidsma