The Navigation Menu that kills your Web Design


In a perfect virtual world, we want a “one word” list of menu items. I know structuring a website is a matter of perspective. When I think of music, I think about certain bands or clubs that I like. When someone else thinks of music, they might think about classical musicians like Mozart or going to a symphony.  So the this an important design element. Let’s keep it short and try to keep the overal navigation menu short and precise.  The most common ones are home, about, contact, and services.

This is the general idea. They say more text is better, yes but a navigation is about searching for something with the least amount of time spent, let’s NOT make it an adventure to find your website menu. You are NOT making a Restaurant Menu, you are making website menu.

Words like homepage are really simple. We can cut it down to “Home”.  Most companies are removing the “Home” button and just adding the logo.  That’s a good marketing move but its also hard for some users that are used to “Home” page button. Let’s try both and see what works better for you a user?

“Simplicity is the Key.”

When I open up my Apple Macbook, the start button is right there. My PC is a bit trickier because it’s hidden on the top right section behind the monitor but that’s the VAIO trying to be mysterious and different (but so is the iMac).  The ipad makes a great user interface. One button on the screen, so simple to use.  That’s genius! a baby would know what to do.  I see a lot of buttons on the old devices from the 90s and 2000s and it was a mess. Older LCD Televisions, remote controls, and old dvd players had terrible user interface settings, complicated menu buttons and shitty designs. Have seen some these remotes with like 50 buttons that don’t really make any sense.

If you want to learn about organizing your menu, I wrote a quick post about the structure. Click here to learn more about organizing your menu.

As we try to make the navigation more simple.  One word menu items are the best. When you add two words like Contact Us … OK that’s fine but you might want to rephrase ideas in to a single word for simplicity in order to mitigate space.  One of the most common combination of words that I see is “Resources and Links”.   The correct way to use links and resources is to use them?  Wait what, that seems obvious? Yeah, making a page dedicated to links and resources is a bit redundant.  For example, I don’t need to explain what it means because I can link it without explaining it again on another page.  You don’t want to be redundant by using up valuable space on the top navigation on the home page.  You can mitigate it to just “Links”.  Then they can go and see the credit and resources that you are trying to display.     You can use the words “Resources and Links” on the hyperlink while keeping the title short and save whitespace on the page or menu.

mega-crap-menuHere is the problem, when you start explaining the micro details of a page on a navigation link that should be mitigated or joined together under a sub group, then you are getting into world of chaos.  There are plenty of ways to “over explain” the meaning of the menu.  Don’t be that person, Learn to convey and understand how the navigation tree works.

Here’s a proper tree explaining the order of mammals from Wikipedia. example-tree It’s easy, we are all from the Animalia kingdom. We might ignore the Phylum and just put “Class”, you could probably skip the middle parts if you are trying to get to the point and just put “Species” underneath Class if you want to make a short menu. A longer one is visible on the right.

Another good example is the Contact page. You don’t need to put Contact Bob and Contact Lisa on the menu but place them both in the contact page.

The about section could have the history and mission statement on the same page or your can put it in two pages but if you are writing a short sentence, you may want to consider placing the mission statement in a single about page instead of creating a dedicated page with 20 words or less. Think about it as a page in the book.

If you look at companies like Apple for example, they know about design. They don’t use a lot of drop downs, on the top of the website.  You’ll notice that all the extra descriptions and technical menu will be at the bottom.  You don’t want the user to  have to “struggle” and try to navigate to your site, it should be easy.

The next big concept is photos. Some people place the photos, video, and music under the navigation of label of “Media”. This approach might differ on the type of website.  If media isn’t a big part of your website, you should consider that title to organize everything. Most sites however have enough material and data to focus on multiple days of photos and different type of videos.

At any rate, there should be no need for a three word navigation links and two words should be mitigated when possible. A key and value pair is the easiest to understand with basic design and understanding how to find a specific topic.  Some of the popular social networking websites just use symbols to guide us because its easier to promote and market. It doesn’t need to be localized if the logo is easy to recognize.