Web Design: Information Architecture

1
Web Design Information Architecture

• COM344
• Electronic Publishing

2
Introduction

• Disortientation
• Navigation Models
• Topologies
• Information scent
• Developing an architecture

3
Web site problems

• Problems occur because users must
• control their navigation through the site.
• control task related activities.
• absorb information they are accessing.
• And because
• Hypertext (i.e. the web) occupies space)

4
Spatial knowledge acquisition

• Parallels are thought to exist between theories
  of real world navigation and navigation in
  virtual worlds
• landmark knowledge
• Route knowledge
• Survey knowledge

5
Disorientation

• Not simply feelings of confusion. disorientation
  results in a measurable decline in user
  performance.
• If users cant compete their task - They wont
  return to the site.

6
Navigation

• Where am I?
• Where have I been?
• Where can I go?

7
Avoiding Disorientation

• As a designer you need to understand navigation
  models
• Topology
• Navigational Aids
• Information Scent

8
Optimal Rationality Model

• Users determine the probability that each link
  goes to their destination
• They follow the highest probability path
• They remember everything the see
• They will recognize when they are on the wrong
  path.

9
Satisficing Model
Is this what I am looking for?
Yes
No
Done
Scan the Links
Many Links
Few Links
Click on the Best Match
Click on First Good Match
10
Implications

• Page title and a brief summary of content should
  be immediately visible
• Frequently used links should be near the top or
  bottom of lists
• Link labels are useful cues to information

11
Mental Maps

• People use their experience from other sites to
  help them navigate yours.
• Make your structure apparent so that users can
  easily adjust their mental map
• Domain Knowledge - help or hindrance?

12
Site Structure

• Investigators have shown that a sites structure
  in terms of how the nodes and links are arranged
  have a direct affect on the users ability to
  navigate that site.

13
Hierarchy
14
linear
15
Mesh
16
Mixed or Hybrid
17
Depth versus breadth

• Deep narrow hierarchies are harder to navigate
  than broad shallow.
• However hierarchies that are too broad also
  present problems
• Remember Millers Magic number 7( or -2)

18
Navigational Aids

• Maps - Spatial for Navigation Conceptual for
  Learning
• Table of Contents - NavBar
• Link colours

19
Information Scent

• Indication of distant content, important for
  large sites, or sites with narrow deep
  hierarchies.
• Scent provided by different cues.
• E.g. Text, graphics, status bar but mainly by
  Link Lables.

20
Creating an Information Structure

• Look at similar sites.
• Look for categories in the information and
  organise these into high and low level nodes.
• Look at user tasks.
• How can these tasks be reflected in the
  categories?
• Category labels are key

21
The Home Page

• Flagship page - dont use splash screens.
• Shouldnt have a home button.
• Should have the same style as other pages but
  needs to be different or set apart from the rest.
• Should be used for additional important
  information - updates - promotions.

22
Home Page content

• The home page should answer these questions
• What information is available?
• How should I use this site?
• What does this site do?
• Where am I?

23
Home Page Main Features

• Directory of the sites main content -
  areas/categories.
• A search feature - for large sites.
• Important news - promotions.

24
Homepage and Interior Pages

• Position and specification of the navigation menu
  should be the same.
• Interior or subordinate pages should always have
  a link back to the home page. Ideally via a Logo
  or dedicated home button.

25
The Golden Rule of Web Design.

• Users seek to maximize the amount of relevant
  information gained
• while
• minimizing the amount of time and effort required
  to get that information.