DesignReviver

Art and science often coincide. When we approach the former using the latter, this is especially true. And in science, we disassemble the object we are studying and analyze each element as close as we may. Part of the art of web design, is color. So if we approach this element with a view toward science, we may discover ways to enhance our art for better appreciation and achievement of intent.

What is it then, about color, that we can investigate which will aid the process of fulfilling a design and the requirements of a need? In actuality, quite a few factors exist. We will study 7 in this article, because 7 is ideal for memory according to the Miller’s Number; and because 7 is biblical as my chemistry teacher used to say. Our 7 factors are:

• Emotional Impact
• Visitor Focus
• Effectiveness in Conveying Information
• Combinatorial Effect
• The Impact and Limits of Variety
• Supraliminal Suggestion
• Color as a Factor in Accessibility

Emotional Impact

Psychologists believe color does more than impact our visual systems. For example, the same mechanisms which receive color input, also allow the pulses to reach the pituitary and pineal glands by way of the hypothalamus. The pituitary regulates certain hormones and other physiological processes. In fish, it is believed the pituitary may even regulate color. The pineal, interestingly, was thought by Decartes to contain the soul. It is believed generally that at least temporary responses affecting mood occur as a result of exposure to certain colors – red to stimulate, blue to calm, and so on.

Evoking a visitor response, such as spontaneity, can be a very useful thing. Whether there is conclusive evidence is not so important as the potential effects which have been perceived for so long; in advertising, even suggestion is everything.

Psychology Color

Visitor Focus

In some applications, we can control or at least guide when and where the user puts their chief focus. On web pages, the need to attract and provide content rich enough to promote longer stays, often means we cannot control that focus. But that does not mean we cannot /suggest/ a point of focus by some other, innocently subliminal means. Color is actually a way we can do so. For instance, using more subtle colors such as pastels for most of the content and somewhat richer colors for where we wish to solicit focus can be a useful way.

Several design books, such as “Basics of Design” by Lisa Graham, suggest tips for using color to attract focus. If we extend the suggestion of this methodology, we might even invoke a somewhat guided step ladder of page elements for the visitor, by simply using decreasingly bright colors – without any true menus or structural elements.

Effectiveness in Conveying Information

White pages with black text; this has been our world for ages it seems. Yet recent studies suggest this theme may not be ideal for human subjective preference. In the 1960’s, a few brave publishers experimented with books of subtle green pages and black text – I actually had one. More recently, a study in 2007 by Wang, Tseng and Jeng suggests that “yellow-like” backgrounds with “low text luminance” are actually preferred for reading a display screen. As web designers we should sometimes look “outside the box” – not just the imaginary one, but that tri-color display we stare at all day. A subtle soft tint to that blaring white may seduce our visitors to “stay for awhile”, in the words of Amy Grant. Perhaps, no greater pride in our work could be asserted than, “I am lord of all I convey.”

Effects of Bending Curvature and Text Backgrounds

Combinatorial Effects

Print mechanisms often limit us by cost to fewer color choices. Web pages are unique in that one has virtually complete freedom of color use with no impact on cost. So we can explore combination’s which promote those factors of attraction and good design which may add value. If we apply science to the combining of colors, we obtain what is called “color harmony”. In music, harmony is achieved through the use of tones which sound pleasing together. In art, color harmony is much the same except with varying hues.

This concept of color harmony has been around far longer than computer technology; in The Psychology of Art Appreciation By Bjarne Sode Funch, one can see it dates back at least to the 1800’s. Just as there is an emotional stimulus element to a single color, there can be a pleasing perceptual response to combination’s of colors seen to be in harmony. Studying this phenomena for business purposes should certainly be a factor one should consider, where in a world of fierce competitiveness even a small margin of advantage is of significant value.

The Impact and Limits of Variety

With so many colors to choose from, how does one decide where to draw the line, so to speak? How many colors is just enough, and how many are too many? In any systems project we may become part of, we set something called scope. Yes, normally we do not think of scope as bounding one element, but certainly it can. The American Heritage Dictionary defines scope as, “the range of one’s perceptions, thoughts, or actions.” Limiting perception is what we are after (but we could equally apply this to much of our web design).

For color usage, there is a minimum and maximum scope which, for most purposes, can help us achieve best intent. That best number is most often 3 to 5. Fewer than 3 makes one’s pages look monochromatic; greater than 5 and we reach a level of distraction, even confusion. If I may coin a phrase, “biz” is always a good thing; “bizzy” usually, is not.

Color Theory

Supraliminal Suggestion

When we use science to explore something, even art, we attempt to investigate even those things we cannot be certain of. Subliminal suggestion has felt the stain of doubt for quite a time; yet psychologists continue to study the effects of it, often called priming or negative priming.

In priming, we basically get the viewer prepared to receive a related object with some intended unconscious advantage. In negative priming, one can frequently cause a person substantial delay in identifying even the obvious – for example, upon seeing a chart of color preferences this evening on the web, I had some real difficulty recognizing the percentage of preference for “red” – because the bar graph used the wrong colors (likely by intent, and for fun) for the horizontal bars of each color.

The red graph bar was actually yellow; the green was blue. Though my mind saw the word “RED” quite clearly, I could not decide if the yellow bar beside “RED” was what I wanted, or the red bar beside “YELLOW” was actually it.

One can certainly explore the possibilities of subliminal color images and the possible ethical or legal issues those may entail. But what I suggest here, is to note instead, the possibilities for misinterpretation or unintentional delays of recognition we may advertently cause by placing textual content alongside colored graphics, or colored text which might mislead. The science behind color can equally be used to reduce subliminal effects, if one knows what to avoid.

Color as a Factor in Accessibility

Finally, design and color theory aside, why else might color choice be important to us as web designers? The web is a magnificent tool for crossing the boundaries of space, even time. One can reach audiences and markets anywhere on Earth, any time or any day. But what about those boundaries which lie inside? Those millions of us who cannot see color distinctly; those 100’s of millions who live now in presbyopic fuzziness and struggle to read on flat screen technologies which are much harder on the eyes than the venerable raster? We can reach those, too.

The W3C has a complete list of tools a web designer can use to help support, even comply, with accessibility. One of these tools, pertaining to color, is AccessColor. Using a formula based on Web Content Accessibility Guidelines 1.0, it helps a designer guarantee color choices will not adversely affect access-challenged individuals, based on a formula:

“The formula suggested by the World Wide Web Consortium (W3C) to determine the brightness of a color is: ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000. Two colors provide good color visibility if the brightness difference is greater then 125 and the color difference is greater then 500.”

There are far more tools and guidelines than this, but knowing can lead to doing, and doing always leads to results.

Web Accessibility Evaluation Tools

Conclusion

Web design is, itself, the confluence of art and science. We have explored just a few of the ways the science behind our art may lead to more attraction, reduced misinterpretation, response evocation, and more. And this is really only a small beginning. We are coloring our world in ways unimagined just a short lifetime ago. If by our design we investigate and identify and define those attributes which our avid competitors might miss, we can gain an advantage for our clients and for ourselves. Web design is more than an art, and more than a science; it is a process of discovery, of ways to enhance our art – for better appreciation and achievement of intent to all concerned.