0

I'm new to this community (and kinda new to ux design too) and I'm having some trouble building the interface for a digital menu for restaurants which is going to be used on android tablets. The main part of this menu contains a list of all dishes the user can order, like displayed in this basic wireframe:

enter image description here

Each one of this items has its own page which contains extra information about it. I'm really having some trouble deciding a psicologically functional (yet beautiful) way to show the user that there's more to see.

If I was to make this menu to a normal mouse-controlled interface, I would just put underlines on hover. But, since touchscreens do not have hovering, I discarded this.

I also thought of some right-pointing arrow button on the right side of each item, but it definitely would pollute the overall visual of the screen (lots of repeated unnecessary information isn't a very good practice either).

I tried to figure out how common touchscreen apps deal with this, but it seems that most of them assume that the user is intelligent/curious enough to foretell that they must click the name of the item... it doesn't seem like a good solution for me, since I believe this app is going to have a very wide range of age to consider (I don't see 60 year olds understanding that).

p.s.: I don't really expect a great and unique solution, but I guess some nice ideas to work with can come up here.

2 Answers 2

2

Welcome to the community Gustavo.

One of the major shifts between web apps and touch screen apps is the following: On the web, we have have trained people to only click on objects that look like buttons or are underlined. On touch screen devices, however, there is a basic assumption that just about everything is "touchable" and might produce some sort of result or action.

So, I say, a basic list is just fine. People will probably assume your menu titles are indeed touchable. However, if you want to make this interaction more obvious, try just using some of the basic affordances already common to your platform. For example, if this is to be an iPhone app, look at how lists are handled in common apps such as Contacts or Messages. Perhaps just adding a small arrow to the right of each list item is adequate, indicating that touching the item will slide the display over to show more info.

In any case, I strongly recommend looking at the most popular apps on your targeted platform, and replicating the affordances they use. No need to reinvent this particular wheel :)

1
  • I agree with you that people might assume that everything is touchable, but I'm not 100% convinced about that. At least, I've never heard of any kind of research regarding touchscreen interation to argue about that... I would appreciate if someone could share something like that with me. About using plataform common elements: the entire app is being built in html5 and I'm creating the visual identity by myself, so I cannot rely on those elements. Maybe I'll stick with the arrow if no one come up with something... Thank you for your answer!
    – arvere
    Nov 19, 2011 at 22:00
2

Welcome to UXSE!

I am going to wear the devils advocate hat and say that I believe an menu on a tablet needs to do so much more than look like the same paper list I have in my hands. I would go all out on the design on this and make it beautiful to hold and interact with. This can be done for any tier of restaurant.

  • Use full-bleed images of the food together with text overlaying them (examples: 1, 2, 3). Because we eat with our eyes, if someone at another table orders something that looks awesome then you are more likely to want that. Give the user this experience in your app.
  • Feature video interviews with the Chef
  • Top 3 dishes
  • Top 3 tips
  • Reviews directly picked from Yelp.com
  • A Restaurant Twitter stream
  • A game of "Hot or Not" for the guest to play in which it will only show options of things they would like and exclude other options.
5
  • that's a nice input, jeroen. actually, we are currently studying a lot of fancy options and modules for the menu like the ones you listed, also our main screen look a lot like the examples you brought. my first idea was to have one image for each dish, but we ran into some technical problems (such as many restaurants not having pictures of all dishes/not willing to pay for us to take them). then, I decided to cut all pictures off in this screen, so at least I can have everything standardized.
    – arvere
    Nov 20, 2011 at 18:03
  • 1
    I would argue that you need to settle on what type of product you want to create. Getting clients to buy this is important but do you want to give out a product that in turn isn't as well designed as it could be. I would say to create the best option first with the flexibility not to have pictures. If they can invest in hi-touch beautiful iPads/touchscreens for their customers to use then surely they can invest in a couple of pictures being taken. Nov 24, 2011 at 8:37
  • I definitely agree with you. I'm all about making this the best way I can, even if some clients wouldn't take it. After all, it will impact the overall look of the design and, by consequence, my own image as a designer... It's just hard to convince the other team members about that, since they obviously want to sell more. And it's even harder to make the same design fit nicely for both situations. I'm currently looking to make an entirely new "low budget" layout for some cheaper restaurants. :D
    – arvere
    Nov 24, 2011 at 15:10
  • I see your situation and have been there myself. Compromising is the best way to do this and actually often leads to a better end product. But it is a different situation when people are of the same mind and you go crazy with something awesome :) Nov 25, 2011 at 21:29
  • 1
    A recent quote: "If we want to achieve anything of value in this world, we have to get used to the idea that not everyone is going to like us." - Simon Sinek Nov 25, 2011 at 21:31

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.