WEBSITES
Published: August 25, 2006
Shared Traits of Great Web Design
 

The NextStage CRO describes what elements attract and keep visitors.

Earlier this year, iMedia Connection Executive Editor Brad Berens sent me a link to Shared Traits of Great Contemporary Web Design. I've read the article more than a few times and always with great interest. I want to use this column to go over that study's findings. Those findings are:

  • Simple layout
  • 3D effects, used sparingly
  • Soft, neutral background colors
  • Strong color, used sparingly
  • Cute icons, used sparingly
  • Plenty of whitespace
  • Nice big text

Simple layout
Simplicity is a two-edged sword. Too much simplicity and a site appears amateurish. Not simple enough and visitors quickly tire, leading to frustration, abandonment and negative experiences. That frustration and negative experience is commuted to the brand, the company, the products and services, the people...

A solution to too much or too little is:

  • Employ a clean, simple and straightforward layout with high quality graphics,
  • Use clearly defined and visually clean decision points, and
  • Design for how the visitor wants to be lead, not how you want to lead them.

3D effects, used sparingly
The Old Masters of the art world understood a great deal about depth perception and the use of 3D effects. The term used to describe their technique is perspective. Most image 3D effects can be used to literally draw a visitor into something, to make them part of some action that you'd like them to repeat or duplicate in the real world. This has to do with what are called mirror neurons and I've written on that topic here.

Mirror neurons are why many people were uncomfortable with the "Crash" commercials a few months back. A nice use of iconigraphic 3D effects is to guide the visitor's eye towards a decision point or to highlight a desired next step. This needs to be done discretely, by which I mean offer visitors an invitation to do what you want them to do, but don't beat them over the head with it.

Visitors who don't follow the path you'd like them to follow are indicating one of two immediate states; either these visitors aren't your customers or -- if the majority of visitors aren't following the intended decision path -- the site design isn't satisfying the goal-seeking behaviors of the target audience. The solution in either case is more accurate market analysis, including an understanding of the buying behaviors, navigation patterns and decision strategies (see "Know Your Audience and Reach It") of your target audience.

Soft, neutral background colors and strong color, used sparingly
I agree with both these statements but am concerned by the lack of definition regarding soft, neutral and strong. The science of color phenomenology deals with these issues in depth and a good for-pay work on this topic can be found here.

The terms soft, neutral and strong have different meanings to different audiences so know ahead of time what specific colors mean to your intended audience. I've written previously about the six colors that everyone, regardless of culture, can identify. They are black, white, red, yellow, green and blue. What constitutes soft, neutral and strong is a can of worms I won't get into, although I will share that NextStage is currently involved in research to determine what colors mean to various demographic groups. If you'd like to know when that research is completed email us here.

Cute icons, used sparingly
My lectures often include discussions about the use of unusual graphics, aka "cute icons". Remember that anything unusual about your presentation stops your audience's browsing and navigation cold until they've figured out what they're looking at. There's an upside and a downside to this. Do you want to focus and lock someone's attention on a specific item? Make it unusual. They'll become confused, either a little or a lot.

Anyone who's ever seen a child stop what they're doing and stare has witnessed the child taking some new information about their environment, making sense of it compared to what they've already experienced and merging it with their existing knowledge base. That's the same thing happening when you present your audience with something unusual. Anyone who has attended my lectures knows I employ this technique to lock the audience's attention on a particular point I want to emphasize.

The downside to this is that people don't like to be confused or unintentionally stopped from what they're doing. The way to make the confusion, et cetera, bearable is to make the confusion minute and/or your audience laugh, and not necessarily at themselves. Making your audience laugh is easy to do in a presentation, not so easy on the web or in passive marketing (where the audience receives information but does not participate in its exchange).

A solution is to have explanatory text pop up when a visitor mouses over an unusual item. They will focus on the explanation and incorporate it into the definition of the unusual item. Acceptance and understanding replace confusion and you're done. If you can make the explanatory text slightly amusing, even better.

Plenty of whitespace
I've often written about eye-tracking studies, sometimes within the industry and more often from other sources. All studies tend to agree on how the eye moves through information in its visual field. Much of these studies make their determinations on what's called saccadic eye movement. As you read this column, for example, your eyes make little starts and stops as they gather information into a chunk, pass it on to the brain where it is processed and then onto the mind where it is recognized and acted upon. These little starts and stops are called saccadic movement.

What is not often commented on is how the mind-eye-brain know when to start and stop that movement. That bit of knowledge comes from the mind-eye-brain knowing informational boundaries, aka "where does something start and stop", aka "whitespace". In music, this is known as "the silences between the notes" and composers know the silences are as important as the notes themselves. Silences and whitespaces are extremely important because they are the cues that tell the mind-eye-brain to internalize (i.e., remember) what was just seen or heard.

The moral is, if you want something to be seen, make sure there's enough whitespace or silence around it so the mind-eye-brain system knows it should stop, take a look or listen and remember what it has just heard or seen.

Nice big text
A client recently asked for a review of their website, part of which had several quotes from knowledgeable people regarding the client's products. NextStage suggested the quotes be removed. The client said the quotes were important. I said they obviously weren't. My reason was the font size used. The quotes -- which were excellent endorsements -- were too small to be easily read hence would be skipped by most site visitors. The solution was to take meaningful content from each quote and increase the font size and face for each item. This meaningful content, usually within the first or second line of the quote, stopped visitors long enough to focus their attention on the quote which was then more readily read.

The moral on this one is that you don't necessarily want nice big text everywhere. You want easily readable text everywhere and callouts to emphasize where visitors should give a little more of their attention.

See my author page for previous columns covering these and related topics.

Happy reading.

Joseph Carrabis is CRO and founder of NextStage Evolution and NextStage Global, and founder of KnowledgeNH and NH Business Development Network. Read full bio.