Layout and Visual Clarity: Not a Matter of Taste

We each have individual tastes, so Web page design is purely subjective, right? Wrong.

A Web site is an interactive persuasion vehicle, not marketing department eye candy. Design exists for three reasons: to evoke memories and images associated with your brand; to make you look professional; and to assist with the persuasive momentum of your Web site.

Will every element of every image, graphic and layout help your visitor become confident in your company, product or service? Will it help persuade that visitor?

Designers hate to be constrained. Yet misconceptions about designing for conversion abound. Most of these are promoted as “best practices.” We often work closely with creative people who don’t want to be restricted or restrained. Once we show them documentation, they’re almost always happy to design for conversion. We’ve specialized in conversion since 1998. Below are just a few common design issues we deal with daily.

Lay Off Inconsistent Lay Outs

Many Web sites have splash pages. Why? “It looks good” or “for branding purposes” are common explanations. Splash pages disorient visitors by offering a look and feel different from the rest of the site. They can kill the mood for visitors who are buying on impulse. They’re an obstacle on the way to more relevant content. They’re often used incorrectly, asking visitors to choose a path. That’s often better handled with proper information architecture.

Many sites’ checkout processes have a look and feel different from the rest of the pages (this happens with many hosted solutions). While it often makes sense to remove extraneous navigation, you can shock a person out of the buying process by changing the design consistency.

Contrast

An image has two options. It can either blend with the page to enhance a feeling or to increase perceived value, or it can be conspicuous and lead prospects in a direction of your choosing. How do you design to persuade visitors to take your desired action? Contrast! Contrast makes eyes settle where you want them to. It intuitively tells visitors what to do next. Robin Williams, in The Non-Designer’s Design Book, writes,

A reader should never have to try to figure out what is happening on a page — the focus, the organization of material, the purpose, the flow of information, all should be recognized instantaneously with a single glance. And along the way, it doesn’t hurt to make it beautiful.

Williams lists six contrast categories:

1. Size: Big vs. Little
2. Weight: Thick vs. Thin
3. Structure: Shifting weight with each stroke.
4. Form: Rectangular vs. Rounded
5. Direction: Straight vs. Slanted
6. Color: Warm vs. Cold

Calls-to-action generally should be in contrast to the rest of the design. Visitors shouldn’t have to work to find what to do next. Can you spot calls-to-action on your Web pages from six feet away? And no, I’m not kidding about that.

Eye-tracking

To lead visitors in the direction of your design, understand the way their eyes track through Web pages. Knowledge of eye tracking helps you understand how layout and use of screen real estate should take advantage of the way a visitor scans pages for critical information.

People have relatively constant eye-tracking patterns when they land on a Web page. They start top left and check that they’re in the right place. They’ll then scan along the top of the page, drop diagonally to the center of the screen, scan left, then cross center again to scan right, then return to center. Use this information to create a template for placement of various types of information. Generally:

• Global information appears along the top. It’s not information visitors interact with often. The function is more passive than active.
• The central area of the screen is where the eye naturally wants to land. This is the “active window,” where the site should focus on the selling process, implement AIDAS and provide multiple navigation paths, calls-to-action, etc. When a visitor disengages from this area, the task is to get them quickly re-engaged.
• Left is a stabilizing area, generally where a visitor looks for comprehensive navigation when the information in the active window has ceased to engage him or her. The goal is to get the visitor back to another active window quickly.
• The eye treats the right as the most peripheral area of the screen (visitors often use scroll bars without looking). Yet they are always aware of this area. It’s a good place for assurances, action centers (newsletters, communities, registration options), and overall calls-to-action on product pages.

Fluid vs. fixed design

Prospects use different browsers, set at different resolutions. The designer doesn’t control the medium; the visitor does. How do you work with that?

Understand and plan for these implications. Don’t try to exert so much control you do a disservice. John Walsh, our director of design and technical services, says, “You must decide whether your site will have a fixed or fluid design. Both have their shortfalls. In a fixed design, your site never changes. The problem here is that some of your visitors may be looking at your site from a smaller or larger browser window than you anticipated. This will cause her to see only part of your site, or cause your site to look tiny in a large window. Fluid design will narrow your page to fit each individual window or widen it to fit the window. Your site can begin to look weird when opened too wide or too narrow. Use your discretion, but test your site pages on at least two separate browser windows, and many different size windows.”

If It’s Not Found, It Isn’t There

Your site’s text must be scannable and skimmable. Not all information has equal value. Is information placed where a visitor is most likely to look for it? Are calls-to-action where they’re needed on each page? Do you have to scroll up or down to see them? If you sell products, consider “add to cart” buttons in several places, especially at the bottom of a page after scrolling though lots of text.

Follow the Cursor

Recently, I visited a site with an interesting problem. I clicked a call-to-action. On the next page, in the spot where the previous call-to-action appeared, my cursor was resting. But it was now on a link to the privacy policy. This made me curious about the privacy policy. Unintentionally, I was asked to disengage from the shopping process.

Make your site simple to interact with. Guide visitors to accomplish your common goals. They came to do business with you, didn’t they? Make your site as intuitive as possible. Every element, text and graphic, on each page must be placed for persuasion. If you’re deliberate in design, the success metrics will shine.