I have a data grid of items, and each item basically has two states: in-progress or completed. What's an elegant, concise way to make a visual distinction between the two states? For the time being, I've resorted to simply adding a text column called status, and its value is either completed or started. This allows the user to sort by that column, for example, to see all completed items together.

This solution works, but I have a gut feeling that there must be a better solution out there.

  • Hi Matt, welcome to UX.se! Can you add a mockup/sketch of your current design. Also, is there any restriction that you can only use text? Or, can you use graphics too?
    – rk.
    Apr 12, 2013 at 23:21
  • I'll see if I can add a mockup with fake data. There's no restriction on text only.
    – Matt Jacob
    Apr 13, 2013 at 23:12

2 Answers 2


Options are:

  • color coding (use background color)
  • marker icon

I would say the obvious solution is to use progress bar in order to show the actual progress.

Example 1

enter image description here

Example 2

enter image description here


As rk mentioned it is really better to mark completed processes (sorry, I haven't created examples myself). You can use different color or different mark. Something like the following:

enter image description here

  • 2
    You can use a different color for your completed processes in example 2.
    – rk.
    Apr 13, 2013 at 0:31
  • Yes, different color or some marker is definitely needed. Thank you. Apr 13, 2013 at 1:05
  • As for now, circle progress is much better than progress bar - more simple and more contemporary.
    – Serg
    Apr 13, 2013 at 9:21
  • I think I'll try a different row color and see how that works. I wish I could use a progress bar, but the actual progress is somewhat indeterminate in this case. The user creates an item, goes off and does some things in real life, and then comes back and updates the item when he's finished. As far as the system is concerned, an item is either finished or not finished.
    – Matt Jacob
    Apr 13, 2013 at 23:11

It's usually a good practice to redundantly present information, so in your case having a column for "started" or "completed" in addition to a color code (e.g. make the whole row grey to indicate incomplete) makes things easier on the user. The column with "started" or "completed" is nice because it is explicit, while well designed color coding could give one a "big picture" of completion status at a glance.

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.