{"id":10507,"date":"2017-08-23T11:30:11","date_gmt":"2017-08-23T11:30:11","guid":{"rendered":"https:\/\/www.designmantic.com\/blog\/?p=10507"},"modified":"2024-05-06T07:55:30","modified_gmt":"2024-05-06T07:55:30","slug":"landing-page-mistakes-sabotaging-conversion-rate","status":"publish","type":"post","link":"https:\/\/www.designmantic.com\/blog\/landing-page-mistakes-sabotaging-conversion-rate\/","title":{"rendered":"5 Landing Page Mistakes That Might Be Sabotaging Your Conversion Rate"},"content":{"rendered":"

When considering potential problems and drawbacks in your website design elements, it\u2019s prudent that the first place you look is your landing page. Landing pages have an indispensable role to play for your sales funnel and website. Whether the goal of your website is to get people to request a free sample or sign up for your newsletter, make sales, or increase Downloads, your landing page is an important factor which dictates whether you lose a potential customer, or acquire a new lead. Unfortunately, a plethora of websites fail to optimize their landing pages and drive away potential customers due to issues and problems with this page.<\/p>\n

Design Your Website Today!<\/a><\/div>\n

If your landing page conversion rates are lower than what you had in mind, believe it or not, the design of your landing page may be a major culprit. A single design flaw can wreak havoc on the customer experience and ruin the viability of your landing page, even if you think you have followed all the principles of User Interface design<\/a>!<\/p>\n

Here are the 5 most common landing page design mistakes that companies make and how you can remedy them:<\/p>\n

    \n
  1. Website Not Designed To Be Responsive<\/li>\n
  2. Cluttered Web Design<\/li>\n
  3. CTA Button Color Fails To Inspire Action<\/li>\n
  4. Lack Of Inspiring Imagery<\/li>\n
  5. Visual Distractions<\/li>\n<\/ol>\n

    1. Website Not Designed To Be Responsive<\/h2>\n

    \"Responsive\"<\/a>
    \nImage:     FreshSparks<\/a><\/p>\n

    Our lives have changed considerably since mobile phones have been weaved intricately into our routines. People use their tablets or smartphones on the go, and cannot seem to part with their beloved devices even in the bathroom or in beds. The number of people who access the web on mobile devices has long surpassed the number of people on desktop computers. In the midst of 2017, the importance of responsive web design cannot be overlooked, unless your business goal is to leave potential customers feeling exasperated. Unless your website is designed with responsiveness in mind, you cannot hope to target the tab and mobile users, not without cost to usability and overall user experience. Responsive design isn\u2019t a savvy luxury anymore<\/a>; it\u2019s the thin line between success and obviation, especially considering that Google now factors in a website\u2019s mobile presence in the search engine algorithms as a ranking signal.<\/p>\n

    A responsive web design offers an optimized browsing experience as it enables a single site to adjust and accommodate to the size of a user\u2019s device- with one source content and one URL. The flexible and fluid layout of responsive websites adjusts according to screen size, so that the best user experience is guaranteed across a wide array of devices without compromising the features of the website.<\/p>\n

    \"responsive<\/a>
    \nImage:     DesignModo<\/a><\/p>\n

    For instance, the Foodsense website above adapts its content from a regular left-sided blog-style magazine layout replete with a plethora of drool-inducing pictures to a rudimentary block by block layout as the website is viewed across different screen sizes. The responsive behavior creates an aesthetically pleasant visual appearance that doesn\u2019t lose its creativity and charm of originality even as the screen size gets smaller.<\/p>\n

    Related: 5 Snafus of Responsive Web Design to Banish<\/a><\/h3>\n

    2. Cluttered Design<\/h2>\n

    Can you stomach a bit of bad news? Hardly 16% of landing pages are rid of the nuisance of navigation bars? Even worst, 48% of landing pages are actually crammed with multiple call-to-actions or offers. If you are wondering why it\u2019s depressing, it\u2019s because companies are known to see a 100% improvement in conversion rates when landing pages are designed to be focused on a single action and the navigation bar is eliminated.<\/p>\n

    If you scrutinize any good landing pages closely, you\u2019ll notice a couple of similar traits; they are all clutter-free, well-organized, and clean. They are singularly focused on only one action and ensure that people intuitively know what they are expected to do on each page. In a book on usability, titled \u201cDon\u2019t make me think,\u201d web designers are instructed to design obvious and simple to use design elements so that websites are easier to use without users having to think over. A clean, simple web page designed to augment usability<\/a> is devoid of distractions that prevent users from needlessly hunting around or analyzing, enabling them to comprehend the substance of a page and what they are supposed to do next, in a heartbeat.<\/p>\n

    Consider this Hubspot example:<\/p>\n

    \"Hubspot\"<\/a>
    \nImage:     Hubspot<\/a><\/p>\n

    The bold and big primary headline is pretty conspicuous and it\u2019s rather hard to miss the enormous orange CTA button. The lack of a navigation bar keeps the users from getting distracted away from this page. While the page does seem to be on the content-intensive side, the copy is organized so that it is easily scannable and flows logically.<\/p>\n

    Similarly, pore over this homepage from MailChimp.<\/p>\n

    \"MailChimp\"<\/a>
    \nImage:     MailChimp<\/a><\/p>\n

    While the website has a navigation bar (considering it\u2019s a homepage), the rest of the website embodies zen to perfection. Stunning imagery is centered on the page in a way that it points our attention to where the objective of the page lies. The website makes awe-inspiring use of white spaces to highlight a simple yet effective copy, while the blue call-to-action button stands out, letting you know what you are expected to do.<\/p>\n

    Infographic: The 10 Commandments of UI Design <\/a><\/h3>\n

    The most viable landing pages are seen to follow a template of some sorts, to stay to the point and avoid unnecessary clutter. To put it in a nutshell, they incorporate the hero image, the primary headline, the CTA, the social proof to tout the credibility of their claim, and the benefits of the service or product.<\/p>\n

    \"converting<\/a>
    \nImage:     Unbounce<\/a><\/p>\n

    The landing page above is the epitome of an effective and converting landing page.<\/p>\n

    \"Dont<\/a>
    \nIllustration: Freepik<\/p>\n

    3. CTA Button Color Fails To Inspire Action<\/h2>\n

    While the internet is teeming with all-too-convincing theories of which colors are the most suitable for conversion, even leveraging recommended color philosophy and system in web design<\/a> cannot be a sole guarantee of success. However, as a first rule of thumb, your CTA button should have a viable contrast with the background design so that it stands out. For instance, if your website is green-hued, your CTA won\u2019t fare well in another shade of Green. On the contrary, an orange, red, or blue CTA button would get noticed.<\/p>\n

    \"CTA<\/a>
    \nImage:     PageWiz<\/a><\/p>\n

    While the color of the CTA button varies from website to website, depending on the context and the emotional response to be invoked from the customers, some colors are seen more often than others, for instance:<\/p>\n

    BLUE:<\/strong> Most websites incorporate a hint of blue here and there, especially for their CTAs. According to a study, Blue was found to be the favorite color of 57% men and 35% of women because of its association with security, loyalty, trustworthiness, and reliance. Blue is perceived as an intellectual color, deep rooted in coolness, logic, and communication, while a darker shade of blue is considered a highly professional color. Due to the trust it radiates, blue is preferred by social media website<\/a> and especially used by software and financial institutions.<\/p>\n

    For instance, do you ever install a software on your website that doesn\u2019t have a sense of built in trustworthiness? Crazy Egg not only incorporates blue in their call to action button but also outlines the box where the URL is inserted with the color blue. Not to mention, the Blue CTA offers a nice contrast with the green-hued background and stands out.<\/p>\n

    \"Blue<\/a>
    \nImage:     Crazy Egg<\/a><\/p>\n

    GREEN:<\/strong> Being a relaxing color, Green is one of the easiest colors for the eyes to process. It promotes restoration, refreshment, health and balance, and is associated with the environment. In addition, being the color of money and wealth, this hue seems like an obvious choice for financial and banking websites. This is why the color works best for budget-conscious shoppers too. Green serves well as a good CTA color due to its association with the word \u201cgo\u201d, which is a motivator for many customers. Customers find it mentally easier to click on green than other colors, which is why you would find most \u201cDownload now\u201d CTAs in the color green.<\/p>\n

    \"Green<\/a>
    \nImage:     Spotify<\/a><\/p>\n

    RED:<\/strong> The color activates the pituitary gland and causes our hearts to beat faster, inciting them to action and making them behave in unprecedented ways. This physical color packs quite a punch and stands for defiance, excitement, urgency, warmth, strength, courage, passion, and energy. Since this eye-catching color promotes urgency, it is often used for sales and warnings.<\/p>\n

    Related: From Rage to Romance, Red is the Color of Passion!<\/a><\/h3>\n

    For instance, StitchFix is all about clothes<\/a> and their landing page also concentrates on a sole focus. While the rest of their branding takes a more understated look, a single red button in the center of the header really stands out and incites the reader to take action and head down the road to getting fixed every month.<\/p>\n

    \"Red-Cta<\/a>
    \nImage:     StitchFix<\/a><\/p>\n

    4. Lack Of Inspiring Imagery<\/h2>\n

    When customers arrive on a landing page, they need to be persuaded to stay on, and a landing page should have a riveting anchor to hook them to the page. The most sure-fire way of making your customers curious for more is to offer them an appealing or enticing image on the landing page. Failure to deck out your landing page with an interesting and high-quality visuals<\/a> make your service or product seem extremely uninspiring and boring. For instance, the imagery of a smiling and happy-looking customer, especially women, fill your audience with a sense of trust. Even better, visitors pay more attention to your CTA when the people in the imagery are shown to be looking in the same direction.<\/p>\n

    \"Lack<\/a>
    \nImage:     KissMetrics<\/a><\/p>\n

    These heat maps highlight areas where people are more likely to look at the screen. Observe that viewers tend to look at the CTA more frequently when the baby is looking at it as well.<\/p>\n

    Consider this well-designed landing page for a business that solicits renters for its properties and manages rental property.<\/p>\n

    \"Rentify\"<\/a>
    \nImage:     Rentify<\/a><\/p>\n

    The landing page above depicts a company employee showing a renter some piece of property. This image is downright boring and un-inspiring and does nothing to create an exciting user experience. They would do better to show happy renters on their page to motivate clients to list their properties with the organization. Even worse than not showing any imagery at all is using stock photos. For something that wreaks havoc on your pockets, they don\u2019t work well at all. Using people in real photos can boost your conversion rate by 35%.<\/p>\n

    To glean the best results, the visuals on your landing page should:<\/p>\n