Basic of Web Design Unit 2

______

Unit 2 Layout – Navigation

Structure

2.1 Introduction

Objectives

2.2 Principles of effective navigation

Principles of effective website navigation

2.3Hierarchal organization

2.4Task-based organization

2.5Other ways to organize your navigation

Frames

Sub windows

2.6Making navigation easy

Bread crumbs

Links, embedded & external

Error messages

Unified browsing hierarchy

High-visibility buttons

2.7Accessibility issues

How to make Web content accessible to people with disabilities

2.8 Summary

2.9Glossary

2.10 Terminal Questions

2.11 Answers

2.1 Introduction

Website navigation helps visitorsto move from one page to another page of the web site without difficulty. It isthe technique and skill which you apply to a web site design so that it helps visitors of your site to move easily from one page to another related page. It also involves your artistic talent of laying out the various links, pictures and buttons which hyperlink the pages in the web site.If you understand the intent of the visitor,then you can design an effective navigation system.

You havealready explored in unit 1 as to how you can design the page layout of web sites for effective presentation of the content or information. Here you will learn the principles of navigation and how to arrange different navigation components on a page.

Objectives

After going through this unit, you should be able to:

  • List the essential principles of an effective navigation system
  • Explain the different ways of laying outweb site navigation components
  • Categorize differentnavigation systems
  • Construct an effective navigation system for a web site
  • Discuss different issues involved in accessibility i.e. making a navigation system amenable for use by physically challenged persons.

2.2 Principles of effective navigation

2.2.1 Principles of effective website navigation

A web site’s navigation system should enable users to know

  1. where they are in a web site
  2. where else they can go from there and
  3. minimize their memory load in using the navigation system

To this effect you can use some standard web site navigation design techniques. Designing navigation is like designing a road-sign system. The over-riding design principle is functionality, not style. A reader on the Web, like a driver in a car, moves quickly. Navigation is never the end objective for the reader. It is there to help him get somewhere. Most of the people don’t stop just to readweb page text content. They are generally in a hurry to ‘go there’. Navigation works best when the reader hardly notices that it is there.

Therefore navigation design should always be

  1. Simple and direct
  2. Alwaysbe about actual work and should not concentrate very much on ‘Bells and Whistles’. (The term ‘Bells and Whistles’ refers to decorative and non-essential GUI components)
  3. Functional and help the reader to get to where he wants to go
  4. Helpful to user to start his work on the web site as fast as possible

Therefore navigation design should always be simple and well thought out. It should not be concerned very much about ‘Bells and Whistles’. In computer terms we call the GUI (Graphical User Interfaces) which is attractive but which does not contribute to the overall effectiveness, as a GUI with ‘Bells and Whistles’. Functionality and helping the reader to get to where he wants to go and start his work on the web site are the most important objectives in the design of a navigation system for a web site.

Effective navigation demands that you providecrisp and leading information on what to do, to goto the page in the web site that gives the information. It involves hyper linking through text normally and sometimes through pictures and buttons. If a user can always know the answers to the following questions, then your navigation system can be called effective. The questions are:

  • Where am I?
  • Where else can I go from here?
  • How did I get here?
  • How do I get back to the previous point?
  • How do I get back to the main page from where I started?

To allow users to know these vital navigational information pointers, you have to provide

  1. Current page information and the type of content they are viewing
  2. The actions that can be initiated from this page
  3. Where they are in relation to the main or home page
  4. Links that are Consistent and easy to understand and
  5. A ‘BACK’ button to go to the previous page incase the user wants to backtrack

The figure givenbelow is simple but contains principles of effective navigation

Figure 2.1 Effective links and text for easy navigation

Consistent and easy to understand Navigation

The hyper links you provide should be consistent throughout your web site, which means

  1. They should use standardized text i.e. one term for one component or action
  2. They should have uniform color code in the web site. Example: ‘red’ for ‘deletion’ etc;
  3. Should be ordered logically i.e. most frequently used link first
  4. Should have consistent X and Y co-ordinate placement of buttons like ‘BACK’ or ‘HOME’ etc. to minimize mouse movement
  5. Provide context based help and / or comments for example; you can embed hyper links for words which may need some more explanation.

Self-assessment questions

  1. The over-riding design principle is ______(style / functionality).
  2. Effective navigation demands that you provide ______information to guide the user to the page that gives the needed information (leading / confusing).
  3. The hyperlinks you provide need not be consistent throughout the website (true/false)

2.3 Hierarchal organization

Youshould help visitors to your web site, to find the content they want easily. They should not hunt through a lot of choices. To this effect there are a few well tested ways to organize the navigation within a hypertext environment. They are:

  1. Hierarchical organization
  2. Task based organization
  3. Other organizations like
  4. Frames based and
  5. Sub window basedetc;

