I have come across this challenge where a developer is asking me as to how to show a large account balance in a small pill.

In case of webapps, we show ellipsis and tool tips in order to show the full text. What can be the solution in case of mobile apps?

Here I have attached the screenshot, in which you can see that I'm showing user's current account balance. Now this balance could be very large when we have different currencies.

enter image description here

  • This falls into the category of questions that actually has a physical equivalent... the point of putting it all in a pill is so that it is small enough to fit in something comfortably. Using a pill as a container for a large amount of content... I would say that perhaps a different design strategy is required? In your instance the pill is used for stylistic consistency but not content/data consistency because you are using it for both summary and detailed information at the same time.
    – Michael Lai
    Commented Jul 6, 2018 at 1:19

3 Answers 3


Your example doesn't look like a problem. But we can imagine the case where the balance is 450,173,827.45.

  • Consider removing "USD" since the user-specified currency is used throughout the app.
  • I don't know what A/C means, but you can determine whether those characters are necessary in the pill.
  • Round the number off and use abbreviations: e.g., 420M or 53k. (Or 83.1k if you need an additional degree of accuracy.)

That pill can provide just an estimate of the actual amount since, I assume, the user can navigate to an account details page with full and complete information.

  • 1
    Yes rounding off can work well in this case.
    – Sheraz
    Commented Jul 5, 2018 at 13:00
  • 7
    The only thing you have to bear in mind is that, when you're dealing with account values, you can only round downwards - this is a legal requirement in the UK and possibly in most other markets - It means that the users never sees a number showing more than they actually have. Commented Jul 5, 2018 at 14:40

Depending on the app, I can imagine rounding off the balance would not be accurate enough for some users.

Consider replacing the balance pill with a quick balance button. A user taps and holds to view full balance, then let's go and it disappears. This will allow you to display the full balance by using more width on the screen. These work well on banking apps

  • 1
    A button itself on the clickable navigation menu item can confuse users
    – Sheraz
    Commented Jul 5, 2018 at 18:55

So I like the idea of rounding if that's acceptable. If not I would ask why you're forcing the data into a button that's not a well-suited format. If the numbers get quite long and it's important to show them, just show them as a sub-field below account. You could design it so that bit looks different and stands out, but you don't have to force two fields next to each other that don't fit. Maybe you could even display the pill on the right if the number is low enough, but when the character count reaches a certain level design it so it wraps.

  • 1
    Decent suggestions. I could make it stand out by showing it beneath the account heading but that would somehow kill the consistency flow of drawer menu. Nevertheless, rounding off will work fine for this situation right now.
    – Sheraz
    Commented Jul 5, 2018 at 18:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.