Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am working on a web app that needs to display revenue data in a table, and I am not quite sure how to make it easy to read.

Are there are any style guides or manuals that can help me?

  • For instance, what are the rules about zero values? Should I put n-dash, zero, or just leave the cell empty?

  • Should I get rid of dollar sign, or just leave it for "total" column/row?

  • For numbers less than $1, can I omit zero so that 0.31 becomes .31? Would the same rule apply to totals?

http://jsfiddle.net/fTBtH/

Date    Foo     Bar     Total
Jan 23  $0.31   $0.00   $0.31
Jan 24  $0.01   $9.06   $9.07
Jan 25  $0.10   $0.00   $0.10
Jan 26  $0.00   $0.04   $0.04
Total   $0.42   $9.10   $9.52
share|improve this question
add comment

3 Answers 3

First of all you should choose a way to display the data, and always show it the same way, for consistency. Then:

  • Align monetary data to the right. This allows you to easily compare if a value is bigger than another
  • Be consistent with the decimal point. If you choose to show two decimal values, always display them.
  • If the column only displays monetary values, then you can remove the '$' and add that information to the column header(e.g. 'Bar in Dollars', 'Bar ($)', ...)
  • I don't think you should ommit the '0' when you have '0.31'

You can also seek for inspiration in apps that already though about the problem you are trying to solve. I think you will come to the conclusion that there are a few patterns, but every app does things differently. Below are screenshots of screens similar to yours

share|improve this answer
add comment

I've written a comprehensive guide to designing effective data tables which should help you here.

It's a long article with lots of visual examples. The sections are listed below.

1) Meet the audience’s expectations

2) Order data to match the purpose of the table

3) Remove clutter

4) Create a visual hierarchy

5) Round numbers and avoid questioning

6) Perform calculations for the user

7) Provide consistent appearance

8) Align

9) Separate figure and ground

10) Reduce number of columns

11) Make comparison easy

12) Group similar data

13) Make effective use of the grid

14) Highlight the important values

15) Provide a brief verbal commentary

16) Use the white space

17) Use meaningful labels, and manage headings

This excellent example below is based on the Bank of England annual report 2010.

You can see they take out the currency (and the millions); use dashes for zero and right align (including the dash).

I would generally include a leading zero if some values are greater than 1.0, but if you're going to remove leading zeros, do it everywhere - don't mix and match.

enter image description here.

share|improve this answer
    
I would also note, optimize scanning for the direction you want users to read. If they should read horizontally, shading should alternate row-by-row and column dividers absent or only included for specific reasons, such as (sub)totals. In Roger's excellent example above, it's obvious that we're to read vertically for the same reasons. –  Matt Jan 28 at 9:19
    
Thanks a lot for your answers! If there were more columns, would it be redundant to have currency sign in each heading cell? For example, 15-year range: 2000 £m, 2011 £m, ..., 2014 £m. –  Eugene Xa Jan 30 at 1:09
    
If you have many columns like that, you can state clearly somewhere next to or under the title of the table All figures are in £m –  Roger Attrill Jan 30 at 8:57
add comment

Make it DRY. If user know that this is $ price, no need to repeat that (you can put dollar in header). For numbers less that 0 hard to say. Check readability on real life example. However, more natural is to use 0.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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