I’ll start by saying that every designer I’ve ever met despises the word “pop.” It’s one of those squishy, non-technical terms clients use when they’re unhappy with a design. It can mean almost anything, including and not limited to:

• Just make it red, already
• Could we get more cleavage in that photo?
• It doesn’t look enough like [insert name of another web site]
• Where’s the animation? I thought there would be animation.
• I hate gradients.

In other words, as actionable feedback, the word “pop” has no use. But as a conversion design concept, it can be very powerful, helping you improve your page’s visual hierarchy, message clarity, and conversion rate.

Things That Make You Go “Pop”

Luckily for designers, the qualities that affect “pop” are predictable, because of the way our visual systems are wired. We tend to quickly scan and analyze many bits of visual information such as edges, contrast, sizes, and motion in order to assess and understand our surroundings. This is true whether we’re looking at a field or a web page.

Here’s a quick visual (of course) reference of nine characteristics that have a strong influence on visual hierarchy:

Each of these aspects of design has been written about extensively elsewhere. So rather than explain them in detail, I’ll touch on them all (except for motion) in the upcoming examples.

Stop, Before You Pop!

Now, before you run off to start tweaking your visual hierarchies, there are two very simple rules of the road to follow. First, be selective. Second, apply as few as possible. I’ll explain:

Before You Pop – Rule #1: Be selective in what you emphasize.

By definition, not every single thing on a page can pop – it’s a relative, contextual effect.  Here’s a great illustration of what I mean, take a look:

–

–

Question: how quickly did you notice the error message on this page?  And how about the call to action button?

If you’re like me, it took a few beats to really notice them. That’s mainly due to the sheer number and spatial concentration of important, visually popped items on the page – there’s almost no way for anything to stand out above all the visual firepower.

Visual emphasis techniques this page uses:

• Hue and saturation – vivid, saturated red and orange create an eye-catching, pulse-increasing design. Exciting, but visually indiscriminate. The heavy use of red, in particular, causes both the red error message box and the red call to action button to fade in relative importance.
• Contrast – the deep black text (“Flights”, “Hotels”, and “Rental Cars”) stands out clearly against the lighter backgrounds
• Shape – the giant arrow draws the eye leftwards – without it, the search box would nearly disappear. The airplane shape also attracts with its difference.
• Size – the large red text touting savings and prices almost leaps off the page.

If we want the button and error message to pop in the midst of all this, then something has to give. We should either make our important elements pop more, or make everything else around them pop less.

Let’s try making the error message and button pop more, first.

Attempt #1: hue. We could try using a different hue in both areas. This works to some degree – at least the blue is different – but as you can see below it’s difficult to out-shout bright reds and oranges. Plus, the addition of a new color begins to dilute the site’s strong brand identity:

–

–

Attempt #2: size and shape. We could try adding shape (a triangle in the error message) and increasing sizes all around. This helps some, but it’s beginning to feel like someone shouting over a drunken Super Bowl crowd:

–

–

Attempt #3: hue and saturation – of other elements. In this approach, we’ll simply reduce the pop of other elements on the page, by limiting the amount of that hot red hue. This re-balances the page quite a bit, but it’s certainly not where we’d want to finalize it:

–

–

Let’s leave this page to its popping quandary for now, and take a look at another rule.

Stop Before You Pop – Rule #2: Use as few popping techniques as possible, or you’ll quickly exhaust your options. For example, let’s examine this Progressive landing page:

–

–

Question: what did you look at first? And did you read that upper headline at all?

To my eye, the clarity and hierarchy of this page suffer from an overabundance of emphasis techniques. The Start a Quote form is the page’s main reason for existence, but it’s fighting a battle for dominance against the strong shapes, colors, and positioning of the surrounding elements.

Visual emphasis techniques this page uses:

• Location – the first arrow shape is placed at the upper-left portion of the layout.
• Hue – the Quote & Compare button uses a quite different hue than its surroundings. But it’s not enough to make it stand out.
• Saturation – the orange and blue colors are very saturated – vivid and strong.  In a nice counterpoint, the de-saturated grayish-blue text area signals content of lesser importance.
• Shape – the arrows, corner circles, and half-round rectangle shapes all draw the eye. They also distract from and overwhelm the main call to action.
• Contrast – the blue color stands out strongly against the pure white background. However, the orange headline and reversed-white text are less strong by comparison.
• Face – the spokesperson’s eyes and smile are potential distractions – especially since they are but one of many elements popping loudly for attention.

So how could we adjust this, to make the quote form pop? As we’ve seen before, we can achieve pop by adjusting either the element in question or its environment.

Let’s start by trying to give the form itself more emphasis, without touching anything else.

Attempt #1: shape and hue. By adding an arrow shape of the same hue as the button to the form, we succeed in pulling a bit more attention to it. But now, there are simply too many arrows on the page to make sense. We’ve wandered into the land of everything Pops:

–

–

So instead, let’s try removing the arrows altogether.

Attempt #2: shape and contrast. This version simplifies the page by reducing the number and variety of shapes, and allowing the quote form area to have the strongest contrast. But I’d still like to see it pop more. And I can’t believe I just wrote that.

–

–

Attempt #3: location, contrast, size, and padding. To me, this version gives just about the right amount of emphasis to the quote form. It’s not the only solution, but it’s a fairly solid one:

–

–

The heading is larger, and moved up next to the spokesmodel’s face, to take advantage of the attention her face attracts. An abundance of empty space allows the eye to focus on what that space surrounds. The button, with its unique and striking hue, finally stands out in the manner it deserves.

Things To Say Instead of “Pop”

So now that you’ve learned more about creating and changing visual emphasis on a web page, it’s time to say goodbye to the word all designers hate. You won’t need it anymore. Instead of saying, “Could you make that pop a bit more?” you can say…

“Can you…

• Move it higher (or move other stuff lower)
• Make it larger (or make other stuff smaller)
• Change its shape (or remove or normalize other shapes)
• Increase its padding
• Increase its contrast (or reduce the contrast of other stuff)
• Change its hue (or change the hues of other stuff)
• Increase its saturation (or reduce the saturation of other stuff)
• Add a face – but carefully (or take other faces away)

There. No need to say the word “pop” ever again. You’re welcome.

Resolution 1: Get Fit

Every second of every day, your site is in competition, often standing toe-to-toe with bigger, stronger, better-funded challengers. To succeed, a site must essentially be as fit on the Internet as an elite athlete is on the field.

But what does fitness mean, exactly, for a website? In a word – fast. Fast page load time, fast app response time, fast demo streaming time, fast everything. If you’re serious about conversion optimization, speed is no longer optional, it’s a basic requirement.

This means those sites truly committed to conversion fitness will (dare I hope) turn their attention from button design and instead invest in the highly technical, behind-the-scenes deal-makers such as beefed-up servers with fat reliable connections to the Internet, and screaming fast content delivery networks (CDNs).  They’ll compare potential vendors on not just price and services, but also on documented uptime, response time, and delivery speed.

