Where to add quantity and price information in a small button

Question

I have lot of "product" buttons in my Android App, each of that button based on configuration can have 4 variation:

Pure button with only it's title, button with title and price, button with quantity and button with quantity and price.

I Managed to add a hidden layout which will push title if one of price or quantity exists and it's background color will be a lighter version of parent button itself.

The issue is that if i have only the quantity it looks weird and i can't get that it's quantity..

Here is how that buttons looks like with price and quantity:

Without price it will be like this (plus three items out of stock with ND):

As the space is very restricted, how can i make the quantity value looks like more like it's quantity? how can i improve those buttons?

PS: don't judge that buttons colors those are choosen from the client and even it's text color..

Answer 1

It's not easy to get too creative with an element that is so restrictive in terms of size and space.

There are important elements to consider not included in the question:

• What's the maximum quantity?
• What's the maximum price?
• Does the application supports different currencies?
• What's the versatility of the possible changes to make?

Despite this, there are some tricks that can help.

---

The Euro symbol can be before or after a price, in most countries that use it, the norm is to place it after. Regardless of the rules, in buttons like the one shown in the example, with so many changing and imprecise elements in terms of the space they occupy in length, it's an advantage to find fixed elements if possible.

• The euro before the figure will vary its position in relation to the price length:

• The euro placed after the figure will occupy always a fixed position:

If the euro symbol is placed at the end, it can be a fixed element on the button:

---

I think it's important to know what's the final space each numerical element will occupy. I would do the exercise of placing the highest quantity in its field together with the highest price to be certain of the available space using the widest number: "0".

As an example, the maximum quantity is three figures and the maximum price is four plus cents. This allows to adjust the font size to the maximum without risk of going beyond the designated field.

---

In printed edition, price figures rarely have the same font size, mainly due to space, but also due to the importance of display. You can check the thousands of groceries and supermarkets online catalogs for reference. Usually the colon, cents and currency go to a maximum of 75% the size of the unit:

---

Finally, I would look for a way to differentiate the quantity field

This helps not only as a highlight but also to give a bit of visual rhythm to the set of buttons, which, apart from the colors, as a group is perceived as something very monotonous.