Web Design PrinciplesWeb Design PrinciplesPlanning Site NavigationPlanning Site Navigation

Mukesh N. TekwaniMukesh N. Tekwanimukeshtekwani@hotmail.commukeshtekwani@hotmail.com

33

Creating Usable NavigationCreating Usable Navigation ““Hypertext” is a system in which objects such Hypertext” is a system in which objects such

as text, images, music, programs, etc can be as text, images, music, programs, etc can be linked to each other.linked to each other.

Advantages of hyperlinksAdvantages of hyperlinks::• Hyperlinks are easy to create.Hyperlinks are easy to create.• There is There is no download overheadno download overhead in text-based in text-based

hyperlinkshyperlinks• With hypertext links, users can move through With hypertext links, users can move through

content in content in anyany order. order.• Related contentRelated content can be linked to each other can be linked to each other

Previous Next

44

Graphics-based NavigationGraphics-based Navigation Hyperlinks can be provided through attractive Hyperlinks can be provided through attractive

graphics elements.graphics elements. Disadvantages Disadvantages of graphics elements for of graphics elements for

navigation:navigation:• Graphics images take a long time to downloadGraphics images take a long time to download• User may turn off graphics in his browserUser may turn off graphics in his browser

Use the same graphics elements for navigation Use the same graphics elements for navigation on all Web pages.on all Web pages.

Once the graphics elements are downloaded in Once the graphics elements are downloaded in the user’s cache, they are not downloaded the user’s cache, they are not downloaded again for other pages.again for other pages.

Previous Next

55

Graphics-based NavigationGraphics-based Navigation Graphics –based navigation can Graphics –based navigation can enhanceenhance the the

appealappeal of a website of a website Navigation graphics should be standardized so Navigation graphics should be standardized so

that:that:• They provide They provide predictable navigationpredictable navigation cues for the cues for the

user. user. • Once the user knows where to find navigation icons Once the user knows where to find navigation icons

and how to use them, they expect these icons to and how to use them, they expect these icons to appear at the same place on every page.appear at the same place on every page.

• To To minimize the downlaod timeminimize the downlaod time – once a graphic – once a graphic image is downloaded, the browser will retrieve it image is downloaded, the browser will retrieve it from the cache for all subsequent pages where it from the cache for all subsequent pages where it appears.appears.

Previous Next

66

Graphics-based NavigationGraphics-based Navigation Even if graphics-based navigation is used, Even if graphics-based navigation is used, text-text-

basedbased links should be provided so that if icons links should be provided so that if icons do not appear, users can still navigate through do not appear, users can still navigate through text links.text links.

Graphics icons may not have the same Graphics icons may not have the same meaningmeaning for everybody. That is why, we should for everybody. That is why, we should use text-based links also.use text-based links also.

If graphic icons are used for navigation, use If graphic icons are used for navigation, use directional arrows rather than hand and finger directional arrows rather than hand and finger symbols.symbols.

Previous Next

77

Text-based NavigationText-based Navigation Advantages Advantages of text-based navigation:of text-based navigation:

• There is There is no overloadno overload involved in involved in downloadingdownloading the the webpage with text-based graphics.webpage with text-based graphics.

• Text-based navigation is visible even if the user has Text-based navigation is visible even if the user has turned off graphics in the browser settings.turned off graphics in the browser settings.

• It can work in both text-based and graphical It can work in both text-based and graphical browsers.browsers.

• Even if you use graphics links, provide text links also Even if you use graphics links, provide text links also as they download quickly and user need not wait for as they download quickly and user need not wait for all the graphics to download.all the graphics to download.

Previous Next

88

Navigation BarNavigation Bar A navigation bar provides the following:A navigation bar provides the following:

• An easy reference for the contents of the Web siteAn easy reference for the contents of the Web site• A way for users to navigate through the main A way for users to navigate through the main

sections of the Web sitesections of the Web site

Previous Next

99

Linking with Text-based Navigation BarLinking with Text-based Navigation Bar A navigation bar is provided at the top and A navigation bar is provided at the top and

bottom of each page.bottom of each page. It provides an easy way for users to navigate It provides an easy way for users to navigate

between the main sections of the website.between the main sections of the website. The navigation bar is text-based.The navigation bar is text-based.

Previous Next

1010

1111

Contextual LinkingContextual Linking A A contextualcontextual link allows users to link allows users to jumpjump to to

relatedrelated ideas or cross-references by clicking ideas or cross-references by clicking the word or image that interests them.the word or image that interests them.

These links can be embedded directly into the These links can be embedded directly into the flow of content.flow of content.

Typical use can be : in explaining Newton’s 2Typical use can be : in explaining Newton’s 2ndnd law, the word momentum appears. The word law, the word momentum appears. The word “momentum” can contain a contextual link.“momentum” can contain a contextual link.

When the user clicks on this word, he is shown When the user clicks on this word, he is shown information related to that word – e.g., information related to that word – e.g., definition of “momentum”.definition of “momentum”.

Previous Next

1212

Contextual LinkingContextual Linking Including a link in a line of text is more Including a link in a line of text is more

effective than including a list of keywords.effective than including a list of keywords. This is because users can see the This is because users can see the relatedrelated

information in the “information in the “contextcontext” of the sentence ” of the sentence they are reading.they are reading.

Repeated words are linked no matter how Repeated words are linked no matter how many times they appear within the browser many times they appear within the browser window.window.

Previous Next

1313

1414

The ALT AttributeThe ALT Attribute Whenever graphical links are used, alternate Whenever graphical links are used, alternate

text-based links should also be providedtext-based links should also be provided We can use the ALT attribute in the IMG tag of We can use the ALT attribute in the IMG tag of

HTML code.HTML code. By adding the ALT text, non-graphical browsers By adding the ALT text, non-graphical browsers

can also allow users to navigate the sitecan also allow users to navigate the site We must specify the image height and width in We must specify the image height and width in

the IMG tag to reserve space for the image in the IMG tag to reserve space for the image in the browser.the browser.

Previous Next

1515

1616

Limiting Information OverloadLimiting Information Overload Avoid a lengthy Web page where a user Avoid a lengthy Web page where a user

has to scroll either horizontally or has to scroll either horizontally or vertically.vertically.

Do not provide too many links or buttons Do not provide too many links or buttons on a single Web page.on a single Web page.

Previous Next

1717

Limiting Information OverloadLimiting Information Overload We can limit information overload in We can limit information overload in

following ways:following ways:• Create manageable information Create manageable information segmentssegments

Break content into smaller filesBreak content into smaller files Provide logical groupings of choicesProvide logical groupings of choices

• Control page lengthControl page length Do not make users scrollDo not make users scroll Long files will take longer to downloadLong files will take longer to download Provide internal links to help users move to Provide internal links to help users move to

various filesvarious files

Previous Next

1818

Limiting Information OverloadLimiting Information Overload We can limit information overload in We can limit information overload in

following ways:following ways:• Use hypertext to connect facts, relationships, Use hypertext to connect facts, relationships,

and conceptsand concepts Provide contextual linkingProvide contextual linking

Previous Next