Good UX vs Bad UX: Landing Pages

Posted on
October 25, 2019

Today we’re going to talk about UX best practices for landing pages. Landing pages (LP) are often designed very differently from any other web page on a site. They are the insane looking candy apple you see on the cooling rack in the storefront display, the sneak peak of the merchandise that makes you break your commitment to strictly window shopping that day. LPs have one purpose: Get the user from selecting the ad word or search result to the checkout page for purchasing.


If you’re more of a visual learner, you can watch this on my youtube video!

Let’s begin! I’m going to compare landing pages for mattresses, since I’m currently on the market. I’ve selected the top results for “new mattress” as a search term--Casper, Nectar, Tempur-Pedic, and Sit n’ Sleep--in order to compare their LP UX. 

You want to make sure you engage a user as soon as they arrive on your landing page, discouraging them from clicking that dreaded “back” button and exploring a different site. We’ll be reviewing which sites offer good and bad examples of key LP components, outlined below.

LP Tools for Engagement:

  • Headline
  • Hero Image
  • Call to Action



Headline

The headline is important because it’s one of the first things a user sees after landing on a page. They want to make sure they’re on a site that matches what they’re looking for.



Confirming that I am, indeed, on a mattress website is really the bare minimum for what a headline should do for me as a user visiting these sites. Let’s start looking at our mattress companies to see who takes it a step further and really delights us with their headline and who leaves us disoriented.


Good Example:



  • Pain points are specific problems that prospective customers may be having.
  • Nectar’s headline directly addresses customer goals and pain points: finding the best mattress in order to end a laborious search. 


Bad Example:

  • Meaning of the headline is unclear
  • Headline difficult to read and the photo's emotional impact is compromised by the text
  • Too much copy above the fold (i.e. in the upper part of the screen before you have to start scrolling) creates a diluted message.


Due to these challenges in design, I feel confused about their product, rather than excited by it. I want a mattress that I can fantasize about having pillow fights and slumber parties on along the lines of that one scene in 13 Going on 30:


Instead, I’m wondering whether Tempur-Pedic’s cool mattress is going to keep my feet icy ALL. NIGHT. LONG. 


Hero Image

User’s eyes are quickly drawn from the headline to the image associated with it. A good hero image is going to show the product used in context and/or create a feeling. Some products, like software or customer service, are more difficult to depict in use. In these cases, hero images are all about building an emotional reaction.


Let’s compare Casper and Nectar.

Good Example:

  • I can see myself in this customer because she is in a space I recognize (bedroom).
  • Falling asleep while reading evokes a sense of and leisure and luxury.

 

Bad Example:

  • Image is boring
  • I have to do all the work as the user to imagine what it would be like to use the mattress.


Call to Action

A call to action (CTA) is a prompt on a website that encourages a visitor to take a certain action. 

Good Example:

  • “Click Here to Shop Now” message is in a different color than all of the other text on the page.
  • CTA is easy to find right in the center of the page


Bad Example:


Tempur-Pedic has two calls to action, “Shop breezeⓇ” and “Shop Mattresses.” Having two CTA is usually a big no-no, especially if they’re both above the fold. Like I said at the beginning, a LP should have one clear objective.


If we leave it up to the user, our stick figure driver may be overwhelmed by the choices and decide not to park at all (read: hit that back button instead of moving further into the site). If you really want or need to have two CTAs, at least differentiate them in color and size to indicate to the user which action is the priority:





Supporting Content

So we’ve gone over best practices for eye-catching aspects of an LP that a user will see, but what about the other content?  What we do once the user has been hooked? They’ve been reeled in by the hotdog man and now they’re scanning the menu. 

It’s important to have trust signals all over the page. These can take the form of reviews and payment assurances, for instance. But trust signals can be built into things as seemingly mundane as contact information. Casper’s LP, for instance, has a “Chat with a Human” option that refers you to a friendly face.

Good Example:

  • Chat feature humanizes the brand
  • Builds trust 
  • Makes me feel like they put people first and therefore my needs are a priority


The review section provides a great opportunity to add trust signals. Reviews have the potential to show a user that the claims made on an LP are not just self-propaganda, but have been confirmed by real people just like them. 


Good Example

  • Reviews from Google or Yelp are easy to import
  • Data from multiple review platforms builds trust

Bad Example:

  • Using actual pictures of people would legitimize the reviews.
  • Review banner doesn’t give you clear next steps on how to pursue more information and the user may be left confused. We don’t know where these reviews are coming from and none of them specify which bed was purchased. 


In addition to trust signals, it’s important that the content on a landing page doesn’t overwhelm and can be quickly and easily scanned by a user. We’ll look at Nectar first and then Sit n’ Sleep

Good Example:

  • Clear, simple copy
  • Reasons to purchase listed in clean blocks (1 and 2 of 7 shown here), makes it easy to digest
  • Each reason paired with supporting picture


Bad Example:

  • 3 different values explained in one block of text makes me work harder
  • Difficult to skim


I know some UX designers who only work on landing pages and are totally bada** at it. Maybe this is you! LP’s are somewhat more simple because there is a framework of best practices that pretty much any kind of website should follow, but there’s also room for creativity in the content and the imagery. If landing pages get you stoked, it’s possible to make a career out of them! 


Before we wrap up, let’s go over the main take-aways from our mattress comparison today.



Make sure to comment on this article and subscribe to my youtube channel if you liked this article and want to see weekly content on UX design!


Posted on
October 24, 2019
in
Design
category