Techniques and Tools for Information Architects Presented by / Bogo Vatovec Change Management / Knowledge Engineering / User Experience / Interaction Design / Process Engineering

What is Information Architecture? 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. 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. (Modified from various sources) “ 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

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.

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.

(Modified from various sources)

What Information Architecture is not? Information Architecture is not: Project management Change management Content management Content writing User interface design/Interaction design Graphic design 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.

Information Architecture is not:

Project management

Change management

Content management

Content writing

User interface design/Interaction design

Graphic design

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.

Key deliverables of the Information Architecture Design document 1. Strategy 1.1Goals 1.2 Positioning 2. User experience 2.1 Audience analysis 2.2 Personas and Scenarios 2.3 Task flows 2.4 Media analysis 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. 3. Content and functionality 3.1 Content inventory 3.2 Functional requirements 4. Content structure 4.1 Architectural blueprint 4.2 Global and local navigation 4.3 Metadata 5. Visual design 5.1 Layout blueprints 5.2 Design sketches 5.3 Visual Mock-ups 6. Prototypes

Design document

1. Strategy

1.1Goals

1.2 Positioning

2. User experience

2.1 Audience analysis

2.2 Personas and Scenarios

2.3 Task flows

2.4 Media analysis

3. Content and functionality

3.1 Content inventory

3.2 Functional requirements

4. Content structure

4.1 Architectural blueprint

4.2 Global and local navigation

4.3 Metadata

5. Visual design

5.1 Layout blueprints

5.2 Design sketches

5.3 Visual Mock-ups

6. Prototypes

Key deliverables of the Information Architecture Design document 1. Strategy 1.1Goals 1.2 Positioning 2. User experience 2.1 Audience analysis 2.2 Personas and Scenarios 2.3 Task flows 2.4 Media analysis Content and functionality 3.1 Content inventory 3.2 Functional requirements 4. Content structure 4.1 Architectural blueprint 4.2 Global and local navigation 4.3 Metadata 5. Visual design 5.1 Layout blueprints 5.2 Design sketches 5.3 Visual Mock-ups 6. Prototypes

Design document

1. Strategy

1.1Goals

1.2 Positioning

2. User experience

2.1 Audience analysis

2.2 Personas and Scenarios

2.3 Task flows

2.4 Media analysis

Content and functionality

3.1 Content inventory

3.2 Functional requirements

4. Content structure

4.1 Architectural blueprint

4.2 Global and local navigation

4.3 Metadata

5. Visual design

5.1 Layout blueprints

5.2 Design sketches

5.3 Visual Mock-ups

6. Prototypes

Define the strategy of the information product Objective: Position the product on a product portfolio. Define the reasons for existence of your information product. Define the audience Define the positioning of the product on the market (competitors, other channels) Define the relationships to other related information products During this process, answer questions like: Is my information product really needed? Who should want and have to use it? What should they know at the end? How will you know that the information product met the goals?

Objective:

Position the product on a product portfolio.

Define the reasons for existence of your information product.

Define the audience

Define the positioning of the product on the market (competitors, other channels)

Define the relationships to other related information products

During this process, answer questions like:

Is my information product really needed?

Who should want and have to use it?

What should they know at the end?

How will you know that the information product met the goals?

Key deliverables of the Information Architecture Design document 1. Strategy 1.1Goals 1.2 Positioning 2. User experience 2.1 Audience analysis 2.2 Personas and Scenarios 2.3 Task flows 2.4 Media analysis Content and functionality 3.1 Content inventory 3.2 Functional requirements 4. Content structure 4.1 Architectural blueprint 4.2 Global and local navigation 4.3 Metadata 5. Visual design 5.1 Layout blueprints 5.2 Design sketches 5.3 Visual Mock-ups 6. Prototypes

Design document

1. Strategy

1.1Goals

1.2 Positioning

2. User experience

2.1 Audience analysis

2.2 Personas and Scenarios

2.3 Task flows

2.4 Media analysis

Content and functionality

3.1 Content inventory

3.2 Functional requirements

4. Content structure

4.1 Architectural blueprint

4.2 Global and local navigation

4.3 Metadata

5. Visual design

