Tips to increase Website Conversion rate

increase site conversion rate and how to improve landing page performance and how to make conversions
DavyGodwin Profile Pic
DavyGodwin,United States,Professional
Published Date:03-08-2017
Your Website URL(Optional)
Comment
Fixing Your Site Problems The painful work of diagnosis is over. Now we turn our attention to rebuilding and improving your landing pages and website. In this part of the book you will learn the keys to conversion improvement, best practices for specifics situa- tions, and how to prioritize ideas for your land- ing page tests. Part III consists of the following III chapters: Chapter 7 Conversion Improvement Basics Chapter 8 Best Practices for Common Situations Chapter 9 The Strategy of What to Test■ CONVERSION IMPROVEMENT BASICS Conversion Improvement Basics We all want the magic answer that will skyrocket profits. We have heard miraculous tales in which tiny landing page changes have a giant influence on the conversion rate. In reality, much of con- version rate improvement comes from not doing 171 something very right, but rather from simply avoiding doing the wrong things. In this chapter we will examine the basic foundations of conver- sion optimization. 7 CHAPTER CONTENTS Web Usability Overview Visual Presentation Writing for the Web Usability ChecksWeb Usability Overview Common sense is not so common. —Voltaire, Dictionnaire Philosophique (1764) Good usability is properly managing people’s expectations. Some of the overall goals of web usability are • Decrease the time it takes visitors to finish tasks • Reduce the number of mistakes visitors are likely to make • Shorten visitors’ learning time • Improve visitors’ satisfaction with your site When you are considering usability for landing pages, you should always take into account the following picture of your visitor’s typical mind-set and behavior: 172 • The visitor has extreme impatience and little commitment to your site. • The visitor has a short fixation on only the more prominent items of interest. • The visitor’s typical desired next action is to click on something (probably a link or a button). • The visitor doesn’t read text; they scan it. • The visitor will pay special attention to striking visual images and motion/animation. When visitors come to your website, they are not a blank slate. They carry the sum total of their life experiences to date. This includes attitudes, irrational impulses, subtle anxieties, and conscious beliefs, as well as unconscious assumptions. Our beliefs and assumptions have an enormous impact on how we behave. If you have just gotten a static electricity shock from a doorknob, you are going to be more consciously aware of other doorknobs and approach them with apprehension, based on the belief that another shock is possible. If you believe that the earth is flat (as most people did just a few centuries ago), you would not try to circumnavigate the globe and would be afraid of exploring based on the logical fear of falling off the edge. Most of your visitors already have enormous experience with the Internet. Even recent or casual users have probably logged hundreds of hours interacting with websites. Out of that experience they have constructed a mental model of how the Web works. Part of that mental model includes constraints (things that can’t be done) and conventions (an understanding of and agreement with how things are commonly done). C H A P T E R 7: CONVERSION IMPROVEMENT BASICS ■฀฀฀■ VISUAL PRESENTATION A convention is a cultural constraint, one that has evolved over time. Conventions are not arbitrary: they evolve, they require a community of practice. They are slow to be adopted, and once adopted, slow to go away. So although the word implies voluntary choice, the reality is that they are real constraints upon our behavior. Use them with respect. Violate them only with great risk. —Usability guru Don Norman The visitor’s mental model may not be exact or correct. For example, a disturb- ingly high percentage of people will type a URL into the Google search box instead of into their browser’s address window. But it does not matter if the model is correct. As far as you should be concerned, the model is set in stone and not likely to change any- time soon. In his excellent book Don’t Make Me Think (New Riders, 2005), author and 173 web usability expert Steve Krug suggests that you should have a firm grounding in common web design conventions and use them whenever possible. They make things easier for your visitors, and lessen the mental load and attention required for them to interact with your landing page. Examples of powerful web conventions include: • The company logo and home link appear near the upper-left corner. • The navigation menu is near the top or on the left side of the page. • The e-commerce catalog shopping cart link is near the upper-right corner of the page. • Blue underlined text is a hyperlink. • Brightly animated rectangular graphics are advertisements. Visual Presentation Visual presentation creates the powerful first impression that is responsible for many visitors leaving your site within the first few seconds of arriving. When they first get to your site, they have not had a chance to scan or digest most of your text message. They are mainly reacting emotionally to your page design. As mentioned in Chapter 6, “Misunderstanding Your Visitors—Looking for Psychological Mismatches,” you can’t fool or argue with the limbic system (your “emotional” mid-brain). If it does not like something, no logical argument can prevail against it (and the browser back button is an easy way to quickly exit any webpage).Most of us can tell whether a landing page appeals to us or repels us. We can tell if a page is “cheesy” and unprofessional. This determination is made based on the page structure, color scheme, font variety, graphics and images, and the degree of visual clutter on the page. But can people spot “cheesy” and unprofessional sites consistently? They abso- lutely can—and do so very quickly People make a judgment of a landing page’s quality in 1/20th of a second, sug- gests 2005 research led by Dr. Gitte Lindgaard of Carleton University in Ottawa, Canada. In other words, the judgments were being formed almost as quickly as the eye can take in information. This process is subliminal and precise. This first impression of the aesthetic quality persists and colors all subsequent judgments about visitors’ experience with your site. You can’t “fake out” this auto- matic ability of the brain to form accurate visual impressions. So make your site or landing page more visually appealing or suffer the consequences of lower conversion. If you want to get a good laugh, visit “The World’s Worst Website” (see Figure 7.1) 174 at www.angelfire.com/super/badwebs/. This amusing compilation of suboptimal website elements and worst practices serves as an instructive list of what not to do. Figure 7.1 The World’s Worst Website—a compilation of common poor web design p cr ta ices Instead, use the following guidelines to improve your visual design. Page Layout The main quality that your page design has to have is coherence. It must be well orga- nized and hang together as a single unit. It is helpful to use a grid design to create your preliminary layout. Design the page around the visitor’s task and the conversion action. C H A P T E R 7: CONVERSION IMPROVEMENT BASICS ■฀฀฀■ VISUAL PRESENTATION The balance of your design is created at this early stage and should be carefully pre- served. The page should be simple and uncluttered and include enough whitespace for the eye to rest. Give the proper visual prominence to key elements. Group like items together. Unless advertising is your primary source of revenue, seriously consider whether you should show any banner ads, or any visual elements that could be perceived as a banner. Banner ads are visually bold and may destroy the relative emphasis and coher- ence of the other page elements. The spaces on the page that banner ads take up also make it harder to create a clean page layout. In the end, the drop in conversion may end up costing you more money than the banner ad revenue can bring in. The website for the Law & Order TV show is poorly organized and has low coherence (see Figure 7.2). Every available piece of screen real estate is stuffed with con- tent along a confusing and unbalanced grid layout. Content is interspersed with advertis- ing and navigation. The visual styles in different parts of the page vary widely and make it almost impossible to prioritize information or know in which order to consume it. 175 Figure 7.2 Law & Order TV show homepage—unorganized with no visual hierarchyNever make the user scroll to find critical information like transactional buttons or important navigation links. Even if they are appropriate near the bottom of the page, include another copy somewhere above the fold. Be wary of introducing any kind of horizontal rules, separators, or color changes into your design. Rules, or even abrupt changes in background color, serve to stop the eye from going further. Separators of any kind, including large amounts of ver- tical whitespace (which looks like the end of the page content), can discourage further exploration and reduce scannability. Frames are composite pages created like a photo collage from several individual webpages and often pulled from several disparate sources. Frames have several signifi- cant practical problems and break the fundamental navigation paradigm of the Web. Basically, just say no to frames unless the framed content is critical to your site func- tioning and cannot be incorporated in any other way. Page Shell Design 176 Independent of the content in the body of the page, several important guidelines should be followed in the design of the surrounding page shell. Separation of Content from Page Shell One of the key properties that a good webpage should have is a clear separation between page content and the rest of the page shell (which includes header, navigation, footer, supporting information, and page sides). Many pages make no meaningful distinction among these, requiring the user to spend valuable time discerning the different elements on the page. One effective way to create this separation is to use nonwhite background colors for elements of the page shell. If this is not done, the results often look like the homepage of the J. Crew website (see Figure 7.3). In an attempt to look extra clean and pristine, the all- white page background actually destroys any sense of page structure and forces the user to identify elements of the page shell (such as navigation) by reading a lot of tiny text. Centered Fixed-Width Designs Another frequent page shell issue is the response of the page to changes in browser window size. Our recommendation is to create centered fixed-width designs for most situations. The screen width that you should be designing for changes over time and should be occasionally revisited. As of this writing, we recommend designing for a 1024-pixel monitor width. Unless you have an old-fashioned and technology-averse demographic, most visitors can be expected to have a monitor at least this wide (you can confirm this by examining your web analytics reports). C H A P T E R 7: CONVERSION IMPROVEMENT BASICS ■฀฀฀■ VISUAL PRESENTATION 177 Figure 7.3 J. Crew homepage—no clear separation of page content from the rest of the p age shell By allowing for a vertical browser scroll bar, and also by showing some of the page background beyond the side edges of the page, you imply that the actual content should be laid out on a grid between 950 and 980 pixels wide. Of course, if you have a significant audience segment on mobile phones or tablets, you will need to develop a separate mobile site based on the prevailing standards. When you violate the guidelines above, the results are clearly suboptimal. For example, some fixed-width sites still left-justify the content part of the page on the screen. This is the case for top law firm Bingham McCutchen LLP (www.bingham.com). At narrow monitor resolutions their site may look okay (see Figure 7.4). However, when viewed on a 24-inch 1920-pixel-wide monitor, it looks very odd (see Figure 7.5). The content is shoved to the left and someone seated in front of the monitor would have to rotate their head several degrees counterclockwise just to take it in. The same problem can be seen on the website of the National Basketball Association (NBA; see Figure 7.6). The right half of the screen is simply filled in with a light gray background color and every visitor is expected to pivot their head to the left.178 Figure 7.4 Bingham McCutchen’s homepage—left-justified on a 1024-pixe cl s reen—looks normal. Figure 7.5 Bingham McCutchen homepage—left-justified on a 1920-pixel s ec ern—looks lopsided and strange. C H A P T E R 7: CONVERSION IMPROVEMENT BASICS ■฀฀฀■ VISUAL PRESENTATION Figure 7.6 The NBA homepage—left-justified on a 1920-pixel screen—also lo ko s lopsided and strange. 179 Stretching the middle of your page creates its own problems. The Sears homepage in Figure 7.7 is designed to have a fixed-width left navigation column and a stretchable right column. As a result, the images in the center of the page look very strangely spaced and are surrounded by large, empty background color blocks. The search input text field in the header has also been distorted into an unrecognizably long shape with a tiny mag- nifying glass button on its right edge as the only remaining clue to its intended purpose. Figure 7.7 On the Sears homepage with its center section se tt rched on a 1920-pixel screen, the image background areas look odd.Some websites adopt a hybrid approach—keeping the content fixed but stretch- ing out the background images. This also presents significant problems. Figure 7.8 shows the Yahoo News site at 1024 pixel width. Note that the darker header looks appropriate and properly caps the page (over the full width of the page contents). The light gray fade that ends just below the video player looks like a subtle and normal part of the design. 180 Figure 7.8 The Yahoo News page on a 1024-pixel screen looks normal. When viewed on a much wider monitor (see Figure 7.9), the effect of the design changes significantly. The stretchable header background now becomes an oppressive dark stripe that shoots its visual energy sideways in a “T” shape (we call this the dreaded “muffin top” of stretchable headers). And even the formerly subtle gray gradient becomes part of the design—creating visual interest on the sides of the page. C H A P T E R 7: CONVERSION IMPROVEMENT BASICS ■฀฀฀■ VISUAL PRESENTATION Figure 7.9 The Yahoo News page on a 2400-pixel screen looks strange. Some sites go to the other extreme—fixing both the width of the page and its height. This is usually based on too heavy-handed an effort to precisely control the 181 whole visual experience. On the Toyota USA website, the page for the Yaris car model is fixed in both height and width. As you can see in Figure 7.10, the site looks diminu- tive on a 1920-pixel monitor. There is a distinct perception that the site is cramped and old-fashioned because it makes no meaningful accommodations for the larger screen. Figure 7.10 The Toyota USA fixed-size page on a 1920-pixel screen looks tiny. Another design approach with significant issues involves stretching the whole header (not just the background image). If you visit the Yaris car model website on a small screen (see Figure 7.11), you will see a normal-looking page. Note the Toyota branding in the upper left and the navigation bar above the content in the upper right of the header. 182 Figure 7.11 The Yaris car model homepage on a 1024-pixel screen looks normal. However, when the same site is experienced at a width of 1920 pixels (Figure 7.12), the spatial relationships in the header get distorted beyond recognition. The Toyota branding is now almost completely out of the visual field of view in the upper left of the screen. Similarly, the navigation has now lost its proximal relationship to the page content and is floating disembodied in the upper-right corner. Figure 7.12 T he Yaris car model homepage on a 1920-pixel screen looks tiny. C H A P T E R 7: CONVERSION IMPROVEMENT BASICS ■฀฀฀■ VISUAL PRESENTATION Boring Page Sides The content of your webpage should have all the attention when someone looks at it. If there is anything on the sides of the page that has visual interest, it should be removed. In general, the sides of your page should be a bit darker and should be a flat, even color. No patterns, textures, color gradients, or other visually interesting items are allowed in this area. Even a solid white color (which is very bright and would compete with the page contents, especially if there is no color change or boundary between them) should be avoided. Most importantly, you need to refrain from using illustrations or photographic images for page backgrounds. The sides of your page should be abso- lutely boring, so the visitor’s brain can safely ignore them and focus on the content. Figure 7.13 shows what happens when this guideline is violated. The Armani Exchange website uses giant, full-contrast models as enormous billboards that flank their own page content. In terms of visual impact, the sides of the page completely dominate the visual presentation and make it hard to focus on (much less consume) the page content. 183 Figure 7.13 The Armani Exchange website features giant photographic images o hn t e sides of the page. There are rare exceptions to all these guidelines. The dark background and extreme contrast, lack of page containment, and stretchable design of the Gears of War 3 Xbox videogame website (see Figure 7.14) is designed primarily for teenage boys and young men who are already used to an immersive and visually rich videogame experience. But if your website is primarily designed for business or a normal cross- section of the adult population, such design liberties should be avoided. All of the best practices guidelines we’ve described have been incorporated into the SiteTuners homepage shown in Figure 7.15. Figure 7.14 Gears of War videogame homepage 184 Figure 7.15 SiteTuners homepage C H A P T E R 7: CONVERSION IMPROVEMENT BASICS ■฀฀฀■ VISUAL PRESENTATION These best practices include: • Fixed-width page (960 pixels wide) with a clearly delineated edge indi- cated by a color change and a step-off drop shadow • Centering of the page on the screen • Nonstretchable header contents • Clear separation of page content (white high-contrast background) from the rest of the page shell (including header, navigation bar, footer, and page sides in off-white shades or mid-tones) • Even neutral side color with no pattern, textures, or images of any kind Graphics Images on your landing page are a powerful, double-edged sword. When tightly coor- dinated with key messages, they support the path to desired actions. When used gratu- itously or carelessly, they can distract visitors from the task at hand. 185 The best images support your visitor’s task because they • Relate to the content on the page • Illustrate key concepts (are not simply used as window dressing) • Show product views or details • Contain pictures of friendly real people (not models) • Have clear composition and tight cropping However, images can also have a negative effect. They can serve as distractions or interruptions for your visitor if they • Are generic and unrelated to the topic of the page • Use clearly fake, staged, contrived, or slick stock art • Contain bright, flashy elements that make the graphics look like advertisements • Decrease readability if placed behind text or navigation menus The following best practices should help you to effectively use images: Use high-quality production graphics and images. Do not mix different visual styles (such as photos and clip-art cartoons). Make sure all your image file sizes are small enough to load quickly. E-commerce visitors tend to leave a site that takes more than 2 seconds to load. The only possible exception to this is the product “click to enlarge” close-up. These images should be as large as possible while still fitting fully on the monitor. Animation is almost universally annoying and should be generally avoided. If animation is required to illustrate a concept, the user should be given the affirma- tive option of watching it and should not have it forced upon them. Similarly, Flash technology should be used only if there is a compelling need for it that would signifi- cantly improve the user experience. The move toward HTML5 as a standard should allow universal portability of animated, interactive, or video objects natively within webpages. Color Color has a strong emotional impact on people and can dramatically alter moods and attitudes. Since we are viewing projected colors on a computer screen, strong vibrant colors are particularly noticeable. So you should use full saturation primary color spar- ingly and conservatively. Our general advice is to follow the less-is-more approach and create a relatively benign visual environment, tending toward the mid-tones or lighter pastel shades. This applies not only to individual colors, but also to palettes of comple- 186 mentary colors chosen for the landing page’s visual theme. Make sure that your colors look unified, professional, and appropriate for your target audiences. Do not use inverse color schemes with dark backgrounds and light text colors. Most web browsers cannot print such pages very well. Stick to common color conven- tions. Use white (or very light) colors for text background areas (wild background patterns make it harder to read). Use colored text sparingly, and always use distinctive formatting for links (ideally blue underlined text or some other clearly different color that is not used for any other text on the page). Video As bandwidth and computer processing power increases, it is increasingly common to be able to stream high-quality video as part of the web experience. We are often asked the question, “Does video work on the Web to increase con- versions?” Of course the question is not a simple one, and the answer is not black and white. One thing we do know is that motion and audio will grab the attention of visi- tors. The more important question is whether that captured attention is properly used to advance the conversion or is actually a powerful distraction. Instead of thinking that video is inherently good or bad, you should realize that its exact parameters matter a lot more than its presence or absence. We have seen huge conversion gains from video as well as significant conversion drops. C H A P T E R 7: CONVERSION IMPROVEMENT BASICS ■฀฀฀■ VISUAL PRESENTATION Some important considerations for web video effectiveness include the following: • Actor or actress used (gender and appearance can have a strong impact) • Dress style and grooming (must be appropriate for your audience) • Script contents and length • Whether the video autoplays • Whether the video starts with sound on or must be actively turned on by the visitor • Whether the video replays automatically on subsequent reloads of the page or return visits • Production quality • Resolution and bandwidth required to view it • Whether it is served from a public site or a dedicated media server There are three primary ways to consume video on a webpage: 187 Embedded The software “viewer” window for the video is a fixed size and it is embedded in the page. The problem with this approach is that it takes up a lot of screen real estate while providing a small, often uncompelling visual experience. Lightbox Popover The video is indicated by a small thumbnail graphic on the page (giving you a lot more design flexibility) and the video plays in popover window (with the page darkened in the background). The viewer window can be a lot larger than the embedded window. New Window T his approach is similar to the preceding one, but the video player runs in a completely separate browser window. In addition to video clips, it is common to use a walk-on video spokesperson to briefly introduce your company and make a direct call-to-action (usually involving something on the page). The spokesperson can be seen from the waist up or full-body depending on the application. Figure 7.16 shows a video spokesperson on the Innovate Media homepage at the lower right of the screen. The video spokesperson is just a part of the engagement strategy. Their call-to- action is to ask you to click on the “play video” button near the top right of the screen. This in turn starts a video in a lightbox popover and discusses Innovate Media’s capa- bilities in more detail (see Figure 7.17). Such a one-two-punch of spokesperson and introductory video can often lead to double-digit conversion improvement. With the cost of video production and serving rapidly falling, we recommend that you experiment with video to see if it can help.188 Figure 7.16 Innovate Media homepage with video spokesperson Figure 7.17 Innovate Media homepage with lightbox video C H A P T E R 7: CONVERSION IMPROVEMENT BASICS ■฀฀฀

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