Are you choosing for your interface that strain the user’s eyes?

If you’re using a and color for your background, you’re making it hard for users to keep their eyes on your page. , saturated colors attract the most user attention. Too much of it in a large area overstimulates the retinas which can strain the eyes.

brightness_saturation_color-comparison

For example, stare at the color swatches in the image above. The left column consists of colors with maximum brightness and saturation. The right column consists of colors with 80% brightness and saturation. Your tolerance for staring at the left column will be lower than the right because the bright, saturated colors are harsh on your eyes.

Brightness Vs. Saturation

Brightness and saturation are different color properties. The former refers to how much white or black is mixed in a color while the latter refers to the amount of gray in a color.

Increasing brightness is not the same as decreasing saturation. When you decrease saturation, you turn the color into a shade of gray. When you increase brightness you turn the color lighter but without making it gray (source).

brightness-vs-saturation

Effect of Color on Attention and Arousal

A study, “Effects of hue, saturation and brightness”, discovered that colors with high saturation and brightness attract the most attention. It concluded that these color properties are more important in attracting attention than hue.

Two other studies, “An arousal effect of color saturation” and “Color and emotion”, found that bright, saturated colors are linked with high arousal. Hue also affects arousal, but saturation and brightness have a greater impact.

Reserve Bright, Saturated Colors for Buttons

A bright, saturated background color will draw user attention, but it won’t hold it. Using them is like screaming at users when they’re in front of you. You’ll get their attention, but they’ll soon look away because you’re jarring them.

You should only use them on interface elements that demand user action such as buttons. The color will draw attention to those elements and make them easy to find when users are ready to act.

bright_saturated-button

Use Darker, Less Saturated Colors for

It’s better to make your background color darker and less saturated. Darkening the color decreases the white in it while desaturating the color increases the gray in it. This tempers the color intensity it has on the eyes.

Not only that, but it won’t compete with page text or content for attention. This allows the user to read the page easier without visual distraction.

bright_saturated-background

Finding Optimal Background Colors

There are many brightness to saturation ratios you can use for your background. Creating a color properties grid can help you find an optimal background color for your interface.

Start by creating a square swatch with your design tool. Pick a hue using the color picker and set it to the maximum brightness and saturation level. This hue will remain a constant as you adjust its brightness and saturation levels.

color_grid-1

Create four new swatches with lower levels of saturation and brightness using the same hue. Reduce the saturation for two swatches and the brightness for the other two. Use multiples of 10 and spread out the levels so you have a wide range. Label each swatch with its saturation/brightness ratio.

Place the saturation swatches to the left of the hue swatch and order it from lowest to highest saturation. Then place the brightness swatches to the right of the hue swatch and order it from highest to lowest brightness.

These colors are not optimal yet because they still have a 100% brightness or saturation level. Instead, they’ll serve as the baseline for finding more optimal colors.

color-grid-2

Create a second tier of swatches by reducing the brightness and saturation of the swatches in the first tier. Reduce the levels the same amount for each set of swatches so that none of the second tier colors have a 100% saturation or brightness level.

color-grid-3

You can explore even more colors if you’re not satisfied with the second tier. Reduce the levels again to create a third tier of colors. Now you have a palette of eight optimal colors with different brightness and saturation ratios to choose from.

Examples of Good Vs. Bad Backgrounds

Below are examples of homepage backgrounds that strain the eyes compared with ones that soothe the eyes. Notice how long you’re able to fixate on the good pages versus the bad ones.

good_bad-greens

Bad greens Panic / Prismic, Good greens FreshDesk / Sigstr

good_bad-reds

Bad reds Telepath / Meat, Good reds AppFigures / Jackie

good_bad-blues

Bad blues Compose / DareIt, Good blues Republic / MailTag

Aesthetics & Usability

Next time, before you settle on a background color, think about how that color will feel on the user’s eyes. Are your brightness and saturation levels optimized? Are users able to read the text with ease?

Color influences the aesthetics of a design, but it also influences the usability of it. Designers need to pay attention to both and make them work in tandem to please the eyes. You don’t have to sacrifice usability for aesthetics when you can have both to create a great interface.


Design Products

flow patterns

Article written by anthony

Author and founder of UX Movement. Founded this blog to help you develop your user experience design skills for a more user-friendly world.




Source link http://feedproxy.google.com/~r/uxmovement/~3/sWjDngQzpo4/

LEAVE A REPLY

Please enter your comment!
Please enter your name here