Staffs can see Sales Statistics on their dashboard which allow them to see number of sales made per day. This is a weekly Statistic.

enter image description here

For example, on Tuesday Paul have 4 sales which has been "Completed" and 1 sale in currently in "Processing". Next to Tues field are the point field. It will turn green if they have met their target, 20 point or more.

What do you suggest to improve the layout/tables for better readability and any additional use features? I also like to add an option for monthly statistic somehow.

Edit: For 'better readability', I meant what the best way to show "Completed" and "Pending" sales per day as well as points. Like you see on the screenshot.. is there alternative way doing this?

  • We can't suggest additional features; that's going to be down to the specific business requirements of this particular system. You say you want to improve the layout for 'better readability' - what exactly do you mean by this? Have you had feedback that it isn't working? How would you know that once you've changed it that it's then 'better'? A bit more detail about the specifics of what you're after would really help out here. Otherwise people will just say 'make it blue' or 'change the font' and that's not exactly a targetted suggestion.
    – JonW
    Commented Jun 19, 2014 at 10:26
  • Updated my question, explained what I meant by 'better readability'. Commented Jun 19, 2014 at 10:30
  • 1
    Don't use red on zeroes, it's distracts an eye. Making zeroes bare visible let focus attention on valuable results. Join day and point columns to show they are related. Align values iside cells vertically. Use bigger font. Commented Jun 19, 2014 at 10:47
  • @AlexeyKolchenko You should turn that into an answer, it's useful information.
    – Racheet
    Commented Jun 19, 2014 at 11:36
  • @AlexeyKolchenko Don't use red on zeroes might be good ideas. Yea turn your comment into an answer with good example layout and detailed. Commented Jun 19, 2014 at 11:48

2 Answers 2


Your table is very hard to follow, you're putting most of the visual encoding into stuff which isn't carrying data. Tufte's concept of data ink is useful here.

Because you've got so much non-data-ink it's very hard to scan your table and get a sense quickly of what the current state of play is.

If you're going to use color to encode information (green for good, red for bad), you need not to be also using it as a design element to visually separate bits of the table. You absolutely need not to be using the same color (green) in a data ink role as a "good" indicator on numbers, and also as a design-ink role to visually separate the labels row.

I'd suggest paring back the colours on the chart itself, and instead just use them to highlight good/bad data points. You can easily distinguish the labels row with a bottom-border, instead of using a colour and then confusing everything by also using that same colour as part of the data encoding.

The other thing that would massively improve your table would be to leave cells that have no data (i.e. cells for future dates) blank. It's currently hard to read because you've got all those red 0s for days that haven't happened yet. You could just leave those cells blank until filled, and everything would be much more readable.

Here's a quick picture showing how I'd improve your table:

enter image description here

There's probably something else you can do with the way you're splitting out your data: Having two numbers in the same cell is very rarely the right approach.

Unfortunately since I don't actually understand what these numbers represent, I can't guide you a better way to present them.

  • Good answer, thank you. The numbers represent number of order sales by staff. I am thinking adding numbers of Order Items from a sale. A sale can have 1 or more items. So on Monday should Look like this: 3[10]/4[15] - so this represent NumberOfCompletedSales[NumberOfOrderItems] / NumberOfProcessingSales[NumberOfOrderItems] .. What do you think? Commented Jun 19, 2014 at 12:02
  • I don't understand your forth paragraph about bottom-border thing.. can you clarify? Commented Jun 19, 2014 at 12:24
  • Sorry about that: you tagged the question html, so I was using html/css terminology. In my picture, the thing separating the labels from the data is a thin grey line, in html that's called a bottom-border. It's cleaner and easier to read than making everything green.
    – Racheet
    Commented Jun 19, 2014 at 12:28
  • If you do that 3[10]/4[15] thing, it will be very hard to get a sense of what the data is telling you. I'd suggest having the table either show you you orders or units, and have a switch in the top right that changes it over. I'd ask your actual users to see if they want this level of detail, and which of the two options they'd prefer to see by default. I really wouldn't try to pack two metrics into one cell like that. It becomes nearly impossible to read easily.
    – Racheet
    Commented Jun 19, 2014 at 12:33
  • If as I suspect, they'll want to use orders as their primary metric, but still be able to drill-down into units, then you're best off using orders as your default metric, and show the units in a tool-tip when they hover over the cell.
    – Racheet
    Commented Jun 19, 2014 at 12:35

Inside Industrial software space their are Operators who's job is to manage "Alarms" for very large and small pieces of hardware (nuclear cooling to turning pumps on and off). They suffer from the similar behavior you're probably trying to achieve here, where as they are really trying to tune "signal" from "noise".

One technique is ASM which basically distils down to "abnormal situation management" and in UI terms it means really "show me the bad". The whole agenda here is to give the end users a thumbs down in a more prominent way than a thumbs up given in this case you want to tap into the "fear" instinct.

In the case you've presented I just ask the question "what's more important, good or bad?" (negative vs positive reinforcement)

Also have more fun with the actual days / timeline. Banding the days in alternate column styling would help break up the grouping but also tables/datagrids are the ELSE statement to "What does the user need to know" ...infographics or some kind of unique visual experience here also helps the user have the page connect the dots for them instead of making them connect the dots on what it means ...

  • No offence, that doesn't answer this topic. Commented Jun 19, 2014 at 11:42
  • No offence taken. Commented Jun 19, 2014 at 11:44
  • 2
    @I'll-Be-Back I disagree - as far as the question is worded this answer is addressing it. Basically - "reducing noise by only showing the priority information, not everything".
    – JonW
    Commented Jun 19, 2014 at 11:56
  • I was going to explain ..but figured..this persons looking for the "can you just redesign it for me" response by the sounds of it. Commented Jun 19, 2014 at 23:58

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.