How to make the most of 404 pages and basket abandonment emails

Lew Slade
By Lew SladeDesigner
7 minutes to read

404 error pages and basket abandonment figures are both examples of jarring points in the customer journey.

They both represent dissatisfaction, lost opportunity and, especially in the case of 404 error pages, a poor user experience.

There are a lot of stats that back up this assertion. 73.72% of users who encounter a 404 on your site will leave and not come back, sometimes for good! Similarly, the average basket abandonment rate sits at 69.89% which represents a significant amount of unsold goods and a lot of missed opportunity.

But despite both of these problems sounding like they can’t be saved, there are still ways you can encourage a conversion and improve the user experience.

First, we’ll look at error pages.

 

Sorry, article content not found

When there is an issue with a website’s performance, the web server sends a status code which comes in the form of three digits. The first digit of the code represents the class of the status code.

1xx is informational, 2xx is successful and 3xx is redirection. Each of these are resolved internally by the client and happen without the user’s knowledge.

There are two codes though that we see most – 4xx which is client error and 5xx, server error. Both errors display a HTML page so the user is aware that there is a problem.

If users can’t see or access the information they’re looking for, they are highly likely to leave. This is especially the case with 404 pages which occur when a link is pointing to the wrong location and the page is missing.

What’s more, when Google crawls a site and encounters a 404, it takes it as a signal of low quality and it can affect your search ranking.

But there is still opportunity within this failure. Aside from auditing your pages to make sure your links are functioning as they should be, the way you design a 404 page can help to improve the drop off rates.

 

What should a 404 page contain?

Even if your website doesn’t have any 404 pages, you should still take the opportunity to put thought into the design and customise the experience. You don’t have to settle for the standard plain HTML text page but can instead be unique to your website.

404 pages can serve a purpose and instead of signifying the ‘end of the road’, they can be designed to drive visitors to other relevant areas of your site. Here’s what a good 404 page should include:

  1. Explain which error has occurred and why. Including a brief explanation of why a 404 error has occurred can help users decide what to do next. In some cases, a 404 page could be because of user error like a mistyped URL.
  2. Make the next steps clear. After explaining what went wrong, give users options by adding a call-to-action button at the end of the error message to take them back to the homepage. If there is a more relevant page, like back to a category or another product page, then direct users there instead.
  3. Make it look natural. Make this page look like it belongs on your website by keeping your main navigation and footer visible. Show the breadcrumb trail if it fits with your design and style up the error message so it’s reflective of your brand.
  4. Express your personality. By keeping the copy light and owning your mistake, you can prevent users from becoming irritated and leaving out of frustration. Accompanying images can also help to placate frustrations too
  5. Provide alternatives. Include a search bar so users can search for what they’re looking for and easily leave the 404 page.
  6. Include suggestions. Suggest relevant content from different areas of your site such as news articles or products and services to help keep them on the site.

By tailoring your 404 error page, you can help turn a bad experience into a potential opportunity and keep users engaged.

79% of visitors who say they’re dissatisfied with the performance of a website are less likely to buy from the site. So an engaging 404 page can help to combat this.

Here’s a few examples to show you what we mean.

The champions of brand identity and tone of voice, MailChimp has extended its quirky yet practical approach to its 404 page. The copy on the page is playful while still being serious and helpful. This is complemented by the image and homepage button to help navigate back to what they were looking for.

Just like MailChimp, Disney extends its brand to its 404 page. It adopts the voice of one of the characters from Monster’s Inc. and extends that through to the language by referencing a key element of the film. For a 404 page, it doesn’t feel that out of place.

The page doesn’t try too hard to be quirky but is still related to Monzo through the animated bank card and then a fun fact about money. The messaging is really simple and straightforward. As there are few distractions on the page, the user is drawn towards the call-to-action to visit the home page.

Marvel’s error page changes regularly, with all of them referencing either a comic, a film or both! Previous incarnations include Ant Man, Tony Stark assembling Ultron and the current version references the state of Iron Man’s suit in the upcoming Avenger’s End Game film.

The 404 page is another Easter egg for fans that know the Marvel universe inside out while still featuring clear instructions on how to navigate away from the page.

GoPro take the opportunity to poke fun at the situation with a reference to its ‘Epic Fail’. The page is still relevant as it shows a video of another sporting epic fail shown from the perspective of a GoPro camera. It also provides users with alternative pages to navigate to.

The PlayStation 404 page looks like any other on the website and fits naturally into the user experience – so much so that it’s not immediately obvious it’s a 404 page! In addition to the normal navigation bar, it give the user three different options to navigate to.

