2

We have a grid of lines, each of which needs all fields to be input and valid before becoming eligible to submit. There are a few states before reaching elibigility, and i'd like to indicate via the color how close we are from eligibility.

Should we go with different shades of orange and then light green and when submitted dark green, or more colors?

Are there other indicators that would be more appropriate?

Thanks

2

Don't use color to show progress. Color isn't a great way to show varying quantities, because people generally can't identify precise shades of color, and because perception of color differences varies depending on where you are in the spectrum.

  1. if I show you a particular yellow-green, you might be able to tell me that it's 60% of the way to green, but that's a rare skill.
  2. The perceived distance between two steps on the hue wheel varies dramatically depending on whether you are, e.g., near red or near teal. This graph shows the smallest percievable wavelength difference at each wavelength: Hue discrimination curve for the human eye

(from Color Perception by Michael Kalloniatis and Charles Luu)

So stick with a progress bar or a simple "Step 3 of 5" indicator to show progress. You could use color to reinforce the status, but don't rely on it as a primary mechanism.

1

Without taking any existing design consideration into play, "red" portrays 'stop, incorrect, invalid, incomplete' and "green" portrays "go, valid, complete" so I would say a gradient from red through orange ending at green works.

  • 1
    Red vs. Green presents a number of problems. They only mean "stop/go" in some cultures; and there is a sizeable red/green color-blind population. – Alex Feinman Mar 13 '14 at 12:49
1

Distract. Sudden color change while filling a form could be distracting to users, if the colored area is quite big. Color changing elements catch user attention and highly noticable even with lateral vision.

Misinterpret. Also color changing while form filling is used widely as immediate error feedback. So users might misinterpet color change. This could reduce performance, as user might double-check entered values.

Less obtrusive indicator and more friendly for color-blined users is a progress bar, which could be integrated into submit button, see an example:

enter image description here

0

Colors are cultural, and there is no universally accepted range of colors that means "Start" and "Finish". (See http://www.informationisbeautiful.net/visualizations/colours-in-cultures/ for a look at the meanings people in different cultures ascribe to different colors.) That means even if you progress a color bar from red through amber to green, it may be valid only in Western cultures.

Alexey's answer regarding a progress bar is a potential solution. You could also combine that progress with a color shift, so the smaller portion of the bar (<25%) is red, the middle portion of the bar shifts to amber around 50%, then progresses towards green as the user nears 100%. You could even increase the saturation as the user nears completion, providing higher contrast the closer they get to their goal. This may meet your goal of providing color to people who want it, while still handing the visually impaired (Red/Green color blindness impacts something like 8% of males.)

Personally, I like work tasks to have text labels, and integrate into the navigation. For example, online stores often have a list of steps across the top with arrows showing the direction of activity, with the current step highlighted somehow:

Cart -> Buyer Info -> Shipping Info -> Payment

The paradigm is almost identical to tabs, but the presentation makes people think of flow. The user clearly knows what they've already done, where they are right now in the process, and what's left for them to do. If they want to go back to a previous step, they click on it. If they skip ahead (which you might choose to prevent) they still have an indication of what remains unfinished.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.