Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

Information Architecture

Damien Markey

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

Damien Markey- Information Architecture

• Investigate the importance of navigation for sites/CD productions

• Structuring Content – “Chunking”• Common Navigational Models

– Their suitability for different scenarios • User Paths

– The purpose of User Paths– Identifying User paths from User analysis

• Examples of sites and DVDs

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

The Importance of Navigation

• Without good navigation that is tailored to the users needs– Users will not find what they want– They will not provide the information the site

requires– The users will become frustrated, leave and not

return– Customers will be lost!

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

Good Navigation – Build Components

• Navigation should make logical sense to the user (not necessarily the site designer)– Needs to be well structured– Needs to be well signposted– Needs to suit the users needs

• We will cover these through– Chunking– Design (covered here and in the design lecture)– User paths

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

“Chunking”

• Gather as much content for the site as you can– Or descriptions of content to be created

• This process does as it says– Survey/Scan/Review all the content– “chunk” content into logical groups

• Re-view the content– Create sub groups of content for under group

headings– Stop at level of detail where pages have similar

layout/links but different content

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

Chunked site

Major GroupingsMajor Groupings

Minor GroupingsMinor Groupings

Content LevelContent Level

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

Common Navigational Models

• Directed Navigation– User is guided to a particular area e.g.

• GAP.com• Searchable Navigation

– User can search for the area they want e.g. • Google.com or Yahoo.com

• Tabbed Navigation– Heavily categorised sites that show range of

options e.g• www.amazon.com

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

Navigational Models - Directed

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

Navigational Models - Searchable

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

Navigational Models - Tabbed

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

Navigational Models - Linear

Here the user is guided in a linear (forwards – backwards) fashion

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

Common Navigational Models - Benefits

• Directed– Good for highly segmented, niche sites such as

clothing, jewellery, Music• Searchable

– Good for large, unstructured, reference style sites• Tabbed

– Suitable for large, broad-ranged, structured sites• Linear is useful for literary book/magazine sites• For more guidance try the “Yale Style Manual” at:

http://www.webstyleguide.com

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

Navigational Models - Design

• Design should signpost the user to– Where they are– Relevant links– Return (or Exit) options

• Closely linked to the tone/style of the site

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

Paper Prototypes

• These are example pages that simulate on paper– the home page– The main section pages– Main content pages– Any important transaction pages

• They are not visual previews of the page but example to help you go through the user paths

• A downloadable kit is available at http://www.infodesign.com.au/usabilityresources/design/paperprototypinggraphics.asp

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

User Paths

• User paths are derived from the user cases/profiles in the definition stage

• They are “typical” transactions that these users may perform on the site e.g– User wants to buy a Washing Machine– User wants the latest story – User wants to see stories on their football team– User wants to contact the company

• Create user scenarios and run through your designs trying to achieve the tasks

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

User Paths

• These scenario run throughs are called the user paths

• Your aim is to make them as short as possible – to avoid user frustration – and provide the exact information the user wants

• These should be tied closely to your user’s needs as identified in the analysis

• Once completed review your site chunks again to try and optimise the navigation

Copyright © 2003 Bolton InstituteCopyright © 2003 Bolton InstituteDepartment of Computing and Electronic Technology - Department of Computing and Electronic Technology - Multimedia Integration and ApplicationsMultimedia Integration and Applications

Examples of good and bad navigation

• We will look at several websites and DVD’s to compare good and bad navigation elements including– Good

• News.bbc.co.uk• www.amazon.com• Terminator 2 DVD

– Bad• Highlander DVD• www.melaniegriffith.com