Usability Web design

Basics of Information Architecture (IA) for Websites

By Mainak Biswas August 02, 2007 - 1,611 views

Information Architecture (IA) is the art and science of structuring data, and defining user interactions before actually creating the website.

Why IA is important?
It is the blueprint of the site upon which all other aspects are built. They are:
1. Form
2. Function
3. Navigation
4. Interface
5. Interaction
6. Visual design

Steps of IA:
1. Define goals of the website
2. Define the user experience
3. Prepare/gather website content
4. Define website structure
5. Create visual design

1. Goals of the website
Defining website’s goal gives us a clear, well documented idea of what we want to build.

– Ask questions
– Filter the answers
– Prepare design doc: “Website Goals”

2. User experience
User Experience is the overall experience and satisfaction a user has when using a website (or product or any system). The experience is commonly defined in terms of “ease-of-use”.

– Define the audience
– Create common scenarios
– Analyze competitors
– Prepare design doc: “Audience, Scenarios, and Competitive Analysis”

3. Website content
In this step we have to gather the content for creating the structure and organization of the site. You will need to answer two questions:
 What pieces of content does the site need?
 What sorts of functionality will be required?

– Identify content and functional requirements
– Group content
– Label the grouped content
– Prepare design doc: “Content and Functions”

4. Website structure
It is the skeleton of website which holds the body made with information and data. Ease-of-use of a website is primarily defined during this step.

– Website structure listing
– Define navigation
– Prepare design doc: “Site Structure and Navigation System”

5. Visual design
In this step visual materials (layouts) are developed to create an experience. Visual Design includes: Graphic Design, Illustration, Typography, Layout, Color Theory, Iconography, Photography, etc.

– Layout Grids
– Design Sketches and Page Mock-ups
– Prepare design doc: “Visual Design”

Page Scrolled