Using color to define interactivity

Question

I'm designing a website and I want to make it clear which elements are interactive. Usually clickable elements are highlighted with color. But I've seen many websites where color that defined interactivity was used in a body copy, like the example below where sidebar is interactive and body copy has the same color palette.

Or this shopping website where body copy has the same color scheme as top menu bar. And those are only two examples from many that I've seen, so I noticed web design is not that strict about color usage as opposed to app design. For example, iOS human interface guidelines say:

Consider choosing a key color to indicate interactivity throughout your app. In Notes, interactive elements are yellow. In Calendar, interactive elements are red. If you define a key color that denotes interactivity, make sure other colors don’t compete with it.

So what would have a better UX: keep those menu items in black or make them orange? What about "Currency" and "Language" drop downs, should I make the border orange? Should I be so strict and use a specific color ONLY for clickable elements?

Answer 1

Call To Action Vs Important Vs Clickable

These are the three categories you need to separate out from your content and priorities. They have their own level of importance and require specific visual appearance to standout differently from others.

Call To Action (CTA): If everything was Green here

Most websites have only one CTA that pulls users attention - it's the most important action you want your users to perform. Visual appearance of this button has to be different than the rest:

Important: If everything was Orange here

Elements falling into this category are the ones that you want your users to know that they are there and need your attention; such as - the count in shopping cart icon:

Clickable: If everything was Yellow here

A website can have multiple clickable elements on screen, but that doesn't mean they need to have the same colors as the above two categories. If you apply the same color to these elements - it will become a visual noise and the user won't understand exactly where to begin. You can differentiate them by using slight variations such as, bolding, hand cursor on mouse-over, changing color of it on mouse-over etc.

Answer 2

In Summary: Whether you adopt a flat-design style or not, interactive components must retain sufficient cues to suggest clickability. Signaling clickability with cues such as borders, color, size, consistency, placement, and adherence to web standards can give interactive components the proper look.

Your designed header looks incredibly busy, it looks to me that it's been designed by marketing department throwing so many features which then makes header section very cluttered and difficult to scan.

There's good study done by NN group how to design for e-commerce websites. Amazon: No Longer the Role Model for E-Commerce Design I would suggest looking into it.

What about "Currency" and "Language" drop downs, should I make the border orange?

NN Group also did a study on dropdowns and tracked how users interact with it. Some interesting finding came out of the study. Perhaps it's worth looking into this article do a study how often user would be interacting with it, and if it turns out to be important feature perhaps emphasis on it should be increased.

In Summary: Making users suffer a drop-down menu to enter state abbreviations is one of many small annoyances that add up to a less efficient, less pleasant user experience. It's worth fixing as many of these usability irritants as you can.

https://www.nngroup.com/articles/does-user-annoyance-matter/

Navigating the web is a means to an end and every click counts. Users need to know which areas of the page are plain static content, and which areas are clickable (or tappable).

Make clickable elements obvious to users so they don’t need to ponder the meaning of design elements or encounter nasty surprises when something doesn’t work as expected. As Jakob Nielsen puts it, “Life is too short to click on things you don’t understand.”

Text Links

• While blue is still the safest link color, other colors work just as well as long as the links stand out clearly from the body text. If you don’t have a particular reason to prefer another color, we still recommend blue as the safest choice.
• The position of links can help you determine whether or not underlining is necessary. The navigation menu and lists, especially along the peripheral areas of the page, don’t require underlining. Their locations identify them as links.
• Test your color choice for hyperlinks to make sure that people who have colorblindness can spot them easily.
• Static items should not have the same color as hyperlinks.
• Don’t use blue text (or underline text) for non clickable items.
• Whatever appearance you choose for hyperlinks, make sure to apply the same treatment consistently throughout your site.