Twitter experiment: #projectlandingpage

Uber geek time.

Two landing pages. Which is your favourite?

RT to vote!

Landing page A

Landing page A #projectlandingpage RT to vote! twitter.com/H4WTS/status/3…
— Simon Hawtin (@H4WTS) April 28, 2013

Landing page B

Landing page B #projectlandingpage RT to vote! twitter.com/H4WTS/status/3…
— Simon Hawtin (@H4WTS) April 28, 2013

Background video that drives landing page engagement

A video is a great way to engage users when they hit your website for the first time. Rich media is a more effective method of grabbing and maintaining the attention of website visitors versus standalone text and imagery.

It's the reason why more people choose to watch TV than read. A video does the work for you; no need to scroll, no need to read from one side to the other, just adsorb the moving imagery and sound. Easy peasy.

Grab the attention of your visitor

A landing page needs to tease the visitor into finding out more about your products/services. It's a soft sell, not a hard one. You want to provoke that exploratory 'Indiana Jones' instinct that we all have. Why is this company doing this? What makes them better than the rest? Who's behind it?

Using multimedia like video as a landing page background can work wonders in terms of pushing your visitor down the sales funnel from a potential bounce to a potential customer.

Background video that dominates every pixel

Spotify do an excellent job of using background video in their landing page. A lot of websites are comfortable with just displaying a video shell, and although they are to be applauded for using video, the impact isn't anywhere near as to what you get when you hit Spotify's video splash landing page.

The video fills the entirety of the screen, there isn't a single pixel being dedicated to this multimedia marvel. It's engaging, it's encapsulating, it holds your attention like a rabbit in the headlights. For a good 5-10 seconds you're doing nothing other than staring at the delightful imagery unravelling before your eyes. Sound is optional, but turn it on and the impact is maximised.

When it comes to landing pages, Spotify smash it out of the park

Spotify exemplify the use of a landing page exceptionally well. Firstly, rule number one of engaging visitors to a landing page is quite simply smashed out of the park. You hit the sight and BOOM, one mahusive video appears behind the headline. It does exactly what any digital marketer would want a landing page to do. It increases the time on page, or dwell time, thus increasing the likelihood of the visitor moving onto the next stage in the sales funnel.

The second most important aspect of a landing page is the messaging and call-to-action. 

Music for every moment. 

What a strapline. It's bold, succinct, sharp and all encompassing. Everything you want to listen to you can find here. Whatever the mood, Spotify has the tracks.

As for the call-to-action, it features on a classic "click me, click me" bright green button. The message is simple, "Get Spotify for free". A freemium model is used prompting users to trial the service. Spotify hope you'll eventually be happy enough to fork out a small monthly fee for the added benefits.

Not quite sure you want to go straight to sign-up? (Really, after that video?!) There's a "Find out more" classic hyperlink underneath. 

This is a combination that a lot of sites use. The big, click friendly button with an old school anchor tag alongside. It works very well for Spotify as there is such focus being placed on the sign-up button, especially with it being in the middle of that glorious full screen background video.

Rich media background that backs up the messaging

One of the nicest aspects of Spotify's background video is that it's not even selling the service. It's purely imagery that's relevant to what the service is about. Each clip is a visual cue to a mood, or genre of music. Hip hop, jazz, and easy listening are just a few of the genres visualised in the video.

When it comes to background videos it makes sense for them to accompany the messaging on the page, not be the messaging. With text overlay it would look messy for text content to be appearing from behind in a video. 

Another example of background video accompanying messaging is Maersk's fleet website. It uses full page background video to showcase ships within it's fleet.

Summary

If you're thinking about using a video sprawled across your background to grab the attention of visitors to your website, keep in mind these simple suggestions:

Relevance is crucial: make sure that the first thing a visitor to your sites sees is entirely relevant to what you are pitching them. Videos have a big impact and it can work both ways. An irrelevant video can push the visitor away from your site just as quick as a good video can pull them towards becoming a customer.

Content overlay: ensure the content on-top of the background video can easily be seen. The most annoying feature for a visitor would be if they couldn't read the key messaging. Ensure the colour and contrast of the video showcases the messaging and call-to-action in its best light.

Be mindful of page load: a great big whacking video can strain the servers so you'll need to be sure you've got what it takes under the hood. Check with your hosting company that running a data intensive video on your home page/landing page won't ruin your page load times. No one likes waiting for a website, no matter how good the video is.

