I want to display this information in iPhone App "Number of days outstanding since last payment". The value can practically range from 0 to any value but I want to categorise it into three major sections:

  1. More than 30 Days

  2. More than 60 Days

  3. More than 90 Days

The app works mainly in the Portrait mode. I need to show a list and each list item would be having two fields only:

  1. Title
  2. No of days outstanding

Please suggest what would be the best way to achieve this considering the available viewport and effective visualisation.

Since last paid

I tried to show it by this way but it didn't feel too intuitive.

  • 1
    Could you upload the wireframed ideas you have already considered? I recommend this because the Help > Tour (in the banner, above, right) lists several types of questions not to ask, including: Questions with too many possible answers; Questions requesting examples of 'X'; Questions where all answers are equally valid. If you show us your work, other members can reply with specifics.
    – JeromeR
    Sep 11, 2015 at 6:30
  • what purpose do those multicolored ( i am aware of significance of the colors used ) progress bars serve? why not get rid of them and just use text under and color the text accordingly? it gives you more room to work with, and you can make text bigger to emphasize the pending payments.
    – Stanley VM
    Sep 11, 2015 at 13:08

1 Answer 1


At a glance, I first see that I overpaid for what ever I had (20,000/15,000) since we read (in english) left to right. Swap those number's places. I completely ignored that label because I already thought I'd understood it. Stick to normal conventions here.

Secondly, why are you using a progress bar? There is no 100%, and a progress bar conveys a 100% of something. Seeing that you said there is no range, that it's 0 to virtually any number, a progress bar isn't a good idea (looking at it I see that I have a certain amount of days left, when I really don't).

Final suggestions:

Stick to the format 15,000/20,000 instead of 20,000/15,000, and change the progress bar to something else that conveys the numbers more properly (heck, just a straight up number).

Wireframe for what I suggest:


download bmml source – Wireframes created with Balsamiq Mockups

This is a general idea, but you have to figure out hierarchy here of information, and if the number is too prominent, then lower the noise. But the idea here is to convey what the number really is.

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.