Getting the navigation menu of a website just right is an interesting challenge. You have to take in to consideration usability, speed, flow, readability, flexibility and design when you are thinking of how visitors are going to use it. Search engine crawling, number of links, technology and where the links are placed are big factors in setting up navigation for the best search engine optimization strategy.
Here are a few examples of very well done navigation menus. Some are better for search engines, some are better for visitors. All are very well designed. There is some good inspiration here for your next website redesign.
The Giant Drop Down Menu
Grip Limited has a drop down navigation menu that takes up most of the screen when you click the menu button.
Whole Page Navigation
The Wonder Wall page is all menu. You can click on anything on the page and it’s a link.
Flashy Navigation Menu
Hidden Heroes uses a Flash menu that clicks, spins, changes images and pops up navigation items. I’m not a big fan of Flash in general. Load time is longer than visitor’s attention spans in most cases. Flash also hinders a website’s effectiveness in getting found by search engines. Plus, websites just shouldn’t make noise. They should function as a business enhancement, not distraction.
Digitalmash is using Flash in a useful and interesting way. They have also managed to keep load time to a bare minimum. The navigation is a bit in-your-face until you hover over it, then all the text goes gray except the link your cursor is over. I like this idea.
Clean and Clear Navigation
Zappos has one of the best navigation menus out there. It’s straightforward, clean, clear and easy to read. It’s also fast and search engine friendly. There are two main parts to the navigation. The main horizontal navigation has big fat drop downs that can contain large amounts of categorized links. The sidebar has clear listings with the more popular categories. If you can’t find what you are looking for in the menu, there is a giant search bar across the top of the page.
The Under Armour website has similar navigation that is clean, clear and easy to read. You can search a number of ways to find exactly what you are looking for and see reviews on each product.
TED navigation is simple and clear. Because the pages are all very long, the navigation “sticks” to the side of the page. When you are scrolling through the content, the menu doesn’t move. This is not going to work on every design, but here is works very well with the clean layout of the website.
Big Fat Navigation
Rich Brown uses two techniques. Part big fat navigation and part whole page navigation. Shown here is the super giant text menu that would be pretty darn hard to miss.
Established Architecture is another one that uses big fat navigation. The whole home page is navigation and contact information.
Handwritten Graphic Rollovers
Paiku takes a graphic approach to the boring old rollover menu. Text with a handwritten look pops up when the cursor hovers over a menu item.
Prague Guide style sidebar tabs can work for sites with a limited number of pages or categories. The graphic tabs add more of a custom feel to a website, but they are not flexible enough for a website or blog that is updated frequently.
Coda is one of hundreds (thousands? Hundreds of thousands?) of website where you see giant icons for navigation. As website designs get cleaner, giant icons are becoming more popular. They are easy to see and navigate, even on a mobile device.
The Apple website uses several navigation types. One of the most notable is the flying giant icons. When you click on the top bar of the menu, the old icons fly out and the new icons fly in. It’s fun and easy to navigate.
Big Stripey Hover Navigation Menu
I’m running out of made up names for navigation menus. This one is worth a mention. Stephane Elbaz‘s works page lists each article with a thick black dividing line and a smooth scrolling hover effect. Give it a try, it’s very nice.
Accordion menus have been around for years. Most of the time they are not done very well and add heavy load time to a page. This is one of the nicest accordion menus I have seen. The grid accordion slides up, down, sideways, slantways and crossways just like Willy Wanka’s elevator. Okay, maybe it doesn’t do all that. It’s still fun.
Have you seen any really great navigation examples lately? I’d love to see them.