Questions? (877) 643-7244
FutureNow Post
Tuesday, Oct. 30, 2012 at 7:57 pm

Functional Color: How To Use Color For Successful Site Navigation

By Mariel Bacci
October 30th, 2012

Why Is Color Important to your Website?

Marketing Research has cranked out thousands of studies over the  years to understand which colors motivate people to buy.  There is good reason for marketers to focus on color- people respond to it. Color can change the look and feel of your brand and help people navigate your website.

We hope to share with you some of the elementary principles on how the mind searches for colors to take action. You can use this knowledge to help walk your guests down the yellow brick road to conversion on your site.

Color For Usability: First Examine What You Already Know

From your the faucet in a hotel bathroom to a train station in a foreign country, you rely on color to help you function and navigate space. Color queues are generally universal, but they can be interpreted differently from culture to culture.¬† Have you ever been confused by color queues that oppose your intuition?¬† This happens in daily life and it happens even more frequently on websites.¬† Let’s review some of the colors that help us navigate through everyday life and then examine how they can help us navigate using the same principles on your website.

Color Coding and Real Life Navigation

Think about the last time you were driving in traffic. How easy was it to understand the traffic signs before you were even close enough to read them?¬† Have you ever driven in a foreign country where you could not read the language on the traffic signs?¬† We’re you still able to stop and go at appropriate times?

The universal usability of roadsigns and traffic signals keeps people alive every day.  Imagine if you were in a foreign and you saw a sign like this:

The truth is that you might cause an accident because this sign says “STOP” in Tamil.¬† Luckily, colors are so universal that you would be very unlikely to see a sign like this anywhere in the world.¬† Color is the critical factor in the success of the visibility and readability of road signs.

Color Coding on Everyday Objects

You might have trouble understanding all the mystical features of the T.V. remote.¬† Some people are amazing with them, wielding them like samurai’s with their swords.¬† Some, on the other hand, can usually only figure out how it can be used to turn the televison on and off.¬† How can they even figure out that much?¬† Every remote control has a colorful ‘Power’ button.

What about when you are using the gas pump, have you ever had any trouble there?¬† Often times gas pumps have 2¬† buttons, an “Enter” button and a “Yes” button.¬† It can be difficult to tell which of those buttons you should press to get the gas pumping. One of those buttons might even be green, so you will push it over and over to get the gas to work, only to find that it is another grey button you are supposed to be pressing.¬† This is an example of bad color communication and is something you can avoid on your website.¬† Can you tell which of the buttons on this gas pump you should press after you run your credit card to make the pump work?¬† The correct button to press is “Enter,” which is not immediately obvious based on the color scheme in place.

How Color Can Increase Ease of Navigation on Your Site

In the world of computers, the execution of proper colors for navigation lives under the term User Interface Design or UI.  In the same way that color works to control traffic on the road, color combined with shapes and symbols will mean the difference between successful computer-human interaction or confusion.

For your site to be successful, it must be accessible to everyone. People will leave your site right away if they don’t find your site attractive and inviting. Your visitor must be able to move around your site and easily find what they need. Your visitor must be comfortable and feel secure just like they do at their local department store. ¬† They must be able to examine your products, service and merchandise and get all the information they need to make a decision. Finally, they must be able to successfully complete a purchase or procure a service on your site.

Color on your site needs to fulfill multiple functions:

  • Product colors must be as accurate as technology will allow. You will lose money if you sell a pink sweater on your website that is actually purple in reality.¬† To get the most accurate colors possible delivered to any monitor your guest might be on, make sure you calibrate your site color for the web.
  • Colors must catch and hold your visitors attention, and then deliver appropriate and accurate information. Color will be essential in creating appropriate navigation elements.¬† When you create buttons, make them green or orange, colors that will indicate to your guest they are moving forward.¬† Always avoid colors like red or yellow which can indicate danger or a warning sign to your visitor.¬† There is a wealth of information online about how to make the perfect call to action buttons.
  • Colors must create a sense of visual harmony, trust, and professionalism. The aesthetic balance of colors on your site should make your customer feel like they can trust you.¬† If you cannot hire a professional designer with a background of knowledge in color harmonies, you should take some time and learn what colors work well together on your site.

There is no right or wrong color scheme and the success of your site will depend on a variety of different factors.  As long as you make sure to put some thought into your color scheme and how it will affect your guests experience, you should be successful.  If you are not sure, you can always ask friends, family, coworkers or online usability testing professionals what they colors they find the most appealing and the most helpful.

What experience do you have with color in everyday life?¬† How did you choose the color scheme for your own website?¬† Have you tested different colors to see what works and what doesn’t?¬† If you need help using color on your site to persuade visitors to convert, we are here to help you build the yellow brick road.

Tweet Button

Add Your Comments