In this sub section hierarchical organization will be discussed.
Navigation on a web site is achieved by a collection of links (i.e. text/images/flash/java applets etc;) that form the web site’snavigation ‘Menu’ or the web site ‘navigation bar’. This navigation menu or bar is usually placed vertically on the left or horizontally near the top of the web page.Navigation bar is used in small web sites and as also in large web sites.

The navigation starts from the main page known as home page. It is generally named index.html or index.htm.

The figure below illustrateshierarchical organization which takes the visitor to other detail pages A, B or C by hyper links.

Figure 2.2 hierarchical organizations 1

An example can be

  • Home → About us
  • Home → Before you Order
  • Home → Choose Product etc;

Type of navigation

Hierarchical organization with alternative choices is another type of navigation layout. This provides for parallel paths, within hierarchy. This depends on information content and its independent sub divisions.

The figuregiven belowdepicts this type of hierarchical organization 2based navigation.

Figure 2.3 hierarchical organizations 2

An example can be

  • Home → Arithmetic → Addition →Multiplication Tables
  • Home → Arithmetic → Subtraction →Multiplication Tables

Hierarchical organization with ‘strict linear choice only’ is another type of navigation layout. This does not provide for parallel paths, within hierarchy. Hierarchical organization can sometimes, includelinear organization also. The choice depends on information content and its sub divisions.

The hierarchical organization 3 given belowdepicts this type of navigation.

Figure 2.4 hierarchical organizations 3

An example can be

  • Home → Select HTML → Create File → Save As → Edit file
  • Insert
  • Delete etc.;

Self-Assessment Questions

  1. Navigation bar is used in small web sites and also in ______web sites.
  2. Navigation usually starts from ______pageon a web site.
  3. Hierarchical organization can sometimesinclude ______organization also.

2.4 Task-based organization

Task based navigation is primarily a ‘black board’ type of navigation. It is amenable for multiple operations to be undertaken independently of others, even simultaneously, from different browser windows. It is like writing separate material on a black board or white board at different places independently. But sometimes, depending on work flow, the paths further down the tasks can be again hierarchical or linear or mixed, like the ones described above.

The task based navigation is illustrated below.

Figure 2.5 Task based organization

Task based navigation is generally preferred when the content of the web site is fairly flat.

Another example can be seen in the figure below which gives a non-hierarchical organization of course contents which can be navigated to, directly based on learning task and objective of the visitor.

Figure 2.6task based organization, example

Here you can directly get the overview of the contents and go to any linked page of your choice by clicking on that hyper linked text line.

In Dreamweaver, to link any text line to its next level detail page, you can do the following:

  • Start Dreamweaver which is a visual HTML editor,
  • Go to Document window’s ‘Design view’.
  • Select text or an image to be linked, for example ‘ERP Course Plan’
  • Open the Property inspector (Window→ Properties)

Note: You can use the Property inspector’s file folder icon to browse and select the detail page to link to; or type the link address in the ‘Link Text box’ to create links from an image, an object, or text to another document or file.

  • and do one of the following:
  • Click the folder iconto the right of the ‘Link box’ to browse to and select a file.

And then click Select OR

  • Type the path and filename of the document in the Link box

Self-Assessment Questions

7. ______Navigationis amenable for multiple operations to be undertaken independently.

8. Task based navigation can include ______or ______navigation also.

9. Task based navigation is preferred when the content of the web site is ______.

2.5 Other ways to organize your navigation

The following other ways of organizations also can be used for navigation, with caution.

They are

  1. Frames based and
  2. Sub window based etc;

2.5.1 Frames:

Frames based navigation is very elegant. It is introduced by Internet Explorer(IE) browser. IE renders frames very well. But some browsers do not support it. Also many a time due to browser incompatibilities, the target frames may not display contents at all or render differently.So in real life and mission critical applications, frames based navigation has to be used with care.

A ‘frameset’ contains two or more ‘frames’.

A ‘frame’ is a region in a browser window that can display an HTML document independent of what’s being displayed in the other frame or frames in the same browser window. Frames provide a way to divide a browser window into multiple regions, each of which can display a different HTML document. In the most common use of frames, one frame displays a document containing navigation controls, while another frame displays a document with content. An example of frames based navigation is shown in thefigure 2.7below.

A frameset is an HTML file that defines the layout and properties of a set of frames, including the number of frames, the size and placement of the frames, and the URL of the page that initially appears in each frame. The frameset file itself doesn’t contain HTML content that displays in a browser, except in the ‘no frames’ section. The frameset file simply provides information to the browser about how a set of frames should look and what documents or files should appear in them.

