Is anyone aware of an interesting way to visually show aging accounts receivables - Amounts of money owed which are broken up into time periods, such as (a) less than 30 days past due, (b) 30-60 days, (c) 60-90 days, (c) 90 days +, etc OR something similar?

I thought a single bar comprised of different colors representing the various periods with relative length of color determined by amount due. Pass over a color to learn total amount due and click on the color to open a window with a table of information including business name, invoice date, amount due, etc. Is this doable?

Responses/Conversation would be appreciated.

Additional Info: In this application, the user - a business owed money by numerous other business - would use the visual display to quickly see the status of amounts owed to him. Used over a period of time, the user would have a better understanding of cash flow trends - if the business is being paid timely.

The business owner would use the visual display to drill down on who owes what and for what period so the business owner can prioritize collection efforts.

The idea of a visual display is so the big picture of money owed can fit in the width of a smart phone.

  • I am not familiar with this term being a European, so I may be asking very obvious things: 1. Who is the target audience? The meaning of the receivables can be very different for user groups: for payers, for payees and for accountants and this will influence the color semantics; maybe you don't want to use colors at all, because users will be too emotional and coloring will irritate them. 2. Does the various time past due differ in meaning: does it get worse with the big delay in payment, or it's always equally bad if one is late with it? – Zoe K Oct 22 '15 at 20:56
  • I genuinely like the idea of using color because it's a quick way for the user to take a visual inventory of all of their all of their various account status quickly. That said, since the way in which a company pays their bills can vary greatly, giving them the control to decide when a color is used and what the color is would allow for the best possible experience. – Julia Rezsnyak Oct 22 '15 at 21:11
  • 1
    If the display of all accounts are in a column/row format, perhaps a "status" column could be included and you could use different color calendar icons to represent the various status. – Julia Rezsnyak Oct 22 '15 at 21:14
  • I think we need more information about the user to even attempt a solution. What are the user's goals when it comes to seeing this information? Are there any next actions they should do upon reviewing this list? – nightning Oct 23 '15 at 0:16
  • @JuliaRezsnyak - Colour alone is not the answer; especially as the most obvious scheme for this situation uses green and red - the most commonly confused colours for deuteranopes. I would recommend looking into a four-state icon set as well, with added textual content that can be read aloud for users with extremely low vision. – Andrew Martin Oct 23 '15 at 8:36

I prefer to stay away from colors if at all possible. A good illustration of the problems inherent in color coding red(bad)/green(good) is that the european semiotic meaning of red and green are inverted in asian societies. This can cause problems when systems are used by people from differing societal backgrounds.

The use of icons also has an inherent problem in that you are now creating an extended meaning to a standard glyph. If you use a calendar glyph then you need to extend the meaning by the use of color (again back to color) if you use disparate glyphs to indicate aging state then you still haven't eased the processing burden on the user as they still must inspect each row to determine if further interest is warranted. The whole idea of semiotically signalling the user is to highlight items deemed profitable for the user to pay attention too. If the user has an overhead attentional process for each item then the benefit to the user is lessened.

I believe a combination of opacity and stroke weight are a good indicator for this kind of signalling. As the aging of a record increases then the opacity and stroke weight also increase in a logarithmic ratio to the aging time. This allows the user to quickly (emphasis on quickly) scan through a list and immediately pick out items of interest based on visual weight (which is constant across culture as it involves hardware responses of the optic system). Essentially you are adding an additional dimension to the information, depth. In the real world items lose contrast and become visually thinner as they receed into the distance. Humans pay attention to things closer to them than they do further away.






Consider providing the ability to easily sort the list by either "Invoiced Amount" or "Days Past Due", in addition to providing both data points on each line item. This empowers users to push the items they are most interested in to the top, instead of scanning the entire list searching certain icons, colors, or number ranges.

As a starting point, given the constraints you describe, consider this very rough illustration:

Amount ^        Past Due (days)
 $5 ==          61
$10 ==          61
$15 =====       15
$15 =====       90
$20 ========    10
$20 ========    14
  • Tapping on either header sorts by that field/changes the direction of the sort
  • The exact dollar amounts could be provided or not, depending on how clean you want your interface to be.
  • You are now free to use colors to provide additional cues (e.g., providing a different color for your 4 different "past due" ranges), which will be available to the majority of users that can see them while degrading gracefully for those that can't.

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.