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 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.

share|improve this question
Hi Matt, welcome to! 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 '13 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 '13 at 23:12
up vote 4 down vote accepted

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

share|improve this answer
You can use a different color for your completed processes in example 2. – rk. Apr 13 '13 at 0:31
Yes, different color or some marker is definitely needed. Thank you. – Renat Gilmanov Apr 13 '13 at 1:05
As for now, circle progress is much better than progress bar - more simple and more contemporary. – Serg Apr 13 '13 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 '13 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.

share|improve this answer

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.