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.
download bmml source – Wireframes created with Balsamiq Mockups
What would be your opinion on this? Thank you in advance!