Navigation

6 Best Practices of Navigation in Web Design
Navigation today is an integral part of web design and goes beyond aesthetics. Much of navigation design today is part of the CSS used for the website, while the functionality remains in the mark up language. Ideas abound for creating navigation. Here is a summary of some of the modern trends.

Menus have been used for long now. They are the simplest of the navigation tools. However, the ways in which they can be used are endless. Today, some of the common trends in menus include using them with subtitles in CSS. Another trend in the use of menus is with page separation. Essentially, this is done to keep large amounts of content organized. This stems from the fact that separation of menu classes or types makes it easier for the visitor to mentally categorize information. This serves navigation and also improves the efficiency of calls-to-action.
 * Menus**

Today, sidebars are a common sight on web pages. Their use and efficiency is highly debated. However, they seem to find favor with many web developers. They can be useful for making non conventional design where the content is not heavy. However, issues that are common with this type of design arise due to the use of images along with CSS. This means trouble with SEO techniques. Legibility is again another issue. Despite all of these apparently discouraging issues, a webpage can pull it off if it were a portfolio or a profile page. This is simply reiterating the fact that the type of website determines the navigation.
 * Sidetabs**

Post headers are common with blogs. The primary objective is to create interest. The logo or header is the first location to which the eyes go. If important navigation elements like the menu or call to action buttons were to be placed here, the likelihood of meeting the final goal of the webpage increases. The proportion of the header is important – the navigation elements should not be hidden by the header or logo, while at the same time it should not seem jarring. The navigation elements have to be separated well by white space and should ideally have backgrounds contrasting that of the logo.
 * Post headers**

This type of navigation is ideal when visual appeal takes precedence over content. Web-pages with high resolution images played as a Flash object often has pointers. Icons also help navigation because they seem uncluttered and are easy to find. Besides that, it’s a lot easier to use icons as the viewer associates an image with the navigation element.
 * Icons**

Considered as extra graphical elements, a pointer can create better interaction. They are largely used for hover effects over bars. They are used these days with icons to create a strong visual appeal.
 * Pointers**

The trends are not restricted to the above mentioned ideas. Many websites have navigation that does not fit any category. It may be a risk but if it is possible to experiment, then it may actually turn out to be a good idea.
 * Unconventional design ideas**

**Thomson Chemmanoor** is the Founder and CEO at Digital Labz LLC an Internet Marketing Company that specializes in Website Design and Online marketing services for small business.

8 Website Navigation Best Practices
Published October 5 | By Jessica Rosengard http://www.jessicarosengard.com/8-website-navigation-best-practices/

Developing and organizing your website content can be a daunting task. Depending on how large your site is, it can take a lot of preparation to pull all of your content together. Once you do that, you need to figure out on which page(s) all the content will reside. This is where your navigation comes into play. Each link on your navigation bar leads the visitor into a new area of your website. This is a great opportunity to help guide the visitor to each area with ease and simplicity. If your navigation is clean and organized, it will make for an enjoyable and informative user experience for all your visitors. In this process, there are at least 8 “best practices” to follow to ensure that the user experience is optimal and efficient:

1. Naming
Each button/link should have a short name… preferably one word. If you are directing people to the “The Philosophy Behind our Work” page, the navigation button can simply say “Philosophy”. That pretty much says it all. Clear. Straight to the point. Understood. If you have the whole page name in the navigation button, you will either run out of room or you will lose the attention of the visitor.

2. Organization
If you have many pages (more than 7 or 8), it may be best to organize them by category and have drop down menus. The cleaner the navigation, the easier people will be able to find what they are looking for. If you have 15 navigation buttons AND they each have drop downs, the site will become much more challenging for the visitor. The “less is more” concept is always a good one to follow.

