Icons: What are the most intuitive indicator icons for a web application to mean "not yet started," "in progress," and "completed"?

May 6, 2004 11:24 PM

Red means stop....or does it? I'm developing an icon set for a web application, and I'm looking for indicators to mean "not yet started," "in progress," and "completed." My inclination is to go with red, yellow, green, but my experience with traffic lights seems to indicate that green (you haven't started, so go), yellow, and red (you're done, so stop) might be more logical. Anyone have any suggestions on which would be more intuitive?
posted by oissubke to computers & internet (15 comments total)

I'm a big fan of using red for errors, green for success or completion. To me, green-yellow-red would mean "everything is fine" - "you're screwing it up" - "now you've officially screwed it up"

How about light gray, dark gray, then green?
posted by 4easypayments at 11:48 PM on May 6, 2004

Based on this...
"not yet started," "in progress," and "completed."

I can see yellow, green, and red (respectively) working for me.
posted by Witty at 11:58 PM on May 6, 2004

Don't use those colors as red/green is the most common form of color blindness and not helpful for those people.
posted by Ethereal Bligh at 12:02 AM on May 7, 2004

Not yet started -- black
In progress -- grey
Done -- white.

Or

Not yet started -- no bar
In progress -- some bar
Done -- all bar.

Or

Not yet started -- nothing
In progress -- greyed out checkmark
Done -- checkmark
posted by ROU_Xenophobe at 12:08 AM on May 7, 2004

Also, you need to distinguish between status indicators and controls. A green button as a control would intuitively indicate "press this to start", but as a status indicator, it more likely would indicate "in progress". A red indicator as a control would indicate "press this to stop", but as a status indicator, it would indicate "has stopped". "In progress" only has meaning as a status indicator, not a control; and in that context a flashing green would be familiar, yellow more obscure. If something is "in progress", of course, the only relevant control would be "press this to stop", which would naturally be a red color.

So basically you need to decide if you're making your controls and your status indicators distinct, or combining them. Combining them is what poses a bit of a challenge and perhaps you should avoid this (assuming you're making controls, as well as status indicators).

But, again, as tempting as it is to use these familar colors, they have the great vice of being the most common color-blindness colors. A compromise would be to use these familiar colors in the familiar ways, and use text as well: "Ready", "Working", "Complete", for example.

I'm definitely not an artist or graphic designer, but these three quick little icons I made are examples where the text (though hard to read) would make it unambiguous for even the colorblind; but would signal at a glance the current status.

On Preview: ROU has some good suggestions.
posted by Ethereal Bligh at 12:51 AM on May 7, 2004

I'd go with ROU's suggestions of picking a single hue and using different saturation to indicate progress.

The problem, as I see it, with the red/yellow/green analogy is that it's not a status indicator as much as it is an action indicator. When I see a red light, I interpret it as "I'm being told to stop", not "The traffic is currently at at stop."
posted by cheaily at 1:37 AM on May 7, 2004

For what it's worth, here in Korea (and I assume probably elsewhere in NEAsia), when stock market/exchange rate arrows are shown on the news to indicate movement, 'up' (ie good) is always red, and 'down' (ie bad) is always green or blue.

Red being a positive colour, basically. Oddly, stop signs and traffic lights are identical to North American colour schemes, though.

Tangential, but possibly significant, depending on your target audience.
posted by stavrosthewonderchicken at 2:28 AM on May 7, 2004

green = good.
red = bad.

that's my interpretation, as a luser.

if i see red, something's been done wrong.
if i see green, it's good.

as a progress indicator, bars work much better than traffic lights, i believe, and I think that's why you see so many interfaces doing progress reporting with bars -- not red and green lights.
posted by fishfucker at 2:38 AM on May 7, 2004

Another vote for ROU's approach. If I see red (or perhaps orange--any hot color), it's something I need to pay attention to--something must have gone wrong. If I see gray, or any unsaturated color, I can afford to skim past it.

If you need some kind of non-linguistic symbols to go with the colors, something like [bullet] [ellipsis] [checkmark] [exclamation point] perhaps.
posted by adamrice at 8:55 AM on May 7, 2004

In addition to the color-blindness thing, remember that in some countries, yellow comes between red and green, not between green and red. That'll throw off your symbolism a little bit.
posted by kindall at 8:56 AM on May 7, 2004

Green is good or success, red is bad or error. Otherwise it's "go" and "stop." Seems like you want a progress bar or an hourglass. Try not to mix metaphors more than necessary.
posted by callmejay at 10:05 AM on May 7, 2004

I vote for a X, a grayed out check, and a check. If necessary, can color code those too, red yellow and green.
posted by stoneegg21 at 11:29 AM on May 7, 2004

Instead of app centered - user centered:

Not yet started = stopped = red - you are making no progress.

Going = not yet complete = embryonic = amber (amber lights flash before going green in UK to indicate you should prepare yourself to go).

Finished = everything is ok = success = you're now good to go = green.
posted by Blue Stone at 11:48 AM on May 7, 2004

I'd go with ROU and callmejay's suggestion. Lose the red green yellow mentality

Re: EB's icons - "Ready" "Working" "Done"
these all seem to mean the same thing for me, ie the website is .....
posted by headless at 12:04 PM on May 7, 2004

caterpillar, pupa, butterfly?
dirt, seedling, flower?
match, flame, fire?
off bulb, dim bulb, bright bulb?
bread, toast, sandwich?
some sort of thermometer icon?
some sort of glass getting progressively more full?

How whimsical do you want this to be? I think the traffic light thing has to go, but otherwise it depends on how much room you have to move with the icons. There are a lot of ways of indicating progress.
posted by jessamyn at 12:59 PM on May 7, 2004