1 / 39

Usable Web Navigation Principles

Learn effective navigation schemes, provide location cues, use hypertext creatively, and optimize graphics for seamless browsing experiences. Understand the fundamentals of text-based navigation and control information overload for user-friendly websites.

rothwell
Download Presentation

Usable Web Navigation Principles

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 4Planning Site Navigation

  2. Chapter 4 Principles of Web Design Objectives • Understand navigation principles • Build navigation schemes that meet the user’s needs • Provide location information • use hypertext linking creatively • Use graphics for navigation and linking

  3. Chapter 4 Principles of Web Design Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions: • Where am I? • Where can I go? • How do I get there? • How do I get back to where I started?

  4. Chapter 4 Principles of Web Design Creating Usable Navigation To answer these questions, provide the following information: • Let the user know what page they are on, and what type of content they are viewing. • Let the user know where they are in relation to the rest of the site.

  5. Chapter 4 Principles of Web Design Creating Usable Navigation • Provide consistent, easy-to-understand links • Provide alternatives to the browser’s Back button that lets users return to their starting point

  6. Chapter 4 Principles of Web Design

  7. Chapter 4 Principles of Web Design Limit Information Overload • Create manageable information segments • Control page length • Use hypertext to connect facts, relationships and concepts

  8. Chapter 4 Principles of Web Design

  9. Chapter 4 Principles of Web Design Using Text-Based Navigation • Text-based linking often is the most effective way to provide navigation on your site • It can work in both text-only and graphical browsers • Always provide a text-based set of links as an alternate means of navigation

  10. Chapter 4 Principles of Web Design

  11. Chapter 4 Principles of Web Design Sample Text Navigation The following screens demonstrate a variety of text-based navigation options: • To main pages (home, table of contents, index) • To the top of each chapter • Within the table of contents page to chapter descriptions • From table of contents page to specific topic within each chapter

  12. Chapter 4 Principles of Web Design Sample Text Navigation The following screens demonstrate a variety of text-based navigation options: • Between previous and next chapters • Within chapter pages to each topic • To related information by using contextual links

  13. Chapter 4 Principles of Web Design

  14. Chapter 4 Principles of Web Design

  15. Chapter 4 Principles of Web Design

  16. Chapter 4 Principles of Web Design

  17. Chapter 4 Principles of Web Design

  18. Chapter 4 Principles of Web Design

  19. Chapter 4 Principles of Web Design

  20. Chapter 4 Principles of Web Design

  21. Chapter 4 Principles of Web Design

  22. Chapter 4 Principles of Web Design

  23. Chapter 4 Principles of Web Design

  24. Chapter 4 Principles of Web Design

  25. Chapter 4 Principles of Web Design

  26. Chapter 4 Principles of Web Design

  27. Chapter 4 Principles of Web Design Graphics for Navigation • Standardize your navigation graphics • Provide predictable navigation cues for the user • Repeat graphics to minimize download time • Use consistent placement and design of navigation graphics to reassure the user • Use easily understandable graphics

  28. Chapter 4 Principles of Web Design

  29. Chapter 4 Principles of Web Design

  30. Chapter 4 Principles of Web Design

  31. Chapter 4 Principles of Web Design

  32. Chapter 4 Principles of Web Design

  33. Chapter 4 Principles of Web Design

  34. Chapter 4 Principles of Web Design

  35. Chapter 4 Principles of Web Design

  36. Chapter 4 Principles of Web Design

  37. Chapter 4 Principles of Web Design

  38. Chapter 4 Principles of Web Design Summary • Work from the user's point of view. Think about where users want to go within your site, and make it easy for them to get there. • Add plenty of links so it's easy to get around your site. Link to fragments as well as whole pages. Make it easy to get back to your navigation options. • In addition to providing links, make sure you provide plenty of location cues to let the user know where they are.

  39. Chapter 4 Principles of Web Design Summary • Do you have to use graphics for linking? Rethink the objectives of your site and determine whether text will do as well. Every additional graphic adds to download time. • Don't forget to provide ALT values to your <IMG> tags to provide alternate navigation options for the user.

More Related