IT Applications Theory Slideshows

By Mark Kellymark@vceit.com

Vceit.com

Website Information Architecture

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.

What is information architecture?

• It’s 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.

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)

Know your users• If you don’t know the characteristics and needs of your

audience, you’ll 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.

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?– What’s 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?

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.

Organise the content• Don’t 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 it’s 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.

Index page

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

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.

Bad

School index page

Year 7 Year 8 Year 9 Year 10 Year 11 Year 12

English

Maths

Science

The Arts Humanities

LOTE

Music

Health/PE

Contacts Contacts

16 links from the index page

Better! School index page

Year 7

Year 8

Year 9

Year 10

Year 11

Year 12

English

Maths

Science

The Arts Humanities

LOTE

Music

Health/PE

Year levels index page

Learning areas index

page

Contacts

ContactsOnly 4 links from the

index page

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.

School index page

Learning areas index

page

Maths

English

learning areas index page

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.

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”)

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.htm#food• Always use clear, bold headings within pages.• Use hierarchical heading styles (e.g. H1, H2)

Table of Page Contents

• It’s 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.

A table of contents linked to anchors further down on the same page

Where am I?

Some complex sites show users their current location in the site

A nice helpful touch

• Let the user navigate to the last page they were on.

• <a href=“javascript:history.go(-1);”Return to the last page you were on</a>

• It’s the equivalent of them clicking the BACK button in their browser.

• \events\2009\camps\year07\index.htm#food

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!

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

By Mark Kellymark@vceit.comvceit.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.

IT APPLICATIONS SLIDESHOWS