Nifty tool that prompts direct sharing of your blog content

A really quick post. I've just been reading a blog post on KISSMetrics and noticed quite a handy little feature to allow the sharing of content. When you release your finger after highlighting text a small widget appears to the right of your cursor. It's a sharing tool embedded into the page, designed to appear to allow you to share content directly from within the article.

It's a nice touch and saves the user a copy and paste. Not that it takes long mind you, still a nice helpful feature that prompts sharing, something you want your blog to do.

Colourful responsive design and refreshing functionality - Voice and Tone

MailChimp have a dedicated site to help educate their customers on the use of voice and tone throughout their site. Voice & Tone is an interactive guide showing that although the voice of MailChimp does not change the tone does depending on the message they're trying to get across. Despite the introduction this article focuses on the functionality and usability of the site. There are some excellent modern features definitely worth discussing.

Responsive design yields an excellent mobile site

I first visited Voice & Tone from my smartphone and instantly took to the site. As it's responsive design the feel of the site does not change when you switch devices. The image at the start of the article is viewed on a PC, this is what it looks on a mobile device:

There is a clear header section in black including the name of the site and a drop down menu. When you click the menu it expands down the page revealing a rainbow of other pages you can visit. The whole process and result is quite intriguing and eye catching. This is what you see:

When you click a page the menu retreats back and the background colour of that link applies to the page. The page content slides in from the right with the header fading in. There is then additional navigation in the form of arrows just underneath the header to allow you to continue reading section to section. When you click an arrow the same effect of sliding content and fading headers occurs. It's engaging, colourful and very refreshing. You really appreciate the effort that's been put in to the site's development.

Content layout and contrast that catches the eye

Back to the site viewed on a desktop computer. The site is broken down into two columns with the navigation on the left and page content on the right. One of the great things about the actual content is how it's laid out and displayed. For example, take a look at the page below which discusses the tone for MailChimp failure messages:

Notice the callout boxes, one on a white background with black text and the other diagonally opposite in the opposite colour scheme. Accompanying the callouts are short bullet points clearly explaining the reasoning behind the tone for failure messages. Compared to standard information pages it stands out and catches your eye.

Summary

Voice & Tone uses clever front-end web technology to give an excellent user experience that is both engaging and equally refreshing. To add to the experience the site features responsive design which allows for exactly the same feel and tone across multiple devices, something that is becoming increasingly important as more users access the web through their smartphones and tablets.

"Responsive design allows for exactly the same feel and tone across multiple devices." (Click to Tweet)

Accessible and helpful navigation

Paying your utility bills online is a chore and unfortunately also a necessity. It's helpful then when your provider provides you with an easy and hassle free website to make the whole process as pain-free as possible. My current water company is Thames Water and although I don't think their homepage is blogworthy in itself I do like one feature that I'd like to highlight.

Help visitors find exactly what they're looking for

The navigation menu at the top of the page includes only three links with sub-menus that open up when you mouseover. They are 'Your account', 'Help and advice', and 'Save water'. There's also a site search feature if you can't find exactly what you're looking for within these sub-menus.

When you mouseover a link the screen darkens behind with the sub-menu appearing bright and drawing focus. Let's have a closer look:

There are five traditional menu options listed and then to the right you see a 'most popular' feature. These include iconography and larger font to highlight what the majority of the visitors are coming to the site for. This is great because it helps me as a "reluctant customer" to carry out this dull task with utmost efficiency.

Be nice to Nans

The same happens for the remaining two sub-menus, take a look at the 'Help and advice' sub-menu:

Not only are the 'most popular' links helpful in getting customers through the site faster (and ensuring minimum call centre cost for the utility company) they're also accessible. Let's not forget that despite the web catering heavily for the younger generations, your Granny might still want to get on the internet to pay her water bills. Large stand-out icons are much easier to spot than smaller text links.

Summary

Thames Water haven't got the most inspiring home page, but then they're not exactly pitching a sexy product like DISQUS. Sectioning off and highlighting your most visited pages within a navigation sub-menu is a clever way of directing site traffic in an efficient and helpful manner. As with UX the user has to be at the heart of the site design, and at least with this feature I feel Thames Water have got it spot on.

Increase conversion with video and a smart sign up form - Shopify

Shopify is a platform that allows you to build, launch, promote and manage your very own ecommerce site. It's one of the web's latest goodies and is helping entrepreneurs literally set up shop a lot easier. So what can this web 3.0 site teach us from a UX perspective?

