Check out the new analysis here:<\/strong><\/p>\n SaaS landing pages in 2017: Our analysis of 100+ top businesses<\/a><\/p>\n For this analysis, we scoured over 40 landing pages across the web. It’s clear that web design standards and best practices, as well as advanced optimization techniques, are leading to conformity of most standard elements. However, business websites still need a way to stand out, and to market the product in new and inventive ways to the user.<\/p>\n Follow Ed’s board Top SaaS Landing Pages on Pinterest<\/a>.<\/p>\n Obviously fairly essential, the navigation allows the users to get around your site. Things to consider\u00a0here include:<\/p>\n Although a navigation menu might seem like a fairly standard element in any company’s website, there are things you can do here to guide the user through your site’s content in the most natural way for them. Think about:<\/p>\n This is the single image (or video) that grabs the attention of your user, and entices them to read more about your product. Quite often this will be a full-width large image, that takes up most of the visible screen. The hero shot has emerged as the leading element of landing pages in recent years, with high speed internet allowing for large, high-resolution images showcasing the product in a much better way than words ever could.<\/p>\n There is a huge amount of psychology behind imagery on websites, and how the user is affected by colors, different styles, faces etc. I asked our design \/ front-end expert at ChartMogul for some input on hero images and the inclusion of people:<\/p>\n “It\u2019s important to make clear who we\u2019re designing & building for, showing we\u2019re putting real people first, not some technology. And generally humans react more intensely to faces than a product screenshot.”<\/p><\/blockquote>\n The USP is your unique selling proposition. It describes in the most concise way possible what your product is about – and persuades your visitor to continue browsing.<\/p>\n What will the customer get by signing up for your product? A list often works well here. NOTE: The temptation with this is to gravitate towards listing the features that your product offers, i.e. “20GB cloud storage”<\/em>. This is not a benefit, and is not compelling. How\u00a0about “access all your files from anywhere”<\/em>? That’s a benefit, and the visitor can identify with it, and understand\u00a0how it improves their life. As the folks\u00a0at\u00a0User Onboarding<\/a>\u00a0put very eloquently:<\/p>\n “People don’t buy products; they buy better versions of themselves.” – Samuel Hulick, User Onboarding<\/p><\/blockquote>\n This can include a signup form, or simply a button, and is the primary goal of the landing page. A\u00a0key goal\u00a0here is to have a single call to action on the page. Multiple CTAs make it less clear for the visitor and risk clouding the powerful message you’re conveying. Multiple options = lower conversion.<\/p>\n This is really important in giving the visitor that extra piece of confidence required for them to vote with their mouse pointer and sign up to your service. There’s no more powerful persuasion tool than personal recommendation, from\u00a0real people.\u00a0<\/em>If visitors can see that others are successfully using your product, they’re much more likely to come onboard themselves.<\/p>\n As always, simplicity is king.\u00a0<\/em>The challenge with so many enterprise business websites is in distilling down what are hugely complex products and solutions into something that the user can interpret and evaluate in just a few seconds. Attention Ratio is a representation of how many links the user has the option to click on your landing page vs. the primary conversion goal (i.e. a trial sign-up). Whilst you’re never going to achieve the holy grail of a 1:1 ratio on your main company landing page, you should remember that every link the user can click other than the signup CTA is giving them a “way out” of converting. Read about the concept of Attention Ratio on the Unbounce blog<\/a> – and then take a look at your landing page. What’s the attention ratio there?<\/p>\n The length (or height) of a landing page has a large\u00a0impact on how the user behaves on the\u00a0page. If the user needs to scroll a certain amount to see some critical information, it’s likely that you’ll lose a certain proportion of visitors before they read it. However, you shouldn’t dismiss scrolling as\u00a0a bad thing – research suggests that scrolling has become a natural interaction\u00a0on the web that users almost instinctively take\u00a0when they want to read more on a certain topic. So then the question here is more about the\u00a0layout\u00a0<\/em>of information, such that the things that are really important for the user to see are positioned higher up, with little to no scrolling. The landing pages we analyzed were a variety of lengths. At the extreme end, there is\u00a0Mailchimp, which requires\u00a0almost no scrolling at all and offers a level of simplicity that almost no other SaaS company matches:<\/p>\n Whilst Mailchimp gives us a glimpse of a landing page that delivers a clear, concise message to visitors, most landing pages required around 4 full page scrolls to reach the end. You can see an overview of the length of all pages in the diagram below: Technology and connectivity is reaching a point where websites are able to display high-resolution, full-page video embedded in the page. See an example here<\/a>. Whilst the rise of full-width retina images have led to higher engagement and conversions in web pages, it’s not yet clear whether full-width auto-playing video background takes this improvement even further. The folks at LeadPages recently introduced a video background landing-page template<\/a>, hinting at\u00a0great conversion rates. Although it’s likely very specific to the actual video content shown:<\/p>\n “One of the reasons why this works so well is that the video being used is aspirational and makes people feel really good.” – Jeff Wenberg, Leadpages<\/p><\/blockquote>\n We’re testing a background video variant\u00a0of\u00a0the ChartMogul landing page<\/a>, but it’s too early yet to pull any meaningful results.<\/p>\n NEW on @ChartMogul<\/a>: What we learned analyzing 40+ top #SaaS<\/a> landing pages http:\/\/t.co\/6j1dd10nYW<\/a> pic.twitter.com\/TwvwDx58MZ<\/a> \u2014 ChartMogul (@ChartMogul) September 2, 2015<\/a><\/p><\/blockquote>\n
\n\nView the landing pages<\/h2>\n
Elements of a SaaS landing page<\/h1>\n
1. Site navigation<\/h2>\n
\n
Example: SendGrid<\/h3>\n
![\"sendgrid\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/08\/sendgrid.png\")
Example:\u00a0Vend<\/h3>\n
![\"vend\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/08\/vend.png\")
What did we learn?<\/b><\/h3>\n
\n
![\"snippet3\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/09\/snippet3.png\")
<\/p>\n2. Hero shot<\/h2>\n
Example: Contentful<\/h3>\n
![\"contentful-hero\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/08\/contentful-hero.png\")
Example: Google Apps for Business<\/h3>\n
![\"ad](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/09\/googleapps-hero-1-720x269.jpg\")
<\/a><\/p>\nWhat did we learn?<\/strong><\/h3>\n
\n
![\"snippet1\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/09\/snippet1.png\")
<\/p>\n3. Your product’s USP<\/h2>\n
Example: Huddle<\/h3>\n
![\"huddle-usp\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/08\/huddle-usp.png\")
Example: Intercom<\/h3>\n
![\"intercom-usp\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/08\/intercom-usp.png\")
<\/a>What did we learn?<\/strong><\/h3>\n
\n
![\"snippet4\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/09\/snippet4.png\")
<\/p>\n4. Product benefits<\/h2>\n
Example: Geckoboard<\/h3>\n
![\"geckoboard-benefits\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/08\/geckoboard-benefits.png\")
Example: Dropbox<\/h3>\n
![\"dropbox-benefits2\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/08\/dropbox-benefits2.png\")
What did we learn?<\/strong><\/h3>\n
\n
5. Call to action (CTA)<\/h2>\n
Example: Freshbooks<\/h3>\n
![\"freshbooks-cta\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/08\/freshbooks-cta.png\")
Example: Zenpayroll<\/h3>\n
![\"zenpayroll-cta\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/08\/zenpayroll-cta.png\")
What did we learn?<\/strong><\/h3>\n
\n
![\"chart-branded\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/09\/chart-branded.png\")
<\/p>\n6. Social proof<\/h2>\n
Example: Docusign<\/h3>\n
![\"docusign-socialproof\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/08\/docusign-socialproof.png\")
Example: ChartMogul (yep, that’s us)<\/strong><\/h3>\n
![\"chartmogul-socialproof\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/08\/chartmogul-socialproof.png\")
What did we learn?<\/strong><\/h3>\n
\n
![\"snippet2\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/09\/snippet2.png\")
<\/p>\nOther\u00a0Findings<\/h2>\n
Attention Ratio<\/h3>\n
Page Length<\/h3>\n
![\"mailchimp\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/08\/mailchimp.png\")
![\"page-length-analysis\"](\"https:\/\/chartmogul.com\/blog\/wp-content\/uploads\/2015\/08\/page-length-analysis.png\")
<\/p>\nAnimation & background video<\/h3>\n
Share this post<\/h3>\n