Designing Site Navigation UNIT G

Guidelines for Navigation

Good navigation is consistent, clearly labeled, and reflects the needs of the site’s audience.

Navigation labels are short, clear, and user-friendly

Above all navigation should be designed for your visitor not yourself

Types of Navigation: Global

Global navigation- the navigation that appears on each page, usually at the top or left side.› Features top-level section in a site› A small site would include every page a

larger site would not

Types of Navigation: Local

Local Navigation- used on large sites where there is so much content in a section that global navigation is inadequate.

For example, a site that sells books, music, and movies would feature top-level categories in global and feature categories in the local section

Types of Navigation: Related

Related navigation- usually appears within the content area and highlights content related to that page’s information.

For example, the page featuring a specific movie for sale might list movies by the same director in the related navigation.

Figure G-1 page 149

Navigational Elements

The elements that make up your navigation should be determined by:› the site’s goals › the content of the site › the target audience

Pulldown menus are now popular

Information architects (IAs) Information architects – people whose job is to

create structures, navigation, and search systems for Web Sites.

IAs work as independent consultants or as part of in-house Web design teams within organization

Working with an IA can be especially useful on › complex sites that have thousands of pages of

content › or that deal with multiple audience or topics

Creating an Interactive Button

Interactive buttons (rollovers)- navigation graphics that change appearance when a visitor interacts with them

Original state- appears when a visitor is not interacting with the button

Hover state- appears when a visitor points to or hover over the imaged

Pressed state- appears while the visitor is clicking the button

Creating a Navigation Bar

Navigation bar- a set of related navigation links, whether text or images

Maintain a consistent look among the buttons! › Copy and paste then change the text and

link

Adding a Navigation Bar to Site Pages

Each page on a Web site should have a navigation bar.

Copy and paste the navigation bar to each page!

Understanding Link Styles: Link States

Pseudo-class defined properties for a particular state of the element.

Links have 4 Commonly Used pseudo-class selectors:› a:link› a:visted› a:hover› a:active

Commonly Used Pseudo-Classes a: link – the normal, unvisited state of a link

a: visited – the link has been clicked in the visitor’s browser and is present in the browser's history

a:hover– the visitor’s cursor is pointing to the link

a: active – the link has been clicked by not released

By default, normal links are blue and underlined and visited links are purple and underlined.

It’s best to create a style rule for at least the a:link, a:visited, and a:hover states so that each state looks different to visitors.

Styled in order in the style sheet so it’s very important they are listed in order.

Guidelines for creating link styles Leave links underlined.

› Underlined text is universal for links (user-friendly)

Differentiate between visited and unvisited links. › It’s best to create styles that make unvisited

links more noticeable Experiment with hover styles and colors

› Be dramatic and coordinate with your design› Avoid purple or blue!