5.1 Layout blueprints

5.2 Design sketches

5.3 Visual Mock-ups

6. Prototypes

Define user experience Gather and analyze data Objective: Detail the defined target audience from the strategy part and define how they will use your information product. Use the defined target audience as a basis. Gather data about the target audience. You are looking for data on How does the target audience performing a task now without your product? Which information do they need or want? Which functionality do they need or is needed to implement specific content? Use the following methods Brainstorming Interviews Field research Re-assess the defined target audience. Any changes?

Objective:

Detail the defined target audience from the strategy part and define how they will use your information product.

Use the defined target audience as a basis.

Gather data about the target audience.

You are looking for data on

How does the target audience performing a task now without your product?

Which information do they need or want?

Which functionality do they need or is needed to implement specific content?

Use the following methods

Brainstorming

Interviews

Field research

Re-assess the defined target audience. Any changes?

Define user experience Detail usage scenarios Objective: From the collected data define the desired usage scenarios for your product a usage scenario describes how the user should use your product. for the supporting information products it is recommended to integrate the scenarios with the scenarios of main product. A scenario is typically narrative and can be supported through pictures, flows or comics. Hints: Don‘t get to technical, be creative. Don‘t try to describe all exceptions and variations. Verify scenarios with the development team. A scenario can be compared to use cases but is not as formal.

Objective:

From the collected data define the desired usage scenarios for your product

a usage scenario describes how the user should use your product.

for the supporting information products it is recommended to integrate the scenarios with the scenarios of main product.

A scenario is typically narrative and can be supported through pictures, flows or comics.

Hints:

Don‘t get to technical, be creative.

Don‘t try to describe all exceptions and variations.

Verify scenarios with the development team.

A scenario can be compared to use cases but is not as formal.

Define user experience Detail personas Objective: From the collected data detail the target audience through personas. Personas illustrates (personifies) a specific target group and improve understanding of the target groups. They are a great tool to bring various groups together (marketing, developers, technical writers, usability) Hints: Base personas on available data. Use personas as a communication tool and as a functional/content check.

Objective:

From the collected data detail the target audience through personas.

Personas illustrates (personifies) a specific target group and improve understanding of the target groups.

They are a great tool to bring various groups together (marketing, developers, technical writers, usability)

Hints:

Base personas on available data.

Use personas as a communication tool and as a functional/content check.

Example Persona

Define user experience Detail task flows – use cases Objective: Using scenarios and personas develop detailed task flows. Describe exact flows how the user will use the product. You can use narrative descriptions or flowcharts. Flowcharts tend to reduce ambiguity. Hints: This activity is often done by user interface designers or system analysts. This activity compares to detailing use cases with all the individual steps. Brainstorm the detailed tasks in a team. Use whiteboards, stick-it notes, or other low-tech tools if necessary. Depending on the iteration you are in, you may need to include all the variations and exceptions to the flow.

Objective:

Using scenarios and personas develop detailed task flows.

Describe exact flows how the user will use the product.

You can use narrative descriptions or flowcharts. Flowcharts tend to reduce ambiguity.

Hints:

This activity is often done by user interface designers or system analysts.

This activity compares to detailing use cases with all the individual steps.

Brainstorm the detailed tasks in a team.

Use whiteboards, stick-it notes, or other low-tech tools if necessary.

Depending on the iteration you are in, you may need to include all the variations and exceptions to the flow.

Define user experience Analyze media Objective: Understand media specifics Analyze and understand capabilities and limitations of the media used for each information product. Try to use synergies between various media and information products.

Objective:

Understand media specifics

Analyze and understand capabilities and limitations of the media used for each information product.

Try to use synergies between various media and information products.

Key deliverables of the Information Architecture Design document 1. Strategy 1.1Goals 1.2 Positioning 2. User experience 2.1 Audience analysis 2.2 Personas and Scenarios 2.3 Task flows 2.4 Media analysis 3. Content and functionality 3.1 Content inventory 3.2 Functional requirements 4. Content structure 4.1 Architectural blueprint 4.2 Global and local navigation 4.3 Metadata 5. Visual design 5.1 Layout blueprints 5.2 Design sketches 5.3 Visual Mock-ups 6. Prototypes

