Planning Site Navigation

(Hyperlinks)

User like to explore the web site, so navigation of a web page is essential for the visitor to feel comfortable and return again to the site in future. Unlike paper media in which user have to flip through pages or go to index, to go to a particular page , a web page can make use of the power of hyperlinking to navigate web pages.

Creating usable Navigation:

• Providing effective navigation includes giving hints to user about their location in the web page along with link to other pages in the web site.• The user should be able to answer the following questions:

Where am I? Where can I go? How do I get there? How to get back to where I started?

• For the user to be able to answer the above question, the following information to be should be provided on the pages though navigation cues or hints.

1. User should be provided information about the current page and the type of content they are viewing.

2. Information regarding the relative position of the user in the web site. e.g. Home>Tutorials>Javascript>Fuctions

3. The user should also be provided consistent, easy to understand links.4. The visitor should be provided alternatives to the bowsers' back button

that lets user return to where they started link prev button, next button etc.

Providing Navigation cues:

Limiting Information Overload:

• When users are presented with too much information at one time in the form of lengthy pages that scroll and scroll and too many links and buttons, they get lost and frustrated.

Techniques to limit the information• Creating manageable segments: Break your content into smaller files, and

then link them together. Provide logical groupings of choices under meaningful heading or links. Keep a flat hierarchy. A good rule to follow is that users should not have to click more than two or three times to get to the information they desire• Controlling the length of the page: Do not make users scroll through

never-rending pages. Long files also can mean long downloads. Provide plenty of internal links to help users get around, and keep the pages short. You can judge your page length by pressing the Page Down key; if you have to press it more than two or three times to move from the top to the bottom of your page, break up the content.• Use hypertext to connect facts, relationships, and concepts: Provide

contextual linking to related concepts, facts, or definitions, letting the users make the choices they want. Know your material, and try to anticipate the user’s information needs. For e.g. on a web page teaching laws of motion, one can hyperlink the words speed, acceleration etc.

Providing Text-Based Navigation:

• Most effective • Work in both graphical and non-graphical browsers.• It is best to have both text-based and graphics-based links on the web

site.

Types of text-Based Navigation:

• Linking with a text-based navigation bar.• Linking to individual files.• Linking to document fragments.• Linking to external document fragments• Adding page turners• Adding contextual linking

Linking with a text-based navigation bar.• The table of contents mu be linked to other main pages in the web

site. This can achieved by inserting a text based navigation bar on the top and bottom of every page in the web site.

Linking to individual files:• The table to contents lets users access whatever chapters they choose

to access. Hence the chapters should be hyperlinked in the table of contents page.• <a href=“character1.html”> Chapter One </a>

Linking to document fragments:

• In the table of contents page the users can scroll down the page to view the rest of the content. Supposing they do not want to click on any of the content, they have to return to top of the page to see the main links. Instead they can be provided with a hyperlink to come back to the top of the page by providing a Top link from with the file. This Top link allows user to jump to the top of the page.

• This requires two <a> anchor elements: one uses the name attribute to name a fragment identifier in the document; the other targets the fragment name in the href attribute.

• <a name="pagetop">

• <a href="#pagetop"> Top </a>

Linking to external document fragments:• User should be presented a means to link from the table of contents

to a particular topic within a particular chapter. • <a href=“chapter1.html#topic1”> Topic One </a>

• <a name=“topic1”> Topic One </a>

Adding page turner:• Each chapter file contains a navigation bar at the top and bottom as

show in the figure below:

Adding contextual linking:• Contextual linking allows users to jump to related ideas or terns by

clicking on the on the word that interests them. These terms can be directly embedded in the content. The key terms can be anticipated when designing the site. The next figure shows the World Wide Web site which makes use of contextual linking. E.g. css, graphics, scripting

Providing graphics-based Navigation:• When graphics are used, it increases the appeal of the web site. To

make sure graphics help user, they should be used consistently throughout the web site. Consistent placement of graphics also builds trust in the users and help them feel confident that they can find the information they want.

Graphics should be used consistently for the following reasons:• To provide predictable navigation cues for the user -once users learn

where to find navigation icons, they anticipate them on every page. Consistent placement and design also build users’ trust and help them feel confident that they can find the information they want• To minimize download time – once the graphics are downloaded to

the cache, they will be retrieved by the browser for subsequent pages and need not be downloaded again and again.

Using text images for Navigation:

• Many web sites used text images as navigation graphics rather than plain HTML text , because one can choose from many design choices.

Using icons for navigations:

• Icons can be used in the navigation bar.

Hyperlinks

• <a> tag defines a hyperlink.• By placing the arrow on the hyperlink and clicking on it, the user will

jump quickly or instantly from one location to another location either within the same document, in another document or somewhere else on the World Wide Web. It is an underline word or phrase , or image.

• To make a hyperlink, add the href attribute to the Anchor (a) tag. Href can have an file name. (absolute value or relative ).

• <a href=“filename.html”> Topic </a>

By default, links will appear as follows in all browsers:• An unvisited link is underlined and blue• A visited link is underlined and purple• An active link is underlined and red

• You can open hyperlink in a new browser window target attribute with _blank as the value is used.

<a href= "bscit.html" target="_blank"> B.Com. </a> <br>

Internal hyperlink

• To jump to a specific location within the document, add the name attribute to the Anchor (a) tag at the that location. At the hyperlinked word or text , add href attribute to the Anchor (a) tag. • <a name="pagetop">

• <a href="#pagetop"> Top </a>

Entities

• Entities are expanded when a document is parsed by a html parser. Some characters have a special meaning in HTML like the less than sign (<) that defines the start of an HTML tag, the greater than sign (>) that defines the end of a HTML tag.

Entity Character Referenced

&lt; <

&gt; >

&amp; &

&quot; “

&apos; ‘