3. Drop Downs (or Multi-Level Drop Downs)
If you have or intend to use sub-menus in your drop downs, try not to use too many sub-levels unless you absolutely can not do so. If someone has to rollover 4 buttons and find themselves 5 levels deep into your navigation, chances are their mouse will slip and everything will disappear. Then they have to navigate all the way back into that maze again to find what they are looking for. It may be better to just create a new category in your navigation bar to keep things simpler.

4. Functionality
Navigation should be somewhat interactive. If you rollover the button, the visitor expects something to happen. Something that will indicate that it is in fact a button and if clicked, something else will happen. If you rollover a link and nothing happens, then it may not get clicked. This means the page may not be seen, read or visited. Always assume that a visitor has no idea what YOU are thinking or wanting. Remember to design with your visitor in mind.

5. Simplicity
Navigation does not have to be super fancy-schmancy. You do not need to have flashing stars, sounds, clicks or dancing bears that appear when a button is hovered or clicked. This does nothing more than create a //“wow, that was really annoying”// reaction in the visitor’s mind. A simple state change (i.e.: change of color, size, text decoration or background color) is all that is necessary. These effects add a little flair to your design without interfering with the overall experience or the site’s aesthetic.

6. Location
Website navigation is inherently expected to be in 1 of three places on your website: Top, Left Sidebar, or Right Sidebar (as many blogs do). As wild a concept as it may seem, some folks like to hide their navigation somewhere else on the page because they think it makes the site more interesting. Unfortunately, this leads to a frustrated visitor who can’t seem to find the information they need, and ultimately leaves – never to return. This is a HUGE missed opportunity.

7. Size
Your navigation buttons should stand out from the rest of the content on your pages. If your navigation utilizes text that is the same size as the rest of the text on your site, it may get lost (visually) and the visitor may not see it. Of course, if your text is dressed with a background color or shape, that will help, but the navigation should always stand out. Making things easier for the visitor is always a good decision.

8. Structure
My philosophy: You should be able to get to any page in the site from any page in the site. The user should never have to click the “back” button to navigate. If your navigation is clearly posted, it will be obvious to the user that they can (and should) use the buttons to explore. Of course, many people are used to clicking “back” but that is usually because they want to go back to their Google search results or to the last website they were on. Once you get people in your site, keep them there with a clean architecture.

=Essential Navigation Checklists for Web Design= **By** Marta Eleniak | May 29, 2003 | http://www.sitepoint.com/checklists-web-design/


 * These checklists pull together best practice in the disciplines of information design, usability and accessibility, into an easy to apply format. If you are already familiar with those topics, the checklists serve as a handy reminder that is easy to refer to and apply when planning navigation. If unfamiliar it’s also a fast-track lesson – providing you with a head-start in getting it right and enables you to make better informed choices / compromises.**

You are presented with the top level practical advice you would take away from reading about each area in depth. I don’t give detailed reasoning behind all the advice because that would be five books’ worth of material in itself, and a number of excellent books already exist that do this perfectly well, see the reading list at the end of this article.

**The Ultimate Test of Your Navigation Design**
You will find a compilation of best practices and insights derived from research and personal experience, but as with all check points you should apply them judiciously. Good websites come from good compromises. The ultimate test of any user interface design is always the user test. This means it is okay to dismiss guidelines if the end result is proven to be a comfortable user experience where the users can carry out tasks / find information with the minimum of effort.

Steve Krug in his excellent book ‘Don’t Make Me Think’ includes some very useful chapters that will inspire and empower you to do your own user testing. Testing is neither costly, nor too time consuming but essential, as you’ll discover as soon as you do some. I stress this because for navigation to work, before even considering design or technology, your users must understand the words used and have their expectations from those words met by the content they click/link to. All you need for this test is the navigational words in the order they would appear on a piece of paper, and a few people representative of the target audience. Ask what they understand by each word/phrase and what they’d expect to get if they clicked on that link.

