0

I would like to know whats the best way to display a long restaurant menu on a mobile? The menu consists for 7 categories. On tablet/desktop I have used a 2 column layout, one for the list itself and another for the nav links to jump to different sections. It should be noted come categories could consist of more than 50+ items.

enter image description here

How would one propose I do this for mobile devices?

Some of the ideas I had would be...

  1. Have all categories collapsed, and have the user click to toggle viewing that category and simply get rid of the side index but I think because of the amount of scrolling they would have to do trying to navigate to different categories would be difficult.

  2. Have a fixed nav above the actual list with the food categories, that will also highlight which section they are on so they know where they are mid-way though a list. The only problem I see with this one is trying to fit all nav items in one line (spanning multiple lines will not look clean IMO).

Improve this question

2 Answers 2

Reset to default
1

I would recommend the collapsed categories, with sub category headings, for example all the Kebab's grouped under the heading "Kebabs".

You could also have buttons at the top and bottom to automatically scroll one page when clicked.

Improve this answer
1
  • Because the lists could be quite long, I would imagine expanding and collapsing through lists could be quite cumbersome. Also how could I show the user which category they are in when they are say half way through a 50 item list? (without them having to scroll to the header)
    – Imran
    Jan 19, 2015 at 22:05
0

I would recommend sidewise slide for different categories.

If the user wants to see the next category, all he/she has to do is slide left.

For the menu item, general slide up and down movement should be fine.

I see that the menu items have description which may not be good for scrolling. In that case, I would recommend having just the dish's name displayed along with the price, and on tap should reveal the description.

Improve this answer
4
  • This is a very good idea, I believe the same technique is used on Google News. The only concern I have for this is on some mobiles (iOS), swiping left and right on the screen may fire browser Back and Forward actions instead of the intended category swipe.
    – Imran
    Jan 19, 2015 at 22:04
  • A very valid concern. In that case I would recommend having navigation buttons appearing on either side of the screen. These buttons would say the same thing as expected from the swipe movement. Though not my favorite solution, but can be good in terms of usability
    – warcops
    Jan 20, 2015 at 10:05
  • Do you have an example on how this should look?
    – Imran
    Jan 20, 2015 at 20:53
  • something like codepen.io/warcops/pen/bNWjga
    – warcops
    Jan 21, 2015 at 7:26

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.