2

rSo what are your thoughts on partially hidden menu buttons?

More and more I seem to find this:

Partially hidden

replacing this:

enter image description here

My opinion:

PROS:

  • eye-catching
  • hints that menu is hidden on the left

CONS:

  • less clickable space
  • may look broken to the user

So what do you think is the best option here? In which cases does this make sense, and in which not?

|improve this question
  • Not that I don't believe you, but I've never seen a partially hidden menu button like your example. Where have you been seeing this? – JonW♦ Feb 5 '14 at 10:09
  • 1
    @JonW YouTube for one. Check my answer below ;) – Paul van den Dool Feb 5 '14 at 10:24
  • Yes yes, "more often" is kind of a lie. ;D But it does seem to get more and more popular. – Kweamod Feb 5 '14 at 10:34
  • @JonW: YouTube isn't the only one. Have seen it elsewhere. Though I admit that I cannot think of the other occurences at the moment... – Marjan Venema Feb 5 '14 at 10:36
  • @JonW it seems you haven't installed the StackExchange app yet. – Rumi P. Feb 5 '14 at 12:31
2

I've noticed several apps using this. The most popular of them is Youtube.

enter image description here

This half hidden hamburger icon has one more advantage that has to do with a discussion about the placement of the hamburger icon.

There have been questions on this website and some other places on the internet about where to place the hamburger icon, on the left or the right.

A lot of menus on websites are on the left side for sake of visual hierarchy. On responsive sites it's therefor logical to hide the menu on the left (off-canvas). Placing the hamburger icon on the right in this situation seems stupid.
But by placing it on the left we encounter another problem. The top left corner is normally reserved for logo's.

Here is where the half hidden hamburger icon has the advantage. You can place it in the top left corner without pushing away the logo and without having to create a second level in the header increasing the available vertical space.

|improve this answer
  • 1
    Ah, good point. Having the icon poking in from the side is possibly some feedback that the menu exists off to that side and will slide into view when pressed. A bit like the old Metro UI idea of partially showing tiles for the next screen as a sort of hint that 'there's more to look at over here'. – JonW♦ Feb 5 '14 at 10:31
  • 1
    Good point indeed. Thats exactly the problem I encountered... But I think you still have to keep a decent distance between button and logo to prevent missclicks. – Kweamod Feb 5 '14 at 10:33
  • @Kweamod: yes that is exactly what I was wondering about: The target may be virtual to the left, but would the logo then have to be "inert" (no action attached) or moved further along. – Marjan Venema Feb 5 '14 at 10:35
  • That's were @LMöller's answer comes in play. The user can click half on half on the screen / on the bevel / on the edge of the screen. So a smaller touch area is needed. But how error sensitive it really is I wouldn't know. I think it will take a lot of fine tuning. – Paul van den Dool Feb 5 '14 at 10:57
1

The "less clickable space" doesn't matter here, since it's on the edge of the screen and the user has "virtual" space to click.

From "Designing mobile interfaces" (O'reilly, 2008):

Buttons at the edges of screens with flat bezels may take advantage of this to use smaller target sizes. The user may place her finger so that part of the touch is on the bezel (off the sensing area of the screen). This will effectively reduce the size of her finger, and allow smaller input areas.

Google maps (for android) does it, so that the space is saved for the important content: the map.

Compare also to Nielsen's "Mobile Usabilty":

consider ways of temporarily hiding parts of the chrome and reveal it only when needed

If google could they would've hidden the button completely. But since that doesnt work, because you need an easy and discoverable way to show the menu/controls the probably decided on this "compromise"

I also don't think that it looks broken - on the contrary, it invites you to click it.

|improve this answer
  • It invites you to click it? Well, I guess we differ then. The only reason I actually recognized it as possibly being a menu icon was the fact that I knew of the full hamburger icon. – Marjan Venema Feb 5 '14 at 10:34
0

This is a new pattern on Android. This icon is used to indicate that there is a side swipe menu available in the application. Currently this menu is widely used on Android by Google (for example in the Play Store, Gmail, and Notes).

The icon is only used on the top level off the app. To reach the menu users can use the icon and application icon or swipe from the left side of the screen. This second way to open the menu can be used anywhere in the app.

The problem with this interaction is that is not easily discoverable. The icon is used more and more on apps but the fact the menu appears also when clicking the app icon or swiping from the left are not indicated.

There are two ways to help users discover this menu:

  1. It should be opened at each start of the application until the user opens it by himself.
  2. When the user touches the left side of the screen the menu should peek out.

Whether these measures are enough for people to get used to this new navigation pattern is still up in the air. But when you know the interaction, it is a nice way to reach the apps menu.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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