ia toolkit

Techniques and Tools for Information Architects

Presented by / Bogo VatovecChange Management / Knowledge Engineering / User Experience /Interaction Design / Process Engineering

© bovacon 2008

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-LeeWeaving the Web

© bovacon 2008

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.

© bovacon 2008

Key deliverables of the Information Architecture

Design document

1. Strategy1.1Goals1.2 Positioning

2. User experience2.1 Audience analysis2.2 Personas and Scenarios2.3 Task flows2.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 functionality3.1 Content inventory3.2 Functional requirements

4. Content structure4.1 Architectural blueprint4.2 Global and local navigation4.3 Metadata

5. Visual design5.1 Layout blueprints5.2 Design sketches5.3 Visual Mock-ups

6. Prototypes

© bovacon 2008


Design document






6. Prototypes

© bovacon 2008

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?

© bovacon 2008


Design document






6. Prototypes

© bovacon 2008

Define user experienceGather 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?

© bovacon 2008

Define user experienceDetail 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.

© bovacon 2008

Define user experienceDetail 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.

© bovacon 2008

Example Persona

Präsentation für BMW9 Januar 2002

IconMedialabTM

Beispiel User Profile

» Neuen Technologien steht Herr Hansen aufgeschlossen gegenüber, aber sie sollen ohne viel Aufwand funktionieren.

» Herr Hansen nutzt das Internet zu Informationszwecken und ist begeistert von übersichtlichen Darstellungen

» Sein Assistent und er wünschen sich aktuelle Informationen über die geleasten Objekte

» Herr Hansen surft eher abends, wenn er ein wenig Ruhe vom Tagesgeschäft hat. Er schreibt oft Mails, um den ersten Kontakt herzustellen und ärgert sich, dass selten konkrete Ansprechpartner genannt werden

» Generell zieht Herr Hansen persönlichen oder telefonischen Kontakt vor.

© bovacon 2008

Define user experienceDetail 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.

© bovacon 2008

Define user experienceAnalyze 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.

© bovacon 2008


Design document






6. Prototypes

© bovacon 2008

Content and functionalityCreate 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.

© bovacon 2008

Example Content Inventory tool

© bovacon 2008


Design document






6. Prototypes

© bovacon 2008

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

© bovacon 2008

Example: interaction blueprint

WP_RegisterForMPayFlow

mPay

WP_RegisterForMPayFl

ow

WP_RegisterForMPay

Save/No errors

WP_RegConfirmation

Purchase Continue

Continue Purchase

WP_RegCancel

Save/Error

Cancel

WP_RegErrorNoVF

WP_RegIdentification

OK/no errors

Error: <2 attempts

Error: no VF client

OK

OK

Cancel

Cancel

WP_Reg_ErrorError: 3 attempts

Close

Cancel

WP_IdentifyYourself

WP_RegErrorAlreadyRegistered

Error:Already registered

OK

T&C

Back to Registration

WP_TermsConditions

Cancel

© bovacon 2008

Content structureDefine 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.

© bovacon 2008

Content structureDefine 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.

© bovacon 2008

Visual designCreate 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.

© bovacon 2008

Example: Layout blueprints

Vodafone Footer

Title Bar

Help

Navigation area

Functional area

Search and filter area

Content area

My Contacts

Functional area

© bovacon 2008

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

Thank you!

Bogo Vatovecbovacon

Boxhagener Str. 111 / 10245 BerlinT +49 30 20078666 / F +49 30 20078661 / [email protected] / www.bovacon.com

© 2007, Bogo Vatovec, bovacon

ia toolkit

Design

information product

information architects

body of information

piece of information

visual design

content structure

related information

design sketches