Techniques and Tools for Information Architects Presented by / Bogo Vatovec Change Management / Knowledge Engineering / Us...
What is Information Architecture? <ul><li>Information Architecture is the process of creating a structure for a body of in...
What Information Architecture is not? <ul><li>Information Architecture is not: </li></ul><ul><ul><li>Project management </...
Key deliverables of the Information Architecture <ul><li>Design document </li></ul><ul><li>1. Strategy </li></ul><ul><li>1...
Key deliverables of the Information Architecture <ul><li>Design document </li></ul><ul><li>1. Strategy </li></ul><ul><li>1...
Define the strategy of the information product <ul><li>Objective:  </li></ul><ul><li>Position the product on a product por...
Key deliverables of the Information Architecture <ul><li>Design document </li></ul><ul><li>1. Strategy </li></ul><ul><li>1...
Define user experience Gather and analyze data <ul><li>Objective:  </li></ul><ul><li>Detail the defined target audience fr...
Define user experience Detail usage scenarios <ul><li>Objective:  </li></ul><ul><li>From the collected data define the des...
Define user experience Detail personas <ul><li>Objective:  </li></ul><ul><li>From the collected data detail the target aud...
Example Persona
Define user experience Detail task flows – use cases <ul><li>Objective:  </li></ul><ul><li>Using scenarios and personas de...
Define user experience Analyze media <ul><li>Objective:  </li></ul><ul><li>Understand media specifics </li></ul><ul><li>An...
Key deliverables of the Information Architecture <ul><li>Design document </li></ul><ul><li>1. Strategy </li></ul><ul><li>1...
Content and functionality Create a content inventory and functional requirements list <ul><li>Objectives:  </li></ul><ul><...
Example Content Inventory tool
Key deliverables of the Information Architecture <ul><li>Design document </li></ul><ul><li>1. Strategy </li></ul><ul><li>1...
Content structure Create the architectural blueprint <ul><li>Objectives:  </li></ul><ul><li>Create the essential structure...
Example: the architectural blueprint
Example: interaction blueprint
Content structure Define global and local navigation <ul><li>Objectives:  </li></ul><ul><li>Define navigational paths and ...
Content structure Define meta-data <ul><li>Objectives:  </li></ul><ul><li>Develop a meta-data structure for identification...
Key deliverables of the Information Architecture <ul><li>Design document </li></ul><ul><li>1. Strategy </li></ul><ul><li>1...
Visual design Create layout blueprints (design grids) <ul><li>Objectives:  </li></ul><ul><li>Design the essential layout f...
Example: Layout blueprints
Where do I learn more? <ul><li>Experience </li></ul><ul><li>Volunteer at nonprofit organizations   </li></ul><ul><li>ASIS...
Thank you! Bogo Vatovec bovacon Boxhagener Str. 111 / 10245 Berlin T +49 30 20078666 / F +49 30 20078661 / office@bovacon....
Upcoming SlideShare
Loading in …5
×

Ia Toolkit

2,377 views

Published on

an essential toolkit for information architects presented by Bogo Vatovec at the WinWriters 2008 conference

Published in: Design, Business, Technology

