So I have a WYSIWYG editor and I have three buttons below it. A Post it button which I am currently using dark blue color. A Cancel button which is red in color and a Save as draft button. I am not sure which color to use for that!
Could you people suggest me the color to use for that button or a complete set of new colors for each of these buttons?
Here's a layout that uses color and button positioning to communicate the semantic relationships between the buttons:
A research that was done on an interface very similar to yours (with 3 button) was looking into both positions and colours.
The results showed that the highest performance was achieved when none of the buttons had a colour.
Eye tracking maps revealed that coloured buttons resulted in:
As for the former - colours draw attention, especially if the rest of the interface is black and white.
As for the latter, one assumption is semantic reasoning.
Colours may infer some semantic that the brain needs to work out.
But is using red for cancel a good thing? What about delete?
In the case or red, interfaces borrowed its hazard semantic from the real world:
But unlike in the real world, interfaces can and should have guards against slips and destructive actions.
The point is that delete - and especially cancel - may well be what the user wants, and if the action is destructive there should be a delete-guard, which means the red colour isn't that crucial anymore.
Colour theory is complex, but the general guideline, which is based on visual cognition is:
Colour backgrounds can also reduce the contrast of the text and thus its legibility.
And then, the more colours the harder it is to have them 'fit' with one another, which can reduce the aesthetics of the interface.
Around 9% of males are colour-blind, which means millions of people may not see the interface as intended.
Colours are good to draw attention, such in the case of a Call to Action for a Buy now button.
If there is an array of action elements, and one is more common than others, colours can mark elements as primary actions which will aid users locate such common action.
Like having all action/link elements coloured blue (although accessibility has it that interfaces shall not rely on colours alone for conveying anything).
You may be surprised to learn that there are many theories and empirical research results out there that when applied to your case will suggest that people shall have no problem using the interface if none of the buttons would involve colour.
If you are certain that 'Post it' is by far the most common action, you can aid the users by having it in whatever colour signifies a primary action. But whether this will lead to any noticeable improvement in performance is terribly uncertain.
Building on other answers, the combination of color, contrast, and shape can contribute to a more intuitive interface. Something like the below options:
download bmml source – Wireframes created with Balsamiq Mockups
Where the first set has the draft button a lighter tone of the primary action (happy path, non-destructive) or the second and third sets de-emphasize or separate the less-used actions by styling them not as a buttons but as a link.
I'd agree with sergey in that whichever you choose, you should inform further iterations based on feedback and user-testing. Are users discovering the draft feature, let alone using it? Are users accidentally posting things that are not ready, or vice-versa? Hope this helps.
First you need to answer the question:
For contrast you can use not only color, but font size, font style, distance, button decoration. One example is the buttons of stackexchange when you make a post, save edits, etc.
