[Sigia-l] The fuzzy line btwn IA and Design

[Christopher Fahey [askrom]]

> So here's the Big Question: What does it mean for a design to 
> be true to the 
> IA? What do you do to help ensure that the IA vision is 
> reflected in the final design?

This question assumes that the Designer is the "recipient of the IA
vision". I like to not only involve the Designer in the early IA
development, but I also like to, as the IA, be the "recipient of the
Design vision". Even before I've made the first wireframe, the Designer
has usually done a lot of thinking and a lot of concrete work from which
I can draw ideas and guidelines.

I always have an early deliverable called the "Navigation Wireframe". It
is the first page-level IA deliverable, the first wireframe, and it is
produced in intensely close collaboration with the Designer. (Sometimes
I have even 'allowed' the designer to do the majority of the work on
this wireframe.) The Navigation Wireframe includes samples of most of
the essential and common GUI-level visual devices, particularly
navigation areas, the page header/branding area, toolbars, content
modules, headings and subheadings. 

The Navigation Wireframe settles all of the basic page grid questions:
which navs are horizontal, which are vertical? What columns are there?
What basic kinds of modules for containing content are there? As the
name implies, by far the most important element in it is the navigation
areas - if you had not yet agreed with your Designer whether the nav
will be horizontal or vertical, then you certainly should not have
started cranking out wireframes for the whole site!

The steps to produce the Navigaiton Wireframe usually involve three key
starting points:
 (1) The IA makes a kind of visual checklist of all the elements on a
typical page. This might involve a simple textual list or some really
sketchy page wireframes (make more than one, and at the start use a
pencil, not Visio). I like to do a kind of primitive wireframe where
instead of putting all of the page elements in a Mondrian-like coherent
rectangle I put all of the page elements in a exploded 'cloud' of
disconnected modules, navs, etc (with only a subtle suggestion of any
specific recommendations I have about what general area of the page I
feel something should go, or which elements should be near each other).
 (2) The visual designer has done some basic conceptual design work
already: a competitive analysis, created "mood boards", selected a color
sheme, come up with some font and design conventions (like the "rounded
edge" look or the "3d-beveled" look, or the "hotmail.com" look) etc. 
 (3) VERY LONG meetings between the IA and the Designer, with a
whiteboard and lots of papers.

Once a good Navigation Wireframe is built, there are several strong
advantages:
 (1) The basic layout of your wireframes will be blessed by the
designer. More than 75% of the "where-does-this-go?" questions will be
solved before you start producing piles and piles of wireframes. When
the designer receives your wireframes, they won't have to translate
every one of them from "The IA's thinking" to "My thinking" because you
will already be on the same page.
 (2) You are often freed up to use some semblance of the correct fonts
and colors in the subsequent bulk of page wireframes, too. Conventional
wisdom says it's a good idea to make wireframes in greyscale or black
and white, but if you already know that all of the headers will be red
and that all of the fonts will be Verdana, then why not make the
wireframes reflect that? Don't go overboard and waste time doing
nitty-gritty design work, but certainly don't feel like you are
forbidden to incorporate design work into the wireframes. It's as easy
to make a box red as it is to make it gray.
 (3) You can augment this exercise with a HTML prototype of a single
page, (A "Navigation Prototype") to allow your team to confirm or modify
your crazy DHTML cascading menu idea before you actually build 100
wireframe pages.

Anyway, I highly recommend making the first step in the IA wireframing
process a wholly collaborative process, with the IA as an equal to the
Designer (and maybe others) in brainstorming the navigation conventions.
The IA's main job in this early stage is to facilitate the
brainstorming, advocate usability, and then document the good ideas.

-Cf

[christopher eli fahey]
art: http://www.graphpaper.com
sci: http://www.askrom.com
biz: http://www.behaviordesign.com