Mega Menus

The Mega Menus we designed for the website of Zefxis provided a highly usable navigation solution for our information structure.

Designing the Mega Menus on the website of Zefxis

Zefxis’ website has 4 main categories; The Company, Services, Our Work and Contact. We wanted to keep the main menu simple, so that users can easily focus on the most important contenton the website.

The thing is that there is more content on the website in deeper levels, some of which is quite important. Since we didn’t want users to miss that content, we had to find a way to bring it more to the front, so that is became more obvious to visitors.

Secondary Navigation - not enough

The main menu was already accompanied by a usable horizontal secondary menu, which displayed the sub pages of the selected page. Some pages though, like Genesis CMS, F.A.Q., Careers Opportunities, Client Quotes, and more, belong to the first level but are mostly linked from pages scattered throughout the website and do not appear on the main or the secondary menu. We had to make them more visible and help users find them more easily.

Drop down menus are not usable

The first thing that would normally come to mind is to create drop down menus on the main menu. The thing is that drop down menus are not usable. In fact, they have quite a lot of issues (see Jacob Nielsen’s article on drop down menus). Well, we knew that already, but we actually did implement a quick solution of normal Drop down menus, only to confirm our knowledge, that this type of menus wouldn’t really work.

Mega Menus

Then came Mega Menus. This is a special type of drop down menus, which is more complex and provides significantly higher functionality. We wanted to make them as usable as possible, so we decided to work on every detail that would make them better. We followed usability guru Jacob Nielsen's guidelines on Mega Menus and some additional common usability tips we had in mind.

The important points we made sure to implement were the following:

• The top-level links have an icon that suggests they will display a drop down menu when the mouse is placed on them. It's a small triangle that points downwards.
• The navigational choices on each menu are clearly structured through layout and typography. This keeps the menu clear and helps users minimize the time they need to find what they want.
• The contents of each menu are all visible at once. No scrolling is required. (That would make the menu highly unusable and would really irritate users).
• The response time is set to 300 milliseconds. This is the time it takes for the mega menu to appear after the user has placed the mouse on the active link. Nielsen suggests 500 milliseconds, but after doing some test we concluded that it would be better for our target group if we decreased that a little. Showing the menu without any delay is a huge NO, as it really disturbs users, making them feel that something happened, without them wanting it to.
• The menu takes 100 milliseconds to render. This makes users feel that an event is trigger by them and is a direct result of their actions. We used a fade-in animation, which completes in 100 ms.
• The menu disappears after the mouse has gone out of the menu's area and stayed out for 500ms. It is important that it doesn't disappear at once, as some users might move their mouse out of the active area by mistake.
• The menu disappears in 100ms.
• The options of each menu are grouped into related sets, which have medium granularity. We don't have a small number of groups with a huge number of options, or too many groups with 1-2 options each. Having a medium granularity makes the options readable and decreases the time required for the user to make a choice.
• The labels of each group are short but descriptive. They do not contain "smart" or made-up terms and the first word is the most important and descriptive word of the label. The same goes for the text of the options. Again, this helps users navigate more efficiently and quickly.
• The groups are ordered by importance.
• Each option is only showed once. The opposite would confuse the user.
• The mega menus do not contain anything other than links. In particular, there are no other controls, like a search box, login box or anything that would make them heavy and cumbersome.
• Each top-level link is clickable and leads to a page that has real, useful content.

The design of these Mega Menus was a fun thing to do and we believe it turned out well. Mega Menus are not very wide-spread yet, but they do provide significant advantage over the old drop down menus and we should expect them to gradually replace old-school drop down menus.