IA Deliverables

From time to time, I will post some interesting resources and tools in the information architectecture field. Today, you will find a list of Deliverables related to the IA process that were discussed on the AIfIA listserv.

Victor Lombardi’s Blue wireframe (looks like a blueprint)
http://aifia.org/tools/download/LombardiWireframe.pdf

Clifton Evans’ all-blue page…
http://www.infostyling.com/examples/Blueprinting_Object1.gif

Austin Govella’s recent samples:

1. Very didactic. Client wanted more communication (59k PDF):
http://grafofini.com/stage/sample_deliverables/eto_wireframe_home.pdf

2. Very sparse. Client didn’t care why or how. Just wanted progress (67k PDF):
http://grafofini.com/stage/sample_deliverables/ubs_home-wf.pdf

Dan Saffer suggested creating the wireframes on computer and tracing them by hand to look unfinished/changeable.

There are some more great samples on the AIfIA Tools page:
http://aifia.org/tools/

And great ideas and pointers on the IA Wiki:
http://www.iawiki.net/DeliverablesAndArtifacts

Process Outline from Thomas Vander Wal:

Initial meetings (discussion):
-gather user types, content types, possible interactive needs (not desires)
-estimate volume of information intially, and volume of information turn-over (how often and how much information is updated and added to).

Deliverable – Project Overview (Word document)
-Results of initial meeting/needs
-Rough persona and/or information use patterns of the user that come to the site (Why do people come to the site? What do they do with the information? Who is the audience? How often do they come to the site?).
-Client signs off once there is agreement

Deliverable FROM client – Content Inventory:
-individual documents they would like included
-current web sites they own, and/or pointer(s) to applications they want incorporated.

Deliverable – Content Inventory (spreadsheet):
This document will be our communication tool to prod the client for content that is missing and to show our work progress.
-category column
-raw content/document delivery column
-document size (words)
-number of images
-number and size of tables
-development status.

Deliverable – Open Card Sort (spreadsheet)
-For larger sub-sites
-client can do it themselves if they want

Deliverable – Content Object Type Inventory (outline format such as Word or PDF of OmniOutliner):
-images
-navigation
-referred links
-data tables
-headers
-sub-headers
-footers
-branding
-cross-branding
-dynamic elements
-rich content elements (where required)

Deliverable – Raw Wireframe:
-HTML with borders turned on and greeking
-one wireframe for each page type
-capture the various content objects and placement with consistency

Deliverable – Semantic Structure
-CSS classes and ids
-naming structure for dynamic and rich elements

Deliverable – Clickable Raw Wireframe
-include names and categories
-start testing it with users (heuristic assessment) and flow (particularly testing when users drop into the middle of a site).
-carved up wireframe into templates for HTML and/or CMS and applications.

Converted Content into the content templates.
Other elements are set as includes or are in the CSS.

Color Palette:
-known items (enterprise branding that is required)
-markup a few pallet options with CSS
-do a few user tests to verify choices/options
-create HTML CSS table listing the CSS attribute, an example, and when it gets used.

Graphic Development and Local Branding
-20 to 50% of the content has been converted
-tweak templates
-test and make adjustments accordingly

Depending on the size of the site, the number of people involved and access to read users, most of the steps in this process are flexible, except the raw HTML wireframe, clickable wireframe, and the content spreadsheets.

Visio stencils

Visio stencils

– Henrik Olsen’s web prototyping stencils and template
uses: prototyping, wireframes
http://www.guuui.com/issues/02_03_02.php

– Michael Angeles’s wireframe stencils
uses: prototyping, wireframes
http://studioid.com/pg/visio_wireframe_stencil.php

– Jesse James Garrett’s stencils
uses: flow
http://www.jjg.net/ia/visvocab/

– Peter Van Dijk’s stencils (four of them here)
uses: sitemaps, isometric sitemaps, prototyping, wireframes, flow
http://iabook.com/template.htm

– Peter Van Dijck’s older stencils
uses: prototyping, wireframes
http://poorbuthappy.editthispage.com/stories/storyReader$51

Personas and Roles

Personas and Roles

