Oh hello, 404!
Everyone knows what a 404 page is. They have been around since the early days of web browsers. They simply inform a user when they hit a dead or broken link. However, it isn’t that simple, 404 pages require some careful considerations. It is also probably why it has been listed as a design challenge under the Daily UI Challenges. These short UI design exercises have become my new side project. It pushes me to create something new everyday and I get to work on areas of design that I otherwise wouldn’t.
What is 404?
404 is the status code for HTTP links that turn up dead or broken. They occur when content has been removed or when the URL is incorrect. These are the commonly known reasons. They are also triggered when the server responsible for the website is not running, the requested domain name doesn’t have an IP, or the domain name doesn’t exist.
Why is it called 404 though? In the early 2000s, there was a rumour that it was Tim Berners-Lee’s room number at CERN, and housed the world’s first web servers. This is not true. The 400 range was used to give identification numbers to various error states. According to Berners-Lee’s colleague, Robert Cailliau, it was chosen rather arbitrarily as a means to an end.
Designing 404
Why do designers fuss over designing a 404 page? The message that the page carries is straightforward. It has to inform the user that “the page doesn’t exist”. That doesn’t sound too hard. Why is it then treated as a design challenge? Why does it need to be designed with a lot of flourish?
In order to understand this, I began collecting 404 pages from various websites. These are websites that I have browsed through before or are well-known for their 404 pages. Listed below is what I found. I have bucketed different 404 pages under various messaging categories. Most 404 pages tend to stick to one or a mix of these scenarios.
1. Utilitarian
These are no-nonsense sites, clear and succinct in their messaging. They tell you that your link is dead and suggests alternative links, or offers a search bar. Search bars appear to be a common feature in news media’s 404 pages.
2. Visual Metaphors
These are quite common, and are probably the second most popular form after Utilitarian 404 pages. In addition to the messaging, there is a visual of something broken, or hard to find. In the case of Urban Outfitters, a barren desert with a tumbleweed rolling across the dire landscape. Whatever be the visual of choice, the message is clear.
Unsplash takes it a step forward and makes it interactive. It has a searchlight feature that the user can move over a dark image.
3. Brand Speak
The 404 page is a useful content block that speaks in your brand’s voice. In addition to serving a practical function, it can also be reflective of the brand. This will give the user a better sense of your brand’s overall personality, reiterate what it stands for, and how this personality deals with a moment of failure. Some brands employ humour too.
4. Good Ol’ Humour
Saying something witty is always better than having a sobering message at the end of a failed task. Users will be forgiving of a broken link if there is a pun in the messaging, or something more absurd, yet engaging.
The World Association of Zoos and Aquariums uses a video of clueless flamingoes of WAZA to drive home this point. The artist, Steve Lambert opts for making an excruciatingly long (so it feels) and awkward video where he rambles on and on about the 404 page. In the process, he tells you that you are lost, recounts all links available for you to click on, directs you to a search box, and then talks about himself. I don’t think my words do him justice, so watch him here instead.
5. Self-Referential
Bringing up something that is associated with your brand and using that to explain the 404 situation is another clever device. This can be used by employing humour, educating the user, or suggesting an inside joke only a regular audience of this brand would know. This appears to be commonly employed by animation studios, museums, comic book publishers, and anyone in the business of entertainment.
6. Pop Culture References
Another easy way to add humour and create a connection with the user is through pop culture references. These are easy to associate with, and comes in handy if you are a website that has a niche audience.
7. Promotion
Users heading to a 404 page is also a form of traffic. Since you have gotten the attention of a user on a page (even if the page is a 404 page), why not use their attention to promote your product or service? My recommendation would be to use this option carefully and intelligently. There could be a scenario where the user is not keen on seeing another advert, and doesn’t require another marketing pitch.
8. Back to the Homepage
Every time you go to a broken or dead link, the website reroutes you back to the homepage. This was employed by a few websites. I found the experience confusing. It would have been better to lead a user to a proper 404 page. This experience led me to believe that a 404 page is a necessity.
Wish they tried harder
There were a few pages that popped in my search that did not live up to their potential. (Could someone working at these companies inform them that they are missing out on a fun 404 page opportunity?)
Taskmaster is a popular brit-comedy show where celebrities have to complete absurd tasks. I’m surprised it doesn’t have 404 page for its audience yet. (Can we petition Alex Horne to make one?)
Conclusion
Here are some lessons learnt while browsing through all these varied 404 pages.
- Do not let your 404 page go to waste. They can be a brand asset.
- Remember to incorporate an element of your brand into this space.
- Use it to offer an alternate solution/solutions to the user.
- Layer the page with humour to make the user feel that their quest wasn’t entirely futile.
Do all of these in addition to making it known (very clearly) that the link is broken.
Dear reader, if you have reached the end of my piece, here’s a little exercise for you. Add your favourite 404 page to the comments. Thanks!
