2. What is Information Architecture
Gather information by Put information by
- Brainstorming - Card sorting
- Task analysis - Paper prototype
Art IA Science
- Interviews - Navigation structure
- Focus group - Storyboards
- Design strategy - Page layout
- User profile / persona - etc
- Scenarios
- etc
3. 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
4. Types of Hierarchy
a) All in one
This is a simple model where all content, links, images goes on a single home
page.
Home
page
5. Types of Hierarchy
b) Flat
This 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
Home
Page Page Page Page
page
6. Types of Hierarchy
c) Hub and spoke
This 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.)
Home
Page Page Page Page
page
Page
Page
7. Types of Hierarchy
d) Strict hierarchy
User can access lower pages via their parent pages only
Home page
Page Page Page
Page Page Page Page Page Page
8. Types of Hierarchy
e) Multi-dimensional hierarchy
User can access any page via more than one parent page
Home page
Page Page Page
Page Page Page Page Page Page
9. Types of Hierarchy
f) Search
It 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
10. Types of Navigation
a) Global navigation
It often comes in header. User can easily go from one major part to another
11. Types of Navigation
b) Local navigation
Generally comes in sidebar. It would be a child pages of that particular parent
page
12. Types of Navigation
c) Search box
It comes on top of the page. It helps to find out any particular section
instantly
13. Types of Navigation
d) Embedded links
These are embedded links in content. User can go to any other major part of
other subsections
14. Types of Navigation
e) Breadcrumbs
Typically it appears as a horizontally on top of the web page and below the
page title or website banner
15. Types of Navigation
f) Sitemap
Typically it appears as a horizontally on top of the web page and below the
page title or website banner
16. Website structure
Shallow IA Deep IA
- Few clicks to find an information - Too many clicks to find an information
- List of confusing unrelated choices - Too many menu layers which may
with lack of clarity frustrate
- good for advanced user - Good for normal / poor user
17. Defining an information architecture
a) Top – down IA
It 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.
Site-map
Website's User’s
Objective Goal
18. Defining an information architecture
b) Bottom – up IA
It 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 3
- Task 2
19. 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
20. 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
