What was popular two months ago in website design is old news now. Big business are expected to roll out fresh redesigns every few months, depending on what the newest UX patterns and trends. Regardless of company size, product or target customer, the landing page is often a user’s first contact with your brand. You have the possibility to create a huge advantage through a compelling, convincing landing page that converts users to customers.
Here is our TOP 10 Saas Pages and our review
https://www.pinterest.com/flyingsaucerstudionyc/top-10-saas-websites/
We cover tons of information in this post and to make it easier, we split it up into 7 parts:
- Navigation
- The Hero
- The Headline
- The Call To Action (CTA)
- Social Proof
- Video
- Other findings
Part 1: Navigation & Page length
Navigation is the backbone of any website by helping to oriente users when they first arrive on the site. It’s usually at the top, and flows from left to right. and includes features of the product, pricing, details on the company itself, etc. If it’s not clear what to do on a page, generally people will scroll down. Companies will either opt for multiple small pages or fit all critical product information on the landing page itself.
Keep the structure simple
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 “Products” menu item to accommodate this.
Avoid hard-to-discover menus
Don’t bury other pages in a ‘More’ item in the menu because the user can’t easily find it. Instead, include a sitemap at the bottom of the page to help human navigation as well as SEO.
The majority of SaaS landing pages use a fixed (“sticky”) navigation menu. This keeps the user oriented on the site with easy mobility from page to page. An increasing number of sites limited the number of navigation links seen while scrolling but still include a Call To Action that’s always visible.
Example: Mailchimp
Mailchimp is easy to navigate with its four simple buttons at the top of the page. The titles are clear and easy to understand, helping you to easily navigate the website.
Part 2: The Hero
If the landing page is the user’s first impression of your website, the hero section serves as the user’s first impression of your landing page. If you’re going to shock, wow or ultimately impress your visitor, this is the place you need to do it.
Leverage humans
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.
Video is mainstream
53% of landing pages use video of some kind to convey product value to the user as quickly as possible. We saw video use taking two forms:
- A big ‘play’ button over the image to get users into the product video as smoothly as possible.
- A silent video background on the hero section, previewing the full product video (which users could choose to play).
Example: Vend
Vend is not the best UI but it explains itself well on the website and helps the user to understand the tools easily. With a well-placed table of contents, video reviews and icons for different activities, we get a good first impression of Vend.
Part 3: The Headline
No hero is complete without an accompanying headline. The headline (average 6 words) is basically your initial product pitch, and needs to grab attention in the same way that the image does.
We saw a few different strategies in our analysis:
- Simply state what your product is, e.g. “Simple design, prototyping and collaboration.” (Marvel)
- State what your customer can do with your product, e.g. “Catch, convert and keep more customers.” (Intercom)
- State something aspirational and/or provocative to grab attention, e.g. “Put your creative energy to work, with Dropbox” (Dropbox)
- (NEW) Outline the problem your product solves, e.g. “Help desk software isn’t helpful anymore.” (Kayako)
From our data, Number 2 is by far the most-used type of headline. Telling people what your product does is less effective than telling them what they can do with your product.
Example: Asana
I love this headline from Asana. At just three words, you’d think it would be too vague to convey the product’s true value (so many businesses end up with “grow your business”), but it still gives a sense of what Asana the product is about: Reducing friction, organizing teams to get work done.
Part 4: The Call To Action (CTA)
The Call To Action (CTA) is the one action that every single element on the landing page is trying to get your user to take. Clicking a CTA indicates that the user wants more information or they want to sign up.
The key decisions for an effective CTA are:
- What text to use (hint: Over 90% are less than 5 words in length)
- What color to use (hint: Nearly 70% of all CTAs are green or blue)
- Where to place it (hint: Many sites duplicate the primary CTA or make it ‘sticky’)
The most successful CTAs state explicitly what will happen when the user clicks it. “Sign up” is not as explicit as “Sign up for free 2-week trial”.
Example: Timely
Very solid CTA from Timely — captures email upfront, specifically requests “work” email, and has a fallback “Start my free trial” secondary CTA.
Part 5: Social Proof
Social proof comes in a few different forms on landing pages:
- Customer testimonials (quotes)
- Links to case studies / customer stories
- Customer logos
- Social media embeds
The purpose of social proof on a SaaS website is to remove hesitation and promote confidence in the user, proving nearly as effective as word-of-mouth.
The problem, of course, is that with every hopeful SaaS business pasting the logos of successful companies across their landing page, users might develop “blindness” to this technique.
Customer logos are now often placed without any explanation, causing people to make the assumption that these logos are in fact customers.
Example: Squarespace
The team at Squarespace have done a great job of leveraging social proof. They link back to a “See All Stories” page which opens to Keanu Reeves’ testimony, which helps shows the brand’s effectiveness.
Part 6: Video
Video proves to be more effective than static images. You can convey a whole product, company, vision in a 30 second video, where it could take a 10-page website with 25 clicks and tons of scrolling to convey the same level of information.
It’s considerably more expensive to create than static imagery, but that cost is coming down, to the extent where most startups can create a professional-looking demo video.
What we learned
We saw an increase in the number of sites using some form of video on their landing page this year — from 46% in 2015 to 54%.
We saw video used for:
- Silent video backgrounds for the hero section
- Product demo videos
- Company culture or vision videos
- Customer testimonials
Example: Asana
When you scroll down on the Asana website, the play button is right there. The resulting product video is well thought out, simple and uplifting and explains the website perfectly.
Part 7: Other findings
Content belongs everywhere
Websites are pushing their content into every corner of their website, including highlighting it on the landing page. This helps the landing page feel dynamic, increase lead captures, and helps establish the brand as a thought leader.
Key is to find inspiration everywhere, if you get stuck on something, look how other industries or companies do it and it might help you find solutions.
We hope this review might save you some time on those researches ;-)
Article written by the Team — Flying Saucer Studio
More from
Impact & Inspiration
category