If you haven’t already taken steps to punch up your site’s performance speed, 2011 is the time to do it.

Resolution 2: Spend More Time With Loved Ones

Visitors are key to most web sites’ success, but when was the last time you took a few hours and got to know them? And no, I don’t mean reading customer survey results from a research firm. That doesn’t count. Judging by past experience, it’s too easy to ignore a PowerPoint deck, and to put off making the improvements it might indicate.

So, by ‘spending more time with your loved ones,’ I mean watching real people try to get real things done on your site. Observe live usability tests if possible, so you can see the facial expressions of the test participants. If that’s out of your budget range, set up a task through UserTesting.com, watch the videos, and be sure to listen to the voices.

Watch, as they struggle with your login form. Listen, as they look in vain for the Continue button. Be shocked, as they ignore your beautiful banners or curse your site and your company for losing 15 minutes’ worth of their form input. That lip curled in contempt when a page display breaks? It might not get written up in a report, but that equates to loss of credibility for your company. The deep sigh and bored tone of voice on the 3^rd process step? That’s form dropoff.

However you go about it, in my experience time spent observing will provide very useful inputs towards optimizing your site, including:

1. Valuable, sometimes subtle insights into your audience, that you might have otherwise missed
2. Memorable, illustrative stories to tell while socializing and selling a conversion optimization project within your organization
3. More humanized reasons to motivate you while pushing the project through

Resolution 3: Learn Something New

In 2011, I’d like to challenge each reader to test at least one site page or element other than a landing page. Keep plugging away at those, too, of course – but try spreading your wings and mix in other areas of your site as well. Here are a few simple but potentially rewarding suggestions:

