Information Architecture

What is Information Architecture

Art ScienceIA

Gather information by

- Brainstorming

- Task analysis

- Interviews

- Focus group

- Design strategy

- User profile / persona

- Scenarios

- etc

Put information by

- Card sorting

- Paper prototype

- Navigation structure

- Storyboards

- Page layout

- etc

Definition

Information architecture (IA) is the art and science of organizing and

labeling websites, intranets, online communities and software to support usability

and find ability. From wiki

Types of Hierarchy

a) All in oneThis is a simple model where all content, links, images goes on a single home page.

Homepage

Types of Hierarchy

b) FlatThis is a common hierarchy model where all pages are arranged as peers and every page is accessible from every other page. Simple website has home, about us, product, services, contact us, photo gallery etc. tab

Homepage PagePage PagePage

Types of Hierarchy

c) Hub and spokeThis is a good example of hierarchy to come back to the main page from anywhere. E.g. In email application user can come to inbox from anywhere (after sending an email, after adding contacts, after writing an email etc.)

Homepage Page PagePagePage

Page

Page

Types of Hierarchy

d) Strict hierarchyUser can access lower pages via their parent pages only

Home page

Page Page Page

Page Page Page Page Page Page

Types of Hierarchy

e) Multi-dimensional hierarchyUser can access any page via more than one parent page

Home page

Page Page Page

Page Page Page Page Page Page

Types of Hierarchy

f) SearchIt is more like navigation than architecture. It gives an instant access to any particular information without guessing of “where the particular information can be”

Home page

Page Page Search

Page Page Page Page Page Page

Types of Navigation

a) Global navigationIt often comes in header. User can easily go from one major part to another

Types of Navigation

b) Local navigationGenerally comes in sidebar. It would be a child pages of that particular parent page

Types of Navigation

c) Search boxIt comes on top of the page. It helps to find out any particular section instantly

Types of Navigation

d) Embedded linksThese are embedded links in content. User can go to any other major part of other subsections

Types of Navigation

e) BreadcrumbsTypically it appears as a horizontally on top of the web page and below the page title or website banner

Types of Navigation

f) SitemapTypically it appears as a horizontally on top of the web page and below the page title or website banner

Website structure

Shallow IA Deep IA- Few clicks to find an information

- List of confusing unrelated choices with lack of clarity

- good for advanced user

- Too many clicks to find an information

- Too many menu layers which may frustrate

- Good for normal / poor user

Defining an information architecture

a) Top – down IAIt includes broad overview, understanding website’s objectives and user’s goals and needs. Broad way of defining site maps along with various ways to achieve business’s goals.

Website's Objective

User’s Goal

Site-map

Defining an information architecture

b) Bottom – up IAIt is a detailed relationship between content. It validate how the system will support to user’s specific requirements considering high level structure

Site-map

Website’s objectives

User’s goal

- Task 1 - Task 2 - Task 3

Design for scanning

a) Visually • Make important things prominent

• Distinguish navigation from banner and other body part

• Check branding style guide for icon, color, graphics, text, style etc.

• Keep the consistency through out the website / application

• Break up the pages as per their content

• Try to use one color / white color as a background

Design for scanning

b) Label and categories• Use clear / conventional labels which target audience understand

• Don’t make the user think about category

• Avoid creating 4th level submenus

• Its OK to put something in menus and on page

• Try to use breadcrumbs

• Give home link either on logo Or create a “Home” menu