<< Previous Page >> << Next Page >>

Navigation & Readiability

This page discusses navigation styles, fonts, and contrast. These are all important considerations for any page design.

Navigation

There are several basic styles of navigation. In general, the styles are identified by position and orientation on a page. They include:

  • Top
  • Left Side
  • Right Side
  • Bottom
  • Horizontal
  • Vertical

 

 

 

Top and side navigation are the most common. Right side navigation is relatively rare. Because it is so rare, it should generally be avoided because Web visitors are not used to it.

Bottom navigation is used when pages are long. This eliminates the need for the page visitor having to scroll back to the top of a page to access a link.

Bottom navigation using standard text links is often used on pages where rollover navigation is used elsewhere. Search engine robots often find it difficult, or impossible, to follow the image-swapping effects of rollover navigation. Standard text navigation allows the robots to easily catalog a page and follow the links.

 

 

On complicated sites navigation can be divided into primary and secondary categories. In the example to the right, the top navigation is primary. It is identical from page to page.

The side navigation is secondary. Each group of sub pages under the various primary navigation categories has its own custom navigation on the side. While the primary navigation is accomplished by image mapping, the secondary navigation consists of text links. The text links can be easily updated if necessary.

Putting all the possible links, both primary and secondary, on one page would make the page far too complicated and nearly impossible to use.

 

 

 

Fonts

Text in Web pages is displayed by browsers using the fonts available in the viewer's computer. Most PC users have Arial and Times New Roman installed. Macintosh computers usually have Helvetica and Times. Arial is similar to Helvetica and Times is similar to Times New Roman. The vast majority of text presented on Web pages is limited to these fonts for both practical and technical reasons.

NOTE: Cascading Style Sheets (a technique for controlling presentation of elements in Web pages) allows use of non-standard fonts using @font-face rules. Details about how this can be done are at the W3 Schools CS3 Fonts page.

 

 

 

 

 

 

 

The page on the right illustrates good use of fonts. The headlines and main topic headers use a sans serif font that is easy to read. The text body uses a serif font, such as Times or Times New Roman, that is easy to read in blocks of text.

 

 

 

 

However, many designers find the standard Times, Times New Roman, Arial, Helvetica fonts to be dull. They will try to improve a site by using alternative fonts. This can now be accomplished using both traditional HTML Web safe fonts and the @font-face rules that are mentioned above.

 

 

 

Text Presentation

Because the Web is primarily a visual medium, and the main method for information presentation is text, how text is presented is an extremely important consideration. Which font to use is only one aspect that must be considered when building a Web page.

Normally, people do not read text one word at a time. Text is read in groups of words. The size of the text is a key element in determining how easy it is to read sentences. Text that is displayed too large is just as difficult to read as text that is too small.

 

 

Using the old font tag (which is no longer valid) the standard Web page font is "3." Sizes were specified smaller at "2" and "1," and larger starting at "4." Because the font tag and related size attributes are no longer used, alternate methods of setting font size are necessary.

Fixes font sizes are now specified using pixels as the unit of measurement. Proportional fonts sizes are determined by using ems or percent. Examples are on the right.

NOTE: Cascading Style Sheets use a different technique for specifying font size. For more information about CSS be sure to visit our Cascading Style Sheet online tutorial.

 

 

 

High contrast levels between text and background makes the text easier to read. Black text on white is the easiest. White on black, even though it is high contrast, is harder to read. Certain color combinations, such as red and blue, should be avoided because they result in extremely high perception problems.

 

 

 

 

 

Analyze A Web Page

On the right are four examples of Web pages. Here are your questions:

  • One of the pages has a very complicated and "busy" background. The text blends in and is hard to read. Which page is it?
  • One of the pages has low contrast between the text and the background colors. These color choices make it hard to read. Which is it?
  • One of the pages has good contrast, good text alignment, and lots of white space. It is very easy to read. Which is it?
  • One of the pages on the right has fairly good contrast. But the text alignment makes it hard to read. Which page is it?

Use your mouse pointer to touch the images on the right to discover the answers.

 

 

 

 

 

 

 

The improved Web page

This page uses vertical
navigation on the left side

 

 

This page uses top horizontal

This page uses top horizontal navigation

 

 

 

This page uses primary

This page uses primary navigation at the top and
secondary navigation on the site

 

Check Your Fonts

Here are the most common "Web safe" fonts:

  • Arial
  • Helvetica
  • Times
  • Times New Roman
  • Verdana
  • Georgia

Here are some uncommon fonts:

  • Viking
  • Batavia
  • Courier
  • Onyx

How many of your fonts match those in the image below?

Demonstraton of fonts

 

 

This is an example of fonts that are used well

 

Alternate font use

 

Large text is hard to read because people can only read one or two words at a time.

Small text is difficult to read because many computer screens cannot clearly display the tiny characters. Also, small print is hard to see under the best of circumstances.

Here are common font sizes that are both fixed and proportional:

  • 6 pixels
  • 10 pixels
  • 14 pixels
  • .9 em
  • 1 em
  • 1.2 em
  • 1.4 em
  • 90%
  • 100%
  • 120%

 

 

Black text on white a white background is easiest to read.

White text on a black background harder to read than black on white.

This combination is hard to read because there isn't enough contrast between the text and background colors.

Red and blue is difficult to read because of perception problems. Sometimes the text almost appears to vibrate.

 

Page A

This page has a very busy background that causes the text to blend it. It is very hard to read.

Page B

This page has low contrast between the text and the background. This should be corrected for easier reading.

Page C

This page has pretty good contrast, but the center alignment makes the page very hard to read.

Page D

This page is the best because it has good contrast, lots of white space, and simple left alignment.

<< Previous Page >> << Next Page >>