IA for Drupal <ul><li>Vanessa Turke </li></ul><ul><li>Solution Architect </li></ul><ul><li>ImageX Media </li></ul>
what is IA? Information Architecture (as defined by the IA Institute) “ The art and science of organizing and labeling web...
what is the value of IA? <ul><ul><li>The cost of finding information </li></ul></ul><ul><ul><li>The cost of not finding in...
IA components <ul><ul><li>Organization systems - How we categorize information </li></ul></ul><ul><ul><li>Labeling systems...
process overview <ul><ul><li>Identify the project needs </li></ul></ul><ul><ul><li>Conduct research </li></ul></ul><ul><ul...
identify project needs <ul><ul><li>Type of Organization </li></ul></ul><ul><ul><li>Type of Website </li></ul></ul><ul><ul>...
organization type <ul><ul><li>Company, Non-profit, etc. </li></ul></ul><ul><ul><li>Philosophy </li></ul></ul><ul><ul><li>P...
website type <ul><ul><li>Brand Presence </li></ul></ul><ul><ul><li>Marketing Campaign </li></ul></ul><ul><ul><li>Content S...
audience <ul><ul><li>Customers/Clients/Members </li></ul></ul><ul><ul><li>Employees/Staff/Internal </li></ul></ul><ul><ul>...
conducting research <ul><ul><li>Website Metrics / Analytics </li></ul></ul><ul><ul><li>Inventory of all site content </li>...
user profiles/personas <ul><ul><li>Fictitious characters created to represent the different user types within a targeted d...
stories for personas <ul><ul><li>Springboard stories: needs and goals </li></ul></ul><ul><ul><li>Points of pain' stories: ...
story goals <ul><ul><li>Establish a goal and context -Why is the persona using the product now. What will make this intera...
creating a project strategy <ul><li>“ There’s more to it than wireframes, logos, sitemaps, or stationary systems. A good b...
creating a project strategy <ul><ul><li>What is the business goal of the website? </li></ul></ul><ul><ul><li>What is the m...
information architecture approaches <ul><ul><li>Architecture mirroring real systems </li></ul></ul><ul><ul><li>Need recogn...
designing navigational systems <ul><ul><li>What is this page about? </li></ul></ul><ul><ul><li>What site is this? </li></u...
visitors information needs <ul><ul><li>How do I get around this site?  </li></ul></ul><ul><ul><li>What’s important and uni...
assume nothing <ul><li>“ ...Let me reassure you that way more of your website visitors just fundamentally don’t ‘get it’ t...
assume nothing <ul><li>Not long ago, Google asked people in New York’s Times Square if they could describe what a ‘browser...
eschew obfuscation (make navigation titles easy) <ul><li>Research industry terms </li></ul><ul><li>Highlight every industr...
website navigation models <ul><ul><li>List of contents </li></ul></ul><ul><ul><li>Breadcrumb trail </li></ul></ul><ul><ul>...
sitemaps
understanding ways users approach a task <ul><ul><li>Known-item </li></ul></ul><ul><ul><li>Exploratory </li></ul></ul><ul>...
known item <ul><ul><li>Searchbox </li></ul></ul><ul><ul><li>A-Z indexes of terms </li></ul></ul><ul><ul><li>Quick links </...
exploratory <ul><ul><li>Navigation </li></ul></ul><ul><ul><li>Related information </li></ul></ul><ul><ul><li>Contextual li...
don’t know what you need to know <ul><ul><li>Straightforward answers </li></ul></ul><ul><ul><li>Summaries </li></ul></ul><...
re-finding <ul><ul><li>Wishlists (amazon.com) </li></ul></ul><ul><ul><li>Bookmarking </li></ul></ul><ul><ul><li>Quick link...
consulting analytics
organizing analytics information http://www.alistapart.com/articles/taking-the-guesswork-out-of-design/
create attention map to prioritize page elements <ul><ul><li>http://webdesignfromscratch.com/web-design/attention-map.php ...
sketching out initial layout <ul><ul><li>http://37signals.com/svn/posts/466-sketching-with-a-sharpie </li></ul></ul>
organizing, classifying & labeling <ul><li>Identify content types </li></ul><ul><li>Identify attributes & values </li></ul...
(Presentation Slide Content Type) title title title <ul><li>Body </li></ul><ul><li>Resource </li></ul>
content types documented
roles and permissions documented
 
The Nine Pillars of Sucessful Web Teams <ul><li>User Research* </li></ul><ul><li>Site Strategy* </li></ul><ul><li>Technolo...
thank you! <ul><li>Vanessa Turke </li></ul><ul><li>http://www.imagexmedia.com/about/team/vanessa-turke </li></ul><ul><li>P...
Upcoming SlideShare
Loading in...5
×

Information Architecture for Drupal

4,431

Published on

