2

I'm in a fairly early stage of creating a responsive Wordpress theme. I have a basic fixed header bar and I'm working on a left-hand navigation panel right now. I'm taking some inspiration from the KDE Kirigami HIG.

The fixed header bar is already responsive; the name of the company disappears and the company logo becomes centered on small screens. I have a hamburger menu on the left and the navigation panel will always be shown on larger devices unless someone clicks the hamburger menu button (in the future).

The desktop view of the website

I had not yet started working on the breakpoints for the navbar on mobile when I tested it and discovered that it already looked like a menu on mobile:

The mobile view of the website

For comparison, my original mockup of the mobile menu:

Mobile left-hand menu mockup

From a usability perspective, what are the pros and cons of having a menu drop down from the top vs slide from the left? A few that come to mind:

Pros of drop-down:

  • Apparently easier to program
  • Keeps main content visible while navigating

Cons of drop-down:

  • Inconsistent with desktop design
  • No possibility of a swipe-right-to-open thing (menu button is in top-left, bad for right-handed people without swiping)
  • Not as distinguished from the main content of the page

Pros of left menu:

  • Similar to Android Material Design and KDE Kirigami design
  • Common mobile website design
  • Conducive to swiping

Cons of left menu:

  • Less efficient use of vertical space
Improve this question
3
  • I think that the difference between these two patterns would be mainly opinion-based. As you have noticed already, both have their pros and cons. Interestingly, something that is a con can be a pro on the other hand, like this keeping content visible versus being distinguished from it. So I think there is no rationally correct answer to this question.
    – Dominik Oslizlo
    Mar 20, 2017 at 21:33
  • However, should the list of menu items be very long, I would suggest using the slideout pattern, allowing it to scroll separately from the content.
    – Dominik Oslizlo
    Mar 20, 2017 at 21:35
  • 1
    @DominikOslizlo, there are very objective reasons to prefer one option over the other, this is not opinion based at all, but a question with an answer that has been thoroughly tested
    – Devin
    Mar 20, 2017 at 22:29

1 Answer 1

Reset to default
2

Use left menu (side drawer)

I will explain the reasons below each of your observations

Pros of drop-down:

Apparently easier to program This has nothing to do with usability, this is an implementation issue. You'll know what resources you have in order to build this, but from an users perspective, this is a non-issue.

Keeps main content visible while navigating This might be true in your case, where you have only a few items. But generally speaking, if you have a fair amount of items, scenario will be the same or worse: left menu provides an affordance on what to do, but a menu covering the whole canvas may confuse some users that accidentally touched the menu button

Cons of drop-down:

Inconsistent with desktop design This is exactly the point: mobile is not the same as desktop, therefore you should provide an experience built for mobile, not force a desktop clone for sake of consistency. As we're at it, consistency can be achieved by the use of color, fonts, imagery and such. But if you have a hamburger menu, users will expect that element to act as expected, regardless of consistency (which isn't true). Both options will be equally "inconsistent", and that's the idea

No possibility of a swipe-right-to-open thing (menu button is in top-left, bad for right-handed people without swiping) This is a very good reason not to use this version, just as you said.

Not as distinguished from the main content of the page Exactly. This is related to what I mentioned above when you consider this as a pro

Pros of left menu:

Similar to Android Material Design and KDE Kirigami design This is a huge pro!

Common mobile website design Ditto!

Conducive to swiping I couldn't say it better!

Cons of left menu:

Less efficient use of vertical space Quite the opposite. The idea of off canvas or sidedrawer menus is to momentarily interrupt the flow in order to provide focus on a task that the user needs to perform (for example: choose a page to go). After that task has been performed, the menu disappears, providing cues about what happened and what have you done in order to get to a new location. Vertical space isn't affected at all since the element is LITERALLY off canvas

And these are just some of the reasons, based on your own observations. There are many more (for example, crossing your thumb all the way over the screen instead of swiping to dismiss a menu!).

However...

If you have only 4 items, and you know they won't be more than that, I suggest you make them visible at all time and forget about hidden menus, they're proven to affect UX in a bad way

Improve this answer

Your Answer

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

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