Design document

1. Strategy

1.1Goals

1.2 Positioning

2. User experience

2.1 Audience analysis

2.2 Personas and Scenarios

2.3 Task flows

2.4 Media analysis

3. Content and functionality

3.1 Content inventory

3.2 Functional requirements

4. Content structure

4.1 Architectural blueprint

4.2 Global and local navigation

4.3 Metadata

5. Visual design

5.1 Layout blueprints

5.2 Design sketches

5.3 Visual Mock-ups

6. Prototypes

Content and functionality Create a content inventory and functional requirements list Objectives: Analyze existing content and functionality for re-use. Identify new content and functionality from scenarios, personas and task analysis. Collect and assess the existing content (content inventory). Identify content requirements from scenarios, personas and task analysis. Evaluate existing functionality. Identify functional requirements from scenarios, personas and task analysis. Structure content to content groups/categories. Hints: Do not underestimate the effort behind this task. It can easily be the most complex task in the project. You may need to use or develop tools to do this.

Objectives:

Analyze existing content and functionality for re-use.

Identify new content and functionality from scenarios, personas and task analysis.

Collect and assess the existing content (content inventory).

Identify content requirements from scenarios, personas and task analysis.

Evaluate existing functionality.

Identify functional requirements from scenarios, personas and task analysis.

Structure content to content groups/categories.

Hints:

Do not underestimate the effort behind this task. It can easily be the most complex task in the project.

You may need to use or develop tools to do this.

Example Content Inventory tool

Key deliverables of the Information Architecture Design document 1. Strategy 1.1Goals 1.2 Positioning 2. User experience 2.1 Audience analysis 2.2 Personas and Scenarios 2.3 Task flows 2.4 Media analysis 3. Content and functionality 3.1 Content inventory 3.2 Functional requirements 4. Content structure 4.1 Architectural blueprint 4.2 Global and local navigation 4.3 Metadata 5. Visual design 5.1 Layout blueprints 5.2 Design sketches 5.3 Visual Mock-ups 6. Prototypes

Design document

1. Strategy

1.1Goals

1.2 Positioning

2. User experience

2.1 Audience analysis

2.2 Personas and Scenarios

2.3 Task flows

2.4 Media analysis

3. Content and functionality

3.1 Content inventory

3.2 Functional requirements

4. Content structure

4.1 Architectural blueprint

4.2 Global and local navigation

4.3 Metadata

5. Visual design

5.1 Layout blueprints

5.2 Design sketches

5.3 Visual Mock-ups

6. Prototypes

Content structure Create the architectural blueprint Objectives: Create the essential structure of the information product – architectural blueprint. Create a hierarchical structure of information (TOC, sitemap) Identify various content objects using your content inventory. Identify and model their attributes. For example: task procedure, concept description, news, generic article, biography. Use techniques like card sorting and affinity diagrams. Hints: Use any tools you feel comfortable with. Flipcharts and whiteboards, Visio, PowerPoint, MindMaps, … You may need to create two blueprints: one purely hierarchical, one showing interactions/relationships. Expand your visual vocabulary as needed to show the information of your concern, for example, protected and non-protected content objects, …

Objectives:

Create the essential structure of the information product – architectural blueprint.

Create a hierarchical structure of information (TOC, sitemap)

Identify various content objects using your content inventory. Identify and model their attributes. For example: task procedure, concept description, news, generic article, biography.

Use techniques like card sorting and affinity diagrams.

Hints:

Use any tools you feel comfortable with. Flipcharts and whiteboards, Visio, PowerPoint, MindMaps, …

You may need to create two blueprints: one purely hierarchical, one showing interactions/relationships.

Expand your visual vocabulary as needed to show the information of your concern, for example, protected and non-protected content objects, …

Example: the architectural blueprint

Example: interaction blueprint

Content structure Define global and local navigation Objectives: Define navigational paths and navigational help elements for the information product. 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, … Local navigation is content object specific and is only used in a local context. For example, references in an index section, related links, … Hints: Global navigation must give the user a clear picture of where they are related to other main content areas. Local navigation expands the navigation capabilities with „see also“ and „similar topics“ concepts. This is where meta-data can play a significant role.

