Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Web Site Navigation Web Site Navigation We use various navigational systems in our everyday lives • Maps • Street signs • A Compass Web Site Navigation Slide 2 Navigation on the Web • A website should have a well-designed navigational scheme • A hierarchical organisation scheme helps users find their way • A secondary navigation system is often needed to give greater flexibility of movement within the site Web Site Navigation Slide 3 Elements of a Navigation System • The tools used – to work out your journey – To determine where you are and hopefully find your way back • We are concerned with tools used to navigate your website Web Site Navigation Slide 4 Integrated Elements • Elements that appear on all content-bearing pages and are used over and over again by the user – Navigation bars (either text or graphic) – Frames – Pull-down menus – Browser built-in features Web Site Navigation Slide 5 What is A Navigation Bar? • A collection of hypertext links grouped together on a page composed of either graphics or text Web Site Navigation Slide 6 Graphic Nav Bars • Advantages – Can create interest for viewers – Can use metaphors that hint at the content • Disadvantages – Slower to load – Look different on different machines – Cost more to design – People turn off graphics for speed – Text-only browsers Web Site Navigation Slide 7 Text Nav Bars • Advantages – Quick and cheap to produce – Load fast – It is very easy to add new options • Disadvantages – May lack a little in interest or novelty Web Site Navigation Slide 8 Frames for Navigation • Frames are created using HTML code that divides the screen into 2 or more scrollable areas. • Some of the screen areas may remain fixed and some may scroll and change • Having an unchanging frame to hold links can make the site easy to use Web Site Navigation Slide 9 Frames • Advantages – The designer can create a static or independent scrolling navigation bar that appears on every page. – This separates the navigation system from the content – It can add consistency and context for the user Web Site Navigation Slide 10 Problems with Frames • Disadvantages – Frames take up a lot of screen space – Can disable bookmarks and standard hyperlink colours – Can be more difficult to print pages – Back button may not work – Frames are slow loading – Problem of ‘frames within frames’ – Different browsers display frame content differently Web Site Navigation Slide 11 Pull-Down and Pop-Up Menus • Pull-down menus are created using interactive forms • Pop-up menus are created in Java or JavaScript Web Site Navigation Slide 12 Menus – Advantages • People are familiar with menus as they are used in all software • Easy to use as you need not remember options – Disadvantages • Menus may have too many options (clutter) • Options are hidden from user until they click on them so what is available is not obvious Web Site Navigation Slide 13 Browser Built-in Features • Designers should NOT ignore the following built-in features of Browsers • Open URL ….. can go to any web page if we know its address • Back and Forward buttons …. backtracking capacity • History …..records sites visited during current session Web Site Navigation Slide 14 Browser Built-in Features • Bookmarks/Favourites …… allow the user to store current page address for easy retrieval • Hyperlink colours …… standard colours for unvisited and visited links • Prospective view ….. as user hovers over a link, the destination URL appears on screen giving the prospective viewer a hint as to what will be found if that link is pressed Web Site Navigation Slide 15 Remember • Sometimes site designers ignore browser-based navigation features ie modifying link colours. This can cause confusion for users • Web pages do not exist without a web browser so browser features should not be disabled Web Site Navigation Slide 16 Remote Nav Elements • Things that may only appear once in the site or only on the Homepage • May only be used at start of a browsing session – – – – Table of contents Index Site Map Guided Tour Web Site Navigation Slide 17 Table of Contents • Gives a ‘birds-eye’ view of the site’s content – A bit like software documentation or help systems • Needs a further navigation system to reach the detail of the site Web Site Navigation Slide 18 Advantages of TOC • Provides a broad view of the content of the site • Facilitates fast access to random areas of the site • If based on hyperlinks it can bring user directly to portions of content they want Web Site Navigation Slide 19 Disadvantages of TOC • Useless unless the site’s organisation scheme is hierarchical • May be a waste on a small site • Can overwhelm the user with information • The design should be kept simple Web Site Navigation Slide 20 The Site Map • Advantages – Gives a graphical representation of the architecture of the website – A bit like the Table of Contents only in graphical format – ImageMaps can be used here sucessfully Web Site Navigation Slide 21 Site Map Difficulties • Maps are used to navigate physical space rather than intellectual space. Not typically used for navigation through text. Web Site Navigation Slide 22 The Index • A website index presents key words or phrases alphabetically • Good if you KNOW the name of what you are looking for • An index should lead directly to the content being sought Web Site Navigation Slide 23 The Guided Tour • A good tool to introduce new users to major content areas of a website • Can be used as a marketing tool for the site • Must remember that many people will never use it and few people will use it more than once! Web Site Navigation Slide 24 A Navigation System should … • Build context – Help the viewer to know and understand where they are at all times • Incorporate flexibility – Use more than one route to arrive at a particular web page Web Site Navigation Slide 25 Build Context • Search engines bypass homepages • People ‘print’ web pages to read later. This takes them out of context – All pages should contain the organisation name – User should be able to see the navigation structure of the site and where he/she is at all times Web Site Navigation Slide 26 Flexibility • Hypertext supports both lateral and vertical navigation. The user should have the option to move either way • Give the viewer a couple of ways to get back to where they came from or go forward Web Site Navigation Slide 27 Types of Navigation Systems • Hierarchical • Global • Local Web Site Navigation Slide 28 Hierarchical The Primary Navigation System Home Level 1 Level 2 Level 3 Level 4 Web Site Navigation Slide 29 Hierarchical Structure • Problems – The branching structure is too deep breaking down into too many sub-categories – The number of categories offered at the start is too many – In many hierarchies the user is forced to return to the top (home page) to take another path Web Site Navigation Slide 30 Flattened Hierarchy • Allow you to move laterally through a websites categories • It allows cross-navigation through a group of cross-navigational links Web Site Navigation Slide 31 Global Navigation • A good global navigation system allows the viewer access to any part of the site by using vertical and lateral navigation. It allows flexibility about which path to follow Web Site Navigation Slide 32 Local Navigation Systems • Additional to the global navigation system – A product catalogue which viewers may have to search for a product they want to buy (CD, book etc) then this searching could have its own navigation system – It is like a sub-site of the main site Web Site Navigation Slide 33 Global v Local • The global navigation system should always extend through the subsite, as people may need to get back to the homepage • Local navigation is only used to complement a global system Web Site Navigation Slide 34 Some Rules • Place the navigation bar at the top or bottom of the page (both if it is a long document) but be consistent • All pages should provide links to the home page • Each level should have links to the level above and below it Web Site Navigation Slide 35 Rules cont/ • Pages should not include links to themselves • Navigation system should have a system to indicate ‘where you are now’ (context) • People read from left to right so the ‘Homepage’ link should be on the left Web Site Navigation Slide 36 Enhance your Navigation • Buttons – Familiarity. Users find it easy to associate buttons with links • Bullets – A column of items with bullets immediately draws the users’ attention Web Site Navigation Slide 37 Enhance Navigation • Reserve a distinct visual space for navigation – To do this use borders, lines or other visually separating characteristic to show navigation area • Label all images/buttons • Use text as well as images where possible • Be consistent Web Site Navigation Slide 38 Enhance Navigation • Provide clues to current location ‘You are Here!”. Not everyone comes in the ‘front door’ Web Site Navigation Slide 39 Summary • No single combination of navigation elements works well for all sites • You need to remember you are: – Building context – Improving flexibility – Helping users find the information needed • Design at each level influences the design at subsequent levels Web Site Navigation Slide 40