User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I would like to know if anyone has any ideas on how best to style up an eCommerce orders grid. (Magento). The idea is that the orders that are new and requiring action get highlighted, the ones of concern get highlighted (fraud), dealt-with orders (cancelled) get 'greyed out', orders needing some delayed further action (awaiting stock) get highlighted appropriately and the completed orders get displayed in a tranquil colour.

enter image description here

Both the foreground and background colours can be coloured. Imaginably there are conventions that best be followed. If you know of an existing scheme in another ecommerce package then that might serve as guidelines.

The states are as follows:

  • Pending
  • Pending Payment
  • Processing
  • On Hold
  • Complete
  • Closed
  • Cancelled
  • Suspected Fraud
  • Payment Review
  • Pending PayPal
  • Deposit Taken
  • Awaiting Stock
share|improve this question

Well, obviously you can't solve this with color coding, or you'd get a psychedelic unusable grid.

You can solve this with icons though. All the states you mention are relatively easy to depict with an icon, which should be placed in a dedicated column (leftmost). It should sorting and filtering, and a tooltip should appear on the icon.

share|improve this answer
We have been colour coding spreadsheets, wall-planners and more for a long time without anyone complaining about the colours - they do not have to be psychedelic, pastel or any other scheme you might dismiss with a trite 'obviously'. No I do not think a new scheme of what-is-that icons is really going to help explaining to staff what to do or helping them process orders. – ʍǝɥʇɐɯ Jul 5 '11 at 9:48
You misunderstood the "obviously" part. I'm not against color coding, and it has nothing to do with the color scheme. You just have too many states to be able to provide a distinct color for each - without, as I said, getting a psychedelic unusable grid which will just hurt the users' eyes. In my experience, with yet even more states than you have, icons have been proven to work well. – Vitaly Mijiritsky Jul 5 '11 at 12:17
I am with ʍǝɥʇɐɯ on this. I actually colour code my rows in Magento as this question references, and the people who handle orders find it exceptionally useful. I am not going to answer the question as I don't have any references to what colours to use beyond my personal preference. However once when the Javascript I was using to do this stopped working after a site upgrade there was uproar in the office to get it fixed as people couldn't easily see what was going on! However think of having a master colour for each major state and then shades of that colour for different parts of it – bateman_ap Feb 19 '14 at 11:52

Your Answer


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.