Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to...
-
Upload
mervin-chapman -
Category
Documents
-
view
220 -
download
0
Transcript of Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to...
![Page 1: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/1.jpg)
Week 4
Planning Site Navigation
![Page 2: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/2.jpg)
2
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 3: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/3.jpg)
3
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 4: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/4.jpg)
4
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 5: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/5.jpg)
5
![Page 6: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/6.jpg)
6
![Page 7: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/7.jpg)
7
Limiting Information Overload
• Create manageable information segments• Control page length• Use hypertext to connect facts, relationships,
and concepts
![Page 8: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/8.jpg)
8
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 9: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/9.jpg)
9
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 10: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/10.jpg)
10
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 11: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/11.jpg)
11
![Page 12: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/12.jpg)
12
![Page 13: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/13.jpg)
13
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 14: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/14.jpg)
14
![Page 15: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/15.jpg)
15
Linking to Individual Files
• The Table of Contents page needs links to the individual chapter files in the Web site
![Page 16: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/16.jpg)
16
![Page 17: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/17.jpg)
17
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 18: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/18.jpg)
18
![Page 19: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/19.jpg)
19
![Page 20: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/20.jpg)
20
Adding an Internal Navigation Bar
• You can use additional fragment identifiers in the table of contents to add more user-focused navigation choices
![Page 21: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/21.jpg)
21
![Page 22: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/22.jpg)
22
![Page 23: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/23.jpg)
23
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 24: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/24.jpg)
24
![Page 25: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/25.jpg)
25
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 26: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/26.jpg)
26
![Page 27: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/27.jpg)
27
![Page 28: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/28.jpg)
28
![Page 29: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/29.jpg)
29
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 30: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/30.jpg)
30
![Page 31: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/31.jpg)
31
Using Graphics for Navigation and Linking
![Page 32: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/32.jpg)
32
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 33: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/33.jpg)
33
![Page 34: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/34.jpg)
34
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 35: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/35.jpg)
35
![Page 36: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/36.jpg)
36
![Page 37: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/37.jpg)
37
![Page 38: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/38.jpg)
38
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 39: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/39.jpg)
39
![Page 40: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/40.jpg)
40
![Page 41: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/41.jpg)
41
![Page 42: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/42.jpg)
42
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 43: Week 4 Planning Site Navigation. 2 Creating Usable Navigation Provide enough location information to let the user answer the following navigation questions:](https://reader036.fdocuments.net/reader036/viewer/2022062322/56649f175503460f94c2d391/html5/thumbnails/43.jpg)
43
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