IT Applications Theory Slideshows

1
IT Applications Theory Slideshows
Website Information Architecture

• By Mark Kelly
• mark_at_vceit.com
• Vceit.com

2
Introduction

• Websites often grow organically over time. They
  are added to, fiddled with, redecorated
  occasionally. Rarely has a big, old site ever
  been planned to get to that size.
• With no real plan of how the content will hang
  together as the site increases in size and
  complexity, it becomes hard to navigate, and
  harder to maintain.

3
What is information architecture?

• Its the process of creating a plan and a
  structure for the information that a Web site
  will contain.
• Often just needs common sense for simple sites.
• Sites that will be complex must be planned in
  more detail.

4
Factors to consider

• The audience (who is going to visit your site)
• The content (the subject matter
• The navigation structure (how will visitors find
  the content)

5
Know your users

• If you dont know the characteristics and needs
  of your audience, youll be unable to provide the
  material they need in the form they need it.
• Make a list of types of people you expect to use
  your site.
• E.g. a road safety site may attract
• young children
• Teenagers
• Parents
• P-platers
• old drivers.
• Each group will want different information.

6
Know your users

• For each user group, ask
• How important are these users to me, on a scale
  of 1 to 10?
• What do these users need in terms of content?
• Where can I get this content from?
• Whats the best way of presenting this content to
  this group?
• Do they have any special characteristics or needs
  that will constrain the content or means of
  presentation?

7
Organise the content

• One main idea per page
• Use multiple pages rather than overcrowd a page.
• Use a storyboard to organise sections and
  subsections of the content.
• Use a hierarchical structure.

8
Organise the content

• Dont forget the usual pages
• Index (the starting page, the front door to the
  site. It leads to every piece of information the
  site contains)
• About Us (information about the organisation
  producing the site)
• Contacts (email, phone, fax, street address, IRC
  chat ID etc)
• Privacy Policy (saying what data you collect,
  why, and how its used)
• Open the site with non-technical introductions,
  explanations and generalities. Let users find
  out where their content is.
• Once users have found the area relevant to them,
  subsections provide targeted information with
  increasing detail and depth.

9
Index page

• Very first items on the site below help new
  visitors find their content. Note the search
  bar and clickable user categories

10
Site Navigation

• Main navigation   The main navigation bar should
  appear on all pages in the same style and in the
  same place.
• In addition to standard links to the home page
  and contact information, the main navigation bar
  should include links to the top-level groups of
  content.
• Limit the number of links in one place hundreds
  of links are impossible to search efficiently.
  If there are more than about ten link, look at
  ways to further refine the hierarchical structure
  of the site.

11
Bad
Humanities
The Arts
Contacts
Contacts
Science
LOTE
Maths
Music
School index page
English
Health/PE
Year 7
Year 8
Year 9
Year 10
Year 11
Year 12
16 links from the index page
12
Better!
English
The Arts
Humanities
Music
Science
Health/PE
Learning areas index page
Maths
LOTE
Contacts
School index page
Only 4 links from the index page
Contacts
Year 7
Year levels index page
Year 10
Year 9
Year 8
Year 11
Year 12
13
Subsidiary navigation

• Main Navigation leads from the root (school index
  page) to a subsection of the site (e.g. learning
  areas)
• Subsidiary navigation is used to get around
  within the subsection.

Learning areas index page
School index page
Maths
learning areas index page
English
14
Secondary Navigation

• Provides users with alternative ways of
  navigating.
• Users who know what they want to do might like a
  drop-down list box containing links to the main
  content groups.
• Site search boxes and site maps can be added
  easily to help users to quickly locate
  information.

15
Navigation Conveniences

• If you must have a long page (best avoided where
  possible, but may be needed to make printing
  easier) put a link (e.g. Go to top) at the
  bottom of the page to an anchor at the top.
• All pages on the site must have a link to the
  index page.
• Subpages (e.g. Year 10) should have links back
  to their parental index pages (Year Level Index
  Page)

16
Navigation within pages

• Link to a place within a page using an anchor.
• E.g. See below for information on camp food has
  a link to an anchor further down the same page.
• Can also create links to anchors on other pages
• \events\2009\camps\year07\index.htmfood
• Always use clear, bold headings within pages.
• Use hierarchical heading styles (e.g. H1, H2)

17
Table of Page Contents

• Its better to split big pages into subpages
• Otherwise, the top of the big page could contain
  a table of contents with links to anchors at each
  topic.

18
A table of contents linked to anchors further
down on the same page
19
Where am I?

• Some complex sites show users their current
  location in the site

20
A nice helpful touch

• Let the user navigate to the last page they were
  on.
• lta hrefjavascripthistory.go(-1)Return to the
  last page you were onlt/agt
• Its the equivalent of them clicking the BACK
  button in their browser.

21
Tip! Always use leading zeroes so files sort
properly alphabetically. Otherwise you get
nasty lists like Pic1, Pic100, Pic128, Pic2,
Pic3983, Pic4, pic59,pic6 etc!

• \events\2009\camps\year07\index.htmfood

22
In Conclusion

• Sites need planning
• Logical, hierarchical structure
• Index page does not contain details
• It leads to detailed sub-sections on the site
• Use clear, consistent links
• Know the characteristics and needs of users
• Make life pleasant for users

23
IT APPLICATIONS SLIDESHOWS

• By Mark Kelly
• mark_at_vceit.com
• vceit.com

These slideshows may be freely used, modified or
distributed by teachers and students anywhere on
the planet (but not elsewhere). They may NOT be
sold. They must NOT be redistributed if you
modify them.