WebMonkey Information Architecture Plan
(Use as template for the Design Document)
Site Goals
Define the Primary Purpose
Set the Time Frame
Short term goals
Long term goals
State the Intended Audience(s)
Define the User Experience
Step 1: Define the Audience
Categorize if necessary
Rank importance of each audience
Create audience list
Distribute to client, have client define each audiences needs and goals
Compile, create list
Distribute to client, have client rank the needs and goals for each audience
Compile, create list
Step 2: Create Scenarios
Scenarios are stories about the users interaction with the site
3 to 6 scenarios are usually enough, but sometimes more are needed
Create a character for that user, and give him a name, a background, and a task to accomplish on the site. Use a task from your list of audience needs and goals. Then write a story about how the character uses the site to complete the given task. Scenarios will be important later on, when you are defining the content and functional requirements of the site.
Be creative!
Write the scenarios down
Step 3: Competitive Analysis
Make a list of your competition
List what they have that you dont or dont plan to have.
List what they have.
Take notes, do screen captures
Use a
grid like this:
Evaluate your own site
Compile a report on each site
Make a schedule with a time frame for reviewing the competitive analysis
Step 4: Design Document: Audience, Scenarios, and Competitive Analysis
Compile the design document
Audience and Scenarios go in the chapter
Summary of Competitive Analysis goes in the chapter
Place the Competitive Analysis in an Appendix
Publish for client to see
Site Content
Step 1: Gather Content and Functions
Answer these questions
What pieces of content does the site need?
What sorts of functionality will be required?
Compile list of content and functionality
Reach consensus on how this will be grouped and labeled
Step 2: Identify Content and Functional Requirements
Make two lists
Content Elements
static
Copyright notices, privacy statements, and membership rules are examples of static content
dynamic, functional, and transactional
Member logon pages, signup pages for email newsletters, and other pages involving forms or transactions
Function Requirements
Member logon pages, signup pages for email newsletters, and other pages involving forms or transactions should be included on your list of functional requirements
Get suggestions for the list from the client
This is called a Content Inventory
Integrate proper content with proper functionality
Evaluate your capability to provide these items
Rank the importance of each item
Step 3: Group and Label Content
Do it yourself
Organize content into groups
Label groups descriptively, but avoid being verbose
Get each client decision maker to do so as well.
Decide on final groupings and names.
This is the structure and names of the sites sections.
Revise the content inventory if necessary at this point
Site Structure
Step 1: Metaphor Exploration: Only an Exercise
Kinds of Metaphors
Organizational metaphors
Organizational metaphors rely on the existing structure of a group, system, or organization.
What is the typical user interface for this kind of product?
What is the structure of the store?
E.g., the parts of a grocery store or supermarket floor
Functional metaphors
Functional metaphors relate tasks you can do on the site with tasks you can do in another environment.
Visual metaphors
Visual metaphors are based on common graphic elements familiar to most people in our culture.
Steps
Gather people
Brainstorm
Review and Evaluate Each Metaphor
Try to connect parts of each metaphor to the site content elements
Choose one metaphor/mixed metaphor for the site or a part of the site
Step 2: Set it in Stone
Create a Site Structure Listing
This is a text-based outline of the sites structure and content
Create an Architectural Blueprint or Site Structure Chart
This is a graphical outline of the sites structure and content, for visual learners.
Make a Legend
Defines how on- and off-site links, page components, pages, and groups of pages are represented in the blueprints. You might want to distinguish among parts of the site that perform a function or transaction, parts of the site that are generated dynamically, and pages merely comprised of text.
Consider several levels of magnification
If your site is large, you may have to make several architectural blueprints, starting with a generalized overview of the site and working toward diagrams with a finer and finer grain.
Step 3: Define Navigation
Questions:
How will users use the site?
How will they get from one place to another?
How do you prevent them from getting lost?
Global navigation system
Appears on every page
Has 5-7 elements
Based on the primary categories of the site structure
Use organization logo or theme element for link back to home page
Local navigation system
Options
List of topics
Menu of choices
A few items related to the current page
Hierarchy with present section expanded
Document both systems
Step 4: Design Document
Create a new chapter in the Design Document titled Site Structure
Write a summary of the driving rationale for the site.
Add the Site Structure Listing
If necessary, abbreviate and include the full listing as an appendix
Add Architectural Blueprint(s)
Document the Global and Local Navigation Systems
Publish for client approval
Visual Design
One main purpose: Provide users with a sense of place--their location within the site
Step 1: Layout Grids
Purpose: Define the way that site structure and organization will display on the page level.
Make space for:
Page content
Global and local navigation
Include page title
Other relevant sidebar information which is not part of site structure
Organizations brand or logo
Header Graphic
Advertising and sponsorship deals
Footer
Copyright, legal details, dates, etc.
Example:
The Process of Creation
General Process
Look at site structure and content, make list of all possible page types
Decide on 2-3 generic page types
Use these as the templates for all pages
Specific Process
Sketch Pad or Graphics program
Create a rectangle to represent the whole page
Block out the elements of your page design
Start with page content
It is most important
How much space does it require?
Where on the page?
Elements
Branding
Informs users they are still on the site
Advertising and sponsorship
Ad Banner?
468 X 60
At top?
Under Title?
Sponsorship
How should it be integrated?
Part of graphics headers?
Small logo at page bottom?
Navigation
Must be prominent
Global must remain consistent
Local may be inconsistent globally, relatively consistent locally
Try multiple styles, recognize that revision will be necessary
Step 2: Design Sketches and Page Mock-ups
Design Sketches
Purpose: Establish a general look and feel.
Content: Prototype graphical, textual, and other content elements
Page Mock-Ups
Purpose: Integrate Design Sketches and Layout Grids
Content: Sample whole-page presentations
Methods:
Build in a graphics program
Paste elements over the layout grid elements
Build in HTML
Use pieces of the design sketches as the graphics
Get client approval
Step 3: Construct Web-Based Prototypes
Step 4: Design Document
Add Chapter: Visual Design
Layout Grids (including diagrams)
Design Sketches
Pictures of Page Mock-Ups
Snapshots of Web-Based Prototypes
Construct Site Using Design Document As A Guide