Web Navigation

Website navigation is the key to creating a website that is easy to use. Good navigation encourages the user to click and explore a website. There are a variety of schemas (plans) for creating navigation. As web designers it is up to you to determine what schema will work best for your website and most importantly, your users.

Navigation Schemas

• Text Links
• Rollover Menu (text links, CSS, and JavaScript)
• Drop-down Menu (text and JavaScript)
• Images
• Image Maps
• Images with Rollover (images and JavaScript)
• Flash Menu

Text Links www.google.com

 Advantages

• Easy to use –users already know to click a text link
• Easy to create –simple HTML and CSS

Disadvantages

• Can be boring for users
• Can take up a lot of space on the web page

Rollover/Fly-out Menu

• Item 1
  • Item 1.1
  • Item 1.2
  • Item 1.3
• Item 2
• Item 3
  • Item 3.1
    • Item 3.1.1
    • Item 3.1.2
  • Item 3.2
  • Item 3.3
• Item 4

Advantages

• Takes less web page space because sub-menus are hidden until rollover
• More interesting than plain text links

Disadvantages

• Will display differently in different browsers (browser compatibility)
• Difficult to create and stylize

Drop-down Menu

list menu select a link link one link two

Advantages

• Saves space on the web page (can be very compact)

Disadvantages

• User needs to click on the menu to see the options
• Less common and may confuse the user

Images, Images with Rollovers, and Image Maps

Advantages

• Allows for more creativity in design
• Relatively easy to create

Disadvantages

• Advanced users or users with disabilities may not see images
• Increased download time, some users may not wait and leave the page

Flash Menu link to flash navigation example

Advantages

• Increased creativity and style for web design
• Allows the designer to incorporate multimedia

Disadvantages

• May not work in all browsers
• Requires Flash player to be installed in the browser
• Advanced users and users with disabilities may not be able to use the navigation
• Difficult to create (requires the designer to use Flash)

On Your Own

Use the web to find an example of each type of navigation (text, rollover/fly-out, dropdown, image, Flash). Create a web page that has a link and description for each of the examples you find. Bonus points for putting the links into a list and using CSS to create a custom list design. Save the web page as "navigation.html"

Copyright ©2008 David Fisher fisher123.com All rights reserved.

copyright © 2009 david fisher fisher123.com