The Sharp Truth About Contour Bias

Sometimes the design of a web page just seems off. No one can put a finger on it. The layout of the screen makes sense. The separation of data is well proportioned. There isn't a lack or overuse of color. Yet, the web page doesn't feel inviting. This might be the fault of human nature and a psychological force called Contour Bias. The principle states that humans have a tendency to favor objects with curved contours over objects with sharp angles or points. Knowing this preference, take a second look at the web page. HTML elements such as divs and spans are "squarish" by default. Does the design have contours or simply lots of boxy edges? Does the site feel manufactured?

Some might ask, "Why does this matter?" or state that the concept is overrated. Contour bias is not something that people consciously think about or control. It is pre-programmed into our DNA. Humans like objects similar to themselves. This is why people are drawn towards nature. Take another look at nature and play a game of "Where's Waldo" with sharp angles and points. The contours will far exceed the sharp objects. Why do we like contours? It all starts in the amygdala. This is a region of the brain where fear is processed. It considers sharp or pointy objects potential threats. The amygdala does not rationalize the purpose of an object. In contrast, soft edges do not pose any threat and therefore are preferred. This influences how people appreciate the aesthetic nature of objects. Implementing contours softens a design and makes it easier on the viewer's eyes.

So everything needs soft edges or rounded corners, right? Actually, no. The contour bias only works on objects which are emotionally neutral. Objects which already have an emotional association are not easily swayed. Additionally, contour bias can be used in conjunction with angular objects to attract a user's attention. Since rounded objects are emotionally positive and aesthetically pleasing, an angular object within them will have a natural pull. Thanks, amygdala!

One easy way to introduce contours on a web page is rounded corners. IE9+ and modern browsers support the CSS3 property "border-radius." This feature allows custom radii to be applied to common objects such as divs and spans. CSS3.info has an excellent article on the use of the property. Although rounded corners are useful, it's important not to overwhelm a design. Too many rounded corners or corners with large radii can result in a trivial appearance. It's always important to vet designs with feedback from customers and other respected resources.

Click here to view an excellent study on contour bias.CodeProject