Color coding vs default buttons colors

Question

Context: web project around social research with gamification.

We've got 7 major project modules (polls, analytics, games etc) each with corresponding color. That color used in backgrounds, widgets, icons etc. And in buttons too.

Problem aroused in the middle of development. We uncover collision in color coding: our module-based vs default action buttons colors (red for delete, green or blue for save).

Thus we see a few options (all somehow weak):

1. Ignore default action buttons coloring and use our colors.
   Weak point: user could be confused with yellow "save" buttons.

2. Use mixed color coding: exclude green, red and may be blue from module-based coding.
   Weak point: too many meaningful colors.

3. Use single neutral color for all buttons. For example white or gray.
   Weak point: primary action buttons wouldn't be distinguished with secondary ones visually.

4. Drastically decrease usage of modules color coding. For example to header background only.
   Weak points: mixed color coding, weakened module recognition, loss of good option to highlight links to module or corresponding functionality with it's color.

So is there any other option we miss and which one seems to be better and why?

Answer 1

You're right that every design has weak points. I'm not sure if there's a one-size-fits-all solution for this. The bottom line is that the more colors you incorporate into your theme, the less meaning each of them has.

However, if you must have an abundance of colors, I see this as a possible solution:

• Background - Light, pale version of section color
• Primary buttons - Vibrant, full version of section color with white text
• Secondary buttons - Light grey button with vibrant version of section color

For example, if you had an orange themed section you could use the following to communicate primary vs. secondary buttons:

With this pattern, you'd lose the "green is primary everywhere" idea, but you'd be able to create a stronger and more distinctive section theme. I believe it would be possible to tweak the colors for each of your primary buttons until they all have approximately the same visual weight.

Answer 2

Firstly, I have to point out that colour-coding without supporting text/iconography is extremely bad for accessibility.

I would suggest that you generate a secondary palette of muted version of your original colours - use the muted version for backgrounds and the strong version for your interaction points.

Answer 3

As you have a lot of actions, use color to denote importance of an action, not to differentiate between all the actions.

• Use main color to denote the main interaction element which has an action assigned. Or to give emphasis on the interactive element state.

• Use secondary color for a secondary action or to denote a section of the site, for example the header.

So in your case, a solution similar to 4. Use the main color for the primary action button, secondary color for the other actions.

Some sources:

Material design - Color

Material design - Accesibility

Answer 4

It would be better if you could redesign color pallets for all of the modules altogether in order to maintain visual consistency throughout the UI instead of doing it for individual module. Maintaining visual consistence is like defining unspoken rules, and that’s why default colors codes for buttons are Red and Green for Delete and Save respectively.

“Consider an example closer to home: you wouldn’t spend hours looking for a fork or spoon in your kitchen, would you? Why not? Because they’re in the same place they were last week …and the week before that. It’s logical. You don’t think, you just do. In a way, consistency makes our routine tasks subconscious ones.” -(UX Booth)

Users should feel the same way when they re-visit your app/website, like returning their own home. Harmony in color codes will minimize the learning curve among your users resulting into better User Experience.