Frames based navigation appears to be fast. This is because only a part of the screen gets updated. Thefigure 2.7 below shows

  • a frame layout consisting of three frames:
  • one narrow frame on the side that contains a navigation table,
  • one frame that runs along the top, containing the main comment information of the example, and
  • one large frame that takes up the rest of the page and containing the main content.

Each of these frames displays a separate HTML document.

The HTML code below is rendered in Internet Explorer as given in figure Please note that the frameset file itself does not contain HTML content that displays in a browser, except in the ‘no frames’ section

<html>

<head>

<title> MVSP frames example</title>

</head>

<frameset cols="20% , 80%" >

<frame src="left.html" name ="left" >

<frame src="main01.html" name ="right" >

</frameset>

<noframes>

<body>

<h3>

If you see this, you are on a no frames browser

<a href="main01.html> main </a>

<a href="author.html> author </a>

<a href="silicon.html> silicon </a>

<a href="illustration.html> illustration </a>

</h3>

</body>

</html>

Table 2.1 Frameset HTML code example

The HTML code in table 2.1 is rendered in Internet Explorer as given in figure 2.7.

Figure 2.7 Frames example browserview (of code in table 2.1)

To view a set of frames in a browser, enter the URL of the frameset file.The browser then opens the relevant documents to display in the frames. The frameset file for a site is often named index.html, so that it displays first by default, if a visitor doesn’t specify a filename.

2.5.2 Sub windows:

When you browse the web, many a time you would have seen the pop-up or sub windows. These sub windows are used for giving links and information, and to remind you about some pending action. These get painted based on a triggering action like time of day, or launching a new window, or pressing a button etc; Generally these are now-a-days replaced by help balloons which can be incorporated for text boxes by the ‘title’ attribute. ‘Tool tips’ is another name for the same help balloons.

As these sub windows can be distract your attention from main window, you should use them sparingly or not at all. Of course the advantage of sub windows is that both main window and sub window are visible at the same time. Opening a new window in navigation is always preferable to sub windows.

A sub window that pops-up in a main window is illustrated in figure 2.8 below.

Figure 2.8 Sub window examples[v1]

Main window is also known as the ‘host window’. The sub window is generally launched by java script function call. The text lines in the sub window also can be hyper linked. For example, the sub window shown here has another navigation button ‘Get it now’ in red color, which takes you to some other site.

Self-Assessment Questions

10. Some browsers ____support frames based navigation. (do / do not)

11. Frames based navigation makes ______navigation. (faster / slower)

12. Subwindow based navigation is preferred when the content of host windowand the ______needs to be seen together.

2.6 Making navigation easy

Content is the essence of every website.Navigation is the fundamental tool of information access.

When you deal with large quantities of content, you have to properly index, categorize and link the ‘table of contents’ to respective information pages. This is very important.If you can’t find information due to ineffective navigation,then the web site’s objective itself is defeated.

You navigate in a website one screen at a time. It’s very easy to get confused and get lost. So navigation design requires detailed planning. Once launched, it should not to be changed often. If you frequently change the navigation format, you risk confusing your regular readers. If every week or month you change the structure and navigation of your website, then you will risk losing your regular visitors who are accustomed to your earlier format.

A reader who gets lost or confused is likely to hit the Back Arrow of the web browser’s menu bar. Therefore, you should create a navigation system that makes the reader feel comfortable, and allows him to find the content he wants, quickly. It is critical to the success of any website.

You can have your navigation based on pictures / icons and text. This makes it far easier to navigate. When you use pictures, they should be easily identifiable with respect to the goal of navigation.

Figure 2.9 of Travelocity.com given below illustrates this point.

Figure 2.9 Picture cum text based navigation

Other methods given below also make navigation easy. They are:

1 bread crumbs

2 links, embedded & external

3 error messages

4 unified browsing hierarchy

6 high-visibility buttons

2.6.1Breadcrumbs

Some sites mighthave a large hierarchical information structure, typically more than 3 levels deep. Such sites are medium to large sized and include E-commerce Sites, Catalogs, Portal Sites, Pay per use sites and Corporate Sites etc. The site will generally have hierarchical type of Main Navigation that allows users to traverse the hierarchy. Navigation bar shows all navigation items with hyper links. Sometimes users may want to jump several steps back instead of following the hierarchy, forward. Users may be unfamiliar with the hierarchical structure of the information. In such situations, the users need to know where they are in a hierarchical structure and navigate back to any of the higher levels in the hierarchy they want to goto, directly.

You show the hierarchical path from the top level to the current page and make each step hyperlinkedexcept the present page and keep the present page as text only without any hyperlink.

Home→Products→Watches →Imported→ Rolex Models

Thismethod of helpful navigational information where only the present page is not hyperlinked, is called ‘bread crumbs’.This is very helpful to the ‘first time users’ of the site.