Presentation on theme: "IT Applications Theory Slideshows By Mark Kelly Vceit.com Website Information Architecture."— Presentation transcript:
IT Applications Theory Slideshows By Mark Kelly firstname.lastname@example.org 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? 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.
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 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.
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?
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.
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 7Year 8Year 9Year 10Year 11Year 12 English Maths Science The Arts Humanities LOTE Music Health/PE 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 ArtsHumanities LOTE Music Health/ PE Year levels index page Learning areas index page Contacts Only 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 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.
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. Its 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 Kelly email@example.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