So yes, our Web site is now redesigned; our XHTML, CSS, JavaScript and our content is in a pretty good state but still needs a bit of polishing. After all, that’s why the BETA label is there on the upper right hand corner of our new logo. As I have extensively been involved in the design, client side and server side development process of this project and as we got this corporate blog up and running I thought of starting a series of posts to describe why and how we implemented parts of it. In this post I will talk about the main navigation of our Web site.
Content, content and more content....
Although this is a corporate Web site, it consists of a rich structure with many pages in different categories. All content had to be structured in logical and straight forward sections so that visitors would find what they are looking for without putting any unnecessary effort. That’s how the entire content was put into pages. Then pages were hierarchically structured to form a final page structure.
One click distance from any page to any page
The idea was to provide one click distance from any page to any page. OK, doable, but how could would you avoid the so used and abused cascading menus? The answer lies within a new Web trend, mega menus.
Mega what?
Yes, mega menus. The concept is “borrowed” from the Microsoft Office 2007 ribbon bar. In case you haven’t seen the ribbon bar, the image bellow displays the shape selection menu.
The idea here is to provide one click distance from any shape available during the shape selection process. What has Microsoft done here? They grouped all shapes into logical groups and piled them up in a single, easy to access drop down menu, while keeping all options visible to the user without the need of any extra clicks or scrolling. Not bad, is it?
The Atcom mega menu
Here, at Atcom, we believe that anything can be done. Inspired by the MS ribbon bar we designed a menu that provides one click distance from any page to any other page. We restricted our page hierarchy to three levels max. More levels wouldn’t make sense on any corporate Web site anyway so it’s not much of restriction. We thought that the first level will be visible by default on the top of any page. Then, when the mouse hovered over any of the first level menu items the entire hierarchy under that item would be displayed as shown below.
This image shows the expanded menu under the first level item labeled “Solutions”. All second level items are displayed in bold fonts followed by a description in lighter grey. The purpose of this description is to outline, in one short phrase, the content of its sub pages.
All sub pages, the third and final level, are listed in normal font weight one under the other. In order to avoid very long menus though, we split the third level into two lists and place them one next to the other. This happens only on third levels that consist of more than five menu items.
We implemented this mega menu purely with CSS. No JavaScript has been used. It’s pure sugar! Of course this was posible with the use of the new Netvolution menu module.
Advantages
The obvious advantage is the one mentioned above. One click distance from any page to any other page. There are some other advantages though.
Search engine bots have ready food to eat as there is an anchor tag to every page on every page. It is easy for search engines to crawl the entire site. It’s like embedding the entire site map on each page. It definitely provides an SEO feature.
Logical grouping of sub pages with descriptive text is another usability advantage. Visitors seem to love it as they get an idea of the page section they are going to navigate to.
Space. Although the mega menu consists of the entire site map, it does not occupy any space on the page. It is only shown upon request. Only when the visitor hovers over the first level item he desires.
Disadvantages
I can only think of two disadvantages of mega menus. One is that it slightly increases the amount of code being transferred on every page. The Atcom mega menu is loaded on every pages.
Another is that people are not very familiar with this concept. It does take a couple of clicks to get used to it but my personal opinion is that we will see more mega menus on web sites in the future. It will, again this is my personal opinion, become a common practice and users will feel very keen on using them without any hesitations.
Go on, play with it on this web site and let us know what you think.