Solution Architect, Vanessa Turke's presentation for Drupalcamp in Victoria BC, September 2009 Outlining Information Architecture for Drupal.

Published in: Technology, Business

Information Architecture for Drupal

  1. 1. IA for Drupal <ul><li>Vanessa Turke </li></ul><ul><li>Solution Architect </li></ul><ul><li>ImageX Media </li></ul>
  2. 2. what is IA? Information Architecture (as defined by the IA Institute) “ The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability.”
  3. 3. what is the value of IA? <ul><ul><li>The cost of finding information </li></ul></ul><ul><ul><li>The cost of not finding information </li></ul></ul><ul><ul><li>The cost of using information </li></ul></ul><ul><ul><li>The cost of building and managing information systems </li></ul></ul><ul><ul><li>The value of educating employees and customers </li></ul></ul><ul><ul><li>The value of creating knowledge networks </li></ul></ul><ul><ul><li>The value of strengthening brand </li></ul></ul><ul><ul><li>The value of fostering innovation </li></ul></ul><ul><ul><li>http://iainstitute.org/en/about/our_mission.php </li></ul></ul><ul><ul><li>Carolyn Chandler & Unger, Russ. Project Guide to UX Design, A: For user experience designers in the field or in the making: New Riders, the Voices That Matter series, 2009 </li></ul></ul>
  4. 4. IA components <ul><ul><li>Organization systems - How we categorize information </li></ul></ul><ul><ul><li>Labeling systems - How we represent information </li></ul></ul><ul><ul><li>Navigation systems - How we move through information </li></ul></ul><ul><ul><li>Searching systems - How we search information </li></ul></ul><ul><ul><li>Peter Morville, Louis Rosenfeld. Information Architecture for the World Wide Web O'Reilly, 2006 </li></ul></ul><ul><ul><li>Carolyn Chandler & Unger, Russ. Project Guide to UX Design, A: For user experience designers in the field or in the making: New Riders, the Voices That Matter series, 2009 </li></ul></ul>
  5. 5. process overview <ul><ul><li>Identify the project needs </li></ul></ul><ul><ul><li>Conduct research </li></ul></ul><ul><ul><li>Create project strategy </li></ul></ul><ul><ul><li>Design navigation system </li></ul></ul><ul><ul><li>Organize, classify & label </li></ul></ul><ul><ul><li>Create wireframe </li></ul></ul>
  6. 6. identify project needs <ul><ul><li>Type of Organization </li></ul></ul><ul><ul><li>Type of Website </li></ul></ul><ul><ul><li>Type of Audience </li></ul></ul><ul><ul><li>Carolyn Chandler & Unger, Russ. Project Guide to UX Design, A: For user experience designers in the field or in the making: New Riders, the Voices That Matter series, 2009 </li></ul></ul>
  7. 7. organization type <ul><ul><li>Company, Non-profit, etc. </li></ul></ul><ul><ul><li>Philosophy </li></ul></ul><ul><ul><li>Process </li></ul></ul><ul><ul><li>Role of website in their business plan </li></ul></ul><ul><ul><li>Carolyn Chandler & Unger, Russ. Project Guide to UX Design, A: For user experience designers in the field or in the making: New Riders, the Voices That Matter series, 2009 </li></ul></ul>
  8. 8. website type <ul><ul><li>Brand Presence </li></ul></ul><ul><ul><li>Marketing Campaign </li></ul></ul><ul><ul><li>Content Source </li></ul></ul><ul><ul><li>Task-based application </li></ul></ul><ul><ul><li>E-Commerce (combines 1-4) </li></ul></ul><ul><ul><li>E-Learning (combines 3 & 4) </li></ul></ul><ul><ul><li>Social Network (can combine 1,2,3 & 4) </li></ul></ul><ul><ul><li>Carolyn Chandler & Unger, Russ. Project Guide to UX Design, A: For user experience designers in the field or in the making: New Riders, the Voices That Matter series, 2009 </li></ul></ul>
  9. 9. audience <ul><ul><li>Customers/Clients/Members </li></ul></ul><ul><ul><li>Employees/Staff/Internal </li></ul></ul><ul><ul><li>Competitors </li></ul></ul><ul><ul><li>??? (find out) </li></ul></ul><ul><ul><li>Carolyn Chandler & Unger, Russ. Project Guide to UX Design, A: For user experience designers in the field or in the making: New Riders, the Voices That Matter series, 2009 </li></ul></ul>
  10. 10. conducting research <ul><ul><li>Website Metrics / Analytics </li></ul></ul><ul><ul><li>Inventory of all site content </li></ul></ul><ul><ul><li>Stakeholder interviews </li></ul></ul><ul><ul><li>User testing </li></ul></ul><ul><ul><li>Environmental scan </li></ul></ul><ul><ul><li>http://www.slideshare.net/rhanna/preparing-for-successful-content-management </li></ul></ul>
  11. 11. user profiles/personas <ul><ul><li>Fictitious characters created to represent the different user types within a targeted demographic that might use a site or product. </li></ul></ul><ul><ul><li>Personas need stories to make them complete </li></ul></ul><ul><ul><li>Focus on storytelling, and don’t try to represent complete task analysis </li></ul></ul><ul><ul><ul><ul><ul><li>http://www.boxesandarrows.com/view/personas-and-the </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>http://en.wikipedia.org/wiki/Persona_%28marketing%29 </li></ul></ul></ul></ul></ul>
  12. 12. stories for personas <ul><ul><li>Springboard stories: needs and goals </li></ul></ul><ul><ul><li>Points of pain' stories: barriers to overcome </li></ul></ul><ul><ul><li>Key scenarios: context for actions </li></ul></ul><ul><ul><li>Narrative scenarios: what happens and why </li></ul></ul><ul><ul><li>Design Maps: perceptions, actions and barriers </li></ul></ul><ul><ul><li>Flow diagrams: actions and decisions </li></ul></ul><ul><ul><li>Use cases: detailed sequences of actions </li></ul></ul><ul><ul><li>http://www.wqusability.com/articles/personas_storytelling.html </li></ul></ul>
  13. 13. story goals <ul><ul><li>Establish a goal and context -Why is the persona using the product now. What will make this interaction successful? </li></ul></ul><ul><ul><li>Describe the interaction - Stay at a high level and avoid detailed descriptions of the interface. </li></ul></ul><ul><ul><li>End with the result - What happens as a result of this interaction? What made it a success? </li></ul></ul><ul><ul><li>http://www.wqusability.com/articles/personas_storytelling.html </li></ul></ul>
  14. 14. creating a project strategy <ul><li>“ There’s more to it than wireframes, logos, sitemaps, or stationary systems. A good brand is resultant upon aligning an organization’s values realistically and building something around this that resonates and holds value for potential customers” </li></ul><ul><li>smashLAB's, Eric Karjaluoto </li></ul><ul><ul><li>http://www.slideshare.net/rhanna/preparing-for-successful-content-management </li></ul></ul>
  15. 15. creating a project strategy <ul><ul><li>What is the business goal of the website? </li></ul></ul><ul><ul><li>What is the mission critical task for a user to complete? </li></ul></ul><ul><ul><li>http://www.slideshare.net/rhanna/preparing-for-successful-content-management </li></ul></ul>
  16. 16. information architecture approaches <ul><ul><li>Architecture mirroring real systems </li></ul></ul><ul><ul><li>Need recognition </li></ul></ul><ul><ul><li>Self selection </li></ul></ul><ul><ul><li>Multi-dimensional Architecture </li></ul></ul><ul><ul><li>http://webdesignfromscratch.com/website-architecture/information-architecture.php </li></ul></ul>
  17. 17. designing navigational systems <ul><ul><li>What is this page about? </li></ul></ul><ul><ul><li>What site is this? </li></ul></ul><ul><ul><li>What are the major sections of this site? </li></ul></ul><ul><ul><li>What major section is this page in? </li></ul></ul><ul><ul><li>What is &quot;up&quot; 1 level from here? </li></ul></ul><ul><ul><li>How do I get to the home page of this site? </li></ul></ul><ul><ul><li>How do I get to the top of this section of the site? </li></ul></ul><ul><ul><li>What does each group of links represent? </li></ul></ul><ul><ul><li>http://instone.org/navstress </li></ul></ul>
  18. 18. visitors information needs <ul><ul><li>How do I get around this site? </li></ul></ul><ul><ul><li>What’s important and unique about this organization? </li></ul></ul><ul><ul><li>What’s available on this site? </li></ul></ul><ul><ul><li>What’s happening there? </li></ul></ul><ul><ul><li>Do they want my opinion about their site? </li></ul></ul><ul><ul><li>How can I contact a human? </li></ul></ul><ul><ul><li>Any mission critical information for primary users </li></ul></ul><ul><ul><li>Ash, Tim. Landing Page Optimization, The Definitive Guide to Testing and Tuning for Conversions: Sybex, Wiley Publishing, Inc. 2008 </li></ul></ul><ul><ul><li>Peter Morville, Louis Rosenfeld. Information Architecture for the World Wide Web O'Reilly, 2006 </li></ul></ul>
  19. 19. assume nothing <ul><li>“ ...Let me reassure you that way more of your website visitors just fundamentally don’t ‘get it’ than you’d ever suspect.” </li></ul><ul><li>Jeff Sexton, GrokDotCom </li></ul>
  20. 20. assume nothing <ul><li>Not long ago, Google asked people in New York’s Times Square if they could describe what a ‘browser’ was... </li></ul><ul><li>http://www.youtube.com/watch?v=o4MwTvtyrUQ </li></ul>
  21. 21. eschew obfuscation (make navigation titles easy) <ul><li>Research industry terms </li></ul><ul><li>Highlight every industry term, phrase, or concept in your site content </li></ul><ul><li>Interview random people on the street about them </li></ul><ul><li>Ask repeated ‘why’ questions regarding your industry terms and concepts </li></ul><ul><li>Come up with answers a 10-year old would understand </li></ul><ul><li>http://www.grokdotcom.com/2009/08/07/im-not-an-idiot-but-i-play-one-on-online-and-so-should-you/ </li></ul>
  22. 22. website navigation models <ul><ul><li>List of contents </li></ul></ul><ul><ul><li>Breadcrumb trail </li></ul></ul><ul><ul><li>Horizontal top bar </li></ul></ul><ul><ul><li>Tabs </li></ul></ul><ul><ul><li>2-level top (bar or tabs) </li></ul></ul><ul><ul><li>Top and side bars </li></ul></ul><ul><ul><li>Buttons bar with revealed drop-down </li></ul></ul><ul><ul><li>Multiple-level tree nav </li></ul></ul><ul><ul><li>Paging </li></ul></ul><ul><ul><li>http://webdesignfromscratch.com/website-architecture/navigation-models.php </li></ul></ul>
  23. 23. sitemaps
  24. 24. understanding ways users approach a task <ul><ul><li>Known-item </li></ul></ul><ul><ul><li>Exploratory </li></ul></ul><ul><ul><li>Don’t know what you need to know </li></ul></ul><ul><ul><li>Re-finding </li></ul></ul><ul><ul><li>http://www.boxesandarrows.com/view/four_modes_of_seeking_information_and_how_to_design_for_them </li></ul></ul>
  25. 25. known item <ul><ul><li>Searchbox </li></ul></ul><ul><ul><li>A-Z indexes of terms </li></ul></ul><ul><ul><li>Quick links </li></ul></ul><ul><ul><li>Navigation </li></ul></ul>
  26. 26. exploratory <ul><ul><li>Navigation </li></ul></ul><ul><ul><li>Related information </li></ul></ul><ul><ul><li>Contextual links </li></ul></ul><ul><ul><li>Search </li></ul></ul>
  27. 27. don’t know what you need to know <ul><ul><li>Straightforward answers </li></ul></ul><ul><ul><li>Summaries </li></ul></ul><ul><ul><li>Outlines of Services </li></ul></ul><ul><ul><li>List of latest news, articles, blogs </li></ul></ul><ul><ul><li>FAQs </li></ul></ul><ul><ul><li>Related/contextual links in content body </li></ul></ul>
  28. 28. re-finding <ul><ul><li>Wishlists (amazon.com) </li></ul></ul><ul><ul><li>Bookmarking </li></ul></ul><ul><ul><li>Quick links </li></ul></ul><ul><ul><li>User-based </li></ul></ul>
  29. 29. consulting analytics
  30. 30. organizing analytics information http://www.alistapart.com/articles/taking-the-guesswork-out-of-design/
  31. 31. create attention map to prioritize page elements <ul><ul><li>http://webdesignfromscratch.com/web-design/attention-map.php </li></ul></ul><ul><ul><li>http://www.alistapart.com/articles/taking-the-guesswork-out-of-design/ </li></ul></ul>
  32. 32. sketching out initial layout <ul><ul><li>http://37signals.com/svn/posts/466-sketching-with-a-sharpie </li></ul></ul>
  33. 33. organizing, classifying & labeling <ul><li>Identify content types </li></ul><ul><li>Identify attributes & values </li></ul><ul><li>Identify relationships </li></ul><ul><li>Identify terms & vocabulary </li></ul><ul><li>http://www.agiledata.org/essays/dataModeling101.html </li></ul>
  34. 34. (Presentation Slide Content Type) title title title <ul><li>Body </li></ul><ul><li>Resource </li></ul>
  35. 35. content types documented
  36. 36. roles and permissions documented
  37. 38. The Nine Pillars of Sucessful Web Teams <ul><li>User Research* </li></ul><ul><li>Site Strategy* </li></ul><ul><li>Technology Strategy </li></ul><ul><li>Content Strategy* </li></ul><ul><li>Abstract Design* </li></ul><ul><li>Technology Implementation </li></ul><ul><li>Content Production </li></ul><ul><li>Concrete Design </li></ul><ul><li>Project Management </li></ul><ul><li>http://www.adaptivepath.com/ideas/essays/archives/000242.php </li></ul>
  38. 39. thank you! <ul><li>Vanessa Turke </li></ul><ul><li>http://www.imagexmedia.com/about/team/vanessa-turke </li></ul><ul><li>Presentation Resources: </li></ul><ul><li>http://www.vanessaturke.net/ia-ux </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×