Zapping Graphics that Dazzle Too Much
Develop | Posted November 20, 2013

If your users are missing obvious information in a Web application or on a website, the graphics you’ve used may be to blame. Well-defined graphics add pizzazz to a site, but poorly implemented graphics turn user interfaces into a circus experience that fail to meet the site’s business objectives.

Bedazzling your website's visitors may have a certain appeal at first-- but it never pays off to overwhelm people and cause them to lose sight of what you expect them to see. Overusing graphics and special effects on a site make its shortcomings and faults more obvious, rather than hiding them from view. Emphasize content over user experience, or your users will have that “deer in the headlights" experience. Once a user hears the sizzle, you need to have steak to offer.

Of course, you don’t want to go to the opposite extreme either—creating a site so boring that everyone falls blissfully asleep upon seeing it. There is a balance to maintain between dull on one end and media circus at the other.

Most developers have a reputation for being word- and process-oriented; design issues don’t come naturally to them. But any developer can do at least an adequate job even when it’s not possible to work with a user interface expert.

One way to recognize that you have a problem is when you find that people are missing content on your website. If users send requests to tech support asking how to do something that you know is documented on the site – such as how to return a package, or how to change their user settings – stop assuming that it’s a user failure. If users can’t find something and that makes you mutter, “But it’s right there!” consider: Why aren’t they finding it?

The content could be:

  • Hidden by too much glitz
  • Hidden by too little emphasis (a lack of glitz)
  • In the wrong place

Defining the Features that Determine Emphasis

You need to use website graphics and special effects carefully. They need to emphasize the content in a manner appropriate to evoke the viewer’s emotional response. Unless you generate some kind of emotional response (I want that! That could help solve my annoying problem! Oh, that sounds useful!), the viewer won’t care about the page and will quickly click to some other location that does evoke a response (even when that response is interest alone).

Three features of a page can help you improve the relationship between your Web applications’ graphics, special effects, and content:

  • Proportion
  • Contrast
  • Physical relationship

Although this article provides considerable information about these three features, also look at sites that illustrate the differences graphically. For example, the Codrops site provides 25 examples of these three features. If your site is mainly text, with just a few graphics, pay attention to the use of textual emphasis as described on sites such as Web Style Guide.

Understanding the Effects of Proportion

The importance of an element on a page is defined by its size and scale, especially when compared to another element. A viewer assumes that larger elements have greater importance than small elements.

Some sites place a huge graphic at the top of the page that distracts the viewer from the message the site is trying to present. The proportion between the graphic and the content is wrong, so the page fails to achieve its purpose. Using the golden rectangle approach to sizing page elements is a time-honored method of achieving the correct proportions, and most developers can pick it up quickly.

Viewers have an expectation of size with certain kinds of elements, especially graphics. Ignoring scale when you use graphics can convey the wrong information and point the viewer away from the intended content. A viewer expects icons to consume less space than pictures of a building. An larger-than-expected icon gets more attention than a building that is scaled smaller than expected, even if the physical size of the building graphic is larger than that of the icon. To see a graphical presentation of how these elements interact, check out the Vanseo Design site.

Understanding the Effects of Contrast

Contrast comes from the difference in hue (the position of a color on the color wheel), saturation (the amount of color), and value (the brightness of the color) between elements. You use contrast to create focal points, places on the page that naturally attract the viewer’s attention, where the focal point is at the area of greatest contrast between elements. To understand the effects of contract better, see colors on the web; they even provide a tool to check your color selections (and it works even if you’re colorblind).

Placing the focal point of a page in the wrong location can distract viewers and hide essential content. When you focus on a special effect or graphic at the expense of the actual content – such as a restaurant website’s Flash animation that attracts the eye, but obfuscates the restaurant’s menu or location information – you keep the viewer from seeing the target of your page.

Graphics and special effects that rely on bright or neon colors create a focal point. Likewise, our eyes are tuned to see contrast from colors that are opposite of each other on the color wheel.

The shapes of objects also create contrast. A smooth graphic, such as a square or circle, creates less contrast than a complex graphic, such as a star or arrow. The reason that sunburst icons on a page stand out is that their shape creates contrast.

In many cases, you can present graphics in either smooth or complex forms, depending on what you want to accomplish and what page elements ought to get attention. A picture of a person standing in a park presents less contrast than the same image of that person alone (with the park removed). Showing the person’s shape, instead of a square containing the person, increases complexity.

Understanding the Effects of Physical Relationship

Think of each element on a page as having gravity. The more gravity an element has, the greater the emphasis the viewer places on it. When the graphics or special effects on a page have greater gravity than the content, the viewer is bedazzled and does not see the content at all. Think of the factors behind physical relationship in the following ways:

  • Isolation: Placing an element by itself on a page increases its gravity and places more emphasis on it. A graphic sitting alone in the upper left corner of the page has far more emphasis than the same graphic in the middle of the page surrounded by other elements, such as text and menus.
  • Proximity: A page where elements touch or overlap changes the emphasis of those elements. The gravity of the elements combines to increase their emphasis. When two elements overlap, the element on top attracts more attention than the element beneath it.
  • Similarity: Sometimes two elements are in proximity to each other and both elements have the same amount of eye-grabbing power. In this case, the two elements tend to combine in the viewer’s mind, creating a single element with greater emphasis than either element alone. For example, two round elements combine because they’re similar in shape, even when the graphics are different. The problem for most developers is that it’s easy to see the graphics, but not their similarity. Gestalt Principles of Perception helps you understand the principle.
  • Eye Direction: It’s important to define the direction in which you want the viewer’s attention to move. Moving the viewer’s eye from a less important to a more important element helps the viewer see content in the desired order. You start with a high visibility object, move to the next highest, and so on until the viewer reaches the desired position on the page. Eye movement patterns are a science; sites such as OneExtraPixel tell you plenty more about them.

Bottom Line

Graphics, special effects, and the addition of pizzazz, have a special place when designing webpages and Web applications. However, when you use graphics or special effects in the wrong way, the message you want to convey is lost. The viewer goes away without doing anything important with your site. Consider the visual elements of your site design, with an eye towards using graphics and special effects to better attract your user's attention.

See also:

[dfads params='groups=932&limit=1&orderby=random']

[dfads params='groups=937&limit=1&orderby=random']