**Checklists**
The guidance for navigation planning is organized as follows:
 * Planning the Information Architecture
 * Content Ideas
 * Choice of Words/Phrases
 * Structure
 * Helpful Tips
 * Planning the In-Page Navigation
 * Choice of Words/Phrases
 * Structure

Content Ideas (beyond home, section and product pages)
As you map out the content of your site, consider the following organizational elements, which are common to many sites today. Only include content that is likely to be sought out/attractive, valued and read by the audience. Don’t include content for the sake of having a larger site or simply because you can, you will be creating a massive maintenance overhead. Remember users are mostly time poor and have a specific goal in mind. In most cases only job applicants & the competition will pore over your site. If you are working on a company website, don’t get carried away with what you can do or what would be cool, but constantly do a cost-benefit analysis in your head and focus on delivering value to your employer
 * About us
 * Awards/Professional affiliations
 * Company information (what we do and brief history)
 * Client lists
 * Customer quotes or testimonials
 * Job postings
 * Contact us
 * Contact details
 * FAQs (frequently asked questions)
 * Feedback form
 * Maps of and directions to office locations
 * Resellers / distributors
 * Content
 * Advice
 * Competition
 * Events
 * News
 * Weather
 * Legally required / recommended
 * Copyright statement (e.g. Â© RAC plc 1999, 2003. All rights reserved.)
 * Privacy policy
 * Terms and conditions
 * Member / user login
 * Personalised member area
 * Press centre
 * About us (link to)
 * Contact details for PR dep’t
 * Management/Key personnel
 * Press releases
 * Product
 * Catalogue
 * Description of individual product
 * Large image of each product
 * Shopping basket / online sales
 * Software downloads
 * Video of product in use
 * Customer survey
 * FAQs (frequently asked questions)
 * Sample / brochure request form
 * Search
 * Site map (if a large site)
 * Useful links (related links to external sites)

**Choice of Words/Phrases**
Bear in mind that titles seen as content at the top of pages should correspond to: the title meta tag of that page; the URL for the specific page to an extent; and the wording of the link (or navigational button) that was clicked. This all goes towards assuring the user they are where they wanted to be and helps them get there again Do not simply replicate a company’s internal structure in your site map, just because it is recognized and useful internally, does not guarantee your users will know how or where to start Do not use company jargon and be careful of product names that are vague unless they are household names thanks to a massive advertising spend. I had to talk one company out of calling their ‘Personal Vehicle Leasing’ product ‘Just Drive’. Web usability should be a key consideration during product naming Think about what you want the target audience to be able to do or what it wants to do, and what words they would be looking for to carry out that task Choose words that are meaningful to your audience, looking at what web users in general type into search engines is a good place to start (in the UK see []). If you want your site to be found via search engines this is an essential piece of research to do

**Structure**
Try to make your main site navigation positioning, design and ordering consistent throughout. Your home page is often the lesson users take away with them on how your site is structured, if you change it after the home page I have observed users become blind to new or different navigation further in Do not have a set of navigational links that is any larger than 8 items, users are put off when overwhelmed with choice. Divide your navigation into chunks, a typical way to do this is by using design to separate general utilities like contact us, site help, site map, etc. from key content areas Group content/product pages into logical sections to avoid having a long list Try not to place key navigation (content and utilities) that appears on all pages in different areas of the page e.g. left, top right and bottom â€“ the more you do this the more invisible it can become to the user Avoid placing important navigation at the top. While scanning pages, which is the way the huge majority of web users use the Internet, they blank out anything they don’t recognize, know they don’t want or that looks like advertising – which they have come to expect in the top part of the page Place legals (copyright notice, privacy policy, terms and conditions) at the bottom of all web pages where they are typically found, but you should also draw them to users’ attention by including links within content where it is timely for them to be read Home should be the first link. Any site/company logo and image in the top left corner should also be a link to home to follow web convention Help users find what they want within a list of links. Items should be listed alphabetically unless there is a natural order that 90% of users would grasp with ease when looking for a specific item If the subject matter lends itself to such manipulation, place what you want users to notice and remember for a long period at the top. Place links you want users to remember for a short time at the bottom of the navigational set and remember that unless middle items have some special significance to the user they won’t be remembered at all

