Should color only be used to indicate interactivity and state?

Question

I'm looking for the best practices of the use of color for elements in a responsive design which will be used on both desktops and mobile devices. I feel like there are three spectrums of thoughts:

On one end of the scale, some designers argue that color should only be used to indicate an element that the user can interact with, and that everything else that can not be interacted with should be grayscale.

On the other end of the scale, I see plenty of examples of websites that, for example, use the same blue for their links (which can be clicked) as they do with their header bar (which can not be clicked)

In the middle is something similar to Apple's iOS Human Interface Guidelines: "Consider choosing a key color to indicate interactivity and state." and "Avoid using the same color in both interactive and noninteractive elements."

Which of the above is best practice?

Similar questions:

• Using a secondary set of colors to indicate which elements of the UI can be interacted with
• Importance of colors in a mobile application?

Answer 1

Interactive elements should have affordance. Meaning, they should look like interactive elements. They should look like something you can push/click/tap. Color isn't the only factor when it comes to affordance. Borders, gradients, location, focus, whitespace and copy are all factor for affordance.

Making everything gray except for your interactive elements is just BS. How can you make a design with just gray colors?

Using the same color as other elements in your website can work if your interactive elements depend on other factors for affordance. Using the right border can easily make something look like a button.

Apple's guideline is meant for attracting focus towards the button by making it visually stand out.

Answer 2

Interactivity should be indicated by drawing on the user's experience of how real world objects behave. If you have everything grey except for buttons which are, say, green, how does the user know that a green flat rectangle is a button, but a grey flat rectangle isn’t? If the button “pops out” in some way reminiscent of a real world button, then the user will instantly understand the interactivity possible.

Another example of affordance that isn't related to colour is the application tile "rearrange mode" in both ios and windows phone. The fact that the tiles are now movable in this mode is nicely indicated by the way they wobble gently. If they used colour change in this situation I might not immediately understand I was in rearrange mode. If I entered this mode accidentally and didn't have this affordance it would be a frustrating experience.

You should also remember that while all interactive elements are equal, some are more equal than others. For example, a call to action button should have more visual weight that other controls, and some scenarios will have primary and secondary actions. Forcing uniformity will mean you are unable to deal with these nuances in your UI.