1. Navigating Your Website
This session will feature best practices for designing the navigation of your site.

2. What is Navigation?
Website navigation is what helps visitors find information on your site.
Navigation can be images, links, navigation bars and menus.
Navigation should take the guess work out for your visitors
Good navigation is fundamental to good web design
Navigation should be user friendly
If the navigation is not easy to use or intuitive users will quickly go elsewhere in search of information.
How often have you found yourself in front of web sites without knowing what to do next?
Navigation is the single most important element in creating accessible and usable web sites.

3. Before You Build Navigation
How is your information structured?
What is your audiences screen resolution?
Do you have any trend information on what your audience uses most?
What is your brand?
Consider using focus groups, surveys to assist in deciding what should be included in navigation.
Information Architecture
Before you can even start to plan your navigation, you need to define your site's information architecture. Information architecture is the taxonomy or structure of your website.
CCAP has two webinars that support learning on taxonomy
ADMINISTRATION OF A WEBSITE: SITE ARCHITECTURE: October at 1:30 – 2:30 p.m.
This session will cover important aspects to consider regarding how your website is built and secured including who should have access for content updates, design or adding user rights? Should your website content maintenance be centralized or decentralized? Do you want a consistent look and feel throughout the entire site?
And
ADMINISTRATION OF A WEBSITE: INFORMATION ARCHITECTURE: November 17, 2010 at 1:30 – 2:30 p.m.
This session will focus on how your website information is organized and secured. Discussion topics will include: deciding information architecture, who should have access to information, how should information be displayed and do you want to use metadata (keywords)?
Some common taxonomy elements on a business Web page are:
Products - the products or services the company has available
About - information about the company
Investor, Affiliates: information about the company's affiliates, investors, etc.
Support - help for customers (consider a self-help approach as well)
Organization
Once you've determined your site architecture, you need to decide how to organize it. You might have it all live in one directory, and just link to the major pages from your front page. Or you might have all the sub-pages separated into directories.
When thinking about your organization, you should think about how your customers might wander through it. Flow charts and storyboards can help you map out exactly how you would like to encourage your readers to use the site. You might want to map out several paths for your readers to use.
Design the look and feel
Branding is the sum total of all the images and thoughts that people have in their heads about a particular company. Most importantly, you need to understand that you can brand everywhere. Branding happens everywhere your customers might see your product.
Do you have a color scheme and do you stick to it?
Do you have a specific typeface and use it in all of your business material (including on-line!)?
Do you have a consistent look and feel to every piece of marketing material that goes out of your business including faxes, s, advertisements, website design, business cards, letterheads, scratch paper, envelopes, etc?
If your business isn't providing a consistent look and feel, you are like a team of horses pulling in opposite directions. Nothing gets done. However, if you line your horses up to all go the same direction, then you will get somewhere. Brand your site, including your navigation.

4. Four Key Elements Navigation should be: Accessible Meaningful
Understandable
Prevalent
Navigation Design
Once you have an idea of the architecture and organization, you're ready to think about the design of the navigation. There are several things you should consider in deciding on your navigation design:
Accessible The navigation of your site is possibly the most important part of any given page. So it should be as accessible as you can make it. This means avoiding special effects like Flash, Java, or JavaScript as your only navigation method.
Meaningful Keep your navigation meaningful. Make the links clear - don't try to get cute or use terms that are internal to your organization. Someone who has never been to your site before should know immediately where the link will take them.
Understandable If you want to use images for your navigation, make sure that there is some text associated with them. "Mystery Meat Navigation" is the use of non-descriptive images as navigation, and it's much more common than you might think.
Prevalent Your navigation should appear on every page of your site. While you don't need to have identical navigation, the basic structure should be the same throughout the site, with changes used only to indicate location within the hierarchy.

5. Types of Navigation Vertical Horizontal Horizontal and vertical
Examples of Navigation include appropriate use discussion:
Vertical:
Too many items for horizontal only, but not complex enough to utilize both
Horizontal:
Many specific sections of the site
Horizontal only also allows them plenty of real estate in the middle to showcase their products on the front page
Horizontal and Vertical:
Specific sections (tabbed) on the top
Common and popular sections in the left (note the ‘View All News Topics’ link to limit the amount of links)

6. Navigation Menus Fly-out Dropdown Expandable
Examples of Navigation include appropriate use discussion:
Fly-out:
Use of HTML, CSS, and JavaScript
Provides user with many options right from home page without having a long menu of links
Dropdown:
Same as the fly-outs but for more global sections of the site
Example: we want users to get to their campus page with minimal clicking, but adding all links to campuses in main nav would be too crowded
Expandable:
More commonly used today when options are available for a user to select
Can be used in place of flyout, but best for cases such as selecting product features

7. Navigation Menus
Yahoo/custom style- Provide an option for that of left navigation or a custom window driven navigation menu (referred as QuickView)that is similar to a mega dropdown with the exception the menu window remains on screen unless the end user selects to close it.
Rollover (or mouse over)- On mouse over of each menu item, each heading visually changes and provides some textual description of the sub-items. Since this is a one-level menu, there must be a sub-level page that provides links to the sub-topics.
Flash menu- Clicking on a heading opens the menu item to show its sub-items, and automatically closes the previously opened menu. The "auto-close" feature may annoy some users.
Examples of Navigation include appropriate use discussion:
Yahoo (custom):
(similar)
Allows user to view specific content without leaving the home page
Rollover:
Provides summary of information on the service. Note how their description is also a link itself.
Use if page space is limited for providing a description as in example
Flash menu:
This example is triggered by mouse rollover instead of clicking, but result is the same
It is not a bad use in this case as it preserves the allowed screen space (expanding all at once would most likely cover their advertisement in addition to potentially creating vertical scrolling [which should be avoided on a home page])

8. More Navigation Options
Footer Navigation: Things like legal/privacy policies, contact, site map, FAQ, and other general information about the site or company.
Tabbed navigation: This is getting fairly popular, I’m sure you’ve seen it before. Tabs make each section of the site clear, and provide clean organization.
Mega dropdowns: More like little panels that dropdown from a navigation item that display many options.
Examples of Navigation include appropriate use discussion:
Footer Navigation:
Footer navigation should almost always be used for a business or government site to contain this information
Anything you may want consistently available from any page (but isn’t necessary in main navigation) should go in the footer
Tabbed Navigation:
This is more of a design preference
Tabs are a nice visual to indicate which section of the site the user is in
Mega Dropdowns:
Similar to the custom navigation earlier, this provides more options for a user to find what they are looking for right from the home page
Is organized in a manner that has sub-headings
Use when site contains many different sub-areas that need to be accessed with ease
Site that shows various navigation examples:

9. Navigation Best Practices
Use same navigation on all pages
Consistent placement of navigation
Provide breadcrumbs
Provide a “site map”
Use descriptive words on links
If you use flash, offer text based as well
Use CSS to emphasize links, or visited links
Remember the three click rule
Best Practices
Create consistent top and bottom menus: It is essential to provide a top navigation menu (as the top bar) which is consistent in look and feel for all the pages in the website. This menu should contain links to each category, the home page, contact or support page, faq page (if centralized faq), etc. This helps the user to move around categories or to contact support from any location. Similarly, a consistent footer can contain links to contact information, advertising info, privacy policy, membership agreement etc.
Keep it consistent. The navigation system should be in the same place on every page and have the same format. Visitors will get confused and frustrated if links appear and disappear unpredictably.
Use breadcrumb trail: A breadcrumb trail provides a quick way for the user to know what section or branch this web page is in. A breadcrumb is useful if the website has a lot of categories and each category is few levels deep. A good example will be a directory such as Yahoo or DMOZ.
Add a text-based site map. Large or complex sites should always have a text-based site map in addition to text links. Every page should contain a text link to the site map. Lost visitors will use it to find their way, while search engines spiders will have reliable access to all your pages. Use appropriate text inside links. Don't make your visitors guess where a link is going to take them. Visitors should be able to anticipate a link's destination by reading the text in the link or on the navigation button. This isn't the time to be cute or obscure - visitors don't have the time or patience for it. If there's any question about a link's destination, clarify the issue with a TITLE attribute that explains exactly where the link goes.
Always include text links. You can create some great looking menus using JavaScript or other scripting language, but never rely completely on a dynamic menu system. Some users may have problems using a mouse to navigate through the menu and others may be listening to the page using a screen reader. Every page should have basic text links that link to all major sections of the site.
Use CSS to emphasize text links. Some designers dislike underlined text links inside page content - although visitors expect to be able to click on underlined text. If you decide to remove this important visual navigation clue, style your links with CSS to replace underlining with another, consistent visual technique like a background color, different font, or text color that indicates a hyperlink.
This includes emphasizing where they have been to show visually which links they clicked on (leaving a trail)
Include links to related items: Related links placed at the bottom or right side allows visitors to navigate to similar or related items or content directly. Provide clear and descriptive information about the related link so the user knows what to expect on that page.
Include a home page link inside your main navigation system. Visitors may enter your site via an internal page, but hopefully they'll want to head for the home page next.
Site logo links to home page. Most sites include their logo somewhere at the top of every page - generally in the top, left-hand corner. Visitors expect this logo to be a link to your site's home page. They'll often go there before looking for the home link in the navigation system.
Include a site search box. A robust site search feature helps visitors quickly locate the information they want. Make the search box prominent and be sure that it searches all of your site - and only your site. We've run across far too many websites that include a "Search the Web" search box on their home page. The result? Visitors hardly get to the site before the search function sends them to another site!
Keep titles short and simple while still being descriptive.
Grouping of similar navigation elements is helpful. According to Webcontent.gov, primary navigation should be organized as one of the following:
by subject (topics, life events)
by task or service
by audience group
by geographic location
by any combination of these factors
Make it clear where a user is in the site and that they can find their way back with ease. Make use of “breadcrumbs,” or a horizontal list of links, showing where the user is currently at if in a different section of a hierarchically structured web site.
Tips & tricks Use server side includes for centralizing navigational link code.
Place main navigation within the top 500 pixels of the website so that the user does not have to scroll.
Make use of the link text wisely so that it is easy to understand.
Avoid using image graphics for navigation. Image navigation may be obviously clear to the web designer, but may be confusing to some users. Use plain text or images with text descriptions.
If images are used in the navigation menu, include an image alt text for usability purposes.
Avoid using complex image rollover navigations. They may look elegant, but adds to the file size of web pages and takes longer to load.
Even if there is a need to create a complex dynamic navigation using DHTML or Javascript, simple HTML links should also be provided somewhere in the website so that search engine robots can spider your website.
On-line Resources:

10. Home Page Navigation Tips
Always include a link to your home page as part of your navigation.
A user may not enter your site on the home page, so make the navigation that they can use it no matter what page they enter your site on.
Home page links should be clear and concise and ALWAYS current.
People can enter a site through any other page, not just the homepage. Using other pages as entry points is achieved through search engines, links from other web sites or bookmarks.
Users must easily find their way around a web site from every and any page.
They should be able to reach the homepage from any page within the web site. Reaching all major site sections can only help them see more of the provided information.
Keep the home page of your site clean and not cluttered. Consider having a process in place for what type of information qualifies to be located on the home page, how long information can reside on the home page and who can post information on the home page.
It should be clearly distinguishable from all other pages.
All major options of the site should be presented on the home page.
A good tagline on the homepage is important – it gives new visitors a better understanding of the site.
Try to make the most important information viewable in the browser window without the need to scroll

11. Other Key Points of Navigation
Navigation layers generally exist in a good website design.
Primary navigation (most important links, categories etc),
Secondary navigation (secondary links, subcategories etc),
Position of navigation, link titles, number of links per page etc.
Checklist and key points to consider when designing navigation
Bear in mind what people expect from good website navigation: primary navigation (most important links, categories etc), secondary navigation (secondary links, subcategories etc.), position of navigation, link titles, number of links per page etc.
Navigation Layers
A website’s navigation scheme will usually be achieved through many layers of links between pages.
Primary navigation must be clear, structured and intuitive.
This means breaking your site’s subject areas into categories and groups and presenting them in the most logical way possible.
Commonly found to the side or at the top of a layout, primary navigation should hold 4–15 links to the main sections of your site. Any more and you’ll overwhelm people. Enclose your navigational links into small groupings of four or five links at a time, with headings so that scanning your navigation bar can be performed faster.
Remember that the majority of your visitors will not land on your homepage — they’ll often arrive on a page deep within your site from a search engine — and therefore must be able to pick up your navigation immediately.
Secondary navigation will usually include common place links like contact, about us and copyright information. These sort of things should be left out of your primary navigation, and placed at the bottom of a page, freeing up your main navigation areas for the important stuff.
Links between the pages of your site in the content of the page are the final way to tie your pages together. Whenever you write about something that is discussed elsewhere in your site, you should make the relevant words into a link to the other pages. This makes related content available when it is most relevant, and encourages visitors to read more.
The words that make up the link should be descriptive of the target page — never use links that read “click here.” You can use the title attribute to give a brief summary of the page’s content, which will help readers to decide if they want to load the page up.

