1.
Web Design Principles
Planning Site Navigation
Mukesh N. Tekwani
mukeshtekwani@hotmail.com

2.
Objective
 Understand navigation concepts
 Build navigation schemes
 Provide location information
 Use hypertext linking creatively
 Use graphics for navigation and
linking
2
Previous Next

3.
Creating Usable Navigation
 “Hypertext” is a system in which objects such
as text, images, music, programs, etc can be
linked to each other.
 Advantages of hyperlinks:
• Hyperlinks are easy to create.
• There is no download overhead in text-based
hyperlinks
• With hypertext links, users can move through
content in any order.
• Related content can be linked to each other
3
Previous Next

4.
Graphics-based Navigation
 Hyperlinks can be provided through attractive
graphics elements.
 Disadvantages of graphics elements for
navigation:
• Graphics images take a long time to download
• User may turn off graphics in his browser
 Use the same graphics elements for navigation
on all Web pages.
 Once the graphics elements are downloaded in
the user’s cache, they are not downloaded
again for other pages.
4
Previous Next

5.
Graphics-based Navigation
 Graphics –based navigation can enhance the
appeal of a website
 Navigation graphics should be standardized so
that:
• They provide predictable navigation cues for the
user.
• Once the user knows where to find navigation icons
and how to use them, they expect these icons to
appear at the same place on every page.
• To minimize the downlaod time – once a graphic
image is downloaded, the browser will retrieve it
from the cache for all subsequent pages where it
appears.
5
Previous Next

6.
Graphics-based Navigation
 Even if graphics-based navigation is used, text-
based links should be provided so that if icons
do not appear, users can still navigate through
text links.
 Graphics icons may not have the same
meaning for everybody. That is why, we should
use text-based links also.
 If graphic icons are used for navigation, use
directional arrows rather than hand and finger
symbols.
6
Previous Next

7.
Text-based Navigation
 Advantages of text-based navigation:
• There is no overload involved in downloading the
webpage with text-based graphics.
• Text-based navigation is visible even if the user has
turned off graphics in the browser settings.
• It can work in both text-based and graphical
browsers.
• Even if you use graphics links, provide text links also
as they download quickly and user need not wait for
all the graphics to download.
7
Previous Next

8.
Navigation Bar
 A navigation bar provides the following:
• An easy reference for the contents of the Web site
• A way for users to navigate through the main
sections of the Web site
8
Previous Next

9.
Linking with Text-based Navigation Bar
 A navigation bar is provided at the top and
bottom of each page.
 It provides an easy way for users to navigate
between the main sections of the website.
 The navigation bar is text-based.
9
Previous Next

10.
10

11.
Contextual Linking
 A contextual link allows users to jump to
related ideas or cross-references by clicking
the word or image that interests them.
 These links can be embedded directly into the
flow of content.
 Typical use can be : in explaining Newton’s 2nd
law, the word momentum appears. The word
“momentum” can contain a contextual link.
 When the user clicks on this word, he is shown
information related to that word – e.g.,
definition of “momentum”.
11
Previous Next

12.
Contextual Linking
 Including a link in a line of text is more
effective than including a list of keywords.
 This is because users can see the related
information in the “context” of the sentence
they are reading.
 Repeated words are linked no matter how
many times they appear within the browser
window.
12
Previous Next

13.
13

14.
The ALT Attribute
 Whenever graphical links are used, alternate
text-based links should also be provided
 We can use the ALT attribute in the IMG tag of
HTML code.
 By adding the ALT text, non-graphical browsers
can also allow users to navigate the site
 We must specify the image height and width in
the IMG tag to reserve space for the image in
the browser.
14
Previous Next

15.
15

16.
Limiting Information Overload
 Avoid a lengthy Web page where a user
has to scroll either horizontally or
vertically.
 Do not provide too many links or buttons
on a single Web page.
16
Previous Next

17.
Limiting Information Overload
 We can limit information overload in
following ways:
• Create manageable information segments
 Break content into smaller files
 Provide logical groupings of choices
• Control page length
 Do not make users scroll
 Long files will take longer to download
 Provide internal links to help users move to
various files
17
Previous Next

18.
Limiting Information Overload
 We can limit information overload in
following ways:
• Use hypertext to connect facts, relationships,
and concepts
 Provide contextual linking
18
Previous Next

19.
Review Questions
1. List 3 advantages of linking by using text
instead of graphics.
2. What 4 navigation questions does the user
have to ask?
3. List three types of navigation cues.
4. Explain why you should use both graphics and
text-based links on a Web page.
5. List 3 ways to control information overload.
6. List 2 ways to break up a lengthy HTML page.
19
Previous Next

20.
Review Questions
1. What are the benefits of using navigation
graphics?
2. What are the disadvantages of using
navigation icons?
3. What are the benefits of using the ALT
attribute?
4. Describe the benefits of textual linking.
5. What are the benefits of contextual linking?
20
Previous Next