1. IT Applications Theory Slideshows By Mark Kelly mark@vceit.com Vceit.com Website Information Architecture

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 School index page Year 7Year 8Year 9Year 10Year 11Year 12 English Maths Science The Arts Humanities LOTE Music Health/PE Contacts 16 links from the index page

12. Better! School index page Year 7 Year 8 Year 9 Year 10 Year 11 Year 12 English Maths Science The ArtsHumanities LOTE Music Health/ PE Year levels index page Learning areas index page Contacts Only 4 links from the index page

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. School index page Learning areas index page Maths English learning areas index page

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.htm#food 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. Its the equivalent of them clicking the BACK button in their browser.

21. \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!

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. By Mark Kelly mark@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. IT APPLICATIONS SLIDESHOWS