15

I'm aware that the usage of the sandwich icon and side bar for mobile apps is wide-spread and well known by the users (so it seems, anyway), like this one from the Facebook app:

enter image description here

I'm developing an interface for an web online digital menu for restaurants and I believe this concept might come in handy for navigation purposes.

The only thing I'm afraid of is that this may not be clear enough for web users who aren't using a mobile / tablet.

My question is: is this a good choice or is this probably going to pass unnoticed? Maybe, given the lack of other navigation menus, the users will be curious/persistent enough to find it?

8
  • 1
    ux.stackexchange.com/questions/45019/…
    – cimmanon
    Commented Oct 30, 2013 at 13:28
  • 1
    Here are a few other questions we've had on this topic if the one Cimmanon linked to isn't enough.
    – JonW
    Commented Oct 30, 2013 at 13:30
  • 2
    I understand the duplicate suggestions, but I'm asking about this concept OUTSIDE a mobile environment. I believe this is still relevant to be asked.
    – arvere
    Commented Oct 30, 2013 at 13:33
  • 2
    Ah, it wasn't clear from your question as it was written that you're explicitly referring to desktop devices, not mobile. I'll edit it a bit for you to make that distinction and reopen it.
    – JonW
    Commented Oct 30, 2013 at 13:41
  • 3
    There are examples of widely used applications which use it on the desktop. Exhibit A: Google Chrome. (Also Evernote's web frontend). So intuitively speaking, I think that this is a trend which will catch on from mobile to desktop. So I would tend to say go for it, just don't have enough certainty to give it as an actual answer.
    – Rumi P.
    Commented Oct 30, 2013 at 13:47

3 Answers 3

7

No. We assume that people will see it as a menu button, however in the past it has been used as an icon for draggable elements and it is still today.

PAST

Users who have just upgraded to present operating systems might have another vision on the sandwich icon because of their old operating system.

Draggable icon on a Windows XP scroll bar.

TODAY

Some apps and even operating systems like iOS7 use the sandwich icon to show something is draggable.

Draggable icon in the Wunderlist app.

Draggable icon in iOS7.

I believe that you shouldn't hide the menu on a desktop site. Don't let your users think about where they could find the menu. You could however add a label to the sandwich icon to keep things simple and usable.

3
  • I honestly don't even aware that the icon is there in the scrollbar... maybe because of different context?
    – deathlock
    Commented Nov 5, 2013 at 13:09
  • I think that Apple(IOS) are the only ones who use it as an icon to showcase an item which can be reordered.
    – HarveyZA
    Commented Nov 6, 2013 at 7:52
  • EPIC ANSWER!!!!!!!!!!
    – clickbait
    Commented Feb 15, 2019 at 2:32
5

If a user is a regular mobile web user, he/she will for sure understand the sandwich icon but as the sandwich icon is used because it occupies less space than writing "Menu". Thus on web, user might not pay that much attention to sandwich icon due to its small size and users who not avid in using mobile web will may not understand it at all. Thus, it's better to use a 'Menu' button if you can spare that much space as it is more universal.

1
  • In the context of a desktop site, this means to me "List of items that weren’t worth screen space for a real graphical control element". Such a generic looking icon is literally the last place I'd click. Then again, I'm not a big mobile user.
    – Adria
    Commented Nov 30, 2014 at 17:11
0

I think that everyone now understand this icon and the action that follows after you click it. But of course it's a right thing to assume that there's somewhere a guy that never used mobile phones (whaaa?) and can not really connect in his head a hidden navigation menu (or whatever you try to hide) and "the sandwich".

I see two solution:

  1. Try to demonstrate user what happens when you click on the button during the first launch of your web application. Let's assume that when you click on the sandwhich navigation menu appears from the left (as seen on your example). So, just for example, let's show the hidden menu when the page is loaded for a second or two and then slide it away. At the same time you can change the state of the button (pushed/standby) so user can connect this two actions and will know how the stuff works. You can disable this demonstration after first launch or after the first click on the sandwhich this way you can be sure that user got the idea.

  2. If you really think that this might cause usability problems maybe you should reconsider the whole UI structure. Maybe there's other way to show navigation, or maybe there's no need to hide whatever you're hiding behind "the sandwich". Maybe you should ask yourself: If this "sandwhich" is here for the sake of "a sandwich"?

What do you think?

4
  • 1
    In my testing users still miss it. Patterns like these take a long time to adopt. (A significant portion of participants still fail to understand the logo can take you home.) Your option #1 is a solid solution, though, as long as the animation is smooth enough to be understood.
    – Zak
    Commented Oct 31, 2013 at 15:45
  • 1
    I had to look at the question and answers several times to figure out what 'sandwich icon' meant, and I know quite a few who don't ever use a mobile phone. Careful of your assumptions. Commented Nov 1, 2013 at 16:11
  • Hey guys! I said that it's a right thing to assume that there're people that don't know what this icon means and I've offered two good solutions ... should I be careful with this assumptions?? @thursdaygeek I don't get it. I've offered two great solutions for the problem. Maybe you should read the answer to the end prior to comment?
    – LoomyBear
    Commented Nov 1, 2013 at 20:40
  • 1
    @LoomyBear Yes, you did have an answer that said to deal with users who might not know what it meant, but you started by saying that you were pretty sure everyone knew what it meant, and expressed surprise that there might still be people who don't use cell phones. So it was your introductory remarks that I took issue with (although not enough to downvote the answer). Commented Nov 4, 2013 at 17:51

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.