3

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?

  • One note, without knowing your exact research, I would avoid using vastly different colors for modules as that could have some affect on data. If one modules color is bright red people might not use it or unknowingly skew data in questions asked (again without knowing research I'm just guessing). – DasBeasto Dec 1 '16 at 13:32
  • @DasBeasto good point, we aware of it: all questions are asked in same color, same widgets etc. Color coding is not based on categories but on functions: polls are green, system settings are grey etc. – Nik Dec 1 '16 at 13:48
  • Are there any other questions you have that we might be able to address in our answers? – maxathousand Dec 5 '16 at 16:44
  • @maxathousand Well, I was hoping for more arguments on options or more criteria. I want more decision making instrument than specific answer. Your answer is better for me in given terms but I want to wait a little more. – Nik Dec 5 '16 at 20:50
2

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:

enter image description here

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.

0

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.

  • Yes, color-coding is not the only coding we have. It's role is mostly supporting. And we've got a palette with different shades of primary color for different usage: background, text, borders, hovers etc. – Nik Dec 1 '16 at 13:43
0

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.

enter image description here enter image description here

  • 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

0

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.

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.