Usability and Navigation Design – Uber Menus

While here at E-Nor, we are heavy on analytics, data-crunching, and numbers, we do have a fun side 🙂 – an understanding of aesthetics and usability through design. After all, let’s say your landing page bounce rate stinks. It could be the design that’s causing users to be frustrated and just “bounce”. How do we fix that? That’s where the Creative Department comes in! We make sure your site is as usable as possible, getting the visitor comfortable enough to ultimately convert.

Today, let’s talk about a great new usable design for multi-level drop down navigation menus. The “Uber-Menu”.

What the heck is an “Uber-Menu”? I recently attended a webinar given by Hagan Rivers, a UI navigation expert, and she brought up a great concept of “uber menus” which many sites are using today. Uber menus, as they relates to web sites, are basically drop-down or flyout menus that lay out certain levels of your site in one big box – most likely to layout your second and third levels.

a) Often, third level dropdowns or flyouts can be quite annoying (see above). The main problem is that our hands aren’t usually steady enough to go in that perfect “L” shape to perfectly hover over 1st, then 2nd, finally 3rd level drop down or flyout. Most of the time, you slip, and both menus disappear! Freaking annoying! Enough unsuccessful tries, and your user may end up frustrated enough to try your competitor’s menu.

b) Another usability standard to take into account is laying out links versus keeping them an extra move (click or hover) away. Studies show that links are more likely to be clicked if they are explicitly “laid out” as opposed to someone having to hover over their parent or having to click their parent link to get to another navigation page or tab containing the link. (See above).

Also, many sites have recognized the error of including a third level in your drop down menu – you run into the problem outlined in (a).  The usual solution is to cut out the third level completely from the menu. Which is kind of the same thing as saying, “This compass is a little hard to use, I’m just gonna chuck it in the river.”

Uber-menus seem to solve (a) and (b) outlined above, coming up with a nicer navigation layout.

We can see here, the level 1 parent being “Patio and Garden, level 2 and 3 are completely laid out – level 2 in bold and level 3 is indented in normal font, which allows the user to easily differentiate the two. You don’t have to worry about keeping a surgical hand on the path to the third level of the dropdown menu. On top of that, your user at first glance can see all goodies and pages your third level has to offer.  One thing to also notice that you can’t see in the picture is that by clicking on “Patio and Garden” the menu stays open.  A positive of that is moving off the menu wont cause it to vanish.

Interested in advanced web design and navigation techniques? Give us a shout!