Objectives:

Define navigational paths and navigational help elements for the information product.

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, …

Local navigation is content object specific and is only used in a local context. For example, references in an index section, related links, …

Hints:

Global navigation must give the user a clear picture of where they are related to other main content areas.

Local navigation expands the navigation capabilities with „see also“ and „similar topics“ concepts. This is where meta-data can play a significant role.

Content structure Define meta-data Objectives: Develop a meta-data structure for identification of content objects. Meta-data structure depends largely on medium used and can be a simple index or a complex meta-tags structure for database search. Decide whether you want fixed keywords meta-data structure and/or a flexible user defined structure (folksonomy.) Note that meta-data is not so important from the search aspect, but from the aspect of creating relationships between content objects. Hints: Consider you audience. If they are regular users of sites like flickr, they may be inclined to do meta-tagging on their own. Creating an fixed meta-data structure is large job and it makes content management complex.

Objectives:

Develop a meta-data structure for identification of content objects.

Meta-data structure depends largely on medium used and can be a simple index or a complex meta-tags structure for database search.

Decide whether you want fixed keywords meta-data structure and/or a flexible user defined structure (folksonomy.)

Note that meta-data is not so important from the search aspect, but from the aspect of creating relationships between content objects.

Hints:

Consider you audience. If they are regular users of sites like flickr, they may be inclined to do meta-tagging on their own.

Creating an fixed meta-data structure is large job and it makes content management complex.

Key deliverables of the Information Architecture Design document 1. Strategy 1.1Goals 1.2 Positioning 2. User experience 2.1 Audience analysis 2.2 Personas and Scenarios 2.3 Task flows 2.4 Media analysis Content and functionality 3.1 Content inventory 3.2 Functional requirements 4. Content structure 4.1 Architectural blueprint 4.2 Global and local navigation 4.3 Metadata 5. Visual design 5.1 Layout blueprints 5.2 Design sketches 5.3 Visual Mock-ups 6. Prototypes

Design document

1. Strategy

1.1Goals

1.2 Positioning

2. User experience

2.1 Audience analysis

2.2 Personas and Scenarios

2.3 Task flows

2.4 Media analysis

Content and functionality

3.1 Content inventory

3.2 Functional requirements

4. Content structure

4.1 Architectural blueprint

4.2 Global and local navigation

4.3 Metadata

5. Visual design

5.1 Layout blueprints

5.2 Design sketches

5.3 Visual Mock-ups

6. Prototypes

Visual design Create layout blueprints (design grids) Objectives: Design the essential layout for various content objects. Design visual page layout for various basic content groups/objects (task description, reference material, news, …). Consider placement and behavior of the global navigation. Consider various attributes of the content object (title, sub-title, summary, text, related links, …) Hints: Do not detail visual design. We are still creating a functional design blueprint.

Objectives:

Design the essential layout for various content objects.

Design visual page layout for various basic content groups/objects (task description, reference material, news, …).

Consider placement and behavior of the global navigation.

Consider various attributes of the content object (title, sub-title, summary, text, related links, …)

Hints:

Do not detail visual design. We are still creating a functional design blueprint.

Example: Layout blueprints

Where do I learn more? Experience Volunteer at nonprofit organizations  ASIST - American Society for Information Science & Technology (www.asist.org) STC Information Architecture & Design SIG (ww.stc.org) Apprenticeship Work with an expert and find a mentor Formal education Few to none available. It‘s a new field at a crossroad. Seminars Universities, conferences, consulting firms Conferences Literature Lots of books, reports, and results available Rosenfeld, Morville: Information Architecture for the WWW Online resources: blogs, websites

Experience

Volunteer at nonprofit organizations 

ASIST - American Society for Information Science & Technology (www.asist.org)

STC Information Architecture & Design SIG (ww.stc.org)

Apprenticeship

Work with an expert and find a mentor

Formal education

Few to none available. It‘s a new field at a crossroad.

Seminars

Universities, conferences, consulting firms

Conferences

Literature

Lots of books, reports, and results available

Rosenfeld, Morville: Information Architecture for the WWW

Online resources: blogs, websites

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