A menu on a website is one of the first things that people see when visiting our website. It’s the basic Navigation element the look and intuitiveness of which will cause a user to stick around on the website or leave. The viewer has to be able to easily find what they are looking for at the moment.
The menu is one of the most crucial elements on a website. What should a perfect menu be like, then, so that it doesn’t cause frustration and allows to navigate around the website in a simple and intuitive manner?
Types of menus on a website
There are many different types of Main menus available. It all depends on how we want our website to look and how we wish to present this menu. The easiest division is between horizontal and Vertical.
- Horizontal menu
A horizontal menu is definitely less complicated. It makes it easier to navigate around, because that’s the type of Navigation we’re used to the most. Such menu shouldn’t feature too many tabs – it is recommended to be 7 at most.
It’s also a good thing to remember that it should consist of no more than two drop-down levels. These two things will keep our menu easily readable to the viewer and there’s a huge chance they will stay on the website for longer.
- Vertical menu
When it comes to a Vertical menu, things are a little different. If we have a pretty elaborate menu, it allows us to put more items in it. It will make it easier to understand for people navigating around the website. What type of menu we choose is an individual decision and it depends on how many tabs we want to put there and how elaborate they are.
Of course, one could combine both types and create a hybrid. A horizontal menu will be there for basic Navigation, whereas the Vertical menu will allow for filtering, categorization or access to remaining information.
- Hamburger menu
On top of the two basic options, we also have the very popular hamburger menu. If the name doesn’t ring any bells, the appearance should. An example of such menu can be found below. The menu isn’t visible when browsing the website, but once you click the icon, it pops up instantly – we’re talking about the icon in the top right corner.
It might cause problems to the user, though/ First of all, it increases the number of things to do, and second, an unlabeled icon might be hard to understand. We should take into account who visits the website and if it will be really obvious to them, or maybe if it’s better to add the word MENU.
This type of menu is often used on responsive versions of websites so that the menu doesn’t occupy majority of the screen when navigating around on Mobile devices.
Website menu – what to keep in mind when designing it?
When designing your own menu, you should keep several key issues in mind:
- Firstly: define the purpose of the website in advance. Is it going to be a large Internet store, or maybe just a small website with a few subpages? That’s the main factor in building Navigation. If you’re Creating a blog for example, the main menu will be relatively simple – it may feature information about you, about the blog, a media contact tab etc.
If you wish to also implement a side menu on the website (like for redirecting to older posts) it might be in form of a calendar for example, or a list of months with individual posts – don’t forget to also properly tag the posts or divide them into categories. If you’re Creating Navigation for a huge e-commerce, though, things get more complicated.
The website Navigation has to include a listing of the main categories, then subcategories etc. – as clearly as possible, so that a potential customer can easily find what they are looking for. It doesn’t make it difficult to guess, then, that it is e-stores that suffer the worst from a poorly designed website menu.
- Secondly: define the structure of the website menu. A properly designed Navigation tree (which will allow for easy and intuitive switching between categories as well as finding individual items) is a key to a website’s success.
- Thirdly: think about the naming convention / labeling. It is better to stick with a simple “blog” tab which is clear for everyone (you can tell right away it leads to the corporate blog) than to fool around with enigmatic “inspirations”, “tips” or “expert knowledge”.
- Fourthly – think of the user. It’s all about them here, it is them that your menu has to be understandable and intuitive for.
Remember about a Mobile menu!
As they say – last but not least, a menu for the Mobile / responsive version of the website. Of course we’ve been used for quite a few years now to nearly every website adequately scaling down to the screen it’s currently displayed on. Thinking back, however, the premiere of this technology wasn’t really that long ago.
Still, users have developed certain habits since then that are good to have in mind. When thinking about how to design a website menu for Mobile devices, the so-called hamburger menu certainly comes to mind.
It is a link that expands to an entire menu, usually labeled with an icon of three horizontal lines, which might look like a hamburger. Hence the name. The key is to make the button easily visible. Sometimes, to make it look better, it is also surrounded with a frame.