up vote 7 down vote favorite
1

I'm currently implementing some design changes to a web application. Currently, the application uses default browser buttons for everything, but I've now been supplied with a number of custom button styles to use. The main colour scheme of the web app is red, grey and white.

I've been reading many of the discussions on colour scheme here, and I've come to some initial conclusions about the design:

  • Red buttons for 'negative' actions, such as Delete, Remove and Cancel
  • Green buttons for 'positive' actions, such as Confirm, Select

I'm mainly stuck on what to use for things such as 'Add New' and 'Edit', plus some other supplementary buttons such as 'Export' and 'Search'.

I'm fairly new to UX things, I'm mainly a programmer, but I've been reading up and I really want to get this right and make an awesome interface!

Should I limit myself to a small number of colours, for example, red, green, then blue for everything else, or should I expand wider and consider using more?

share|improve this question
up vote 5 down vote accepted

Always keep it as simple as possible - but no less simple than necessary.

The more colours you use, the less the meaning of each colour will be clear, defeating the object of using specific colours for important things.

You've already chosen red and green to mean something specific in the user's mind - positive actions and negative actions.

The only thing that it makes sense to indicate in between positive and negative is neutral. - so make neutral actions appear neutral.

If you add a fourth colour - you confuse the whole concept of positive, negative, and neutral. Consider what would a fourth colour mean - A bit positive, a bit negative...?

See also Occam's razor which also mentions Einsteins alleged constraint quote: "Everything should be kept as simple as possible, but no simpler", from which stems my statement above.

share|improve this answer
  • 1
    Thanks. I think I'll go with the simple approach, namely red, green, and then either grey or blue for everything else (I haven't decided which yet!) – surfitscrollit Nov 24 '11 at 9:43
up vote 2 down vote

Keep it simple. You can emphasize primary actions not only by a colour. What do you think about darker gradiation, bold fonts or positive/negative effects? I have added a screen with several possibilties.

General I would emphasize only the positive action. Exception: if the two actions are equal (e.g. in apps buttons "Buy" and "Sell" are emphasize with two different colours)

A fast example of posibilities

share|improve this answer
  • 1
    I like the second row in your example. It makes sense to me that 'Save' is emphasised, as on a form page for example, most people will choose to save and only a few will choose cancel. I feel that this layout gives save the greater emphasis, in comparison to the top row where they're almost equal in stature, if that makes sense? – surfitscrollit Nov 24 '11 at 10:29
  • 1
    Yes, the second row emphasize the primary action. You can have a case with actions "Save", "Discard" and "Cancel". Then i would emphasize "Save" and "Discard" with two different colors. Best, you test all conditions for in your app. – sysscore Nov 24 '11 at 10:32
  • 1
    Thanks for your help :) I'd upvote you both but I lack the rep to do so! – surfitscrollit Nov 24 '11 at 11:29
up vote 1 down vote

Use a discreet color.

If you want to use a another color, then use white or blue. Sometimes a bright, friendly orange works good, too. But don't use a color which annoys the user.

share|improve this answer

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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