Ia Toolkit

  1. 1. Techniques and Tools for Information Architects Presented by / Bogo Vatovec Change Management / Knowledge Engineering / User Experience / Interaction Design / Process Engineering
  2. 2. What is Information Architecture? <ul><li>Information Architecture is the process of creating a structure for a body of information or content. It is the foundation upon which a sites user interface is laid upon, and the mold that a site's content is laid in. </li></ul><ul><li>Information architecture is the foundation/a blueprint of the information product upon which all other aspects are built - form, function, metaphor, navigation and interface, interaction, and visual design. </li></ul><ul><li>(Modified from various sources) </li></ul>“ The world can be seen as only connections, nothing else… A piece of information is really only defined by what it’s related to, and how it’s related. There really is little else to meaning. The structure is everything.” — Tim Berners-Lee Weaving the Web
  3. 3. What Information Architecture is not? <ul><li>Information Architecture is not: </li></ul><ul><ul><li>Project management </li></ul></ul><ul><ul><li>Change management </li></ul></ul><ul><ul><li>Content management </li></ul></ul><ul><ul><li>Content writing </li></ul></ul><ul><ul><li>User interface design/Interaction design </li></ul></ul><ul><ul><li>Graphic design </li></ul></ul><ul><li>It has a tight relationship to these disciplines, but it‘s not the same. In a typical project you will need these and other disciplines. </li></ul>
  4. 4. Key deliverables of the Information Architecture <ul><li>Design document </li></ul><ul><li>1. Strategy </li></ul><ul><li>1.1Goals </li></ul><ul><li>1.2 Positioning </li></ul><ul><li>2. User experience </li></ul><ul><li>2.1 Audience analysis </li></ul><ul><ul><li>2.2 Personas and Scenarios </li></ul></ul><ul><ul><li>2.3 Task flows </li></ul></ul><ul><ul><li>2.4 Media analysis </li></ul></ul>Key deliverables of the information architecture are summarized in a „Design Document“. But – the real key deliverable of the information architecture is the final product with a usable information design that enables users to reach their goals. <ul><li>3. Content and functionality </li></ul><ul><ul><li>3.1 Content inventory </li></ul></ul><ul><ul><li>3.2 Functional requirements </li></ul></ul><ul><li>4. Content structure </li></ul><ul><ul><li>4.1 Architectural blueprint </li></ul></ul><ul><ul><li>4.2 Global and local navigation </li></ul></ul><ul><ul><li>4.3 Metadata </li></ul></ul><ul><li>5. Visual design </li></ul><ul><ul><li>5.1 Layout blueprints </li></ul></ul><ul><ul><li>5.2 Design sketches </li></ul></ul><ul><ul><li>5.3 Visual Mock-ups </li></ul></ul><ul><li>6. Prototypes </li></ul>
  5. 5. Key deliverables of the Information Architecture <ul><li>Design document </li></ul><ul><li>1. Strategy </li></ul><ul><li>1.1Goals </li></ul><ul><li>1.2 Positioning </li></ul><ul><li>2. User experience </li></ul><ul><li>2.1 Audience analysis </li></ul><ul><ul><li>2.2 Personas and Scenarios </li></ul></ul><ul><ul><li>2.3 Task flows </li></ul></ul><ul><ul><li>2.4 Media analysis </li></ul></ul><ul><li>Content and functionality </li></ul><ul><ul><li>3.1 Content inventory </li></ul></ul><ul><ul><li>3.2 Functional requirements </li></ul></ul><ul><li>4. Content structure </li></ul><ul><ul><li>4.1 Architectural blueprint </li></ul></ul><ul><ul><li>4.2 Global and local navigation </li></ul></ul><ul><ul><li>4.3 Metadata </li></ul></ul><ul><li>5. Visual design </li></ul><ul><ul><li>5.1 Layout blueprints </li></ul></ul><ul><ul><li>5.2 Design sketches </li></ul></ul><ul><ul><li>5.3 Visual Mock-ups </li></ul></ul><ul><li>6. Prototypes </li></ul>
  6. 6. Define the strategy of the information product <ul><li>Objective: </li></ul><ul><li>Position the product on a product portfolio. </li></ul><ul><li>Define the reasons for existence of your information product. </li></ul><ul><li>Define the audience </li></ul><ul><li>Define the positioning of the product on the market (competitors, other channels) </li></ul><ul><li>Define the relationships to other related information products </li></ul><ul><li>During this process, answer questions like: </li></ul><ul><li>Is my information product really needed? </li></ul><ul><li>Who should want and have to use it? </li></ul><ul><li>What should they know at the end? </li></ul><ul><li>How will you know that the information product met the goals? </li></ul>
  7. 7. Key deliverables of the Information Architecture <ul><li>Design document </li></ul><ul><li>1. Strategy </li></ul><ul><li>1.1Goals </li></ul><ul><li>1.2 Positioning </li></ul><ul><li>2. User experience </li></ul><ul><li>2.1 Audience analysis </li></ul><ul><ul><li>2.2 Personas and Scenarios </li></ul></ul><ul><ul><li>2.3 Task flows </li></ul></ul><ul><ul><li>2.4 Media analysis </li></ul></ul><ul><li>Content and functionality </li></ul><ul><ul><li>3.1 Content inventory </li></ul></ul><ul><ul><li>3.2 Functional requirements </li></ul></ul><ul><li>4. Content structure </li></ul><ul><ul><li>4.1 Architectural blueprint </li></ul></ul><ul><ul><li>4.2 Global and local navigation </li></ul></ul><ul><ul><li>4.3 Metadata </li></ul></ul><ul><li>5. Visual design </li></ul><ul><ul><li>5.1 Layout blueprints </li></ul></ul><ul><ul><li>5.2 Design sketches </li></ul></ul><ul><ul><li>5.3 Visual Mock-ups </li></ul></ul><ul><li>6. Prototypes </li></ul>
  8. 8. Define user experience Gather and analyze data <ul><li>Objective: </li></ul><ul><li>Detail the defined target audience from the strategy part and define how they will use your information product. </li></ul><ul><li>Use the defined target audience as a basis. </li></ul><ul><li>Gather data about the target audience. </li></ul><ul><ul><li>You are looking for data on </li></ul></ul><ul><ul><ul><li>How does the target audience performing a task now without your product? </li></ul></ul></ul><ul><ul><ul><li>Which information do they need or want? </li></ul></ul></ul><ul><ul><ul><li>Which functionality do they need or is needed to implement specific content? </li></ul></ul></ul><ul><ul><li>Use the following methods </li></ul></ul><ul><ul><ul><li>Brainstorming </li></ul></ul></ul><ul><ul><ul><li>Interviews </li></ul></ul></ul><ul><ul><ul><li>Field research </li></ul></ul></ul><ul><li>Re-assess the defined target audience. Any changes? </li></ul>
  9. 9. Define user experience Detail usage scenarios <ul><li>Objective: </li></ul><ul><li>From the collected data define the desired usage scenarios for your product </li></ul><ul><li>a usage scenario describes how the user should use your product. </li></ul><ul><li>for the supporting information products it is recommended to integrate the scenarios with the scenarios of main product. </li></ul><ul><li>A scenario is typically narrative and can be supported through pictures, flows or comics. </li></ul><ul><li>Hints: </li></ul><ul><li>Don‘t get to technical, be creative. </li></ul><ul><li>Don‘t try to describe all exceptions and variations. </li></ul><ul><li>Verify scenarios with the development team. </li></ul><ul><li>A scenario can be compared to use cases but is not as formal. </li></ul>
  10. 10. Define user experience Detail personas <ul><li>Objective: </li></ul><ul><li>From the collected data detail the target audience through personas. </li></ul><ul><li>Personas illustrates (personifies) a specific target group and improve understanding of the target groups. </li></ul><ul><li>They are a great tool to bring various groups together (marketing, developers, technical writers, usability) </li></ul><ul><li>Hints: </li></ul><ul><li>Base personas on available data. </li></ul><ul><li>Use personas as a communication tool and as a functional/content check. </li></ul>
  11. 11. Example Persona
  12. 12. Define user experience Detail task flows – use cases <ul><li>Objective: </li></ul><ul><li>Using scenarios and personas develop detailed task flows. </li></ul><ul><li>Describe exact flows how the user will use the product. </li></ul><ul><li>You can use narrative descriptions or flowcharts. Flowcharts tend to reduce ambiguity. </li></ul><ul><li>Hints: </li></ul><ul><li>This activity is often done by user interface designers or system analysts. </li></ul><ul><li>This activity compares to detailing use cases with all the individual steps. </li></ul><ul><li>Brainstorm the detailed tasks in a team. </li></ul><ul><li>Use whiteboards, stick-it notes, or other low-tech tools if necessary. </li></ul><ul><li>Depending on the iteration you are in, you may need to include all the variations and exceptions to the flow. </li></ul>
  13. 13. Define user experience Analyze media <ul><li>Objective: </li></ul><ul><li>Understand media specifics </li></ul><ul><li>Analyze and understand capabilities and limitations of the media used for each information product. </li></ul><ul><li>Try to use synergies between various media and information products. </li></ul>
  14. 14. Key deliverables of the Information Architecture <ul><li>Design document </li></ul><ul><li>1. Strategy </li></ul><ul><li>1.1Goals </li></ul><ul><li>1.2 Positioning </li></ul><ul><li>2. User experience </li></ul><ul><li>2.1 Audience analysis </li></ul><ul><ul><li>2.2 Personas and Scenarios </li></ul></ul><ul><ul><li>2.3 Task flows </li></ul></ul><ul><ul><li>2.4 Media analysis </li></ul></ul><ul><li>3. Content and functionality </li></ul><ul><ul><li>3.1 Content inventory </li></ul></ul><ul><ul><li>3.2 Functional requirements </li></ul></ul><ul><li>4. Content structure </li></ul><ul><ul><li>4.1 Architectural blueprint </li></ul></ul><ul><ul><li>4.2 Global and local navigation </li></ul></ul><ul><ul><li>4.3 Metadata </li></ul></ul><ul><li>5. Visual design </li></ul><ul><ul><li>5.1 Layout blueprints </li></ul></ul><ul><ul><li>5.2 Design sketches </li></ul></ul><ul><ul><li>5.3 Visual Mock-ups </li></ul></ul><ul><li>6. Prototypes </li></ul>
  15. 15. Content and functionality Create a content inventory and functional requirements list <ul><li>Objectives: </li></ul><ul><li>Analyze existing content and functionality for re-use. </li></ul><ul><li>Identify new content and functionality from scenarios, personas and task analysis. </li></ul><ul><li>Collect and assess the existing content (content inventory). </li></ul><ul><li>Identify content requirements from scenarios, personas and task analysis. </li></ul><ul><li>Evaluate existing functionality. </li></ul><ul><li>Identify functional requirements from scenarios, personas and task analysis. </li></ul><ul><li>Structure content to content groups/categories. </li></ul><ul><li>Hints: </li></ul><ul><li>Do not underestimate the effort behind this task. It can easily be the most complex task in the project. </li></ul><ul><li>You may need to use or develop tools to do this. </li></ul>
  16. 16. Example Content Inventory tool
  17. 17. Key deliverables of the Information Architecture <ul><li>Design document </li></ul><ul><li>1. Strategy </li></ul><ul><li>1.1Goals </li></ul><ul><li>1.2 Positioning </li></ul><ul><li>2. User experience </li></ul><ul><li>2.1 Audience analysis </li></ul><ul><ul><li>2.2 Personas and Scenarios </li></ul></ul><ul><ul><li>2.3 Task flows </li></ul></ul><ul><ul><li>2.4 Media analysis </li></ul></ul><ul><li>3. Content and functionality </li></ul><ul><ul><li>3.1 Content inventory </li></ul></ul><ul><ul><li>3.2 Functional requirements </li></ul></ul><ul><li>4. Content structure </li></ul><ul><ul><li>4.1 Architectural blueprint </li></ul></ul><ul><ul><li>4.2 Global and local navigation </li></ul></ul><ul><ul><li>4.3 Metadata </li></ul></ul><ul><li>5. Visual design </li></ul><ul><ul><li>5.1 Layout blueprints </li></ul></ul><ul><ul><li>5.2 Design sketches </li></ul></ul><ul><ul><li>5.3 Visual Mock-ups </li></ul></ul><ul><li>6. Prototypes </li></ul>
  18. 18. Content structure Create the architectural blueprint <ul><li>Objectives: </li></ul><ul><li>Create the essential structure of the information product – architectural blueprint. </li></ul><ul><li>Create a hierarchical structure of information (TOC, sitemap) </li></ul><ul><li>Identify various content objects using your content inventory. Identify and model their attributes. For example: task procedure, concept description, news, generic article, biography. </li></ul><ul><li>Use techniques like card sorting and affinity diagrams. </li></ul><ul><li>Hints: </li></ul><ul><li>Use any tools you feel comfortable with. Flipcharts and whiteboards, Visio, PowerPoint, MindMaps, … </li></ul><ul><li>You may need to create two blueprints: one purely hierarchical, one showing interactions/relationships. </li></ul><ul><li>Expand your visual vocabulary as needed to show the information of your concern, for example, protected and non-protected content objects, … </li></ul>
  19. 19. Example: the architectural blueprint
  20. 20. Example: interaction blueprint
  21. 21. Content structure Define global and local navigation <ul><li>Objectives: </li></ul><ul><li>Define navigational paths and navigational help elements for the information product. </li></ul><ul><li>Global navigation are navigational elements that are always available wherever the user is in the information product. For example, main navigation, chapter heading, page number, … </li></ul><ul><li>Local navigation is content object specific and is only used in a local context. For example, references in an index section, related links, … </li></ul><ul><li>Hints: </li></ul><ul><li>Global navigation must give the user a clear picture of where they are related to other main content areas. </li></ul><ul><li>Local navigation expands the navigation capabilities with „see also“ and „similar topics“ concepts. This is where meta-data can play a significant role. </li></ul>
  22. 22. Content structure Define meta-data <ul><li>Objectives: </li></ul><ul><li>Develop a meta-data structure for identification of content objects. </li></ul><ul><li>Meta-data structure depends largely on medium used and can be a simple index or a complex meta-tags structure for database search. </li></ul><ul><li>Decide whether you want fixed keywords meta-data structure and/or a flexible user defined structure (folksonomy.) </li></ul><ul><li>Note that meta-data is not so important from the search aspect, but from the aspect of creating relationships between content objects. </li></ul><ul><li>Hints: </li></ul><ul><li>Consider you audience. If they are regular users of sites like flickr, they may be inclined to do meta-tagging on their own. </li></ul><ul><li>Creating an fixed meta-data structure is large job and it makes content management complex. </li></ul>
  23. 23. Key deliverables of the Information Architecture <ul><li>Design document </li></ul><ul><li>1. Strategy </li></ul><ul><li>1.1Goals </li></ul><ul><li>1.2 Positioning </li></ul><ul><li>2. User experience </li></ul><ul><li>2.1 Audience analysis </li></ul><ul><ul><li>2.2 Personas and Scenarios </li></ul></ul><ul><ul><li>2.3 Task flows </li></ul></ul><ul><ul><li>2.4 Media analysis </li></ul></ul><ul><li>Content and functionality </li></ul><ul><ul><li>3.1 Content inventory </li></ul></ul><ul><ul><li>3.2 Functional requirements </li></ul></ul><ul><li>4. Content structure </li></ul><ul><ul><li>4.1 Architectural blueprint </li></ul></ul><ul><ul><li>4.2 Global and local navigation </li></ul></ul><ul><ul><li>4.3 Metadata </li></ul></ul><ul><li>5. Visual design </li></ul><ul><ul><li>5.1 Layout blueprints </li></ul></ul><ul><ul><li>5.2 Design sketches </li></ul></ul><ul><ul><li>5.3 Visual Mock-ups </li></ul></ul><ul><li>6. Prototypes </li></ul>
  24. 24. Visual design Create layout blueprints (design grids) <ul><li>Objectives: </li></ul><ul><li>Design the essential layout for various content objects. </li></ul><ul><li>Design visual page layout for various basic content groups/objects (task description, reference material, news, …). </li></ul><ul><li>Consider placement and behavior of the global navigation. </li></ul><ul><li>Consider various attributes of the content object (title, sub-title, summary, text, related links, …) </li></ul><ul><li>Hints: </li></ul><ul><li>Do not detail visual design. We are still creating a functional design blueprint. </li></ul>
  25. 25. Example: Layout blueprints
  26. 26. Where do I learn more? <ul><li>Experience </li></ul><ul><li>Volunteer at nonprofit organizations  </li></ul><ul><li>ASIST - American Society for Information Science & Technology (www.asist.org) </li></ul><ul><li>STC Information Architecture & Design SIG (ww.stc.org) </li></ul><ul><li>Apprenticeship </li></ul><ul><li>Work with an expert and find a mentor </li></ul><ul><li>Formal education </li></ul><ul><li>Few to none available. It‘s a new field at a crossroad. </li></ul><ul><li>Seminars </li></ul><ul><li>Universities, conferences, consulting firms </li></ul><ul><li>Conferences </li></ul><ul><li>Literature </li></ul><ul><li>Lots of books, reports, and results available </li></ul><ul><li>Rosenfeld, Morville: Information Architecture for the WWW </li></ul><ul><li>Online resources: blogs, websites </li></ul>
  27. 27. Thank you! Bogo Vatovec bovacon Boxhagener Str. 111 / 10245 Berlin T +49 30 20078666 / F +49 30 20078661 / office@bovacon.com / www.bovacon.com © 2007, Bogo Vatovec, bovacon

×