UX challenge: How to boost revenue with 404 page (5/6)
Have you ever stumbled upon 404 page? This error is so well known that it became a meme. Even our conference room on the 4th-floor (room 404) is called “not found”. If you encountered 404, was it a pleasant experience? I bet in most cases it wasn’t.
You were searching for something, browsing through the website, maybe getting annoyed that thing you search for is so hard to find, and then, when you thought that you just got it, BOOM! 404 page doesn’t exist. That creates a really negative user experience. Some UX designers try to brighten up the experience by showing some pleasant animation or giving some funny copy, but is it really all we can do to improve the 404 experience?
When doing research I was more than pleased to find out that 404 problem is something that bothers many people worldwide. People show creative approach to 404 pages, like funny pictures or small interactions such as space invader. The best 404 page that I’ve ever seen is on Figma webpage. When you encounter 404 page, you get a sneak peek of Figma tools and pleasant interaction that reduces frustration. That’s nice. But is that really all we could invent for 404 pages in over 20 years of webpages existence?
I don’t think so. I believe there is no innovation in 404 pages because everyone thinks it is a standalone page not connected to anything UX-wise, while in fact, 404 page is a natural part of the flow! The only exception is when users want to reach the unexisting page via the direct link.
That’s why we decided to tackle the 404-page design as our next UX design challenge. First, let’s have a look at the current 404-page problems and then let’s redesign it and include as an integral part of the online stores’ flow.
Common 404-page weak points
What is the main problem with the 404’s? When it comes to “unwanted things” there are many bad things about it. They are irritating, they create discomfort, they repel our users from our webpage. All these things are syndromes of the bigger problem that we forget about while focusing on patching small bugs. We should take a step back and think about a big picture. Do you know what is the biggest problem with “unwanted things”? They exist. All other problems are just syndromes of that fact, so let’s point out identified “syndromes” and think how we could erase 404 page as we know it.
1.Users don’t know what to do
Most commonly user reaches 404 page that says just “this page doesn’t exist”. And that’s it. The user is lost. What should he do? Where should he go?
Such pages are a perfect example of how you can destroy user journey in an instant, frustrate users and make them never come back. Some websites like Airbnb give you a list of links where you can go, but is it the greatest solution? Imagine you encounter 404 page, you are mad, and then you have a list of links that you have to read and choose where you want to go, while none of these pages is the one you wanted to reach. What do you think, will random, unmotivated user stay on such a website?
2.404 page interrupt user flow
Again and again, 404 pages are huge user flow interrupters, if you reach one 404 page during your journey you can handle it. But what would happen if you encountered three of these wild pages? And how about a ten? Is there a way in which we can reduce user flow interruption? Perhaps we can remove interruption whatsoever?
3.404 might be the first user interaction
This one is big. Imagine you spend tons of dollars to reach your user, build trust via TV campaigns, posters and events all over the country. The campaign reaches vast number of users, who google for the brands’ webpage, finds the link, clicks on it and… reaches 404 page.
Very likely that all positive emotions that you carefully built are lost and your brand just received a negative badge. Thanks to the campaign some users might be motivated enough to keep digging into your site but the brand already lost a lot of money. First brand encounter is crucial, and we should treat it as such.
4.Users don’t know what happened
This one comes from the real life. We were discussing topics for UX weekly Divante challenges and I proposed 404 page, most of us agreed that this is a great idea, but one coworker asked me: “What is it?”. I was struck. I thought everyone knows what 404 is. As we explained what 404 is the person replied: “oh, I saw one of those, I didn’t know they have a name”. And all of that happened in IT company.
Now take in consideration that in many cases we design for older people or those not familiar with technology have no clue what this means! We can’t just jump into conclusion that everybody understands us. We need to be clear.
5.Most of the 404’s send user to previous page
Imagine that you’re entering the metro. You’re in the middle of buying climbing shoes that you need urgently but you’re losing internet connection. What’s worse the online shop sends last packages at 4 PM and starting tomorrow they have annual leave for a month. You have 2 minutes till metro arrives. You are clicking nervously through every page as fast as you can but the connection is laggy. 30 seconds left. You pick a random pair of shoes. The metro is already on the platform. You click “buy” button, see the page loading, aaaaand here it is! 404!
Now you can choose to be redirected to the previous page, and choose other pair of shoes, wait again until the product page loads …. or leave it and take the metro. Obviously, this is the edge case, but it shows an emotional state that many of our users are during online shopping. We can speed up our eCommerce using progressive web apps that don’t need the stable internet connection or even work without internet at all, but the problem with encountering 404 as a result of our long journey is still here.
What if 404 wasn’t a wall you encounter while running, but just a small bump that you barely notice? What can we do to prevent stopping our users, and let them surf our website freely?
6.404 page have no value
With 404’s I see the same problem that we encountered while doing cross-selling UX challenge. Page not found doesn’t give users any value. Of course, it gives information about the current situation, but we could use it to shape a true value for our users. You might ask “how do we know what is the user need?”, and the answer is simple, they tell us themselves.
How? By interacting with our website. As I said before, 404 rarely stands on its own. It appears after certain flow on the page, and most likely you can deduce what the user was searching for. 404 page could use that flow to dynamically adjust to users intention.
7.404 page are boring
As we said before, this problem was actually solved by many, but I think it’s worth repeating. Nowadays 404 are a page that has one pure purpose, tell users that the page they were looking for doesn’t exist. You can soften this message by adding a personal touch of your brand. 404 is a great place to show your brand character and engage users, don’t you think that not using this opportunity is just wasting potential? Marketing people? Anyone?
Brainstorming the problem solution
Having an in-depth analysis of current 404-page problems we brainstormed and tried to figure out the best solution. Here are our ideas:
1.Connected sites approach
In this concept, each website would have few, let’s say three, websites linked to it in the backend. When the site itself is not reachable, we show users small 404 banner on the top of the page, and the rest is a site that is most similar to the page they were looking for. Let’s say you wanted to buy certain shoes but the page doesn’t exist. You are shown 404 info, but at the same time, you get propositions of other similar products. This way user flow isn’t interrupted, and he is given a chance to pick product that is close to his needs. Surely better than encountering the wall.
2.Inspirational approach
Based on the previous one. We can use 404 page to show our users best selling products, or top read articles. Imagine you encounter Forbes, and instead of having plain 404 page you get infinite scroll of products from the category you were in. This approach works the best for marketplaces or etsy-like shops, where products are beautiful and can serve as inspiration.
3.Preventing approach
Maybe our users shouldn’t be able to reach 404 at all. Ok not exactly at all, but we can prevent many of 404 encounters. If we had a script run, let’s say once a week, that checks if every link works properly we could detect 404 page before the user finds it. With a list of unexisting pages we could give the user 404 information on the current site (e.g. small banner “page you want to reach doesn’t exist, we’re sorry”) instead of redirecting him. By preventing users from reaching 404 pages at all we make sure that they don’t have to go back, and user flow interruption is much lower, just like small bump instead of the brick wall.
4.Simple approach
What if we don’t have a budget to rewrite whole website in order to create good 404 experience? One thing that I saw during my research is to make 404 -> homepage transition unique, as it is usually the flow. If your budget is big enough, it’s nice to have it.
But the main thing is to tell users what to do, and be clear about it. Give some visible CTA or search bar, provide pleasant illustration and nice copy. Also in this approach be sure to show character of your company, clients appreciate to see companies who can handle problems gently.
6.Reverse approach
Everyone thinks about 404 as something negative, it is a problem in itself, but what if we made a shift? What if we celebrated the fact that user “found our hidden website”, we could even take it further by letting him share his “discovery” on social media! We can go even further and use 404 as a “unique way of getting discount”, where on 404 page itself you have some kind of microgame, that after finishing our users get the reward in form of small discount! That would create positive emotions!
Imagine creating hackathon-like events where you ask your clients to search for 404 page, and they dig, dig, dig just to find it and get discount or some kind of special prize!
What is the best 404 page solution?
We sketched all of these ideas and used 4 dots point system to choose two the best solutions for 404 page. Having two picked designs we worked them out in detail.
We made animated shots to show exactly what we meant, as still shots can be confusing, and animation made them even more pleasant.
What do you think? Which two did we pick?
“Simple approach” and “Reverse approach” are the ones we picked. Personally I believe UX-wise “connected sites approach” and “preventing approach” are better choices, but again, we are doing Dribbble, so it has to be flashy. After a few hours of designing, we managed to output these gems:
So, what do you think about these 404 page ideas? Maybe you see something that can be improved or think that another type of 404 would be better? Please let us know in the comments!
If you like this kind of activity, please let us know by giving a clap or a comment.
Thank you for your time, and if you want to, check out more at Divante’s Dribbble .
read next case — physical store
The 404 page case study is part of the Divante weekly UX challenge.
Check out more case studies.