Comments (32)

  1. Grateful lurker here, Mariel and it’s my first time to comment here.

    You really got me thinking on the use of color for site navigation. Indeed, it makes sense. On remote controls, we power buttons are almost always rendered in red.

    If you’ve a site that sells LED lighting solutions, it’s almost a given that you should go with a green palette; red for food but what about wedding photography sites or say, paintball sites?

    Let me know what you think.


  2. Studies have shown people prefer to have important links right at their fingertips, so to speak. You will increase your web usability by creating extra navigation links at the top and bottom of your pages. These should only be the most important links: pages like “Home”, “Contact Us”, “Site Map”. These are places many visitors search for, and making it easier for them to get there increases the chance they’ll come back again.

  3. [...] Functional Color: How To Use Color For Successful Site Navigation 0 Upvotes Discuss Flag Submitted by: Michal Pekarcik [...]

  4. It is a well known fact that colors help a person remember better,but this is something new .

  5. @Shandi-
    Thank You or Reading!
    For wedding photography sites I would recommend colors that directly contrast the photographs, so that the images and quality you are selling really stand out. For a paintball site, you can be creative! Paintball is a male dominated field so I would recommend a color palette that speaks to masculinity. In both cases, make the calls to action on your site green-the color that triggers a sense of safety, health and moving forward for humans.

  6. Calibrating your websites colors for the web is extremely important, especially for an eCommerce website.

  7. Important links should always stand out. But I never really put much thought on that different colored links actually would bring different responses. Thanks for the great tips.

  8. Thanks for this post Mariel.It’s really awesome the way you have written this post.

    And yes,use of colors is very important for a websites navigation.You have made me think of it.Thanks

  9. Totally agree with you Mariel. Colors and more designs has become one of most important parts of a website. Will give it a try and update here back. :)

  10. We used colors such as Orange in our sales buttons in order to help capture spontaneous sales on our discount card, we changed color 3 weeks ago and sales have increased since doing so, we also introduced the green ticks on our landing page for the reasons you said above. Green = GO , great read thanks guys!

  11. color is important with site navigation so this article helped me very much. Thanks!

  12. I dont think the color is more important than the position and size. It depends what kind of button it will be, of course “donate” or “buy now” will not be a tiny button at the bottom of page, but will it really help if my contact button will be red? And about the navigation menu bar, I prefer complete navigation at one place. But even like that this article was another important opinion.

  13. color is one of the most important things to design a new website. Thanks for the tips! :)

  14. Dear Admin

    What a great article i am searching in google from couple of days about “Functional Color” but didnt find any great way,but my search came to an end after visiting your blog.!!!Do you have any more related articles or ideas related to ” How To Use Color For Successful Site Navigation”,it will help me in my further research work…Will keep following your articles…


  15. Thanks for this. I have been procrastinating more color on my website. I am scared it will take away from the content etc. Now to figure out the proper way to use it, and turn it into a very powerful tool for influence. I was visualizing red accents, but now after reading this, I do not want to stop them and in turn getting the bounce rate up… Maybe this link to a HTML color chart will be helpful to some:


  16. Using Colors can help make one’s site more attractive and may help reduce bounce rate. But from SEO perspective, is using too much colors in the textual part good? Colors for Buttons won’t do any harm.

  17. colours are so important for people to make decisions, most of the time its not whats written on say a button but the colour that it portrays that makes us decide whether to push it or not. Its the fast way to communicate and as we all use this system we do it without even thinking about it

  18. The 2 basic things I noticed : “Colors must catch and hold your visitors attention” and “Colors must create a sense of visual harmony”, in short… catching attention with harmony! All is a question of choice and “how to” select colors, I agree!

  19. [...] Einkaufen an der Nase herumgef√ľhrt werden!Bis 2022 erfolgen 1/3 der Detailhandelsums√§tze onlineHow To Use Color For Successful Site NavigationA new world order of natural searchWelche eFood-Startups lohnen sich f√ľr ein Investment?7 Business [...]

  20. I’ll apply this for web design. Thanks

  21. Colour is mirror of visualization, proper colour management lead your site as well as business long way. Colour can attract people’s mind and it divert them to toggle there. I would suggest better ratio and appealing can be improved of any website just by using proper colour combination. Recently I visited a site named positonly and their teams really work great in terms of colour management. Fabolus work.
    Thank for your valuable suggestion Mariel !

  22. Well said, It is always better to use proper colour as it give identity to your website. Better colour management can help you to drive quality traffic.

  23. Better colour management can help you to drive quality traffic, Thank for your valuable suggestion Mariel !

  24. Agree with you Mariel. If you using corect the colors,your site will be more atractive for visitators. Thank you vor this very interesting article!

  25. Very good article. I will use this points in my next web desining project.

  26. certainly makes a lot of difference in navigation

  27. I can confirm everything that your wrote above. I’ve been doing many tests around and an appropriate colors set up on your site can reduce drammatically the bounce rate of your site.

  28. I never thought that different colors for links was very important. Most people use the standard blue color. Will changing the color of links really change the click through rate?

  29. choosing the right color for your site is very important. sometimes i land on various sites and totally have no idea what those sites are about because the call to action button is very hard to see due to color chosen and i have to navigate for a while, which for most people, will make them leave immediately.

  30. Excelente artigo! A importação da cor e do layout para que assim a navegação seja facilitada!

  31. Calibrating your websites colors for the web is very important for any site because you will not see a proffesional site with pink background or something else!
    This is my opinion.

  32. [...] [...]

Add Your Comments


Print this Article

Mariel is a GA certified analyst at FutureNow, Inc.

More articles from Mariel Bacci

Marketing Optimization Blog
FREE Newsletter Sign-Up
send it once every: