Planning Site Navigation


Published on

Planning Site Navigation

Published in: Education, Business, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Planning Site Navigation

  1. 1. Web Design Principles Planning Site Navigation Mukesh N. Tekwani
  2. 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. 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. 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. 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. 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. 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. 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. 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. 10
  11. 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. 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. 13
  14. 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. 15
  16. 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. 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. 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. 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. 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