Effective Design & Usability : How to Use Color to Your Website’s Advantage

Nick Arellano - 7.9.2012 10:00 AM

The colors used in your website are impacting your business’s success.  Whether the impact is positive or negative could depend on how much you’ve considered your audience, set a defined goal for your website, and planned how color could be used to achieve those goals.  That’s important enough to consider developing a color scheme at the very outset of website planning.

Whether it’s e-commerce, corporate, informational, or promotional, your website exists for someone to take an action (hopefully many people), and it turns out that colors are very good at eliciting a response from people. In the design community, it’s recognized that a consumer will decide within 90 seconds the acceptability of a product, and much of that decision is based on color. So, add colors with positive associations to your website and you’re done.  Well, almost.

Brand Considerations
If your company has been around long enough, you probably have been using brand colors.  Ideally, your website will strengthen brand associations, but a balance needs to be struck between how much the site will showcase those colors, and how much the palette will be driven by the site’s function/goal.  An ecommerce site may suffer if your brand color is used too liberally, where a corporate site may benefit.

Even if you have an established color scheme, your website presents a new outlet and therefore, possibly a new audience who’s attention you are trying to capture.  Would it be beneficial to reconsider your branding for the web and/or mobile?  It’s possible that you could retain the loyalty of your current consumer base, while appealing to a new potential market by rethinking your brand’s color palette and how it relates in an online environment.  If you don’t have branding color guidelines, you should seriously consider using them.  It has been shown that colors can increase brand recognition by 80%.  Maybe your website is your first real establishment of your brand, in which case it can serve as a great tool for gauging what your audience will respond to in other media.

Emotional Responses   
Every person will have a different set of connections to color. While there is no fail-safe way to appeal to everyone, there are guidelines on what emotions colors can convey, generally.  A short version is:

Blue – trust, established, calm
Red – passion, action, urgency
Orange – playfulness, warmth, creative
Yellow – happiness, energetic, fun
Green – growth, success, nature
Purple – luxury, nobility, ambition
White – clarity, coolness, focused
Black – power, dominance, sleekness

Of course, this is a very simplified sample of what some colors could represent.  Color theory has enough material to fill entire college courses.  The point is to not neglect the emotions of your audience, and to not portray a message inconsistent with your brand by failing to recognize the preexisting associations that colors have.

And More…
Colors on screen act differently than printed colors.  Often, combinations that would work in a print design vibrate on screen, or can lead to eye strain, definitely not something that leads to a good user experience. The key is to create enough contrast to be visually interesting, without being distracting or detrimental to the design and function of the site.

It used to be that when designing for the web, you were restricted to 216 web-safe colors if you wanted to make sure what you were using would look the same across different computers.  Now, the percentage of users using inferior displays is negligible, and web designers have the freedom to design for the largest target audience.  It should still be noted, that a variety of people will see your website differently than you design it.  Color-blindness in some form can affect 5% of males and up to 1% of females, so make sure that you are not relying heavily on color contrasts alone for distinguishing important elements.  Elderly people or other visually impaired people may have similar problems, and not respond to colors that are similar.  Sometimes, viewing your design from further away than normal, or slightly squinting your eyes can spotlight problems that others may have when viewing your site.

On top of visibility issues, there is no way to control if a user tweaks their alpha channel setting on their mac, or turns the contrast down, or turns up only the blue channel because they like the cooler look.  Will your color selection and design stand up to such punishment?  Try your design in a few different settings to make sure you have something that will appeal to the greatest number of people, and have the greatest impact, no matter what the goals of your website.

 

0 Responses to "Effective Design & Usability : How to Use Color to Your Website’s Advantage"