chapter 4 planning site navigation principles of web design, 4 th edition
TRANSCRIPT
![Page 1: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/1.jpg)
Chapter 4
Planning Site Navigation
Principles of Web Design, 4th Edition
![Page 2: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/2.jpg)
Principles of Web Design, 4th Edition 4-2
Objectives
• Create usable navigation
• Build text-based navigation
• Add contextual linking
• Summarize text-based navigation
• Use graphics for navigation and linking
![Page 3: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/3.jpg)
Principles of Web Design, 4th Edition 4-3
Creating Usable Navigation
![Page 4: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/4.jpg)
Principles of Web Design, 4th Edition 4-4
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?
![Page 5: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/5.jpg)
Principles of Web Design, 4th Edition 4-5
Creating Usable Navigation (continued)• To answer these questions, provide the
following information:
• Let users know what page they are on, and what type of content they are viewing
• Let users know where they are in relation to the rest of the site
![Page 6: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/6.jpg)
Principles of Web Design, 4th Edition 4-6
Creating Usable Navigation (continued)
• Provide consistent, easy-to-understand links• Provide an alternative to the browser’s Back
button that lets users return to their starting point
![Page 7: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/7.jpg)
Principles of Web Design, 4th Edition 4-7
![Page 8: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/8.jpg)
Principles of Web Design, 4th Edition 4-8
![Page 9: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/9.jpg)
Principles of Web Design, 4th Edition 4-9
Limiting Information Overload
• Create manageable information segments• Control page length• Use hypertext to connect facts, relationships,
and concepts
![Page 10: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/10.jpg)
Principles of Web Design, 4th Edition 4-10
Building Text-Based Navigation
![Page 11: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/11.jpg)
Principles of Web Design, 4th Edition 4-11
Building Text-Based Navigation
• Text-based linking is often 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
![Page 12: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/12.jpg)
Principles of Web Design, 4th Edition 4-12
Sample Text Navigation
– 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 topics within each chapter
• The following screens demonstrate a variety of text-based navigation options:
![Page 13: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/13.jpg)
Principles of Web Design, 4th Edition 4-13
Sample Text Navigation (continued)
– Between the previous and next chapter
– Within chapter pages to each topic
– To related information by using contextual links
• The following screens demonstrate a variety of text-based navigation options (continued):
![Page 14: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/14.jpg)
Principles of Web Design, 4th Edition 4-14
![Page 15: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/15.jpg)
Principles of Web Design, 4th Edition 4-15
![Page 16: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/16.jpg)
Principles of Web Design, 4th Edition 4-16
Linking with a Text Navigation Bar
• The Table of Contents page must link to the other main pages of the Web site, allowing users to go directly to the pages they want
• Achieve this by adding a simple text-based navigation bar
![Page 17: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/17.jpg)
Principles of Web Design, 4th Edition 4-17
![Page 18: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/18.jpg)
Principles of Web Design, 4th Edition 4-18
Linking to Individual Files
• The Table of Contents page needs links to the individual chapter files in the Web site
![Page 19: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/19.jpg)
Principles of Web Design, 4th Edition 4-19
![Page 20: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/20.jpg)
Principles of Web Design, 4th Edition 4-20
Adding Internal Linking
• Add a “back to top” link that lets users return to the top of the page from many points within the file
![Page 21: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/21.jpg)
Principles of Web Design, 4th Edition 4-21
![Page 22: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/22.jpg)
Principles of Web Design, 4th Edition 4-22
![Page 23: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/23.jpg)
Principles of Web Design, 4th Edition 4-23
Adding an Internal Navigation Bar
• You can use additional fragment identifiers in the table of contents to add more user-focused navigation choices
![Page 24: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/24.jpg)
Principles of Web Design, 4th Edition 4-24
![Page 25: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/25.jpg)
Principles of Web Design, 4th Edition 4-25
![Page 26: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/26.jpg)
Principles of Web Design, 4th Edition 4-26
Linking to External Document Fragments
• You can let users jump from the table of contents to the exact topic they want within each chapter
• This requires adding code to both the Table of Contents page and each individual chapter page
![Page 27: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/27.jpg)
Principles of Web Design, 4th Edition 4-27
![Page 28: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/28.jpg)
Principles of Web Design, 4th Edition 4-28
Adding Page Turners
• You can enhance the functions of the navigation bar in the chapter pages by adding page-turner links
• Page turners let you move either to the previous or next page in the collection
![Page 29: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/29.jpg)
Principles of Web Design, 4th Edition 4-29
![Page 30: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/30.jpg)
Principles of Web Design, 4th Edition 4-30
![Page 31: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/31.jpg)
Principles of Web Design, 4th Edition 4-31
![Page 32: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/32.jpg)
Principles of Web Design, 4th Edition 4-32
Adding Contextual Linking
![Page 33: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/33.jpg)
Principles of Web Design, 4th Edition 4-33
Adding Contextual Linking
• Contextual links allow users to jump to related ideas or cross-references by clicking the word or item that interests them
• These are links that you can embed directly in the flow of your content by choosing the key terms and concepts you anticipate your users will want to follow
![Page 34: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/34.jpg)
Principles of Web Design, 4th Edition 4-34
![Page 35: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/35.jpg)
Principles of Web Design, 4th Edition 4-35
Using Graphics for Navigation and Linking
![Page 36: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/36.jpg)
Principles of Web Design, 4th Edition 4-36
Using Graphics for Navigation and Linking
• 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
![Page 37: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/37.jpg)
Principles of Web Design, 4th Edition 4-37
![Page 38: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/38.jpg)
Principles of Web Design, 4th Edition 4-38
Using Icons for Navigation
• One of the main problems with icons—not everyone agrees on their meaning
• Especially with a worldwide audience, you never can be sure exactly how your audience will interpret your iconic graphics
• This is why so many Web sites choose text-based links
![Page 39: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/39.jpg)
Principles of Web Design, 4th Edition 4-39
![Page 40: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/40.jpg)
Principles of Web Design, 4th Edition 4-40
![Page 41: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/41.jpg)
Principles of Web Design, 4th Edition 4-41
![Page 42: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/42.jpg)
Principles of Web Design, 4th Edition 4-42
![Page 43: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/43.jpg)
Principles of Web Design, 4th Edition 4-43
Using the alt Attribute
• Provide alternate text-based links in addition to graphical links
• Do this by including an alt attribute in the <img> tag of the HTML code for the graphic
![Page 44: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/44.jpg)
Principles of Web Design, 4th Edition 4-44
![Page 45: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/45.jpg)
Principles of Web Design, 4th Edition 4-45
![Page 46: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/46.jpg)
Principles of Web Design, 4th Edition 4-46
![Page 47: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/47.jpg)
Principles of Web Design, 4th Edition 4-47
Summary
• Work from the users’ 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
![Page 48: Chapter 4 Planning Site Navigation Principles of Web Design, 4 th Edition](https://reader034.vdocument.in/reader034/viewer/2022052304/56649d6d5503460f94a4dce1/html5/thumbnails/48.jpg)
Principles of Web Design, 4th Edition 4-48
Summary (continued)
• 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