Design and Documentation

Information Architecture

Diagramming an IA

• Information architects are required to present the product of their work using visual representations.

• Guidelines:– Provide multiple views– Develop those views for specific

audiences

Tools for representing an IA

• Blueprints• Wireframes• Content mapping inventory• Content Modeling• Controlled Vocabularies• Design sketches• Web-based prototypes

Blueprints

• Blueprints, a.k.a. “sitemaps”, are diagrams that represent relationships between pages and other content components.

• They show the organization, navigation and labeling systems.

Blueprints

• High-level architecture blueprints– are usually created during the top-

down information Architecture process.

– They are most useful for exploring primary organization schemes and approaches.

– See examples:• http://www.elasticspace.com/

interaction/liftarchitecture01.pdf • http://www.elasticspace.com/

interaction/animatearchitecture01.pdf

High Level BlueprintM a in g a te wa y

C a re e rce n te r

S e le ct f irmM e dia

C e n te rPrim a ry

a cce s sA bo u t u s

B y co u n try

B y la n g u a g e

B y n a m e

B y s e rv ice

B y in du s try

B y to pic

G lo ba lc o nte nt

re po s ito ry

Firm s it e s

Blueprints

• Detailed Blueprints– Detailed blueprints map out the

entire map so that the production team can implement your plans.

– They must present complete information hierarchy from the main page to the destination pages

– They must show details of the labeling and navigation systems

Wireframes

• Wireframes are use to depict how an individual page would look from the architectural perspective.

• Wireframes force you to consider:– Where the navigation system can be

located– What components should be included– Decide how to group content

components

Wireframes

• Types:– Low fidelity wireframes

• No graphic elements and no real content

– Medium fidelity wireframes• Include several aspects of content, layout and

navigation

– High fidelity wireframes• Close approximation to the actual web page

• Examples:• http://bobulate.com/documents/arch_two.pdf • http://iawiki.net/uploads/WireFrames/

if.com.au.pdf

Wireframes

• Guidelines– Consistency is key– Visio and other standard charting tools

support background layers that you can export to your web page

– Use callouts for providing notes about functionality

– If more that one person is creating wireframes make sure to establish procedures for developing, sharing, and maintaining common wireframes

Low Fidelity WireframeName of the Site Logo

Global Navigation

Label Content Area

Footer Area

Medium Fidelity Wireframe

Name of the Site

Section Tile: Contribute Page

Contribute URL Contribute Paper

Contribute URL + Short Info Contribute Bibliography

Footer

Contextual Links

Global Navigation

LOGO

High Fidelity Wireframe

Content Mapping

• Content mapping involves breaking down or combining existing content into chunks that are useful for inclusion in you web site.

• Content mapping table is used to match chunks of contents with their respective destinations in the web site.

Content Mapping

• Content Mapping is the framework used by information designers to combat information overload and turn unstructured information into manageable and re-usable document-like content objects, ready for multiple purposes.

• Ex - http://www.acf.hhs.gov/guide/contentmap.html

Content Mapping ID Name Type Content Topics Notes Location

0.0.0 Home Home Page World map, slogan News, slogan, world map image Index.asp

1.1.1 About Category Home Page

Over of web site statement, vision, purpose of web site

About.asp

1.2.1 Dedication SubcategoryAbout Page

Dedication of web site Information on who and why this site was dedicated

Dedication.asp

1.1.1 Contribute CategoryHome Page

Contribute content to the web site

Option to contribute a URL, article, short essay

Contribute.asp

1.2.1 URL Contribution

SubcategoryContribute Page

Contribute an URL Form to fill out to submit an URL Form URLsubmit.asp

1.2.2 Article Contribution

SubcategoryContribute Page

Contribute an Article Form to submit a journal article Form Articlesubmit.asp

1.2.3 Essay Contribution

SubcategoryContribute Page

Contribute an Essay or own information

Form to submit an essay or own information

Form Essaysubmit.asp

1.1.1 Search CategoryHome Page

Search for information Search options for the web site Form Search.asp

1.2.1 Search Results SubcategorySearch Page

Search Results Displays search results for entered search criteria

Searchresults.asp

1.1.1 Discussion Board

CategoryHome Page

Discussion Board Allows users to carrying on a conversation about diversity topics

Dicussion Board Application

/Discussionboard/ index.asp

1.2.1 Boards SubcategoryDicussion Board

View discussions List of all discussions /Discussionboard/ list.asp

1.2.2 Add response or discussion

SubcategoryDicussion Board

Add response or new discussion

Add response or new discussion Form /Discussionboard/ add.asp

1.1.1 Contact Info CategoryHome Page

Contact Information How to contact web site owner / form to request info

Form Contact.asp

1.2.1 Faculty Bio SubcategoryContact Info Page

Faculty information Faculty information and short bio Faculty.asp

Content Modeling

• Content models are micro information architectures targeted to improve access to the most valuable parts of the content.

Content Modeling

• A content model specifies:– What types of chunks we are

working with– Relations between these chunks– What kind of metadata is used for

describing them

Content Modeling

• Types of relationships between chunks:– Sequencing: Chunks can be placed

together in sequence.– Co-location: Chunks can be placed in the

same document– Linking: Chunks can link to other chunks– Shared meaning: even if chunks are not

explicitly linked they can share semantic characteristics that ensure they are co-located in an ad-hoc manner

Content Modeling Basics• Based on patterns revealed

during content inventory and analysis

• What makes up a content model?1. Content objects2. Metadata (attributes and values)3. Contextual links

• Applies to many levels of granularity

– Content objects– Individual documents– Document collections (e.g., web

sites)

Content Modeling

Content Modeling across silos

Content Modeling

• Condition for using content modeling:– The content has an inherent structure

that can be teased out and capture as a content model

– This content model will have value for many users

– Small volume of content (for manual implementation) or explicit structure (can be automated)

– You can afford the time, staff, resources and technology required for content modeling.

Controlled Vocabularies

• Products to facilitate the development of controlled vocabularies:– Metadata matrixes– Applications for managing

vocabulary terms and relationships

Controlled Vocabularies

• A metadata matrix summarizes the different types of vocabularies needed and the level of effort necessary to develop them.

• It also facilitates discussion about prioritization of vocabularies.

Controlled Vocabularies

Vocabulary Description Examples Maintenance

Subject Terms that describe networking

Home networking; servers

Difficult

Product type Types of products that 3Com sells

Hubs; Modems Moderate

Product name Names of products that 3Com sells

PC Digital Webcam

Difficult

Product brand Brands of product htat 3Com sells

HomeConnect; SuperStack

Easy

Controlled Vocabulary

Vocabulary Description Examples Maintenance

Subject Terms that describe Diversity Diversity, culture, customs Moderate

Faculty Faculty responsible for this site Ellision, Dr Ellision Easy

Areas List of some areas covered , Greek, Asian, Italian, etc. Moderate

Page Titles Short text with keywords Management in Diversity – Cultures,Customs Easy

Controlled Vocabularies

• For building vocabularies you will need to choose a database solution to manage terms and term relationships:– Thesauri or ontology development

tools for sophisticated thesaurus.– A word processor, spread sheet, or

database for simple vocabularies with only preferred term variants.

Design Sketches

• Design sketches are used to put together the work of the three teams involved in the design (Graphic design, technical team, Information architect).

• It is easier to build “rough design sketches” that can be used for the interaction than to us actual HTML code.

Web-Based Prototypes

• These prototypes show how the site will look and function.

• This is the official end of conceptual design and the beginning of production.

Architectural Style Guides• An Architectural style guide is a

document that explains:– How the site is organized, – Why it is organized that way,– How the architecture should be

extended as the site grows

Architecture Style Guide

• Contents:– Documentation of Mission and vision for the

site– Information about intended audiences– Description of the content development policy– Blueprints, wireframes and other

documentation– Guidelines for adding content, extending the

organization, labeling, navigation, and indexing systems

– Graphic design style guide– HTML templates

Point-of-Production Architecture• At this point your Information

Architecture is implemented.• Many implementation decisions

would be made. • You should balance your client’s

requests against sanity of your production team, budget and timeline.