• Update your error messaging to be clearer, nicer, and more visible. Customize the copy for each individual error. (See my previous articles on error optimization – #1 and #2 ).
• Make your shipping rates and return policy more visible (assuming they’re reasonable).
• Get new, more professional photos of your products.
• Replace any cheap stock photos with custom photography or higher-quality stock images.
• Create and add a demo video (or two).
• Make your page headings, site-wide, larger and more visible.
• Add social sharing tools on your product or service detail pages.
• Add social sharing tools and cross-promotions on your purchase or lead-gen form Success (or Thank You) pages.

Resolution 4: Don’t Make Resolutions – Set Goals

Every January, the population of my local gym suddenly doubles from an influx of sweaty, determined-looking newbies. Their passionate resolve typically lasts about 3 crowded weeks, after which all of us regular gym rats breathe a sigh of relief and get back to our usual routines.

And that’s often the problem with resolutions, no matter the topic – they’re all gasoline and no engine, all earnest willpower with no real planning, structure, or accountability in place to make it all happen.

So when it comes to improving your website’s performance, be sure you don’t fall into the enthusiastic resolution trap. Set specific, measurable goals, for instance:

• By February 15: I will enable a CDN (content delivery network) for our site, and review the results of a YSlow test.
• By March 1: I will address at least 5 issues from the YSlow report, and observe at least 5 real people trying to do a specific task on our site
• By March 15: I will launch at least one A/B or Multivariate test on a site page other than a landing page
• And so on…

Here’s to a successful and profitable year – I hope to see amazing conversion improvements for each of you in 2011!

Blame Expectations

Admit it: nobody really knows what a “web designer” does. Does she code? Set up e-mail accounts? Create logos? Write copy? Personally I know web designers who do all of the above and more, as well as those who specialize in a single, thin disciplinary slice.

The point is that web designers come with a wide variety of skills and training, and yet, somehow, there is a general expectation that all web designers should know how to design for conversion. It’s simply not realistic, and here’s why:

Conversion design is an advanced competency. It requires not only technical skill but also strategic thinking and a solid understanding of many disciplines. To use an analogy, for conversion design you need a general contractor, not a carpenter. A conductor, not a violin player… you get the point.

The successful conversion designers I know seem to encompass, to varying degrees, all of the following topics:

Depending on the project and the particular designer’s experience, the designer may execute in certain areas—such as incorporating usability principles into the visual design, and lead execution in other areas. But their cross-disciplinary way of thinking supports and influences all aspects of their work.

Blame Web Design Training

This is an aspect of expectations: we tend to expect web designer to have acquired conversion optimization training as part of their education. Well, think again. Unlike other, more established design specialties, there is no standardized training for conversion design. Shocking, I know.

As one example, take a look at the curriculum description for the “Web Design & Development” Bachelor’s program at Full Sail University:

“The Web Design & Development degree covers both front end and back end development. You’ll learn to concept, code, and publish your own standards-based content for a variety of formats, including the Web, cell phones and PDAs. Working on these projects you’ll be able to master the multiple languages used in interactive design such as XHTML, CSS, XML, ActionScript, JavaScript, and more in order to develop a well-rounded skill set. In addition, you’ll take courses that teach you how to design and produce the visual elements for a site. This includes the development of raster and vector graphics for the web, as well as how to draw and animate your own digital content using Flash.”

What’s lacking in this description? Almost everything that distinguishes conversion design. There’s no mention of usability, persuasion, testing, tracking or designing towards business goals. A secondary page throws in the words “accessible,” “intuitive” and “user-friendly” in passing, but the emphasis is on the what and the how, not the why. Strategic thinking—the why that guides CRO design—is missing.

Blame Yourself

I might as well get this one out of the way: If you’re a site owner or manager, and your designer isn’t producing what you need, the first place to point the finger is at the mirror. There are at least three managerial solutions to poor conversion design work:

Hire a different designer (or agency)—one who’s experienced in conversion design. This can be the quickest path to better results, but just make sure you know what to look for as a replacement. See “blame the agency mindset,” below.

But what if you’re nurturing an in-house creative team, or you’re loyal to (or stuck with) your current designer or agency? Try the next two options.

Feed your designer conversion food. Just as nutritional intake impacts athletic performance, conceptual intake affects creative production. So take a careful look at what information you’re serving your designer. Too often, designers are given guidance that’s too vague (i.e. “more webbish“) or too specific (“make it bluer“)—none of which is very constructive or actionable.

So ask yourself: have you provided solid, conversion-related input to your designer, or are you serving him rehashed marketing fluff? Here’s some of the conversion food designers need:

• Talk through your specific business goals, and what each is worth to the business
• Define exactly what will constitute success, and how it will be measured
• Provide background research about your primary audiences
• Share examples of successful conversion design
• Show the results of the last test(s)—especially if it’s one the designer worked on

Experienced conversion designers know to request this information—but the majority of designers will quickly get into the right mindset, given clear project requirements and constraints. And if that’s not enough, it might be time for the next option:

Educate your designer. Most designers don’t receive any conversion optimization training (see “blame web design training,” below). So send them to—or encourage them to pursue—education that fills in the gaps—usability, analytics, persuasion, testing—whatever areas they’re missing (see “blame expectations”). Of course, this depends on the business relationship you have with your designer.

Blame The Agency Mindset

Creative agencies have been called many things, but “pragmatic” and “ROI-oriented”—essential characteristics of a CRO mindset—usually aren’t among them. From what I’ve witnessed, clients are more likely to be steamrolled by agencies into a “rich experience” that’s vivid, cutting edge and award-winning than they are to have their business goals addressed.

Luckily, this isn’t true of every agency, and in others it’s changing. Slowly. More large agencies have staffed up with usability and analytics personnel, for example. It’s a good start, but too often UX and analytics resources are trotted out as agency assets that then never actually get applied to your project. There’s still no guarantee you’ll be working with a designer with the breadth of knowledge and experience you need.

So how can you tell whether a designer or agency understands CRO? One way is to examine the questions they ask you. Real conversion designers will ask a sheaf of questions that, on the surface, have nothing to do with design at all. For example:

• What are your business goals?
• How do you track and measure success?
• Who are your most valuable audience segments?
• What conversion issues does your site have?
• Have you done any prior usability research (and could I see the results)?
• Have you done any prior A/B or multivariate testing (and what were the results)?

Sound familiar? It should—this list is a near mirror-image of the “conversion food” you should serve your designer. If your designer or design agency doesn’t seem very curious about these concerns, you’re probably asking for serious conversion trouble.

OK, Blame The Designer

We need all kinds of designers. We need technical illustrators to summarize how our product works, and hand letterers to create unique branding. But if a designer chooses to generalize in web design, I believe they owe it to their clients to self-educate in conversion optimization right along with color theory and JavaScript. Hey, it’s only one more topic to master, right?

It’s not all about the client, though: in a sea of talented designers, conversion optimization skills are a competitive differentiator. Knowing how to come up with a concept and execute on it in a way that makes the client money? That’s something to brag about. And charge more for.

Trait #1: It’s Usable

Usability is the underlying framework for every conversion-optimized design. Think of it this way: if a web site were a house, usability would be the building code requirements that make structures work for human beings; doors must be so wide, ceilings so high, light switches wired in such a way that they don’t electrocute you when you visit the bathroom at night. It might not be glamorous or edgy, but usability makes things safe, easy, and efficient for users.

Since usability is so foundational, its fundamentals underlie much of what I look for during a CRO review. Take, for example, the basic usability concept of “affordance.”

Affordance: things should look like what they do, and be distinct from their surroundings.

Let’s look at two button designs for a quick comparative illustration of this concept:

Button #1

This button doesn’t look like a button, and it’s hard to tell where it begins and ends. It’s probably not going to be very effective, because visitors will either miss seeing it entirely, or not recognize that it’s a clickable element.

Button #2

This button looks like a button, and it clearly stands out from the background. Compared to button #1, it’s much more likely to be effective. Visitors will see it and understand what its function is.

Another usability concept I rely on quite a bit is “perception of ease-of-use.”

Perception of ease-of-use: if something looks easy, it becomes easy—at least in your mind.

Perception can have a significant effect on how users interact with a web site. We’ve all heard about how design affects perceptions of credibility (see the Stanford Web Credibility Research site). Design can also affect how easy something appears to be. And all else being equal, visitors are more likely to take an action that looks easy than one that looks difficult or complicated, and—possibly even more important—to remember it as being easy when they recall the experience later.

With that in mind, let’s compare two forms. They both do the same thing, but which one looks easier to use?

Most people agree that the form on the right looks simpler and easier than the original form on the left. The fields are larger and more clearly aligned, the labels are easier to read, and extraneous information has been offloaded to on-time displays that appear when the corresponding field is activated. All of these design techniques serve to make the form look less intimidating.

Trait #2: It’s Persuasive

An interface can be clear, obvious, and easy to use—and still fail miserably. Why? Because for CRO it’s not enough to be purely usable, it must also be persuasive. Usability simply paves the road—you still have to convince people to drive on it.

Here’s a good example of a usable failure. This is a screenshot of an actual banner ad I ran into somewhere in my online journeys:

Now, this is a highly usable interface. The gigantic orange button is obviously a button. It looks very easy to use. But why the heck would I want to use it? I don’t understand the offer, and the flimflam benefit statement “Free & immediate” is not motivating enough for me to try it.

Let’s compare with this interface from an insurance company’s landing page:

Here we have another highly usable interface, with a nearly identical-looking orange button. Like the previous example, I know exactly what to do here. The difference is that this offer includes benefits that mean something to me. I like saving money, and I like the idea of accident forgiveness. The design visually displays these benefits in a way I can quickly scan and understand.

Trait #3: It’s Properly Prioritized

A design can be usable and persuasive but still fall short of being conversion optimized. How? By failing to help visitors understand the differences between options. This challenge comes into play whenever there are multiple choices or calls to action presented on a page.

For example, take a look at this example:

This example is beautifully designed, quite usable and somewhat persuasive, but all the options are equally weighted, visually speaking. The icons are attractive but empty of meaning. The contextual information is contained in quite small, dense-appearing text that takes some time to read and compare. Essentially, this design provides very little prioritization for visitors.

In contrast, consider this prioritized example:

In this design, the center plan, tagged “Most popular”, is larger and a different color than the others. This gives the visitor a visual anchor—a place to look first—as well as a point from which to compare the other options. The design also provides a ton of context to help with a decision. Notice how the summary information about each option is easy to scan and compare quickly, and how the products have not only a specific name and price, but also a concise, descriptive tagline: “For big groups”, “For small teams”, etc.

Prioritization can also be applied to more general content to create an information presentation hierarchy that’s clear and effective. Let’s look at a quick case study to illustrate this more clearly.

Case Study Before: Poor content prioritization

Among other conversion issues, this page did not have a clearly prioritized content hierarchy, which made the content difficult to scan and digest. For example, it takes several moments to even determine what the offer is, exactly (a free white paper). The title of the white paper being offered is positioned next to the company logo, which is just confusing—it fails to connect the dots for visitors quickly enough.

Case Study After = a 25X conversion rate improvement:

In contrast, this version of the page provides a much clearer content hierarchy, prioritized like this:

1. What’s being offered (Free White Paper)

2. What the offer is called (the title) and what it looks like (the hero image)
3. What you should do next (the call to action and form action area)
4. Why you should listen to this company’s opinion (the blue credibility splash icon)
5. Summary features (the bullet points)
6. What the challenge is, and how this offer helps solve that challenge (the first 2 paragraphs)

In this case, the re-prioritization of content truly drove the design, and the synergy between the two produced amazing improvements for the client.

In Summary

These are only three of the characteristics I think conversion-optimized design must have in order to be successful. Disagree? Think I should’ve prioritized (ahem) a different trait? Let me know in the comments below—I love a good lively discussion.

The Current Visual Design Is Hopeless

This is more of a rant than a point: I think I’ve looked at one too many ugly web sites this week. But may I just throw out there for consideration—why bother tweaking an obviously substandard page? One of the reasons to run tests is to discover whether a hypothesis is true. But what if there’s no doubt as to the outcome? What if a design is so bad there’s no question a simple design update will improve performance?

I’m talking about design that ignores basic best practices, such as this actual home page:

We have to admit to ourselves that some designs are just not ready for tweaking and testing. In the example above, where would you start? Would you try different colors for the content box borders? Would you change the word “find” to “search for” in the nearly invisible call to action? Add a big red action button? None of those changes would fix this page’s fundamental issues. But a solid redesign could.

An experienced visual designer will, just by virtue of training, lay the foundation of a well-optimized web page. They’ll create a professional, credible appearance, with clear structure and good visual hierarchy. They’ll align content to a grid and add content-rich images. Immediately, things will be better—and there’s no need to test it.

If you’re not sure whether your page or site falls into the “too ugly to test” category, ask a designer you trust to be brutally honest with you, or do a quick comparison of your competitors’ web sites. Take care of the basics first. Thank you.

You Can’t Make The Indicated Changes For Improvement

Many conversion optimization projects end at an unexpected time—during the presentation of successful test results. We’ve been there. Unaware that the project is already over, we’ve floated on a euphoric 50% conversion rate improvement, thinking that by sheer strength of numbers the proven changes will be fast-tracked and implemented. Then we learn that there are no people and no budget for implementation—only for testing.

Too few companies are both open and able to change. For some it’s a simple matter of inertia; as Paco Underhill put it in The Science of Shopping, “Not every organization welcomes data, especially when it may disagree with long-held beliefs and traditions.”

For other companies, a long deployment cycle or conflicting political goals stop conversion improvements in their tracks. In those cases, it’s unfortunate that test results don’t have any super powers of their own—if only numbers could stop speeding naysayers and leap tall corporate silos with a single bound!

One solution to dead-end testing is to plan for implementation at the same time you plan a test. As you write your hypothesis and create your test plan, ask, “If this blue button wins, how will I get it pushed to the production site? If this new page template wins, who needs to be involved with updating the CMS? Can I make the change myself, or do I need to hire someone?”

Your test plan may change or shrink as a result. You might strip out some nice-to-have options. But the overall effectiveness of your conversion optimization will be improved. No more dead-end tests!

There’s Only One Person On The Test Team: You

Conversion tests shouldn’t be limited to the skills of a single individual. I find it odd that while other, more mature industries acknowledge the need for a variety of roles in executing complex tasks, the web industry continues to hold up the solo jack-of-all-trades hacker or webmaster as an ideal. Doctors aren’t expected to perform surgery, run the front desk, and write their own scheduling software—why is the expectation so different for internet-related work?

The “do it all yourself” mindset is encouraged by some test platforms, too, with marketing that emphasizes their ease of use. Google Website Optimizer, for example, touts itself as requiring “no special software,” letting you “begin your first experiment in minutes.” A competitor, Visual Website Optimizer, uses the tagline “world’s easiest A/B testing software.”

Now, don’t get me wrong—both of these tools are useful and worth checking out. But the implication in these and similar claims is that if you have the right test platform all the rest—from strategy to design and results interpretation—will somehow fall into place on its own.

It’s a mindset that cuts two ways. On one hand it helps businesses overcome inertia and get the optimization ball rolling (finally!). That’s a good thing. On the other hand, though, it oversimplifies and even marginalizes the testing process. Expectations are set—testing can be easy and quick, therefore it should be easy and quick. And you should be able to run it.

But eventually you’ll run out of easy and quick tests to run. After all, there are only so many different button colors and headings you can try. And for projects that are more complex—and worthwhile, in my opinion—than an image swap, you’ll need more at your end of the field than a testing tool and your wits. You’ll need a team.

Who should be on your team? As an example, our larger projects typically include these core roles:

• Analyst: gathers and analyzes performance and financial data
• Test strategist: plans and manages the testing roadmap
• Project manager: keeps individual roadmap initiatives moving forward
• Usability researcher: gathers and analyzes audience intelligence
• Visual designer: interprets test objectives into visual elements and layouts
• Developer/interactive designer: interprets test objectives into interactivity; supports complex test installations and tracking requirements

Of course, your team might start out smaller. Roles can overlap. But the goal is to extend your reach so you aren’t restricted to only what’s easy and quick. Try new, difficult, and worthwhile ideas. Stretch. That’s when the real fun starts.

The shipwreck

In my experience, many successful conversion optimization projects come down to fixing what can be fixed, rather than everything that should be fixed. You should overhaul your site design so it doesn’t look like a refugee from the 90’s. You should change out the CMS, content hosting and server settings so your site responds more quickly than peanut butter in a snowstorm. But due to monetary or political restraints, none of those things is going to happen this year, or possibly even next.

Or, you should take the rogue approach: gather a team and work nights and weekends to create stand-alone landing pages or a micro-site to prove the concept of conversion rate optimization. But where do you get enough traffic—the right kind of traffic—for a timely, statistically significant test? With what budget? And the list of things that can’t be done goes on and on.

At this point, marketing despair would be understandable. But all it means is that it’s time to get creative, and make do with what you have.

The waterproof match

Site-wide CRO takes a particular kind of mindset. Instead of limiting ourselves to a single test page, we have to think systemically. We look for individual elements that are both common enough and influential enough to have a strong aggregate effect when updated. Items that aren’t too difficult or politically “hot” to change. We establish broad success metrics—site-wide registrations, cart additions and sales—while still tracking other, more granular stats when it’s valuable and makes sense.

Once you look at your site this way, opportunities begin present themselves. The places we often start are the following:

• Button styles
• Call to action styles
• Headline styles
• Grouping and separation styles (lines, backgrounds, buffer space)
• Link indication styles
• Form styles
• Removal of distracting items
• Insertion of key promotions & messaging

The signal fire

The elements listed above are pretty basic, but the results we’ve seen from changing them site-wide can be very exciting. For example, in the following client project we had this outcome:

We made: ~15 small site-wide changes

Result: a 20% increase in conversion rate (site-wide sales). Millions in incremental revenue.

If that doesn’t make you want to run off and start a conversion fire on your own site, well, it should.

The rescue helicopter

Of course, once you’re ready to move forward with a site-wide CRO test, the practicalities must be addressed. How, exactly, do you enable changes across all pages of a site, while maintaining a consistent experience for each visitor? Agile companies with strong data analysis skills and relatively low reporting requirements can get away with running a serial A/B test—simply making changes live, then comparing results with past performance. But this approach just isn’t feasible or recommended for most organizations.

We’ve used several different solutions, but for this particular project we employed the SiteSpect platform. SiteSpect allowed us to target specific items site-wide via an admin interface, without having to go into the code and surround each element with identifier tags. We were also able to segment traffic easily.

The flight

Here, then, are examples of the 15 or so specific changes we made for this client’s site, resulting in the 20% increase in conversion rate:

Change example #1: Bigger, clearer buttons

One thing I love about buttons is that while they’re a powerful conversion lever, they’re usually super-easy to change and don’t invite the drama or controversy of, say, a home page image or header design. Tell a VP you want to change the site navigation bar, and chaos erupts. Tell them you want to change how a few buttons look, and the likely response is, “Meh, buttons? Sure, whatever.”

For this project, we made all of the main call to action buttons larger and more prominent. These simple changes impacted every sub-category page, every single product page, every cart view, every process step on the site, and the effect added up:

Change example #2: Smaller, less obtrusive buttons

Not all buttons are equally important, of course. For example, this client’s cart page included buttons to remove products from the cart. We wanted this functionality to be available but visually de-emphasized so it didn’t distract visitors from the primary task flow. Here’s the update we made:

Change example #3: Clearer content hierarchy and grouping

On a number of pages, the content clarity suffered from poor visual hierarchy. We targeted headings—adding them where needed and increasing their visibility. The visual change was accomplished with a simple CSS style update. In one case—the cart page, we also changed the copy itself:

In this next example, we inserted a subheading on every product detail page. The new subheading visually grouped together the product options and made the page content easier to scan and understand.

OLD product options display—no sub-heading:

NEW product options display—with sub-heading:

Change example #4: Add motivating promotions

Many companies don’t do a very good job of promoting valuable offers. In this case, the client offered free shipping and a wonderful return guarantee policy—but neither were visible enough on the site to be useful. We inserted a promotional icon that persisted across the cart and checkout section of the site:

Change example #5: Remove extraneous stuff around the cart and checkout

In this case I don’t have a visual for you, but imagine a typical 3-column e-commerce CMS layout. In the left rail—a long, long list of product navigation and specials. In the right rail—a mini-cart, news mentions, social media links, and a photo of the CEO. On the cart and checkout pages, we simply removed as much as possible from both rails, visually cleaning up the conversion pathway.

The sweet, sweet airport tarmac

The upshot? If you’re stuck with few optimization options, consider giving small, site-wide changes a try. Conversion rescue might be closer than you think.

This article is second in a series I began in July, with Turning Errors into Opportunities. In that article, I examined some ways to not only improve the effectiveness of error messages, but even go a step further and optimize them for conversion. Here, I’ll take a look at why so many sites have terrible error experiences, and who should be in charge of fixing it.

Why the error experience is important (continued)

As I mentioned in my first article, a poorly designed error experience is similar to poor customer service; the “rude saleslady effect” can compound the original problem, cementing the experience in a visitor’s mind. What does this mean? It means the visitor will remember the problem. Even worse, the visitor is very likely to tell his or her friends about it.

In recent study of more than 75,000 people, the Customer Contact Council examined the links between customer service and loyalty. From that study, titled “Stop Trying to Delight Your Customers,” comes a sobering set of statistics:

• 23% of customers who had a positive customer service interaction told 10+ people about it.
• 48% of customers who had a negative interaction told 10+ people about it.

Perhaps we already knew this instinctively, but what those numbers tell us is people are basically twice as likely to complain as they are to praise.

Given those kinds of stats, let me loosely quote the great Clint Eastwood and ask, “Do you feel lucky? Well, do ya?” Put another way: Is your brand so strong, your site so dominating in the marketplace, that you can risk poor PR? Because your site’s error experience could be generating negative attitudes and word of mouth about your site and company, without your even being aware of the reason or the source.

Why do so many sites have bad error experiences?

If the error experience has such a significant potential impact, why do so many sites execute on it so poorly? Aren’t the site owners paying attention? Surely they didn’t give the green light to that rude, dismissive tone, that nearly invisible design treatment, that complete absence of any helpful instructions… right?

I’d like to believe that these next examples never crossed anyone’s desk for review and approval: Example 1: an error that displayed at a prime conversion moment—during a ticket purchase attempt.

Example 2: Unknown, unsung site. My response: “So 1990’s!”

Example 3: an error message shown on the payment page of an e-commerce site. The “error” was a typo in the credit card number, but how could anyone tell, reading this message? Assuming they noticed it in the first place, of course.

Example 4: An all-too-typical JavaScript popup error message, complete with odd grammar and suspicious spelling.

Example 5: Poor handling of an empty search results set. Where’s the conversion love?

As I said, I’d like to think these error messages never received any attention at all, beyond their initial coding. And for many sites, that’s exactly the problem. Typically, no one is specifically tasked with designing and optimizing error experiences.

Why is that?

Reason #1: We’re all too darn positive

Yes, that’s right, I’ll say it—every member of the web site team is too optimistic. We have to be, in order to believe we can build and grow a successful online business these days. And as a result of this “can-do” attitude, we don’t want to think our uniquely beautiful, powerful and soon-to-be-profitable web site will have problems. The error experience isn’t part of our critical path—we’re focused on making all the big exciting stuff—our cool proprietary app, landing pages and the checkout process—work.

I hate to be a downer here, but it’s time we look at the gloomy side of life for a moment. Errors are inevitable, and the sooner we accept this depressing fact the sooner we can begin to change the effect errors have.

Reason #2: Error messages are invisible

Error messages are part of a site’s hidden, internal workings. For sites developed on a CMS platform, error messaging is often scattered across a tangled nest of code modules—difficult to find, much less aggregate and review. And for most small- and mid-sized site development projects, errors typically aren’t called out in the specs brief, presented during the design or copywriting process, or included in a review checklist.

So who sees error messages?

Customers, of course. But let’s assume that they shouldn’t be the first or only ones to do so.

Who else sees error messages? Developers are often the first to see them. Possibly visual designers will seem them, if the development team calls for an “error color” to use. And the quality assurance team (assuming there is one) will see them.

But should any one of these three teams be responsible for the error experience design? I’d argue no, and here’s why: left to their own devices, developers will write cryptic messages that make heavy use of words like “grok” and “runtime”, while designers (and I’m as guilty of this as any) will spend a disproportionate amount of time making the text look pretty. The QA team, for its part, is there to review against a defined checklist, not to perform an open-ended user experience review.

All three teams should be part of the process, but they need clear criteria around the error experience, so they know how to code, design and judge it properly.

But back to an earlier question—who’s responsible for this set of criteria? And what should those criteria contain?

The who

Here’s a list of the people I think should be involved in error experience design, and what their responsibilities and criteria should be. Not too surprisingly, the responsibilities are divvied up between the usual web teams—there’s no need for a dedicated error czarina here, I’m simply adding error experience design as an explicit task for each team.

Project or Program Manager: Responsible for putting error experience on the calendar and on the checklist. Ensures that errors are:

• Defined and catalogued
• Prioritized by importance to business goals and ROI
• Included in the development and QA timelines

Usability Practitioner: Responsible for error definition, UX education and review.

• Uncovers non-obvious user interactions that should be defined and treated as errors
• Provides best practices for error experience design
• Provides UX input for iterative drafts of copy, visual design and interactivity

Copywriters: Responsible for what errors say. Ensures that the error copy:

• Apologizes
• References the exact error that just occurred
• Maintains a clear, branded, audience-appropriate tone
• Provides helpful, actionable, conversion-optimized next steps specific to the error

Visual Designers: Responsible for how errors look. Ensures that the error design:

• Attracts attention
• Indicates the location of the error
• Visually reinforces the company brand and tone
• Visually emphasizes the available next steps

Developers: Responsible for how errors act. Ensures that the error functionality:

• Triggers errors at the most appropriate moment (per defined business rules)
• Enables interactivity that enhances and supports the desired visual display and next steps
• Logs debugging and other technical information

The Result: Awesome, conversion-optimized error messages

When the combined genius of a web team is turned to optimizing the error experience, wonderful things happen.

Here’s an interesting example from a current conversion optimization project of ours. This simple display involved input from UX, development, copywriting and design before we deemed it good to go:

Part 1: Attract attention to the error. The message appears in a JavaScript overlay, using a contrasting color combination. Notice we’ve made the text a template, so it can be easily re-used for other errors related to the form.

Part 2A: The form field without an error indicator.

Part 2B: Indicate the error, keeping it as clean and simple as possible.

A few final examples

I’ll leave you with a few more inspirational examples that provide pointers in the right direction:

Example 1: The copy identifies the error, communicates the site’s unique tone with humor, and guides the visitor to several next steps.

Example 2: Simple and visually clear indication of where the visitor needs to correct errors.

Example 3: The display attracts attention; the text apologizes and describes a clear path to solve the issue.

Example 4: Attracts attention, explains what happened, and describes a clear next step. More subtly, the site effectively addresses an error that many sites don’t deal with very well—a session timeout.

OK, that’s it for this time! If you come across great—or horrible—error examples, be sure to call them out in the comments below.

In this article I’ll take a look at the concept of error experience design, why it’s important from a business perspective, and a few ways to turn an error into a conversion opportunity.

Why focus on errors?

I have to admit that part of my motivation here is purely selfish, as usual. I, personally, want a better, more enjoyable web experience. And errors, as the myriad stinging gnats of the web environment, should be made better so I can be happier. Simple as that.

I’m tired of seeing ugly, unfriendly errors like this one:

Or this one:

Or even this one, which got a chuckle out of me when, at first glance, I thought it read, “Bad, bad server!”:

I do want to see more well-design error displays like this one:

And this one:

But personal desires aside, there’s a serious business aspect to this as well: errors cost money, and poorly-handled errors cost even more money. A poorly designed error experience compounds whatever damage has already been inflicted. I’ll call it the “rude saleslady effect.” You know the one I mean—she screws up your order, then instead of apologizing she snorts disdainfully and mutters at you under her breath. Her rudeness helps cement your negative feelings in place, thereby reducing the likelihood that you’ll ever patronize that particular 7-Eleven again.

While not every error can be anticipated and prevented, we can mitigate the damage and even reverse it, with optimized error content and visual design. Let’s look a bit more closely at both aspects.

Getting the content right

As I was doing research for this article, I was happy to find a ton of best practices for writing error messages. Even if they aren’t followed nearly as often as I’d like. I’ve linked to several of these resources at the end of this article, but here’s my own take on error message guidelines, from the perspective of visitor questions.

We believe what we see

There’s quite a bit less written about the strictly visual aspect of an error display. Which is a little surprising to me, given the potential influence of graphic details.

One of my guilty pleasures is the show Lie to Me, which is all about solving crime with small details—specifically, by interpreting minuscule changes in a person’s face and body language. “Aha! You’re lying to me right now, aren’t you?” is a common line. What fascinates me about this show is the underlying concept that even very small visual changes can communicate volumes of information. A tiny twitch of the mouth, and BAM! You’re nailed for murder.

With much less drama attached, the same basic principle applies to error experience design—small visual details add up. If we wish to soothe, inform and guide our visitors after an error, then let’s do it graphically as well as textually.

Here are a few examples.

Example 1: An enterprise site’s error template

While we were reviewing analytics reports for a recent conversion optimization project, we noticed that 1.1% of all page views were of one particular error template, one that was used for a wide variety of error messages.

Now, 1.1% of page views might not sound like a big deal, but for this heavily trafficked site that small percentage scaled to over 41,000 views a month, on average:

To make matters worse, those 41,000 views a month were of this poorly-optimized error template:

From an IT perspective, this is a great template. It’s lightweight and functional. It dutifully and dynamically reports out on the type of error, when it happened and some unique string identifiers. All highly important and useful to the site developers, but nearly incomprehensible to site visitors looking for a vacation. Aside from a single text link to the site’s home page and a phone number included only because it was part of the master CMS template, there’s no attempt to soothe, inform, or guide the potential customer.

Because of the sheer volume of views this template received, it ended up fairly high on our list of conversion recommendations. We also mocked up a rough design direction to make it easier to explain and discuss with the client:

Here’s a quick breakdown of what this mockup is meant to do:

Soothe: A positive image (but one that’s not too exuberant) sets a calm, pleasant tone. It’s a simple step, but one that can influence your visitor’s mood and help them be more receptive to your explanation.

Inform: Large, clear text calls attention, identifies what happened, takes responsibility and offers an apology.

Guide: Several “next steps” links are listed. These are given their own heading and a buffered space on the page, so they stand out clearly. Additional text encouraging a phone call is included below, again in a buffered space.

Technical: a client requirement was to retain the technical information display. So we visually de-emphasized it by shifting it just below the main display area and reducing the size and contrast of the text.

Example 2: Comparing 404 Page Not found errors

USA Today 404 Error Page:

While not the worst 404 error page I’ve seen by a long shot, this page has received only minimal attention. The effect is somewhat dismissive, as in, “We provide tons of links in the CMS template, why bother with anything else?” It does the basics, but that’s it.

Time 404 Error Page:

This page introduces an intriguing conversion optimization idea: Monetize errors with an ad. While I’d normally cringe at the thought of putting an ad on an error page, this one is handled well. Here’s what makes it workable:

• The content is well-written and clear
• There’s plenty of room between the content and the ad, so the ad doesn’t overwhelm the error content.
• There are several clear and helpful paths a visitor can take, each with its own buffered space to help separate them from each other.

HP.com 404 Error Page:

This example does a great job (full disclosure: we consulted on the project) of balancing the needs of SEO, users and business. The content informs and guides, while the visual layout emphasizes the desired conversion paths: a search box and a set of keyword-rich links to prioritized product categories.

Questions I still have

While it’s fun and rewarding to analyze and design error experiences, I’m left with a number of larger questions I’d like to explore in a later article. For example:

Question 1: Who should be responsible for designing the error experience?

In most organizations, error handling is the responsibility of IT. Errors are often not part of the design process, and therefore aren’t given attention by copywriters, marketers or UX designers. How can we fix this?

Question 2: How do we prioritize error experience design?

Errors can cost businesses revenue (both current and future), reputation loss, etc. But not every error is equal, and unless we can assign a dollar figure to at least each category of error we won’t know for certain how to prioritize efforts to optimize them. Which brings us to the next question:

Question 3: How do we track errors in a way that’s meaningful to business?

Most CMS and e-commerce platforms aren’t set up to report on errors, much less tie them to a dollar figure. Would a simple approach such as segmenting analytics stats by error events (or error page views) provide enough actionable intelligence?

I’ll leave you to mull on those questions, and would love to hear any thoughts you might have on any of them.

Resource links:

• An interesting case study of the financial return of improved error messages: http://www.thinkflowinteractive.com/2009/02/16/250000-from-better-error-messages/
• Microsoft Windows’ error message guidelines: http://msdn.microsoft.com/en-us/library/ms679325
• Jakob Nielsen’s error message guidelines: http://www.useit.com/alertbox/20010624.html

What is a thank you page?

Broadly put, I define a thank you page a the page (or view) that displays immediately after an interaction is complete. For the sake of brevity I’m going to focus on only three types: post-sale, post-lead-generation (i.e. a white paper download) and post-donation.

Why bother optimizing an “after-the-fact” page?

Some of you will be wondering if I’ve gone off the deep end here. After all, the thank you page isn’t even really part of a sales or lead-generation funnel, right? It only exists so we have a place to put our conversion success tracking code and display a receipt. And even the receipt’s kind of a nuisance, actually—we only show it so customers don’t call us.

I admit these pages wouldn’t be my first conversion priority—most sites have other, more urgent issues. But as part of an ongoing, holistic conversion optimization program, thank you pages are worthy of attention. Here’s why:

Every well-qualified visitor sees the thank you page. The audience for this page is your company’s leads, new customers/donors, and repeat customers/donors. You’ve already gained some of their trust and interest. Yes, there are segments that will be less valuable than others, but generally this is well-qualified, high-value traffic.

The visitor is in a receptive state of mind. After completing a task successfully, there is typically a short time period—a few seconds—during which the visitor is casting about for the next thing to do.

The visitor has just shown they trust you—at least a little. The thank you page is a well-timed opportunity to build and extend that trust.

The visitor has demonstrated an interest in what you offer. The thank you page is an opportunity to extend that interest to other offers or interactions.

Let’s jump in and look at some examples.

Example 1: Fandango—getting all the basics right

A thank you page, of course, has some basic things it should accomplish:

• Say thank you
• Tell visitors what just happened
• Tell them if any further action is required (i.e. print or download something)
• Provide transaction details (i.e. a receipt, if indicated—on the page and/or by email)
• Provide clear paths to typical next steps (i.e. print a trip itinerary)
• Set expectations—tell them exactly what’s coming next (i.e. an email or phone call)

These features reassure and smooth the way; without them, visitors could become too distracted or confused to accommodate any additional optimization.

This Fandango thank you page appears after purchasing movie theater tickets on the site:

FANDANGO

How this page fulfills the basics:

• The first sentence tells visitors what just happened, reassuring them that the transaction was successful.
• Text instructions clarify what to do next.
• The most important next step—printing the purchased tickets—is visually prioritized as a large, clearly-labeled button. Very helpful.
• An alternate method of getting the tickets is described.
• Transaction details are present—the movie, theater, date, time, and purchase amount.

Beyond the basics

Sadly, many thank you pages I’ve encountered don’t get even the basics right. But if the fundamentals are in place on your site, it’s time to ask: What else, exactly, can we do on our thank you page? Here are some examples of approaches you could take, grouped by whether they are likely to have a direct or indirect impact on revenue:

Direct revenue impact:

• Cross-promote
• Ad display

Indirect revenue impact:

• Encourage social sharing
• Offer more engagement opportunities

Examples 2 & 3: Bliss and Amazon—cross-promote

On e-commerce sites, cross-promotions typically happen on item and cart pages. But even after a completed transaction, relevant cross-promotions on the thank you page can be very effective.

We’ve found this approach to work well for B2B and other lead generation companies, too. After a form submission, the thank you page can cross-promote additional white papers, studies and other resources related to the primary offer.

Let’s check out the examples:

BLISS

Bliss has a minimalist approach to their thank you pages, and provides a receipt only via email. This serves them well. It shifts emphasis to their cross-promotion items, which are placed nice and high on the page. Fight fat with caffeine? Who could resist?

AMAZON

Amazon, knowing all kinds of stuff about what you like, has done a fantastic job of supplying highly relevant and tempting cross-promotions on their thank you page. Especially if you’ve shopped there as much as I have. And they don’t stint on the number of cross-promotions—why should they? There’s no rule that says a thank you page must be a particular length.

Examples 4 & 5: Ticketmaster and Barnes & Noble—ad display

Ads can be a primary source of site revenue, and the thank you page can be an ideal place for them. Again, remember at this point the visitor has completed one task and is looking for something else to do—an ad might be just what they were looking for.

One caution—the ads shouldn’t overwhelm the basics. These next two examples strike a good balance:

TICKETMASTER

Ticketmaster devotes nearly half the page width to an ad display area. In addition, a lower text ad brackets the basic thank you page content. All of this could result in a confusing, frustrating page, but dividing lines and plenty of padding help separate and group content by type. As a result, the page looks clean and orderly. An additional benefit of a good, clear page layout? The ads themselves stand out well, too.

BARNES & NOBLE

Barnes & Noble uses about a third of the page width for an ad column, and also includes a text ad below the basic content. Similar to the Ticketmaster page, the content is visually well-organized and clearly separated by information type.

Examples 6 & 7: Kiva and Ticketmaster—ENCOURAGE SOCIAL SHARING

What else could a company want from a successful conversion? How about even more leads and customers? That’s where the power of social sharing comes in, and the thank you page is a perfect opportunity to give visitors a way to spread the word.

KIVA

After a donation, Kiva puts social sharing front and center with an unusual thank you page layout. The “receipt” portion of the page is shifted to the right column, while the left 2/3 of the page presents a call to invite friends to Kiva via email. The page doesn’t ignore the basics, either—it says thank you, tells you what just happened, and explains what will happen next.

Bonus points: the page offers several additional ways to engage with Kiva via social networking, a feed, and a path to “More ways to support Kiva”.

TICKETMASTER

I’m bringing back this example to point out how Ticketmaster presents the social sharing links with a call to action: “Tell your friends you’re going.” This one line of text hooks into the visitor’s excitement after completing a fun purchase. It’s exactly the right thing to say, at exactly the right moment.

Examples 8, 9 & 10: Apple—offer more engagement opportunities

One last idea we’ll look at here is using the thank you page to offer additional ways for the visitor to interact with your company.

APPLE

At the time of this purchase (about a year ago), the Apple Store offered two engagement opportunities in addition to “continue shopping”—a newsletter and a request for feedback, both positioned below the basic content.

NON-LINEAR CREATIONS

After a white paper download, this company uses the thank you page to encourage contact and exploration of their services and project portfolio. Bonus points: the client logos help reinforce credibility.

SWIM OUTLET

After a purchase, this site’s thank you page covers the basics, then promotes a partner networking site, Swim.com, encouraging customers to join.

Thank you!

That’s it! You’ve successfully read this article. If you enjoyed it or learned something useful, tell your friends! You’ll also find more great articles along similar lines from my fellow Conversion Science columnists.

Most of you know what I mean, because you’ve experienced the evil firsthand. Maybe you’ve even designed it. Experiences like these litter the internet, raising blood pressure around the globe:

• We click on a free offering, only to discover later there was a recurring charge after 14 days.
• We click on a product link, only to find something completely different—and more expensive— pre-selected on the next page.
• We try to purchase something, only to be assaulted with page after confusing page of upsells.

I first started writing about evil usability back in 2007, with a short series of blog posts, and since then the techniques have only gotten… more. More sophisticated, more frequent, more aggressive and above all more optimized. It’s rather annoying, because I know it’s partly my own fault. All my work championing the causes of usability and conversion, and what do I get in return? An increasingly predatory web experience that leverages the very techniques I’ve advocated, but uses them to conceal, mislead and cause me to accidentally purchase crap I don’t want or need. That’s irritating.

A definition of evil

Let me step back for a moment and explain what I really mean by “evil.” I’m not talking about truly malevolent interactions like phishing and malware, that actively aim to harm users. And I don’t even mean pushing a ridiculously misleading product like this one:

Evil in the conversion sense is more a mismatch of goals, along the lines of this hackish definition:

“evil: adj. As used by hackers… evil does not imply incompetence or bad design, but rather a set of goals or design criteria fatally incompatible with the speaker’s (goals or criteria).”

So conversion evil-doing has more to do with business goals, the degree to which they differ from user goals, and how vigorously a company tries to forge an agreement between the two.

Take Facebook, for one very public example—the recent furor over privacy changes on the site illustrates a broad misalignment of goals. The goals of Facebook users are pretty simple—they want to share funny cat photos and play MafiaWars. They wouldn’t have cared much about Facebook’s ambition to be the uber-hub of the web, except that the path to that goal railroaded right through their online privacy.

Evil conversion is more active and granular—it misdirects individual user actions in order to meet a business goal, with or without the user’s understanding.

Examples

Let’s take a look at a few examples of evil conversion I’ve run into recently, and examine how they twist conversion principles to the dark side.

Example #1: RealPlayer—Evil button prioritization

Quick disclosure: I despise RealPlayer. I’ve despised it for years. But that’s a long, painful story I won’t go into here.

Last fall, I had to reluctantly re-install it for a client project that included RealPlayer content. I searched for “free RealPlayer”, and below is the page I found. Can you tell me where to download the truly 100% free version of the product?

If you guessed either of the large orange buttons labeled “free download,” you’re wrong! Your reward? A surprise monthly charge after two weeks. Here’s the correct link, up in the far top right (I’ve added the red arrow so you can see it):

This is an evil interpretation of a conversion best practice I’ve often touted:

“Prioritize and differentiate your buttons.”

Yes, it usually helps visitors if your important buttons are prominent; other buttons less so. In this case RealPlayer certainly has a clear grasp on their priorities, but the page design guides visitors to take an action they may not have intended. It provides only the illusion of user choice and control.

Addendum: since last fall, RealPlayer has updated this page to be much more user-friendly. See the improvements here.

Example #2: Kodak—Aggressive, unclear up-selling

Also a few months ago, I succumbed to Kodak’s claim of cheap, planet-saving ink, and purchased one of their newer printers. Their mini-site provided several examples of evil conversion.

To begin with, after adding a printer to my cart I had to wade through three up-sell pages before reaching the “real” checkout page. These included an especially creative offer of a second printer identical to the one I was purchasing:

Now these pages weren’t necessarily evil in and of themselves. Offering related items can be valuable and helpful for the visitor. But on each step the path to avoid purchasing more things was visually de-emphasized, hardly even looking like a button at all:

While less evil, in my view, than the RealPlayer example, the result is still likely to be user confusion and a number of unintentional purchases. Again, the path is being tipped to benefit the company, not necessarily to aid the visitor.

Example #3: Uhaul—Forcing opt-outs to avoid a purchase

My colleague Lance Loveday first mentioned this example to me over lunch, complaining of the “terrible” rental experience he’d had on Uhaul.com. And though it turned out he was more offended by it than I was, I had to agree with him on principle.

This site takes aggressive up-selling, adds evil button prioritization, and mixes in forced opt-outs. Below is one of several participating pages:

If you’re not careful here, you’ll mistakenly rent the pre-selected dolly and furniture pads, adding $17.00 to your total.

Not so evil, you say? The next page was even worse, pre-selecting nearly $50.00 worth of rope, gloves, and tie-downs:

This is a twist of the conversion principle “Make It Easy To Do”. Oh, yeah, it’s easy to purchase all these additional items all right – but the optimized action, again, is more beneficial to the business than to the visitor. On both pages I managed to avoid the large, conversion-optimized buttons and find the top-right “I DO NOT need these items” text link fairly quickly, but I’d been pre-warned by Lance. I had to wonder: how would an average Internet user fare?

The real question: How far should conversion optimization go?

Probably the real irony in this is that I often find myself learning as much from evil conversion as I do from “white hat” resources (to use an SEO term). As a conversion practitioner, I can admire an especially well-done page layout and notice why it’s so effective, even if its goal misaligns with my own. I can even wonder whether a similar approach might benefit a client, and how to tweak it to match a different business model. I can feel the pull of the dark side.

Two things counter and balance the attraction:

First, evil conversion techniques have a short-term viewpoint and short-term payback. The underlying mindset is “It’s OK to manipulate the user, because we don’t need her after this transaction.” Companies that I prefer to work with don’t share this opinion. They understand the value of trust, and long-term customers, and know it’s not in their best business interest to earn their visitors’ hatred.

Second, as a user, I can remember the frustration, irritation, and yes, disgust that such techniques cause me. It makes me a better conversion specialist, one who can (usually) see the trick, understand the human impact, and bring that insight into my reviews, teaching, and designs.

Where will evil conversion lead? Probably to a continued escalation of coercive techniques, until poor business results, lawsuits or regulation force a retreat. Until then, we’ll each have to balance business goals with those of users, and decide what the right optimization path is. Those of us who pride ourselves as being true user advocates have an interesting time ahead.