Should we use form button color to indicate task outcome?

Question

I work in large company and We are building our UX guidelines for new applications. We have lots of legacy LOB applications with workflows that assign tasks to humans.

Some of them are simple tasks that have 3 outcomes - e.g. "Accept", "Refuse", "Correct", some of them have more choices, e.g. "accept and create request for price", "accept and ask for additional comments" and so on...

In legacy systems, back in 90's somebody proposed an idea, that task form should have buttons (with outcomes) rather than mix of dropdown or radio list (for choosing an outcome) and one confirm/submit button (plus one cancel button for closing the task without choosing an answer).

Then somebody else asked if the buttons could be colored in green/yellow/red fashion - for indicating task outcomes that "move forward", "step back" or "cancel" the whole process.

And now, when we create new business applications, with user task forms designed with our corporate UX guidelines book, we have lots of complains about buttons. Now we follow "Primary/secondary action" pattern, with orange and white colour scheme. Users are complaining that "good old 3-color scheme" is best and we should stick to it.

Any ideas how to solve this UX-puzzle?

Answer 1

instead of using hover (because it's not feasible for touch), I suggest you should implement something like a wizard. Going step by step, the user knows exactly what (s)he is entering.

The benefit: You can create hotspots, wherein you can highlight buttons with colour schemes for a few seconds before making them neutral. This way the user will only see the "submit-button hotspot" when he reaches the end of the form.

Answer 2

Do you have possibility to add icons to the buttons? Or button border or hover to go along with user wishes and do not harm the guidelines (like gmail has for separating regular mail from commerce and social media junk). Or lay the buttons somehow to indicate the back - forward way of the process.

Play the game of thrones and make it an exception to guidelines as this was the user feedback. Or play it the way, that it does not break things and users get used to it as on Facebook? (Not sure they rely on you as much as I do on Outlook in a corporation or other people on Facebook.) What's your feeling about what's the right solution from the guidelines/user wishes?

Answer 3

So it seems that at its base you are having an issue on whether or not to color code your buttons. The "good old 3-color scheme" is definitely a guideline that I would try to stick to to the best of your ability. However, there are ways that you can still adhere to the color scheme without throwing the site too much and still have multiple colored buttons. I definitely agree that the buttons are a better idea than the drop down buttons and what I would do to color code the buttons is leave them all the same color, but then on hover have them display the color that may work with the choice they are selecting. For example: if your color scheme is orange and white make the buttons orange and then when they are hovered over have the CONFIRM Button turn green, the CANCEL Button turn yellow and the DECLINE Button turn red. This makes it so the site always works and looks good, but adds the extra effect of color coding the buttons. Just an idea, hope it helps.

Answer 4

I might not fully understand your reference to primary/secondary actions but it seems like the users were comfortable with the original color scheme so stick with it.

In case you don't already do this I would suggest having a common layout for your action buttons. For instance... With Accept, Refuse, and Correct, a horizontal layout of Refuse, Correct, Accept would imply the action of moving backward in the process, correcting the current step, or moving forward. This layout would need to be consistent throughout your application. Doing this, in addition with colors, might simplify the user interaction. I guess I'm agreeing with @leo. A wizard pattern sounds like it would fit your situation really well.