Some Persona URLS:
http://www.cooper.com/content/insights/newsletters_personas.asp
http://iawiki.net/PersonaDesign
http://foruse.com/newsletter/foruse15.htm#3

Sometimes Personas is the right sentiment but not the right approach,
because they assume you have quite distinguishably different user
archetypes. In this case it may be better to adopt a role-based approach, whereby you define
different ‘hats’ or roles that a user may take in order to fulfil a kind of
task or set of tasks.

Roles URLs:
http://edp5285-01.sp01.fsu.edu/Guide4.html

Constantine and Lockwood’s ‘Software For Use’
http://foruse.com/questions/index.htm#5

More on Site Maps & Indices

All of the following resources came from a discussion list (not my compilation). Apologies to whomever compiled this listing – I’ve forgotten so I can’t give credit…. 🙁

Site Index examples:
Good:
http://www.peoplesoft.com/corp/en/indices/site_index.jsp
http://www.w3.org/Help/siteindex
http://www.montaguelab.com/Public/indexes.htm
http://www.census.gov/main/www/subjects.html
http://www.consumerreports.org/main/detailv2.jsp?CONTENT<>cnt_id=3171&FOLDER
<>folder_id=3167
http://www.writersblock.ca/common/index.htm

Not so good:
http://www.asindexing.org/site/backndx.htm
Different style / purpose:
http://unixhelp.ed.ac.uk/index/index.html

Product Index examples:
Good:
http://www.ibm.com/products/az/
http://www.peoplesoft.com/corp/en/indices/prod_index.jsp

Not so good:
http://www.3m.com/product/index.jhtml

Sitemap examples:
Good:
http://www.apple.com/find/sitemap.html
http://www.google.com/sitemap.html
http://pages.ebay.com/sitemap.html?ssPageName=h:h:smap:US
http://www.multimap.com/static/sitemap.htm
http://www.latrobe.edu.au/sitemap/

Not so good:
http://www.novuspetroleum.com/cmsaxs/site/1/5.asp?secID=18
http://www.miami.muohio.edu/sitemap/

Bad:
http://www.chaminade.edu/sitemap/content/sitemap.html (bad visual
representation)
http://www.chaminade.edu/sitemap/index.php (not much better – text w/
visuals once you click on a high-level section)
http://www.tamu.edu/00/sitemap.html?mode=d (too detailed, bad layout, no
logical order) http://www.raffed75.isgreat.tv/Sitemap.htm (yuck!)

The IBM Site Map Gallery:

Fascinating study of a big company dealing with lack of standards…map, map, who’s got THE site map?

http://www-1.ibm.com/businesscenter/us/sitemap/ (simple)
http://www.ibm.com/investor/tools/iritsm.phtml (good use of bullets &
indention)
http://www-5.ibm.com/de/mittelstand/sitemap/ (interesting layout)
http://www-106.ibm.com/developerworks/sitemap.html (jump nav at top good,
indention and level of detail bad) http://www.ibm.com/ar/sitemap/ (bad
windows explorer style layout) http://www.almaden.ibm.com/st/sitemap.shtml
(what’s a link?)
http://www-306.ibm.com/e-business/doc/content/sitemap/sitemap.html (too
detailed)

Related Articles & Info:
http://taxonomist.tripod.com/indexing/design_checklist.html
http://www.asindexing.org/site/checklist.shtml
http://www.boxesandarrows.com/archives/sitemaps_and_site_indexes_what_they_a
re_and_why_you_should_have_them.php
http://davidcrow.ca/2003/01/20/trends_in_sitemap_design.html
http://www.iaslash.org/node.php?id=2535#comment
http://www.useit.com/alertbox/20020106.html
http://www.evolt.org/article/evolt/4090/710/

Tools:
http://www.brown-inc.com/indexer/FAQ.htm

Site Map vs Site Index

http://www.aussi.org/indexer.htm
http://www.asindexing.org/site/backndx.htm
http://www.sun.com/siteindex/
http://my.webmd.com/medical_information/condition_centers/default.htm
http://www.adobe.com/products/main.html
http://www.amazon.com/exec/obidos/subst/home/all-stores.html/104-3468701-819
5133
http://www.amazon.com/exec/obidos/tg/browse/-/508510/104-3468701-8195133