13

Are there any studies on drawer type navigation such as: http://www.ibm.com/us/en/ where the navigation pushes down content, compared to traditional drop down menus where navigation covers up content?

I'd like to understand 1) user preferences and 2) usability.

IBM drawer navigation: enter image description here

Improve this question
6
  • 3
    For the benefit of future readers, you might want to include a description or sample image of what a "drawer navigation" is. Not everyone, even on an dedicated UX site, will know what you are refering to, and the linked example will eventually change its design.
    – kontur
    Jan 4, 2013 at 19:44
  • I second @kontur ibm are likely to change their site before long
    – icc97
    Jan 5, 2013 at 16:35
  • I think these are more generally called "mega menus" (hence the retag)
    – Ben Brocka
    Jan 5, 2013 at 16:55
  • @BenBrocka I think there is a genuine difference - mega menus don't push the content down. Drawer navigation is also called Push-down as in obelia's answer. I think mega menu's are half way between.
    – icc97
    Jan 5, 2013 at 18:32
  • 1
    Thanks for all the feedback & I agree on adding an image vs. a link. However, I still feel like a lot of what I hear is just preference. I was searching to see if any studies could support what I am hearing? Whether it is just a small study you have done within your project, or if there is a larger study to be referenced.
    – leex1080
    Jan 8, 2013 at 18:41

3 Answers 3

Reset to default
4

personally I prefer the "drawers" approach. Tradition Drop Down navigation can become a whack a mole dexterity game depending on how they are scripted. Dropdowns can in other words, become tedious to interact with while the drawer presents the navigation in totality without the necessity to maintain "perfect" mouse positioning.

Additionally the "pushing content down" aspect of the IBM site's implementation is "whatever" You could do an overlay treatment and the fundamental appeal (to me) of the drawer approach has not changed. The pushing of content for me falls into "visual sugar" aspect of the UI design - without without : the drawer's use and nature is not impacted.

-2cents

Improve this answer
3
  • And if we're really smart - we could do the dropdowns, and eat our cake -- simply put, drop down menus "un" work if the scripting agent takes into consideration the common actions of "humanity" ---- that being said, the "drawers" option is "easier(for both the programmer and the designer and the user - i guess "both" is now invalidated haha ) and contemporary still" - but the burden of UX lies in how you determine if and when: a user is "off" the navigation and for that simple reason alone; your (as you labeled them) "drawers" are a better design
    – Brandt Solovij
    Jan 4, 2013 at 4:02
  • 1
    +1 for the excellent description of annoying dropdowns, but that's down to bad coding rather than bad UI concept. I'm sure people will find ways to write disastrous drawer navigation.
    – icc97
    Jan 5, 2013 at 16:48
  • I think pushing down content is more than visual sugar because it doesn't hide anything (as traditional drop-down lists do), and there are cases that not hiding increases usability.
    – obelia
    Jan 5, 2013 at 18:47
4

The push-down pattern has the advantage of not obscuring any content so (in most instances) you can scroll down to see the page content while the menu is displayed (the IBM example your link to is more complicated and collapses the menu upon scrolling but the more common pattern is to keep the menu shown while scrolling).

The more traditional overlapping menu pattern is descended from well established drop-down menu and drop-down list patterns. The push-down style came gained popularity with the rise of small devices (phones) where it fit nicely to simply use the whole top portion of the screen for a menu.

The IBM example is somewhat unusual in that the menu displays a very large number of options and takes up a massive amount of real estate. It's a nice solution to the problem of presenting that many options but I think it would be more usable if scrolling didn't interfere with the menu display.

Improve this answer
3
  • Revisiting this - this is counter intuitive to what navigation interaction is : A Change of Context. Why would you want to suggest to a user that their navigation is secondary to what you "want" them to see? In practice this approach (obela's) is not really better nor worse but rather confusing - if you "make space" in the dom - it should be to provide modal information --- not to "let a user scroll after they got lazy" - i have 135 characters left from here: All interactions should benefit discovery - trying to salvage content does not fit into that unless that content is targeted.
    – Brandt Solovij
    Jan 30, 2013 at 1:36
  • The navigation section is not only for a change of context. It can show you where you currently are in the context of where you can go, giving a broad overview of site structure. It shows information whenever it's visible, enables a context change less often.
    – obelia
    Jan 30, 2013 at 3:08
  • the rationalizing of the drawer as a "roadsign" is somewhat strange. If you are scripting the drawer/ mega nav to display a breadcrumb when not being interacted with, sure. But if a user is expected to interact with the drawer to simply "figure out where they are in the site" - then the site has much greater usability issues than simply "drop down or drawer" discussion.
    – Brandt Solovij
    Jan 30, 2013 at 18:55
2

The animation of the drawer sliding out is visually jarring. It draws my attention to the main content that is being pushed down, instead of drawing my attention to the content that I should be focusing on: the drawer itself.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.