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
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
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
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