Putting users back on the path to purchase

Where 404 error pages unexpectedly interrupts the customer journey, basket abandonment often happens through choice. Poor user experience and low levels of trust can be factors, but so can hidden costs and concerns about security.

There are two ways you can improve the user journey around the checkout process. The first is to improve the checkout process and the second is to retarget customers through ads and emails.

Prevention through education

Indecisiveness in a user can be down to how much they know about what they’re buying. In fact, 20% of users who fail to complete a purchase when asked to, can attribute it to incomplete or unclear product information. So it’s important to get it right in the first place.

Prioritise the benefits of the product so users can immediately see what they’re getting for their money. Don’t waste their time with unnecessary descriptions and immediately use the points that persuade users to buy your product.

The inverted pyramid method is a useful way to prioritise information. This approach will help you identify the most important aspects of your product that potential buyers will find most appealing.

By keeping descriptions clear, you will also help to avoid any confusion around the product. This should then help users make an informed decision and reduce basket abandonment rates.

Pre-abandonment: Improve your checkout process

A clear and efficient checkout process is a must-have. Checkout processes can be complicated and sometimes longwinded due to the amount of information a user has to input. The majority of the information required at a checkout process is necessary but there are still ways you can streamline the process to encourage completion.

  1. Don’t force a signup. 34% of users fail to complete the checkout process because they have to create an account. So provide users the option to checkout as a guest and you’ll cut down on abandonment.
  2. Make progress clear. 26% of users abandon their baskets because the checkout process is too long and complicated. Use a progress bar to inform and reassure users of how far through the process they are.
  3. Refine your forms to be a short as possible. Studies have found that the ideal checkout process includes 12-14 form elements and only 7-8 if you just count the form fields.  
  4. Provide live validation. This is most relevant on credit card numbers and email addresses. By providing live validation, it will help to prevent users from clicking submit and being met with error messages and having to start again.
  5. Include mobile shortcuts. Make shortcuts for mobile users by having the right keyboard options appear depending on whether the entry field is numerical or alphabetical.
  6. Summarise the purchase. Always have a summary of the purchase visible at each stage if you decide to segment your process. This will help to reassure and remind the users of what their purchasing. Including a brief description will also remind them why they are purchasing it.
  7. Remove distractions. By removing distractions you’re focusing the user’s attention and emphasising the call-to-action. Some companies opt to remove navigation options completely to prevent users from clicking back into the site and only display the brand logo.

Post-abandonment: Retarget customers with email

26% of customers will return to a website through retargeting whether this is through ads (which can be impersonal and don’t encourage engagement) or email. Retargeting emails can be much more personal and have higher levels of engagement. Nearly half of all emails are opened and over a third of customers who click through to the site make a purchase.

Abandoned cart emails serve as a gentle reminder to customers who may have failed to complete their purchase. Whether that’s through an active decision or a crashed or timed out website.

So to get the best out of your email, here’s what you can do.

  1. Remind them what they abandoned. Include the product name, image and perhaps a brief description too. This will, at the very least, jog their memory. If the user was indecisive in the first place, it will help to make or break their decision.
  2. Help them make the purchase. Include a link and a clear call-to-action which directs the user back to their cart, ready to make the purchase.
  3. Add a sense of urgency. If a product is about to sell out, tell the user how many are left. If it will only be discounted for a limited time, include this information. Provide the user with another reason to make the purchase.
  4. Include a discount. This isn’t a necessity, but a discount is a sure fire way to get a user to complete their purchase. However you need to think how you use this method. You don’t want users to expect a discount every time they abandon their basket so consider the sort of shopper you will offer this to. It will likely be the most effective with first time shoppers who have abandoned their basket.
  5. Personalise the copy. Retargeting emails should be treated like every other form of marketing. They need to be persuasive, memorable and personal. Make it clear to the user that this email is for them. Because this email is one that the user will actually want, you also have the opportunity to be playful with the content. Try to include some personality and you might find the response is warm. Don’t forget about the subject line either! This needs to be attention grabbing to get users to open the email in the first place.

Thank you, come again.

By capitalising on the opportunities when customers may be at their most dissatisfied, you can attempt to foster loyalty and placate rising tension. Ultimately, these techniques and opportunities will help to keep users engaged and on their path to conversion,

comments powered by Disqus

Articles by Lew Slade

Hey! I'm Lew a Creative Digital Designer at Enjoy Digital with a dedicated attitude to creative mastery in all fields of design.