0

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:

enter image description here

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

enter image description here

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..

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:

euro before

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

euro after

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

fixed euro


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.

lenght


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:

price


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

quantity

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.

before-after

2
  • I love the idea of setting the cents 75% the size of the unit. The currency will be only euro (i'll set it's symbol to right as suggested) and the quantity shouldn't be more than three digits, will definitly try to make quantity field look differently Nov 11 at 13:42
  • 1
    Damn it looks awesome, here is the result :) Nov 11 at 14:55

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.