Download these free resources
We'll treat your email address with the utmost respect and won't sell it, rent it, or let it stay up past its bedtime watching horror movies.
Our book is out—after 12 years in the making. It’s the ultimate guide to growing any web business.
(This is one of a series of articles, the first of which is here.)
In our last article, we described Steps 1 and 2 for selling complex products and services.
And we explained why some webpages need a lot of words.
However, no matter how long your page is, your visitors should be able to easily find the information they need. They shouldn’t have to read the whole page from start to end. A webpage should be long like a phone book, not like a Russian novel.
Your challenge is thus one of information architecture: How can you organize all the information so that visitors see what they need—and at the right level of detail—without getting bored? This is conversion at its hardest. It’s also extremely fruitful when you get it right. In the following sections, we present some techniques and concepts that don’t appear in copywriting books. They will help you a great deal.
“Separation of concerns” is a fancy name for when information is organized and encapsulated into modules. The concept is closely related to the phrase “a place for everything and everything in its place.” Separation of concerns is essential when you’re managing a lot of content. For website design, the modules can be paragraphs…
…or page sections…
…or pages, or groups of pages…
…or several levels of nested information:
By modularizing, you allow your visitors to easily find the information that they need, and to ignore the rest.
It’s hard to stress how important it is to organize information into an architecture that’s easy to navigate. Once a visitor is lost, it’s difficult to show them counter-objections. They’ll never find them.
Separation of concerns may seem obvious and straightforward, but once a company does it badly, a mess quickly ensues. We are fans of Ergotron sit-stand desks. You can see ours here:
However, whenever we recommend them to people, we struggle to find the right one on Ergotron’s website:
That’s because Ergotron has given each product variation its own page. The visitor therefore has to play a game of spot the difference between different product pages, many of which are almost identical except for a few differences. Most users don’t want to see product names like “WorkFit-S, Single LD Sit-Stand Workstation.” Instead, they prefer to see headings that reflect their current mindset, and which narrow down the choices—like “Do you have one display screen or two?” and “Is your desk in the corner of a room?”
The following hack is useful if you are unsure of the logic by which your products or services should be sold: Phone the company’s sales department, and ask an open-ended question like “I’m having trouble choosing which sit-stand desk to buy. Could you help me?” Then notice which questions the sales advisor asks. If they are good, they’ll ask questions that narrow down the choices. If they are great, they’ll have a mental logic tree that elegantly narrows down the choices in as few steps as possible. They almost certainly won’t ask what the website asks: “Do you want Product ABC, Product DEF or Product GHI?” Only a web marketer would do that.
There’s one more reason to clearly modularize your content: If information is hard to find for a visitor, it will also be hard to find for the website’s editors. So it will be even more likely to deteriorate over time. Poor separation of concerns tends to snowball. Some telecoms companies’ websites are messy to the point of being almost irrecoverably out of control.
Once your information is clearly modularized, you need to make it clear where one module ends and the next starts.
You can do this using a hierarchy of text sizes and formatting, as we do in the article you are currently reading, using the following techniques:
Another way to group information is to add background colors to page sections:
Another way to demarcate sections is to put information into boxes:
Good navigation helps users to find the information they are seeking. Navigation elements include horizonal and vertical navigation bars, tabs within pages, and on-page Johnson boxes (like the list of links near the top of this page).
Your navigation should reflect how your visitors would expect to find things. In the case of Amazon’s “fashion” department, for example,
The following example shows the navigation bar of StudentPosters.co.uk, which chose to organize its navigation in a novel way:
The example above demonstrates again that the modularization should reflect the visitor’s mental model—not the mental model of the website’s creator.
When we doubled the sales of the web app PhotoShelter, we managed to grow the sales by 12% by optimizing the navigation:
It’s important to use the right words in a section’s heading. Your words should concisely describe the contents of a section in a way that will be obvious to visitors.
The navigation in the following example from Vincent Flanders is outrageous:
Fortunately, quacking spinning cheese cubes never caught on. But a lot of navigation makes a similar mistake. The right-hand section (see below) in Microsoft’s navigation bar can be understood only by someone who’s already familiar with the products:
To a newcomer, the links “Microsoft Azure” and “Microsoft Dynamics” can’t be understood until after they have been clicked. Visitors who are new to the products might as well be clicking on spinning cubes of cheese.
You might find it useful to think of the above as “Kinder Surprise navigation”—named after the chocolate eggs that have mystery toys inside them. With Kinder Surprise navigation, you don’t know what you’re going to get until you’ve got it.
A visitor to Vincent Flanders’ website wrote…
It’s like a company’s answering machine saying, ‘You’ve reached XYZ Corporation. To hear what option #1 is, press 1. To hear what option #2 is, press 2.’
One might argue that some navigation is only for experienced visitors. In our experience, it’s more profitable to makes pages accessible to newcomers too.
Kinder Surprise navigation isn’t limited to navigation bars; it also applies to the headings of any page section. In the navigation bar above, if you were to select “Microsoft Azure,” you’d arrive at the following page, which has a Kinder Surprise headline: “Azure Friday.”
Kinder Surprise navigation makes sense only in hindsight.
It’s a common problem; it leads visitors into oblivion, and it kills conversions.
Here’s another example of Kinder Surprise navigation, this time for a spa resort. Notice how it’s impossible to discern what each option means without clicking on it:
The solution: Read all of your headings, including the tabs in your navigation, the heading of pages, and the headings of sections. Ensure that each heading would be understandable to a newcomer. Then, confirm that you were right
It’s often not enough for a heading to describe what’s in the module. It should also tease or spoil.
So if your page has a section of media testimonials, introduce it with a spoiler headline. That way, you communicate the message even to skim-readers:
If you definitely want the user to click through, use a headline that teases, not spoils:
Even many professional copywriters make the mistake of using categorization headlines when they should have used spoiler or teaser headlines:
1. If you’d like us to work on your website—to dramatically improve your conversion rate and profits (like we did for all these companies), then claim your FREE website strategy session. On this free phone consultation, one of our experts will discuss your conversion goals and suggest strategies to double your sales.
2. If you’d like to learn conversion for free, go to our “Learning Zone” page, where you can download templates of million-dollar winning pages. Or, if you’d like us to build your company’s in-house capabilities (not for free), then contact us and we’ll discuss your requirements.
3. If you’d like to work for us—or see why our team members love working for us—then see our “Careers” pages.
All of our articles are subject to our Testimonial Protocol, which is described here.
So far, we have helped to grow clients in 37 countries in 11 languages.
445 Park Avenue
New York, NY 10022
Phone: +1 (212) 829-5720
Fax: +1 (212) 658-9097
207 Regent Street
Phone: 0800 043 2650 or
+44 (0)203 368 6212
Fax: 0870 838 1135
Phone: 0800 043 2650 or
+44 (0)203 368 6212
Fax: 0870 838 1135
© 2019 Implementra Limited trading as Conversion Rate Experts. All rights reserved.