Killer landing page design

how to improve landing page performance and lead generation landing page design and landing page design principles
DavyGodwin Profile Pic
DavyGodwin,United States,Professional
Published Date:03-08-2017
Your Website URL(Optional)
Comment
Finding Opportunities for Site Improvement This part of the book is about problems: seeing them clearly, having the right tools to identify them, and understanding their psychological roots. Before you can improve conversion rates, you must first see what is wrong or suboptimal. We encourage you to become a worrywart, a skeptic, and a cynic. Focus on both the subtle and gross issues with your landing pages. Only then can you soberly assess and address them. At the end of this journey lies the promised land of higher conversion rates, but you have to go through the valley of problems to get there. Part II consists of the following chapters: II Chapter 4 Common Problems—The Seven Deadly Sins of Landing Page Design Chapter 5 Conversion Ninja Toolbox—Diagnosing Site Problems Chapter 6 Misunderstanding Your Visitors—Looking for Psychological Mismatches■ COMMON PROBLEMS Common Problems— The Seven Deadly Sins of Landing Page Design Chances are, your landing page is suffering from not just one, but several common deadly sins. Although much of this material is also addressed 65 in other parts of the book, this chapter should serve as a solid overview of the most important 4 conversion issues. CHAPTER CONTENTS A Sober Look Unclear Call-to-Action Too Many Choices Visual Distractions Not Keeping Your Promises Too Much Text Asking for Too Much Information Lack of Trust and Credibility Real-World Case Study: CREDO Mobile A Sober Look Landing page testing is the “gold standard” of conversion improvement. By tracking the actions (or inactions) of your visitors when they’re presented with a certain version of your landing page, you can reliably determine which version they prefer. It is truly a case of “listening to the voice of the customer.” However, you do not need to run landing page tests to uncover many conversion issues. They are so common and so blatant that we have enshrined them as the “Seven Deadly Sins of Landing Page Design.” This chapter explores some common landing page problems. You may look at the extreme examples presented and laugh at the obvious problems with the pages. However, even though you may deny it, chances are your own page suffers from many of the same deadly sins. We encourage you to look deeply and critically at your own pages, applying the material in this chapter. This is as close to a “silver bullet” as we will offer in this book, and many who have addressed these common sins have 66 increased conversion rates significantly. The sins are presented in no particular order, and commonly co-occur on a landing page. In each of the following sections, we will ask a simple question. The questions are from the perspective of your website visitors, and we stand here as their advocates. If you cannot clearly answer the question presented, chances are you are committing the sin in question on your page, and it is costing you money. Unclear Call-to-Action What am I supposed to do on this page? Your website visitor should be able to answer this question easily, yet it is often not so. Instead, your visitor must spend precious time deciding what to do, and then expend the mental energy required to do it. As a result, the visitor may get confused and frus- trated, and leave your page in search of clearer experiences. In the example shown in Figure 4.1, the visitor is confronted with a stark visual gateway page showing a large “image shot.” But what is the actual call-to-action? After staring at the idyllic beach scene, the visitor may click on it, or they may decide to hit the Back button on their browser. If no action is taken, the page will refresh and finally take the visitor to the homepage of the SandalWorld catalog. But by then, many visitors will be long gone. Amazingly, this page actually served as the landing page for a Google AdWords pay-per-click (PPC) campaign. To their credit, this company has gotten rid of the “splash page” (pun intended) in question, and now goes directly to the homepage of their catalog. In the example shown in Figure 4.2, the call-to-action is also unclear. C H A P T E R 4: COMMON PROBLEMS ■฀฀฀■ UNCLEAR CALL-TO-ACTION 67 Figure 4.1 Unclear call-to-action on the Sandal World homepage Figure 4.2 Unclear call-to-action on the Desco Software homepageWhat are you supposed to do? Look at the picture of the model holding the lap- th top? Inspect the detailed report screenshots? “Call before December 30 ” as instructed in the reverse-color text in the band near the center of the page? In fact, the answer is “none of the above.” The desired conversion action is to start a free 30-day trial by signing up online. Yet the only way to do this is to click on the small black iPhone picture. Unless you have an iPhone, chances are you would tune this image out completely. Even if you noticed the graphic, it is unclear that the image is clickable, rather than simply informational. Because of the hidden nature of the call- to-action, and the large number of visually dominant elements on the page, the desired conversion action is very unclear. The preceding examples represent relatively small companies. But even larger ones commonly obscure the call-to-action. The example in Figure 4.3 shows a product-detail page on the 1-800-flowers website. 68 Figure 4.3 1-800-flowers product detail page C H A P T E R 4: COMMON PROBLEMS ■฀฀฀■ UNCLEAR CALL-TO-ACTION There are many possible activities and visual priorities on the page: click on the banner ad and go to another product detail page on the site; look at the large rose image that is simply informational and shows you that you are in the Roses section of the website; or “Sign in now” (even though you have no reason to do so unless you are ready to purchase). However, all of these other activities should be subordinated to the clear pur- pose of a product detail page: to be able to add the item in question to the shopping cart. The only page element designed to accomplish this is the tiny “Select Delivery Date” button at the bottom of the center column. As a design exercise, SiteTuners created an alternative version of the page. All of the actual content about the product as well as the functional parts of the page had to be preserved. The objective was to clearly present the visual image of the product as well as create a single call-to-action. Look at Figure 4.4. The call-to-action should be clear without much examina- tion. Visitors are supposed to click the prominent “View Delivery Dates” button in the 69 action block on the right side of the page. Figure 4.4 A lternative page mock-up for 1-800-flowers product detail pageAll calls-to-action should be this obvious. In fact it is good to apply the “obvious standard”: if your call-to-action is not obvious, you are losing money. The new design incorporates several changes from the original. These included a darker header background color to separate it from the content of the page, removing the banner ad on top, removing the large graphic that represented the Roses category, and removing the dark text boxes within the content area with the reverse-color text. This new design added the following elements to correspond to the best practices for controlling focus on a direct-response landing page (or a page on which a specific outcome is desired): Clear Page Headline E ach page on a website (and each stand-alone landing page) must be about something. It must have a clear purpose, and that purpose must be spelled out in a headline that spans the top of the page. Well-Defined Action Block T here should be a single place for the visitor to interact with your page, and that place should be visually called out with a subtle background 70 color. This action block should draw the eye toward the desired activity on the page. The rest of the page should be plain and visually restrained. A white background for the content portion of the page is recommended unless there is a compelling need to use a different color. Subheadline in Your Action Block T he purpose of the action block must be clearly stated. What are you asking the visitor to do in the action block? What specifically is going to happen within it? Clear Call-to-Action Within your action block, you must have a single clear call- to-action. The call-to-action must describe what happens next and what visitors can expect when they are done interacting with the action block. It should not be general or generic like the “Continue” or “Submit” text that is commonly used on websites. The wording of the call-to-action must be from the visitor’s viewpoint, and not your company’s. To put yourself in the visitor’s shoes, try using button text that completes the following sentence: “I want to….” Another way to validate the new design is to examine the visual focus of the two pages. To do this, you can use SiteTuners’ very inexpensive AttentionWizard software (described in detail in Chapter 5, “Conversion Ninja Toolbox—Diagnosing Site Problems”) to create an instant “attention heat map” of each page image. AttentionWizard is not eye-tracking or mouse-tracking, and it does not require the use of real people. It is a software prediction of where attention would be drawn during the first few seconds on the landing page, and can be used on a screenshot of a live web- page or a design mock-up that is not live. As you can see from the attention heat map shown in Figure 4.5, the biggest “hot spot” on the page is on the bouquet of flowers. This is as it should be, since the C H A P T E R 4: COMMON PROBLEMS ■฀฀฀■ UNCLEAR CALL-TO-ACTION picture represents the “hero shot” of the highly visual product and helps to sell it. However, the other four hot spot areas are on unrelated or non-actionable graphics. This is wasted attention. Because of the visual distractions on the page, none of the initial attention is expected on the call-to-action button. In other words, it is not clear at a glance exactly how to interact with the page. 71 Figure 4.5 A ttentionWizard heat map of the 1-800-flowers product detail pag — e no initial attention on the intended call-to-action By contrast, the attention heat map of the new design in Figure 4.6 shows two primary areas of attention. The first hot spot is on the product image itself (enlarged from the original design to better show off the product). The second (and most intense) hot spot is on the call-to-action button. This makes it clear what the desired action on the page is. Equally important is the fact that there are no attention hot spots (or “attention leaks”) on any other parts of the page. 72 Figure 4.6 AttentionWizard heat map of the alternative mock-up of 1-800-flow rs p e roduct detail page—clear initial attention on the call-to-action Unclear Call-to-Action—The Fix • The call-to-action should be clear and should draw the eye. • The placement of the call-to-action should be above the fold. • Competing visuals should be deemphasized. C H A P T E R 4: COMMON PROBLEMS ■฀฀฀■ TOO MANY CHOICES Too Many Choices What am I supposed to do irst? We often hear that choice is good. Many extol the virtues of the “long tail” concept: given more choice, some people will take advantage of it—exploring a wide variety of niche content. But this only applies to situations where someone really cares about the subject or task at hand, is knowledgeable about it, and has significant time and resources to expend in the discovery of novel and interesting alternatives. Unfortunately that is rarely the situation when someone visits your landing page. Most people are in a hurry and do not have time, they don’t care much about your website, and they know little about your subject matter. Under these circumstances, too many choices can cause paralysis and inaction. If visitors can’t find a way to easily get closer to their goal, they will simply leave. Consider Adorama’s homepage (www.adorama.com), shown in Figure 4.7. It 73 illustrates many of the issues with having too many choices. Figure 4.7 Adorama homepageAdorama sells a broad array of photography-related gear, and the visitor is presented with a bewildering array of choices. There are 146 clickable items on this page Product shots feature a dozen disparate items that range in price from 24.95 to 799.95. Brightly animated graphical banner ads across the top and right side of the page clamor for attention, leading to specific items on the site. A scrollable news ticker and rotating banner ads draw the eye through motion. Which of the following are visitors expected to do? • Read the scrolling news bar? They probably did not come there for photo industry news. • Buy a replacement lithium-ion battery compatible only with certain Nikon cameras? This is limited to a small segment of the visitors to the homepage (who already own the compatible models of cameras). • Click on the cryptic Photo Essentials category? E ven if they read down to the 13th position on the left navigation bar to reach this item, they 74 would be hard-pressed to figure out what it meant. • Click on the Copiers/Printers/Fax Machines ad? Most people would not have a compelling reason to buy these kinds of items from a company whose tagline is “The Photography People.” • Read the “How to master dog photography” article by Bowser? T his is probably not a pressing concern for most visitors. You can imagine that while sitting in a company staff meeting, somebody approved the addition of all of these items to the homepage. Each item may be useful to a subset of your audience and may be logical in its own right. But the cumulative effect of all this clutter is that you are squandering precious milliseconds of every visitor’s attention. They are forced to wade through a lot of muck to even understand if there is any relevant infor- mation for them on your page. Will they do this? Probably not. Many will simply throw up their hands in frustration and try another website. The main goal of a broad-selection online catalog should be to efficiently direct all visitors to a relevant set of product choices and to help them decide among them. The Adorama page does not do this effectively. A better alternative would be to focus on a smaller number of choices that apply to everyone and to funnel visitors deeper into the site. Figure 4.8 shows the body of the homepage for B&H (www.bhphotovideo.com), a company similar to Adorama in its breadth and scope of product offerings. C H A P T E R 4: COMMON PROBLEMS ■฀฀฀■ TOO MANY CHOICES 75 Figure 4.8 B&H Photo homepage body It handles one critical task significantly better: The attention of the user is directed to the grid of high-level categories. Each main category is given equal weight, and the representative photos and descriptive text make it easy to see at a glance the breadth of the product line available on the site. Group shots representing the diversity of products in each category convey a sense of “categoriness.” By combining multiple products in one image, they clearly show that this does not correspond to an individual item in the catalog, but rather to a group of items. Deeper navigation for knowledgeable visitors is also available via text link subcategories. The number of subcategories is restricted to a reasonable seven items (a short enough list to be effectively remembered in short-term memory) with a “See All” expansion for additional subcategories). The whole breadth of the product line is represented well, but without overwhelming complexity. Too Many Choices—The Fix • Don’t present detail too early in the process. • Group related choices into a smaller number of categories. • Use visual shortcuts to reduce reading.Visual Distractions What am I supposed to look at? Since the Web is primarily a visual medium, you can think of your computer monitor as a window onto the world. A basic question is where your visitor should be looking shortly after arriving on your page. Design can definitely influence conversion. Unfortunately, it is usually for the worse. Most of the responsibility can be laid at the feet of the internal creative team or outside interactive agency. Because of the limitations of their unique perspective, you have been forced to sacrifice conversions in the name of “coolness.” So you have actu- ally come to love your page and can no longer see it objectively. Let’s take a look at the origins of this situation, and begin with the end in mind. The “end” should be pretty obvious—to have the most efficient landing page or pro- cess possible. This requires putting aside your own corporate and personal needs and 76 considering everything from the perspective of your visitors. Only they matter, and without them you would not have a business. In the past you may have paid lip service to the notion that “the customer is always right” but have probably not done anything about it. The key to effective landing page design i cla s rity. The purpose of your landing page must be clear. The visitor should be focused on taking a simple path that leads to the desired conversion action. This simple path should arise out of the Zen-like stillness of your landing page. Unfortunately, many landing pages are at the opposite end of the spectrum from this desired state. They scream and demand the visitor’s attention. They visually assault the visitor, forcing them to determine for themselves which of the many strik- ingly visual elements on the page is the important one. The situation can be pretty chaotic. Many pages range from simply annoying to downright repulsive. Gratuitous graphics clutter the page and are unrelated to the product or service in question. Strong and contrasting colors dominate the scene, and text styles are outlandish and baroque. There is no clear visual separation between page content and the page shell (header, navigation, backgrounds). The page shown in Figure 4.9 is a perfect example. Unfortunately, because this figure is in black-and-white, you must try to imagine the page in its full-color glory. The background colors of the boxes on the page are C H A P T E R 4: COMMON PROBLEMS ■฀฀฀■ VISUAL DISTRACTIONS primarily red, orange, or green. The text is white and bright yellow. There is no clear focus or organization to the page. It is the visual equivalent of having someone fire a submachine gun at your face at point-blank range. Many people’s reaction will be to immediately leave. 77 Figure 4.9 New York Barbells homepage Graphics designers are rarely trained in maximizing conversion. The best designers pride themselves on their ability to be nonconformists, and their ability to “think outside the box.” They are bored with doing regular production-oriented graphic design work, and like to keep themselves entertained by doing something new and interesting on every project.Here is a short list of the more common visual transgressions found on land- ing pages: Wild Background Colors Many landing pages use dark and dramatic color themes. Often the background of the page or large sections of it are black or fully saturated bright colors. Unfortunately, these kinds of color choices often create a dark and brooding atmosphere, or imply something so exotic that it would only appeal to teenage male adrenalin junkies who like to play video games. Garish Text P age text and headlines are haphazardly placed on the page and often use large fonts in high-contrast colors. Font sizes are often enormous, and are further emphasized by the use of edging effects, drop shadows, color transitions and fades, and fill patterns. Visual Embellishments and Flourishes Even simple page elements such as box edges are emphasized with drop shadows, glow, or other effects. Simple round disks in bullet lists are replaced by colorful graphical check marks or other icons. Neutral 78 background space to the sides of the landing page is often filled in with intricate pat- terns or photographic images. Animation or Video A ll of the other design sins on the landing page pale in com- parison to the aggressive use of motion, animation, and video. Images and text pulsate or revolve, image slideshows use wild fly-in transition effects, intricate animation sequences draw the eye, and full-motion video autoplays on the page. These attention- grabbing tactics are powerful. Unfortunately, they are rarely tied to the desired con- version goal on the landing page and only serve to squander a few precious seconds of the limited visitor attention. The presence of these kinds of elements is not neces- sarily bad—in fact, it can increase conversion if handled properly (see Chapter 7, “Conversion Improvement Basics,” for a detailed discussion). However, you should never deploy rich media on your page without testing it first to determine its impact on conversion. C H A P T E R 4: COMMON PROBLEMS ■฀฀฀■ VISUAL DISTRACTIONS The homepage of the Rushmore online casino shown in Figure 4.10 illustrates many of these problems. Online gaming sites often represent the excesses of competing visual attention, with the mistaken belief that re-creating the maddening cacophony of the real casino experience is somehow appropriate to the Web. 79 Figure 4.10 Rushmore Casino homepage SpadeClub.com asked SiteTuners to redesign their homepage (shown in Figure 4.11). Although it was relatively visually tame by the standards of online gaming sites, the presentation still overwhelmed the business purpose. The goal of the page was get visitors to create an account and download the interactive software; however, the page suffered from many of the worst practices. These included a large (and irrelevant) photo of a model, icons next to each of the bullets in the Member Benefits section, and colorful avatar images in the Recent Winners and Testimonials areas. The background of the account-creation form was a deep burgundy color, and all form labels were in hard-to-read white text on this darker background. 80 Figure 4.11 SpadeClub’s original homepage As you can see in Figure 4.12, the redesigned homepage has a much cleaner look, with the only strong visual elements in the white content area being the “hero shot” (demonstrating a screenshot of the software) and the large call-to-action button. As a result of this redesign, the new page has a visual hierarchy and its conversion goal is clear. Figure 4.12 SpadeClub’s redesigned homepage C H A P T E R 4: COMMON PROBLEMS ■฀฀฀■ VISUAL DISTRACTIONS Graphic artists need to follow a minimalist visual aesthetic that focuses on conversion and not “window dressing.” The new landing page may not be very excit- ing visually, but that’s okay. In fact, it is desirable. On a toned-down page, the call-to- action emerges from the relative stillness of the page. “ Boring” works. And it makes you a lot more money—that should make it much more ex tc i i ng. Banner Ads A big awareness-thief is the third-party (or in-house) ad on your own landing pages. It is an invitation to throw away your visitors’ attention and transport them to another website. Ads are specifically designed to grab awareness. Visual banner ads in par- ticular are known for using bright, dramatic colors and provocative headlines. Many banner ads include animation and flashing colors to get noticed. Since most websites do 81 not control the exact ads that will run on their pages, this is an invitation for disaster. A single banner ad can radically shift the attention away from your intended conver- sion action. Unless your primary business model is advertising supported, ads should be eliminated from your site, or at least radically deemphasized via location or editorial policies limiting the allowable formatting of the ads. Entry Pop-ups The absolute best way to destroy someone’s attention is the use of entry pop-ups. These are floating windows that appear in front of your landing page as soon as it loads into the visitor’s browser. Such pop-ups typically include a call-to-action such as filling out a form or clicking on a link leading to a special offer. Regardless of how they are technically implemented, they require an interaction by the visitor in order to deal with them. This means that the visitor must complete the intended action, or at least click on the pop-up in order to close and dismiss it from their computer screen. In effect, entry pop-ups prevent you from getting to the content of the landing page and are seen as an unwelcome surprise by most web users. Entry pop-ups represent the most blatant kind of in-your-face interruption advertising. They will anger, annoy, frustrate, and distract your visitors before they even see your landing page. Worst of all, using entry pop-ups shows really poor think- ing on the part of the marketer responsible for their creation. If the pop-up’s desired conversion action is your most important one, then it properly belongs on the landing page itself. If the conversion action on the landing page is different than the one in the pop-up, then the two can be displayed on the landing page side by side, instead of resorting to the use of the pop-up. By emphasizing one or the other through the use of visual cues on the landing page, you can control their relative importance and steer people toward the more desirable one. Entry pop-ups are an indication that your ability to prioritize is severely impaired and that you do not trust your actual landing page to get the job done on its own. It is absolutely unnecessary to compete with your own landing page and in the process alienate the vast majority of your visitors. The page in Figure 4.13 is shown with a chat entry pop-up overlaid. The Chat dia- log box popped up immediately (before the visitor even had a chance to view or read the page). It was also difficult to dismiss (by clicking on the small No Thanks link in the lower- right border of the pop-up window). The window appeared on the left edge of the screen and actually moved to the right. When it reached the right edge of the browser window, it reversed directions and moved to the left again. This kind of unwelcome and highly annoying surprise will probably cost a lot of money to the company in question. 82 Figure 4.13 Moving entry pop-up dialog box Exit Pop-ups The effect of exit pop-ups is not as clear. These are similar to entry pop-ups but appear only when someone is clicking away from your landing page or website. Exit pop-ups may try to entice you with a last-minute promotion, ask you to sign up for an e-mail newsletter in exchange for your contact information, or gather survey information about your reason for leaving. All of these can be seen as secondary conversion actions that have value to you. Since your primary conversion action did not happen, you can at least try to extract a little extra value from your visitor stream (especially if you are pay- ing to get them there). This may seem to contradict what we wrote earlier about competing for attention with your own landing pages. But in fact it does not—you are competing for atten- tion with your web visitors’ next destination. They have already made the decision to move on, and in a sense you have nothing to lose. So a final dose of interruption mar- keting may salvage a tiny fraction of these people. Of course, taken to an extreme this may frustrate people and leave them with a negative impression of your company. So be judicious in your use of exit pop-ups. C H A P T E R 4: COMMON PROBLEMS ■฀฀฀

Advise: Why You Wasting Money in Costly SEO Tools, Use World's Best Free SEO Tool Ubersuggest.