{"id":11123,"date":"2017-08-08T16:05:20","date_gmt":"2017-08-08T15:05:20","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=11123"},"modified":"2020-05-15T15:25:26","modified_gmt":"2020-05-15T14:25:26","slug":"saas-landing-pages-2017-analysis-100-top-businesses","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/saas-landing-pages-2017-analysis-100-top-businesses\/","title":{"rendered":"SaaS Landing Pages in 2017: An Analysis of 100+ Top Businesses"},"content":{"rendered":"

We revisitChartmogul<\/a>to take a look at some of the changes and trends in SaaS landing page design in 2017. This expanded analysis looks at the landing pages of over 100 SaaS businesses of all sizes \u2014 with some powerful insights!<\/p>\n

Our last landing page analysis<\/a> is still one the most popular articles on ChartMogul<\/a>. Given that it\u2019s been 18 months since we did that run-down of the state-of-play for SaaS websites, it\u2019s definitely time to revisit the topic. Conventions and trends in website design change rapidly. Big businesses are expected to roll out redesigns to keep their site fresh every few months, while specific UX patternsor trends spread like wildfire throughout the industry once they\u2019re proven to increase page performance (or rather, once someone has blogged about them).<\/p>\n

We included all of the 40+ companies from the previousanalysis, as well as many more. This time the total is over 100 landing pages, each from the B2B SaaS industry \u2014 from smaller startups to big-name brands like Salesforce and Google.<\/p>\n

Why the fascination?<\/h2>\n

Regardless of company size, product or target customer, the landing page is often a user\u2019s first contact with your brand. Even if not, it\u2019s always the canonical representation of your brand and your company\u2019s offering. In an age of large-scale social platforms and advertising, your website is likely to be the one remaining web property over which you have complete control. You define the design, copy, layout and behavior of your site, and it\u2019s for this reason that landing page design is such a huge consideration for every business. Unlike that sponsored post on Facebook or the article you published on Medium, you have the possibility to create a huge advantage through a compelling, convincing landing page that converts users to customers.<\/p>\n

So here it is \u2013 our updated 2017 landing page analysis!<\/p>\n

WARNING: This article is packed with statistics and findings. If it\u2019s a little overwhelming, don\u2019t worry \u2014 we\u2019ll be unpacking some of these in the coming weeks.<\/p>\n

This post is split up into 8 parts, covering different aspects of B2B landing pages and each featuring examples:<\/p>\n

    \n
  1. Navigation<\/li>\n
  2. Page length & scrolling<\/li>\n
  3. The Hero<\/li>\n
  4. The Headline<\/li>\n
  5. The Call To Action (CTA)<\/li>\n
  6. Social Proof<\/li>\n
  7. Video<\/li>\n
  8. Other findings<\/li>\n<\/ol>\n

    Browse the landing pages<\/h2>\n

    As before, you can find a collection of every landing page screenshot here on Pinterest:<\/p>\n

    <\/p>\n

    <\/center><\/p>\n

    <\/p>\n

    <\/p>\n

    Part 1: Navigation<\/h1>\n

    Navigation is the backbone of any website. While there are a few different conventions for allowing users to navigate a site, in the world of B2B SaaS, people usually have a single expectation: It\u2019s at the top, and flows from left to right.<\/p>\n

    You wouldn\u2019t think that this allows much room for creativity when designing a landing page, but the sites included in our study showed some interesting variations on the \u201cnorm\u201d.<\/p>\n

    Why it matters<\/h2>\n

    Navigation is how users orientate themselves when they first land on a website. It defines the core structure of the information presented \u2014 which in the case of most SaaS sites includes features of the product, pricing, details on the company itself, etc.<\/p>\n

    What we learned<\/h2>\n

    \"\"<\/a><\/p>\n

    <\/p>\n

    Keep the structure simple<\/h2>\n

    The average number of navigation items in the menu remains identical from our 2015 analysis at 4.3.<\/p>\n

    Keep the structure simple. There should be no reason to have more than 4-5 top-level navigational links. Things get more complex for multi-product companies, but most tend to include a \u201cProducts\u201d menu item to accommodate this.<\/p>\n

    Avoid hard-to-discover menus<\/h2>\n

    Don\u2019t bury other pages in a \u2018More\u2019 item in the menu. This is completely blind for the user, who\u2019s unlikely to click unless they know what to find there. Just 13% of landing pages included this \u201ccatch-all\u201d item in the menu. Looking for a good alternative? Including a sitemap at the bottom of the page is a good idea, and helps human navigation as well as SEO.<\/p>\n

    The majority of SaaS landing pages use a fixed (\u201csticky\u201d) navigation menu. This reinforces a sense of the user\u2019s location in the site structure at all times, and gives them a low-friction way out of the page they\u2019re on, other than closing the tab. However, an increasing number of sites limited the number of navigation links while scrolling, some just displaying a signup button. This results in a Call To Action that\u2019s always visible to the user \u2014 which is arguably a more elegant solution than spreading multiple CTA buttons down the length of the page.<\/p>\n

    \"\"<\/a><\/p>\n

    <\/p>\n

    Example 1: Mapbox<\/h2>\n

    Mapbox<\/a> reduces its navigation while scrolled to just two CTA buttons:<\/p>\n

    \"\"<\/a><\/p>\n

    <\/p>\n

    Example 2: Pipedrive<\/h2>\n

    PipeDrive<\/a> uses the hotly-debated \u201chamburger menu<\/a>\u201d for navigation (the user must click the three lines to open the nav menu). This was the only site in the whole study offering this style of navigation on desktop, although it\u2019s far more common on mobile layouts. Perhaps their intention here is to reduce clutter and encourage visitors to scroll on the landing page? Less control for the user, more opportunity for the company to define and push users through the optimal navigational flow.<\/p>\n

    \"\"<\/a><\/p>\n

    <\/p>\n

    Part 2: Page length & Scrolling<\/h1>\n

    Just as with our previous analysis, we analyzed the page length of each landing page \u2014 looking at what this means for user scrolling on a typical desktop screen resolution.<\/p>\n

    Scrolling is not necessarily bad, however. Various studies have shown that scrolling is a more natural interaction for users \u2014 if it\u2019s not clear what to do on a page, generally people will scroll down. Our study shows that companies take different approaches to spreading their content out, some opting for multiplesmall pages and others fittingall critical product information on the landing page itself.<\/p>\n

    This year we have a different king of (short) page length: Slack<\/a>!\"\"<\/a><\/p>\n

    <\/p>\n

    Here\u2019s a visual overview of the page length data:\"\"<\/a><\/p>\n

    <\/p>\n

    Part 3: The Hero<\/h1>\n

    Why it matters<\/h2>\n

    If the landing page is the user\u2019s first impression of your website, the hero section serves as the user\u2019s first impression of your landing page. If you\u2019re going to shock, wow or ultimately impress your visitor, this is the place you need to do it.<\/p>\n

    What we learned<\/h2>\n

    \"\"<\/a><\/h2>\n

    Leverage humans<\/h2>\n

    73% of the landing pages we analyzed showed people \u2014 many of these shown within the hero section. Human faces are proven to grab attention, and for a category like SaaS which is not inherently emotional in its nature, this is one of the most effective ways to convey or inspire emotion amongst visitors.<\/p>\n

    Video is mainstream<\/h2>\n

    53% of landing pages use video of some kind to convey product value to the user as quickly as possible. Videos are proven to be more engaging than images in certain contexts, so it makes sense that more businesses are leveraging the format, in spite of the high cost to create. Even in 2015, studies<\/a> showed that 4X as many consumers would rather watch a video about a product than read about it. In this year\u2019s study, we saw this taking two forms:<\/p>\n