IT Applications Theory Slideshows

1. Website Information Architecture IT Applications Theory Slideshows By Mark Kelly mark@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? • 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.

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 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.

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? • 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?

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 • 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.

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 English School index page Health/PE Year 7 Year 8 Year 9 Year 10 Year 11 Year 12 16 links from the index page

12. Better! The Arts English 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 Learning areas index page • 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 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.htm#food • Always use clear, bold headings within pages. • Use hierarchical heading styles (e.g. H1, H2)

17. 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.

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. • <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.

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.htm#food

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@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.