Site Strategy: The Art Of Seductive Landing Pages (SearchEngineLand)

/// Site Strategy: The Art Of Seductive Landing Pages (SearchEngineLand)

September 29, 2011  |  Blog

People don’t just want to be educated about what you offer. They want to be seduced.

Yes, seduced.

Being seduced is an exhilarating experience. (If you haven’t tried it yet, I highly recommend it.) Yes, we want to be educated and make rational decisions that optimize our goals. But we also yearn to be romanced, enchanted, in love. We seek brains and beauty. Is that an unrealistic paradox?

It doesn’t have to be.

First, recognize that seduction is not synonymous with deception. Being seduced is fun. Being deceived is not. It’s unfortunate that shady advertisers have conflated the two. But the world’s best brands pursue “honest seduction,” touching us emotionally as a way to begin a genuine, mutually rewarding relationship.

For instance, Apple seduces consumers, and their customers love them for it. There’s plenty of educational content to be found deep in Apple’s website, but their home page, their retail stores, their emails, their advertising — all weigh heavy on the visceral, more than on the cerebral. Their seductive charm has helped make them the most valuable company in the world.

So while I fully recommend incorporating the best principles of content marketing in your conversion optimization — educating, informing, and leading thoughts — I implore you to communicate more than that. Impart the spirit of your organization, your brand, speaking to the heart as well as the mind.

Here are two suggestions to make your landing pages more seductive.

Wear A Sexy Page Design

The Web is a visual medium. Although factors such as search engine readable text and page load time are important, they should not override the primary objective of delivering an amazing customer experience.

To be sure, an amazing customer experience should load quickly, and it should contain meaningful, relevant copy. But it should also impress in ways that are worth a little extra load time and a little more interface love beyond plain text.

Since a picture is worth a thousand words, let’s look at an example:

The above page, from a landing page/microsite offered by the Centre for Arts and Technology school (disclosure: one of my company’s customers), is rich with relevant search engine text.

The page and its assets are a mere 244 KB (in actuality, closer to 143 KB when using common cacheable resources) and a decent Internet connection loads the whole thing in ~443 ms.

Nice. But a normal person (not us conversion science wonks) wouldn’t consciously notice any of that.

The target audience for this landing page is someone who is passionate about fashion design and considering a degree and a career in it. They want to find a program that will inspire them; that requires not just words, but the holistic integration of content and design.

The seductive soul of this page is the background image that underlies the main content area, translucently visible behind the copy and the form. But not distractingly so; it emerges to the foreground in the space between the two sections.

The flow of the blue/green lines and the line of sight of the model lead the respondent from the headline to the call-to-action, providing cohesion and unity. The imagery here isn’t decoration, sprinkled on after the fact: it’s the heart of the message.

Yet the technical implementation of this page is relatively simple, using a couple of CSS tricks. It’s not much more work than the boring “hero shot” cliché that cookie-cutter landing pages are infamous for, but the difference in impact is substantial. Combined with efficient Javascript for overlays and custom fonts, this lightweight page packs a heavyweight punch.

Does it work? In a case study recently published with my company, the Centre stated that their “conversion rates increased from 4% to as much as 19% by moving from single hand-coded page experiences to content-rich microsites” such as this.

Okay, you might be thinking, such seduction is fine for high-end B2C, but is it appropriate for B2B?

Encourage A Little Playful Exploration

This next example of a seductive microsite is by Dell (disclosure: another customer of ours), targeted right at a B2B audience — traffic driven to it from display advertising on The Wall Street Journal.

Here is the landing page that leads into the microsite:

Dell Microsite Example

Respondents are invited to explore seven different vertical B2B interests served by Dell. Marketers: think segmentation.

While it certainly wears a sexy page design, a dynamic and graphic-driven grid layout that visually communicates Dell’s innovation, this example also demonstrates the second suggestion for seduction: an invitation to explore.

Too often, content marketing is reduced to a flat page — a long, top-to-bottom article. That works if your audience is already committed to being educated on a topic, and in the mood to study. But to engage them earlier in the funnel, using a more interactive experience which encourages a little playful exploration, can be much more seductive.

On this Dell microsite, when you zoom in on a particular interest (for example, cloud computing) you are to taken to a topic page that has a number of features to draw visitors into interacting with it. I’ll describe several using this series of three screen shots:

Seductive Landing Page Example 2

There’s a topic-specific headline and introductory text in the center left of each page (first screen shot), and then three subtopics along the bottom.

When you hover or click on those subtopics, more detailed information slides up (second screen shot), including a deep link to richer educational content on that subject elsewhere in the Dell ecosystem.

Clicking “What people are saying” in the lower left zoom up a similar layer (third screen shot) with links to articles, webinars, and other social proof content.

There are three keys to making this work:

  • First, the discovery process needs to be effortless — the sliding and zooming springs from content already loaded in the page, so it happens smoothly and responsively.
  • Second, the things that are being discovered need to be optional choices. You don’t want the user to jump through hoops to read linear content or to complete a series of required steps. On the contrary, these discover-able nuggets need to save the user from sorting through material that isn’t interesting to them. For instance, if I don’t care about consulting services, I never zoom in on that subtopic.
  • Third, the discovery needs to pay off. The content that is presented via these zoom-able interactions needs to be meaningful. The novelty of the interface must serve the content, not the other way around.

Now, you may be wondering, this is cool and all, but how practical is it to implement this on a regular landing page budget?

To be sure, this microsite clearly took some work to pull together — the content as much as anything. But technically, it’s pretty straightforward. With advances in CSS, HTML5, and the amazing features in the jQuery and jQueryUI Javascript libraries, these kind of exploratory interfaces are within reach for even modest landing page projects.

And to assuage search engine concerns with this approach: (a) much of this Javascript wizardry can be cached using the Google Libraries API content delivery network, thereby minimizing page load time; and (b) all of the copy can still be plain text, to make relevance easy for a robot to detect.

You can promote great content, meet core search engine requirements, and be a little seductive at the same time — they’re not mutually exclusive.

By Scott Brinker

Original Article



Leave a Reply