Web Design: develop an effective navigation menu

Tweet

When developing a web site, one thing we should concentrate on is the navigation menu. Considering that probably a menu is the most important part of our web development process, I would like to share some ideas about it, things to keep in mind while we start thinking about an effective navigation menu.

What kind of menu we need

The first thing we should consider - while our project is still a blank and white piece of paper - is: what kind of menu we really need? It seems a dumb question, but we need to focus on what is the true purpose of our - yet to be born - navigation menu.
Knowing what is the general purpose of our web site, lets us concentrate on the structure and content of the menu. For example: if our site is a marketplace, we need to focus on selling products, while if our site is just displaying our production range, we need to focus on products marketing.
The concept is quite clear if we compare two well-known web sites: Apple and Amazon.


Apple web site is mainly focused on displaying the products. Apple brand awareness is very strong, so they don't need to overstate on their trademark.

Apple main menu

As you can see, the Apple logo is just a small icon on the left hand side of the main menu, and it functions as a link to the web site homepage. The rest of the menu is just displaying direct links to specific product ranges. Obviously the "Store" has its importance, however the visitor is inevitably attracted to products names (as a side note, in my opinion the visitor will be mainly pushed to select the "iPhone" button, which is nicely placed at the center of the menu).
The overall look of Apple menu is simple and effective: no submenus, no incredible and flashy effects.
In my opinion the main focus here is on products.

Amazon menu is quite the opposite. Because the primary objective of the site is to sell stuff, the menu is aimed to help the visitor to find the right and desired product.

Amazon main menu

As you can see, the menu is more complex, compared to Apple's. It is divided on sections and subsections based on product ranges (Amazon calls them "Departments"). The visitor is pushed to select a range or a subrange of products, in order to find the desired product. All the menu structure is aimed to the selling of goods.

Choose your items

The moment we know what is the main purpose of our navigation menu, we can start thinking about content. The number of items is quite important, because it can change an effective menu into a non-effective one. My opinion is that, the least number of items, the better. Sometimes it is not possible to have less than 10 items in a navigation menu. In those cases it is better to carefully consider a menu structured on levels and sub-levels.
When we finally have our list of main items, we need to consider their importance. It is usually preferable to have the most important menu element as first choice and then all the other items in order of importance.
As we saw for Apple web site, we can even consider other rules and try to lure visitors to select a specific item by placing it in strategic positions.

Vertical, horizontal or a circle

As we discussed, at this point we have decided the main purpose of the menu and the items we need in it. Now we need to consider its shape.
Usually, web developers use horizontal or vertical menus. The two above examples are quite explicative: Apple menu is horizontal, while Amazon's is vertical. The choice is made considering the web site overall structure, however might have considerable impacts to be considered. For example, an horizontal menu could be too "long" for lower screen resolutions. If we consider tablets and smartphones - for example - we should take care of necessary fallbacks in case of mobile visitors. Horizontal menus should be redesigned for mobile users.
At the same time, vertical menus could be too invasive and they could take to much vertical and horizontal space, being a strong and disturbing element on the page.
Lately, I've considered circular menus which can be a good solution in some situations. They can be used when the home page can be filled up only by the main menu, however we should absolutely consider fallback for mobile users, and we will surely have to design another menu for inside pages, because normally circular menus take up a lot of space.

That ends my short essay on navigation menus. I hope you've found it inspirational and useful.
Please share your thoughts as usual. see you next time!