How To Make The Right Color Choices For Your Ux

UX and UI design is all about creating websites and apps which are enjoyable and easy to use. Of all the building blocks which make up UX and UI design, color is one of the most important. Color psychology has a strong impact on user choices and reactions. The way colors are combined together can create a mood and or trigger an emotion. See here the tips to make the business sign eye catchy. Color – The color choice plays one of the most important roles to make a sign look attractive. It has been seen that 80% of the business signs get their recognition through the colors. Another important consideration is trendy colors.

As designers, we have a powerful ally in color. It can let us work towards a number of different goals. You can use it to reinforce or highlight an idea, to provoke an emotional response from the user or to draw attention to a specific part of your website. This is, of course, in addition to making your website aesthetically pleasing to the eye.

Author/Copyright holder: Inhabitat. Copyright terms and licence: Fair Use

In many cases, the color scheme chosen for a website will also reflect the company’s branding and values.

Color and Branding

The color scheme for a website can contribute to the overall brand perception of products or services. Based on research by CCICOLOR, the Institute of Color Research, users judge products online within the first 90 seconds of their initial view of the product. Between 62% and 90% of this judgment will be based upon the color scheme. Their findings showed that color can reflect the personality of the brand:

How To Make The Right Color Choices For Your Ux Interview

Red is said to reflect power, passion, and energy. It can be used to alert the user or attract the user’s attention in a design or brand. Red colors are found on the websites of CNN, MacDonald’s, KFC, YouTube, and Adobe.
Orange can mean friendship, unification, and youth. One example of using orange is Fanta, which you might expect to be in concert with their core branding (orange Fanta was once the only Fanta – the brand has come a long way in recent years and dramatically expanded its offerings).
Yellow is said to reflect happiness and enthusiasm. This isn’t surprising; it’s the primary color that we associate with the sun and with the brightness coming from a light bulb. An example of using yellow in a logo is DHL, the international carrier.
Green is said to reflect growth and the environment. The Inhabitate website for sustainable development makes use of green, chiming in with the color’s environmental connotations.
Blue is said to reflect calm, safety, and reliability. It’s a wise color to use; customers tend to feel more at ease with it. Many business sectors widely use blue, and you can find it on the websites and branding of AOL, Facebook, HP, PayPal, EA Games, DELL, and many others.

Author/Copyright holder: Webpage FX. Copyright terms and licence: Fair Use

Color and User Experience

Color certainly plays its part in delivering a better user experience on websites. In particular, the right choice of color will ensure the usability and legibility (readability) of information displayed on screen.

The right contrast between text and background is an essential part of the user experience; if your customers can’t read your content easily, they’re going to go elsewhere. Think for a moment about red text on a blue background. That color combination is hard to read; our eyes can’t focus on these shades at the same time. The same goes for blue text on a red background. The colors vibrate, making us strain our eyes.

We have another tool. You can also “deprioritize” text by reducing the level of contrast compared to the background, helping the reader skip through non-essential text when skimming or speed-reading.

The vibrancy of a color can help instill an emotional experience. Bright colors give energy (which is why so many calls to action are in bright red or orange) and a sense of immediacy. News websites often use red text to call attention to breaking or important news. Softer, less vibrant colors can help a user be more relaxed when approaching navigation.

How Do Colors Complement Each Other?

To deliver a harmonious color scheme, it’s important to focus on the details of the colors chosen. There are several things to consider during this process:

Tints, Shades, and Tones

You can generate many variations of a single “hue” on the color wheel. Make a tint by adding white to the hue, a shade by adding black, and tonality by adding gray.

The easiest scheme in which to achieve balance through tints, shades and tones is the monochromatic (single color) scheme.

Contrast

Contrast is simply a measure of the variation between two colors. Colors on opposite sides of the color wheel offer the greatest level of contrast, as do black and white. Contrast can be used to achieve balance or to draw a user’s attention to a certain feature or area of text.

It’s important to keep a careful eye on the use of contrast; overdo it and you’re more likely to confuse users than to help them.

Vibrancy

We can use the vibrancy (or brightness) of a color to add additional emotional content to a color with brighter shades, generally reflecting increased energy (and thus positive emotions, such as happiness), and darker shades, offering reduced energy and thus calmer, quieter spaces.

