0

I am redesigning a shopping experience for food delivery, and I have come across this situation where I want to display the price of an item inside the menu, but Price may vary depending on specific parameters. Let's take for an example a Pizza item, that can vary greatly because of the size, type of crust etc.

Up until now, the previous design showed this with a '+' sign next to the price. However, I'm afraid this makes the design too noisy by putting 2 symbols so close (the Currency Sign and the '+' sign. Also, I'm not sure it is really clear to the user.

When clicking on the price/button (as seen on the mockup below), a popup opens displaying all the available options. The user makes his choices and adds the item to his cart.

Note: By national convention, the currency is displayed at the right of the price, not at the left.

  • One option is to completely ditch the symbol, simply displaying the lowest possible price. This has the obvious problem that the user could see a low price and then come up with something completely different inside the popup.
  • Another option would be to display min and max price. This is really the most informative but it overloads the design and makes it even noisier.
  • A more clever option (but still taking too much space) would be to add a "From: " label somewhere near the starting price, to avoid confusion afterwards.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

What would be your opinion on this? Thank you in advance!

Improve this question
3
  • Either of the last two are fairly clear. But the "plus" sign model does not clearly show that the prices could be higher.
    – John Deters
    Sep 30, 2014 at 16:14
  • Thank you for your comment. I'm leaning towards the 'From' approach, cause of the clutterless design.
    – protogeridis
    Oct 1, 2014 at 8:46
  • I also personally prefer the 'From', as I also think it is clearest and cleanest, but you could certainly make either one work for you.
    – John Deters
    Oct 1, 2014 at 16:44

1 Answer 1

Reset to default
1

If you really want to be clear about the price and at the same time keep the design clean, you may try the following design. You can put all the item type as a button on the main menu, and then showing the size or different parameters with price tags in the second step. Hope it helps.

enter image description here

Improve this answer
3
  • Thank you very much for your answer. This is indeed a nice approach that could remove confusion. Unfortunately the website is an ordering platform for multiple restaurants, so the variable items differ a lot from restaurant to restaurant. One could have 3 variations while another (let's say a pizza) could have 20-50 variations, that can't be shown on the menu all at once. This could be used however for standarized items, e.g. Soda's and Drinks!
    – protogeridis
    Oct 1, 2014 at 8:44
  • I am wondering how is it working now since you said there can be up to 50 variations. People need to see all these 50 options before they buy, right? I am curious that how do all these items get displayed now?
    – Shin
    Oct 1, 2014 at 15:33
  • All base items are displayed in the menu as shown above. When the user clicks on an item, a popup loads with all the details (photo, description) and options. For an average Pizza, there would be several rows of fieldsets (size, crust, ingredients). The variations are not static but rather dynamic, so we don't get to display all 50 options (There is no option "Pizza Marguerita Small Thin Crust", but the user could create such an item through separate options). After making the selections, the user can Add the item to Cart through a Button at the bottom of the Popup.
    – protogeridis
    Oct 1, 2014 at 17:44

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.