Helpful Tips
Don’t make the mistake of deciding on the top level navigation before you have created a site map for the whole site Do not focus on the number of clicks rather than usability. It is more important that users feel in control and understand what to click on, than to ensure all info is 3 clicks away. Don’t bury it too deep either but definitely don’t create a contrived unfathomable navigation to meet some dumb web rule Treat text links repeating primary navigation at the end of each page as an optional extra. Text links to content and utilities are often found at the bottom of pages to help users navigate from the bottom of long pages. If the primary navigation device uses scripts that are incompatible with the browser or assistive technology (that disabled users may employ) there remains a way to navigate around the site, but affected users will probably give up before getting to the end of the page. Although a convention, in my user testing experience most users go back to the navigation at the top Treat visited links as a nice feature to have for those who understand web design or are power users. I have never observed a typical user, i.e. one without web design knowledge, realize that links have changed their appearance because those pages have been visited Include a search and site map if your site has many pages. Note that some users have learned searching gets them to the info they seek quicker than browsing and look for a search box, rather than at navigation, as soon as they come to a new website Finally remember users must be able to navigate without using a mouse (keyboard only operation) for your site to be accessible. You should be aware you’ll need to plan for an accessible version of your site if navigation is not usable when scripts, applets, or other programmatic objects are turned off or not supported

Choice of Words/Phrases
Do not make phrases such as ‘click here’, ‘buy now’ or ‘more info’ lone links because they are meaningless without the context. Users can not scan links visually or using screen readers when you do this. Here are examples of how you might rework things: All links to be worded so they are a clear indication of where they take the user, with title of link matching title of page being linked to where possible
 * ‘Click here for the latest company news’ becomes ‘Latest company news’
 * ‘Buy now’ becomes ‘Buy 4 socket extension cable now’
 * ‘More info’ becomes ‘More info on our product range’

Structure
Unless you have a very small, simple site, plan to include a ‘You are here’ navigation before the page title (i.e. show the user where they are in the site). Also show what step they’re on of how many, in stepped interactions such as making a purchase Do not rely on rollover text to convey information Do not rely on an image as the only way to link to something If you have an image associated with a text link, make the image a link too â€“ most users expect to be able to click on the image Minimise the amount of links on the page â€“ keep it under 20 Limit the user’s key choices of what to do next to a max of 4 options but preferably less if you can Decide how you would like to lead users through the site and identify a key link – calls to action work well as buttons aligned to the right of the main content When a user is engaging in a purchase or some other activity you do not want them distracted from, consider using a different main navigation bar which has less options but still allows them to get back to home

Accessibility

 * RNIB Hints []
 * Rough Guide to Accessible Web Design – []
 * The W3C guidelines for accessible design, which are recognized worldwide – []

Usability
I would also advise reading Human-Computer Interaction and Cognitive Psychology text books.
 * ‘Don’t Make Me Think’ by Steve Krug - first-rate easy-to-read usability eye-opener with guide to conducting your own user tests (if you only ever read one book about web design or usability it should be this one)
 * ‘Homepage Usability’ by Jakob Nielsen and Marie Tahir analyses good, bad and ugly of 50 website homepages and therein also navigation and web design overall
 * ‘The Humane Interface’ by Jef Raskin gives some great real world examples to help you really understand how and why humans and technology do or don’t work together
 * Host of resources from Nielsen, the first self-proclaimed guru of usability [|http://www.useit.com]

Information Architecture

 * ‘Information Architecture for the World Wide Web’ by Louis Rosenfeld & Peter Morville I confess I have not read this as on first glance I didn’t think it was anything new as it preached what I already practiced, but I am told by reliable sources it is excellent guide to what is an essential part of any navigation design work