Additive vs. Subtractive Colors

We choose modern color schemes based on the systems used to display or print designs. The two most common systems are CMYK (Cyan, Magenta, Yellow and Key – Black) and RGB (Red, Green and Blue).

CMYK is a subtractive color system in that, in the absence of any of the four colors, the output is white. Colors are calculated (including black) as a percentage of each of the four colors. CMYK is typically used for print.

How To Make The Right Color Choices For Your Uxbridge

RGB, on the other hand, is an additive system. It begins with black, and colors are added to achieve hues up to and including white. The values of each color are assigned from 1 to 256 and offer more than 16 million combinations for the palette. This is because RGB is typically used on digital screens, and the underlying system is based on binary pairs.

It’s worth noting that, from a human eye’s perspective, there’s little difference between the two palettes. Our eyes can, perhaps, distinguish all 10 million colors created by the CMYK scale, but the 16 million of the RGB scale often differ too subtly for the eye to tell the difference. Neither palette is “better” than the other from a visual perspective.

How To Make The Right Color Choices For Your Ux Profile

The difference is important from a design perspective because the two systems are used to produce different outputs – print and screen. Conversion between the two systems can be imprecise and yield varying results when viewed.

Online Color Scheme Applications

The good news is that if you’re stuck choosing a color scheme for your users, there are plenty of online tools to help with the job. You can download (and in some cases export settings for other programs) color palettes from the sites listed below:

Color Sphere (Google Chrome extension)
The Color App (iPad application)

Don’t forget to seek feedback on your color schemes from your users before moving ahead with them.

How To Make The Right Color Choices For Your Ux Portfolio

The Take Away

Color is a powerful tool for you. Choosing a color scheme for a website is especially important for branding, as research has shown. Take a company like DHL, which uses yellow (believed to reflect happiness and enthusiasm). Now, consider DHL’s business - carrying goods and documents that we value. It helps to instil happiness in the customer.

As a designer, you can optimize user experiences by choosing the right colors. This will help to ensure:

Usability and legibility (readability) for the user. We can choose the best color combination to make sure that customers keep reading what we’ve written.
An emotional experience in the user. This involves the vibrancy of the color chosen. Bright colors give energy and a sense of immediacy or urgency. We can use them to call attention to our products, services or important messages. Softer, less vibrant colors can help a user feel more at ease - especially useful for industries such as banking.

Using colors to your advantage means knowing what goes into them. Looking at the color wheel (from which we can make any color), we have:

Tints – We add white to a hue (the part of a color that makes it discernible as red, green, etc.) to make a tint.
Shades – We add black to a hue to make a shade.
Tones – We add gray to a hue to make a tone.

To get a balance through tints, shades and tones, it’s easiest to use the monochromatic (single color) scheme.

You should also consider the following for our color schemes:

Contrast – We can draw a user’s eye to a certain feature or achieve balance in our design by using the measure of variation between two colors, or black and white. Be careful with contrast: overdoing it will confuse readers. Focus it on what’s important.
Vibrancy – Vital for provoking an emotional user response. Feelings are important, so tap into them with your color scheme choice. Use brighter shades to reflect more energy and positive emotions like happiness; use darker shades to calm your user.

Choose your color scheme based on whether your design is for screen display or print. CMYK (Cyan, Magenta, Yellow, and Key – Black) is the subtractive color system used for print, capable of 10 million color combinations. RGB (Red, Green, and Blue) is the additive color system used for screen display, allowing over 16 million color combinations.

Many online tools can help you find the right color palette. Above all, check with your users that the color schemes you like work for them. That feedback will save your time and expense before you move ahead.

Where to Learn More

Color Theory for Designers, Part 1: The Meaning of Color. http://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/
“Why Color Matters”, a short and clear post on the importance of color, and where the research by CCICOLOR, the Institute of Color Research is cited. http://www.colorcom.com/research/why-color-matters.
The Logo Rainbow. Applying Color Theory to Logo Design http://www.kiwicreative.net/blog/the-logo-rainbow-applying-color-theory-to-logo-design/