12. Navigation Mistakes
Using confusing or lengthy flash transitions for navigation
Relying on images to communicate hyperlinks content
Having navigation lead to orphan or dead-end pages
Positioning navigation different places on your site
Making navigation same color, font, etc. as your content
Adding sound on navigation
Putting a link to every page on your navigation
Don’t use confusing or lengthy Flash transitions for your navigation; people hate to wait and people hate being confused
always use descriptive text for your anchor text or Flash navigation – don’t rely on images to communicate your hyperlinks content
Don’t allow your visitors to arrive at dead end web pages or orphan pages; include your main navigation on every page of your website
Don’t position navigation in different areas on your website; keep the positioning consistent on all of the web pages
Don’t make navigation the same color, font, and size as your body text – navigational text should always stand out
Don’t play a sound clip each time an item in your navigation is rolled over with the mouse cursor; as mentioned above, people do not enjoy surprises. if you’re going to use sound, then always include some sort of warning or indication so that the visitor can adjust their volume accordingly
Resource showing poor site design practices:

13. Going Mobile? Many users surf websites using their mobile devices.
For dropdowns and fly-out menus it is a good practices make the heading or top-level link a landing page.
In addition to mobile devices, people with styles disabled in their browser may experience similar issues.
Designing sites for mobile devices is a complex topic as there are several different mobile browsers for each type of device
Many companies today have text-only versions and even separate mobile websites, which are optimized to be able to work on various devices
At the very least text links for main navigation headings which link to a menu page should be provided

14. In Summary Your navigation should answer:
Where am I?
Where I have been?
Where can I go?
Your navigation should be consistent
Your navigation should not be ever changing
The importance of an effective navigation An effective navigation allows visitors to find what they are looking for quickly and easily. Designing an effective navigation can also help to direct visitors to other offerings on your site. It is also necessary that the search engine robots can read the navigational links in order to spider (or index) your site. Creating an effective navigation Site navigation can be of various types depending on the type of site. For example, a news site will provide navigation to the latest news (current or maybe a few days old) on the cover pages. Because of the sheer amount of pages of news articles, it is impossible to link to each item that appeared in its lifespan. On the other side, a smaller site will probably be able to link every item from its cover page (homepage). The goal of an effective navigation is guided by the 3 click rule (all pages on the website can be reached within 3 clicks from the homepage). This rule applies to search engines also, where pages more than 3 clicks away are not indexed. Categorize content, products or services: Create smaller categories for organizing the content, products or services. The categorization may be logical, alphabetical or as applicable. The categories can be arranged in a tree structure with several subcategories. Hence it can be several levels deep. Create a navigation panel specific to each category and place it in the left or top panels so that the user can view all links within that category without scrolling. This navigation panel will change when the user moves from one category to another.
Design a clear and simple navigation system. According to Web usability expert, Jakob Nielsen, a good navigation system should answer three questions:
Where am I?
Where have I been?
Where can I go?
Your site's navigation system will answer all three questions if you're careful to include these basic elements.
Another reference to this is:
Wayfinding encompasses all of the ways in which people and animals orient themselves in physical space and navigate from place to place.
Wayfinding has four core components:
Orientation: Where am I am right now?
Route decisions: Can I find the way to where I want to go?
Mental mapping: Are my experiences consistent and understandable enough to know where I’ve been and to predict where I should go next?
Closure: Can I recognize that I have arrived in the right place?
When you have navigation on your website, those four components should always be in place.

15. On-line Resources Usability:
Navigation:
Footer navigation example:
Tabbed navigation example –
Mega dropdowns examples–
There is a host of information available out on-line about navigation: Here are a few to refer to:
Other On-Line Resources:

16. Questions? For any follow up questions, you may contact:
Kathie Glassel: x 3353 Or
Nic Poague: x 3354