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