Chapter 4 planning site navigation
Download
1 / 15

- PowerPoint PPT Presentation


  • 322 Views
  • Updated On :

Chapter 4 Planning Site Navigation. Chapter 4. Principles of Web Design. Objectives. Create usable navigation Build text-based navigation Link with a text navigation bar Add contextual linking Use graphics for navigation and linking. Chapter 4. Principles of Web Design.

Related searches for

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '' - Sharon_Dale


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Chapter 4 planning site navigation l.jpg

Chapter 4Planning Site Navigation


Objectives l.jpg

Chapter 4

Principles of Web Design

Objectives

  • Create usable navigation

  • Build text-based navigation

  • Link with a text navigation bar

  • Add contextual linking

  • Use graphics for navigation and linking

Principles of Web Design 2nd Ed. Chapter 4


Creating usable navigation l.jpg

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?

Principles of Web Design 2nd Ed. Chapter 4


Creating usable navigation4 l.jpg

Chapter 4

Principles of Web Design

Creating Usable Navigation

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

Principles of Web Design 2nd Ed. Chapter 4


Creating usable navigation5 l.jpg

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

Principles of Web Design 2nd Ed. Chapter 4


Slide6 l.jpg

Chapter 4

Principles of Web Design

  • Figure 4-1

  • Figure 4-2

Principles of Web Design 2nd Ed. Chapter 4


Limit information overload l.jpg

Chapter 4

Principles of Web Design

Limit Information Overload

  • Create manageable information segments

  • Control page length

  • Use hypertext to connect facts, relationships, and concepts

Principles of Web Design 2nd Ed. Chapter 4


Using text based navigation l.jpg

Chapter 4

Principles of Web Design

Using 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

Principles of Web Design 2nd Ed. Chapter 4


Sample text navigation l.jpg

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 topics within each chapter

Principles of Web Design 2nd Ed. Chapter 4


Sample text navigation10 l.jpg

Chapter 4

Principles of Web Design

Sample Text Navigation

The following screens demonstrate a variety of text-based navigation options:

  • Between the previous and next chapter

  • Within chapter pages to each topic

  • To related information by using contextual links

Principles of Web Design 2nd Ed. Chapter 4


Slide11 l.jpg

Chapter 4

Principles of Web Design

  • Figure 4-3

  • Figure 4-4

  • Figure 4-5

  • Figure 4-6

  • Figure 4-7

  • Figure 4-8

  • Figure 4-9

  • Figure 4-10

  • Figure 4-11

  • Figure 4-12

  • Figure 4-13

  • Figure 4-14

  • Figure 4-15

Principles of Web Design 2nd Ed. Chapter 4


Graphics for navigation l.jpg

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

Principles of Web Design 2nd Ed. Chapter 4


Slide13 l.jpg

Chapter 4

Principles of Web Design

  • Figure 4-16

  • Figure 4-17

  • Figure 4-18

  • Figure 4-19

  • Figure 4-20

  • Figure 4-21

  • Figure 4-22

  • Figure 4-23

Principles of Web Design 2nd Ed. Chapter 4


Summary l.jpg

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

Principles of Web Design 2nd Ed. Chapter 4


Summary15 l.jpg

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

Principles of Web Design 2nd Ed. Chapter 4


ad