Titles to the point and a smiley girl

A simple black header with the logo far left and navigation on the right sits atop. Below this is a large title using attractive font with a smaller description underneath. The title reads "Use Shopify to create your online store." To the point and very clear. The visitor straight away understands what Shopify can offer them.

A smiley girl, not the first we've seen on this blog, sits to the right of the middle of the screen. There she is looking all happy and welcoming, just the sort of image you want to greet visitors.

Video to engage and educate

Right smack bang in the middle of the screen is the infamous play icon, synonymous with YouTube. Hover over it and it gets bigger in a wobbly type of way, egging you on to click it.

I'm a massive believer in videos and their positive impact on conversion rates. There is no better way to make an impact and put across your message with a video. You have sound, moving images, faces, animation and narration all working for you in tandem.

"A video has sound, moving images, faces, animation and narration all working for you in tandem." (Click to Tweet)

Clicking on the play icon opens up Shopify's 56 second video in a light box. It's hosted on YouTube so you have the usual options to enlarge the screen and share.

One of the advantages of opening the video on top of the same page is that the visitor can easily close it down and return to the key message, and in the case of Shopify, a sign up form.

Make signing up look attractive and you'll boost conversion

I'm a big fan of the sign up form below the video on Shopify's home page. For starters they've got a speech box pointing down to the first input box prompting and helping the user. But what is the first thing a visitor must put in? Their name? Their email address? No. Their store name.

Shopify get the juices flowing and appeal to the entrepreneur who wants their own shop by asking first for the name of that shop. What will you call your shop? That's a lot less personal and a lot different to the usual sign up form. It's attractive and it creates desire.

The input boxes themselves are well designed. You click on one and the placeholder doesn't disappear until you begin typing. This is a clever way of prompting the user right up until they begin typing. The input box has a nice shade of blue as a border to highlight where you are whilst your cursor blinks patiently awaiting your store name.

There are only two more input fields you need to address, one is your email and the other is a password. Then there's one of those buttons that you just have to press. Green, bold, and ultra clickable. And that call-to-action? "Create your store now". Relevant and sharp. A CTA that is offering you the opportunity to become your very own online shopkeeper. Full of optimism and, dare I say it, the American dream.

How and where to demonstrate a plugin - DISQUS

DISQUS is a comment box plugin with an array of brilliant and helpful features. It's probably the most popular comment box plugin I've seen websites using of late, every man and his dog seems to have it on their site.

Let's take a peek at the DISQUS homepage, this is what you see:

Like all home pages this is essentially a landing page, just not specific to source of traffic or the demographics of that traffic. The overarching goal of this page is to get you, as the visitor, to sign up and begin using DISQUS. This is done by demonstrating the product's features and benefits and illustrating how it can be of use to you.

The best time to demonstrate the product

When you first hit the home page a little balloon flies off into the ether, the background underneath the bold blue header scrolls diagonally and a demo DISQUS comment box opens up before your eyes. This is the plugin in all its glory, and you've seen it within 3 seconds of hitting the home page.

A speech box appears to the left of the comment box telling you someone's talking to you and prompting you to reply. What DISQUS is doing is getting you using the product even before you've read what it actually is. When you come to read the features and benefits you're already well aware of how it works and if you're like me (an easy sell) already you'll be willing to sign up.

Breakdown the barriers and grab their attention

When you click the reply box it expands and allows you to post as a stranger, a.k.a. anonymous. How many times have we been roped into a quick demonstration when the website requests an email address first. Erm, no thanks.

Trial the product out, see how it works, click things, investigate...all without having to sign-up. How refreshing.

Seek conversions with a bright and prominent CTA

So you've been given chance to play around with the product and within 2 minutes you already know how DISQUS works and, more importantly, you can visualise it on your site. That little orange button in the prime real estate position on the page is about to come into its own.

"Get this on your site". It couldn't be any more relevant.

Summary

By demonstrating your product in a user friendly way on the home page you are waving it in front of as many faces as possible. Why force the features and benefits down the neck of your visitor before they've even seen the product in action? For a plugin this is a very sensible tactic to maximise the amount of conversions. You're breaking down the barriers before the visitor has even moved on to another page.

"By demonstrating your product in a user friendly way on the home page you are waving it in front of as many faces as possible." (Click to Tweet)