Your website's main navigation, the primary navigation presented to users who first arrive on your website, should do several things, and do them well. The main nav should be simple. The language, the organization, the placement, the size of the font—everything—should do several things, and do them well.

The main nav should be simple.

The language, the organization, the placement, the size of the font—everything—should be simple. This is the most useful element of your site, and much like a doorknob or the power switch on an object, it should not be overly complex.

The main nav should tell a story.

If you are a college or university, you don't want to start your nav with "Giving." You need to tell your story first. Many schools show just how desperate they are by making "Admissions" or "Apply Now" the first link in their main nav. This is bad. Just like a first date, you want to convey confidence and let your user get to know you before you move in for the big smooch.

The main nav should be mature.

Nothing screams institutional conflict more than a main nav that is all over the place. A classic example is a nav that is one part general, one part categorical, and one part specific. Main navigation should be consistent in how it groups information; this is to aide users who are learning to use the system as they begin to navigate the site. Placing inappropriate links into your main nav is a quick way to lose user trust and degrade the user experience.

The main nav should start with the largest parts of the funnel.

For example, you don't want your main nav to be all about the specifics. Users will naturally click into sections as they seek more specific information. If they are looking for filet, they will click into the meat tab. If they are seeking lettuce, they will look under vegetables. Give them time and space to find what they are seeking in the natural order of the information.

The main nav should be short.

If you give users too many options, they will have option overload. A main nav that has more than 7 tabs or links is bordering on too big and should set off alarm bells about the overall hierarchy of the information. Remember, your main nav needs to tell a story—so if you overload your visitors with specifics right off the bat, you aren't letting them read the big picture story.

The main nav should be useful.

It is easy to assume that all things important must go into the main nav. This is a knee-jerk reaction born out of misguided thinking by uneducated information architects or nervous clients. This is simply not the case. The main nav should be the foundation, and it should not have to change down the road. You should not have constantly changing content in your main navigation. There should be other, more visually impactful areas for including these somewhat temporary initiatives within the overall page or site design.

While we may come to think of the main nav as the thing that users see first, this is not true. Users see the features and other more brightly and boldly presented content first.

They only move to the main nav when they have shifted from a browsing to a searching mode.

The features and other more visual callouts you design for your users are for them to explore and interact with; they let users know what you are saying is important, what is hot, new, happening. They are your breaking news, your highlights, your top stories, your VIPs, your special differentiators. Your main navigation is a set of tools in a toolbox that you want your visitor to understand implicitly and feel confident using to effectively drill down to the specific data they are seeking.

Let's break down the main navigation in a few sites to explore these positions in more depth.

Example: MailChimp

If you look at MailChimp's home page and pay attention to where your eye goes, you can see that the most important messages being conveyed are not the main nav, but rather that you can sign up for free, that you can manage email and newsletters easily, and that there are some cool new things happening. Only after scanning these elements do you seek out the main nav, and now your mindset has changed. You are no longer scanning to get a sense of what MailChimp is; you are now going to follow a logical set of pathways to seek out information that is of more specific interest to you. That may be pricing, features, or places to learn more about the community, such as the blog or the support section. But these main nav items are not trying to sell you on the best parts of MailChimp—that is the main page's job, and the brand, and the marketing messages, and everything else. No, the nav is there to get you where you want to go, now that you know MailChimp is something that interests you.

Example: Southwest Airlines

In the case of Southwest, there are a ton of things going on, yet the main nav is quite simple—Air, Hotel, Car, Vacations. To the sides, sitting back slightly, we have Special Offers, Travel Guide, and Rapid Rewards. A nifty drop-down menu gives you immediate drill-down options to skip an unnecessary page reload and to quickly let you see what information and functionality resides within each section. Yet, similar to MailChimp, the main nav is doing its thing, and the rest of the site is presenting the hierarchy, directing your attention, making sure you see the special deals and have quick access to certain portals, etc. They don't try to do it all in the main nav. With such a complex set of user experiences, they have actually presented you with a myriad of navigational "types"—which allow you to "learn" the way to best use Southwest's site and not be left at the mercy of internal groups playing a turf war over the website's nav.

Example: Mint

Surely you've heard of Mint.com for managing your finances, right? No? Oh—well, if you check out their site you'll see they suspect you might be a newbie as well, and they will help you get a quick glimpse of what they are about before offering up a helpful main nav geared toward a pleasant introduction process. Here's what happens when you land on mint.com: You see right away that Mint is the best free way to manage your money, you can get started for free, it's safe and secure, has bill reminders, gets lots of good press, and works on various devices. Great, you're in! Now you head to the main nav to learn more. They opt for a two-option main nav: What is Mint? and How it Works. Pretty simple. Of course there are all sorts of other navigational options sprinkled in that you start to see if you haven't already found what you are looking for, and typically these supplemental navigational elements cater to specific user groups—in Mint's case, Canadian users, people seeking information about the company, or existing users who want to log in. Most importantly, they assume you don't know them yet, and they present their offerings in ways that make sense and have a sense of pacing.

Example: Lego

Lego has a fantastic landing page—it invites you right into its online game experience "Lego Universe" while also promoting other featured aspects of the Lego brand, like the Lego Club, My Lego Network, Featured Products, and quick links to highlighted product lines like the Star Wars line, the "Games" line, and the MBA series of toys. Once you are past the initial experience, you are ready to dive into the specifics—and here you have the main nav stepping up and ready to play its role. You have Products, Games, Create & Share, and Shop. Four links. Simple. And a story is being told; you understand that Lego is a brand that is about playing, creating, and sharing as much as it is about selling you small interconnecting plastic blocks. They don't put LEGO Universe into the main nav, even though one could argue that it seems this is a big push for the company right now. Rather, they feature it in appropriate places. This is also a critical act of restraint because in one or two years, the LEGO Universe may not be the main feature, and it would be wasteful to need to redo the main nav every time a point of emphasis needed to change for an organization.

We try to impart these lessons to our clients at the beginning of every engagement, because much like a house, if the foundation of your main nav is not strong, you risk putting your entire site's structure and integrity in a compromising position that may need to be readdressed in the near future. And when all else fails, remember that you can rely on your analytics data to truly tell you if your website visitors are going where you want them to go and finding what they want to find. That's the beauty of the Web—we have data to base our decisions on! Now, this doesn't mean that the entire process of how we expect to use websites won't be shifting in the near future, as main navigation gets replaced with interactive elements that involve finger swipes more than the click of a mouse. But visual design, composition, and the inherent ways a person's eye moves and the way the brain processes information is and has been pretty much the same for the past few thousand years, so don't mess with evolution and human nature unless you have a pretty convincing argument to do so.

Now go forth and navigate!

Share on Twitter or Facebook Published August 30th 2011