Crafting a better 404 experience
Posted: Reading Time:How to Improve 404 Experiences on your Website
While this is a very good representation of what each of the http response codes represents, I would advise against saying "F you" to your users. Specifically if they hit a 404 on your site and they are frustrated that they can't find what they're looking for.
On this day, April 4th, Also known as 404 day, I'd like to outline some best practices for dealing with the 404 response code, specifically around providing a better experience for users that see this response.
1. Clearly explain what the error is
As developers and engineers, we're so used to seeing these error codes that they become second nature to us. The worst thing you can do is not have a 404 page for your application at all.
This leaves no resources for your users at all and forces them to rely on the back button to get back to your experience. Once they go back, they'll most likely try to hit the same link and consequently get the same error. At the very least let your users know there was an error, and that it's on your site's end, not theirs. There a ton of resources out there for setting up 404 pages for all platforms, like WordPress, Craft, Drupal, and even static sites.
2. Don't redirect the user
Another common mistake is to redirect the user to a dedicated /404 page, or replacing the current URI with /404. By doing this, you're preventing your users from reading or hacking the URL to resolve the 404 error on their own. Let's say a user is on website.com/articles/post-title. If /post-title doesn't exist, and you direct them to /404, they'll lose their sense of direction and where they were on the site. Being able to see the error on /post-title, will allow them to hack the URL on their own (if they are so inclined) to go directly back to the first URI segment of /articles, saving you from a bounced user with a negative experience. This implementation also has the potential to affect your SEO. By redirecting the user to a dedicated page, search engines are by proxy hitting this page more often.
Yoast describes this hack with the perfect metaphor:
Let me go back to my analogy of throwing everything into your drawer when your dad or mom told you to clean up your room. Everything, in this case, means not just the dirty clothes, or your toys, but also that half emptied milk carton, that half-finished sandwich, etc. You know what that makes your drawer when you clean up your room like that? A mess. And soon your whole room will start to stink because you cleaned up like that. This situation is no different.
3. Direct users to other key areas of your site
The final thought in the cognitive load of dealing with a 404 response is usually "OK, but what do I do now?". Instead of making users return to the homepage or navigating through main navigation again, why not serve up direct links to some of the other impactful sections of your experience?
If a user came directly to your site and experienced a 404 from a deadlink on an another site, this is an opportunity for you to articulate what your site is all about with a few links representing what you focus on. At Hill Holliday, our work is the most important thing. We're able to promote our case studies in a fun way by sending users off to one of our case studies at random. I've heard anecdotal stories from random users that this sent them down an unexpected rabbit hole of watching all of our commercials and case studies.
4. Suggest content that your users may have been looking for
This point comes with some caveats that your platform needs to support something like this, but if you are able to I definitely recommend it. On HHCC.com, whenever a user encounters a 404 we dissect the URI and try to find what the user may have been looking for.
For example, if a user hits https://www.hhcc.com/rob, we look at the slug run a query against that term to see if we have any content on the site that meets that criteria. If we do, we list it out and allow the user to directly jump to it.
With this small feature, bounce rate dropped 29% from 404 pages on HHCC.com.
5. Offer up something charming
As mentioned before, landing on a 404 page can be frustrating for users. By offering up something cute or charming, you can defuse some of that frustration and save some face for your brand or experience. Don't get me wrong, we should absolutely provide the best experience for our users in terms of content and hierarchy, but sometimes a nice human touch can go a long way.
In 2016, I built a silly Flappy Bird clone called Kappy Bird using our CEO's, Karen Kaplan, head as the avatar for a fun company outing. I was able to repurpose this game on our 404 page, so that if a user isn't satisified with any of the other suggestions outlined above, they can at least have some fun.
We even have a leaderboard of all the top scores from over the years (I'm coming for you, Chris!).
Bonus: Monitor your 404s
We should try and improve the 404 experience as best we can, but the ultimate experience is to prevent them altogether. Take a look at your analytics reguarly to see what the biggest offenders are and consider setting up 301 redirects for those pages to new pages on your site. Moz, another popular SEO tool, gauges that 90-99% of page equity gets transferred from an old page to the new page, making it an excellent way to provide a good experience to your users while maintaining SEO integrity.
How are your 404 pages doing?
April 4th is probably one of my favorite web dev (maybe only?) related holidays. It's that time of year to look at the cracks of our experiences that we often leave to the end or post-launch to really tackle once real people start using our sites. I think we have a moral obligation to our users to help them find the content that they are looking for in an easy to understand way, with little sprinkles of charm throughout that your brand can really get behind.
Have any 404 pro-tips? I'd love to hear about them in the comments.
Do you need help wrangling in your SEO or 404 strategies? I'd love to help.