The following is a short extract from our book, Designing UX: Forms, written by Jessica Enders. It’s the ultimate guide to form design, a key part of effective UX design. SitePoint Premium members get access with their membership, or you can buy a copy in stores worldwide.
Currently, our form doesn’t have much color at all:
In terms of this part of the design, we’re on the right track. I’ll explain why.
Often, using color in an attempt to make a form “fun” or “interesting” can actually make the user experience worse:
Some colors can even hurt people:
Be Very Careful with Color
Human beings are incredibly sensitive to color. Our brains process it without us even realizing, and we can’t help noticing differences.
In our forms, we can use this feature of human biology to our advantage. Reserve color for things that need it, so they stand out in some way.
Here are some parts of a form that may benefit from color:
Key messages, like errors:
Branding, like logos and standard headers, may also use color:
You may have noticed that I didn’t include the red asterisk of required field indicators (*) in the list of things that may use color. This is because I don’t recommend the use of red asterisks to indicate required fields. See “Required Versus Optional Fields” below for more information.
Notice also how each of the examples above uses very little color overall. The more color you use, the less it succeeds in making things stand out:
This form uses color on almost every element, meaning none of them stand out” width=”1446″ height=”716″ class=”aligncenter size-full wp-image-161085″ />
What Colors Should You Use?
Usually, your organization will have a palette of colors that you can refer to. Like my form design business, Enders Bank has a teal green as its main color, as you can see in the logo in the image below. Let’s use that color to make the primary action button on our form distinctive:
Estimates vary, but it’s likely that 4–10% of your web form’s users will have some deficiency in their ability to perceive color (typically—but inaccurately—called color blindness). The most common form of color blindness is red–green, where distinguishing between these two colors is difficult.
Continue reading %Designing Form Layout: Color%