Day 8 of 100: 404 error page design and African websites
UI design challenge with context and a process.
Welcome to day 8 of my 100 days of UI element design with context and process in mind.
Some days ago, a friend of mine told me how bad she feels whenever she encounters a 404 error page. That it’s too annoying to see 404 error pages shown to her by different sites. Well, I don’t blame her either for I have not seen anybody who enjoys a 404 error page. ( only designers I guess — who love to make things human friendly :)
That brings us to the question, what exactly is a 404 error page? and why do designers and developers waste time crafting a great 404 error page.
What exactly is a 404 error message?
A 404 error message technically is
a Hypertext Transfer Protocol (HTTP) standard response code, in computer network communications, to indicate that the client was able to communicate with a given server, but the server could not find what was requested. — wikipedia
But it is simply
the error that is displayed on a website when you ask a website to show you an information that is NOT available on their website.
Image below shows 404 error pages of 13 popular African websites that I used for this study.
What makes one land on a 404 error page?
Can be any of the following:
- a mis-typed URL (or an out-of-date bookmark) for instance typing www.naij.com/daxdsj23 or missing a little typo in a url www.naij.com/boo_ (for instance no “k” for book
- a search-engine link that is out-of-date
- an internal broken link that the site owner hasn’t noticed ( deleted or expired page) —excerpt from an article on alistapart
So you see, it’s not really bad when you see yourself on a 404 error page. But never mind, the point here is that the site-designers ( developers, designers etc ) must take care of this error page’s experience so that it does not disrupt users' happy feeling since their lifetime on the internet before coming to your error page.
Is 404 error page a good thing?
For general internet users, no really, but for designers, yes, because they can enhance the experience for users to feel good and encouraged about it and not otherwise.
Therefore, 404 error code is good UX, it is what you do with it that matters.
The essence is to let your users know that “ oh awesome visitor, something is wrong with the url you just visited. We actually connected to the server but we’re not able to find the information you were looking for”
So what makes a good 404 error page?
A great 404 page must-have the following
1. Link to site map and the homepage
2. a search box
3. a distinctly minimalist look ( avoid navigation on 404 page — why site links can break in the future and you don’t want 404 upon 404 lol) —from alistapart
So how has African Websites been treating users with their 404 error pages?
So I analysed 13 popular African websites and measured it against the following:
- Confusing 404 page?
- has humour in it to relief users?
- suggests a homepage, a sitemap, a search-field and NEVER auto-redirects a user to anyplace even the homepage. Don’t make users think that your sight is misbehaving by redirecting everytime they search for something useful
"If you redirect all traffic to the landing page in the event they tried to access a page that did not exist they have no way of knowing if it was their own mistake, if the page no longer exists, or worse if the site is broken." -AbsoluteZero on SO
Behold only GTBANK gave users a bit of humour when they encounter a 404 page. Nairaland beat other analyzed websites to claim “the site with the best 404 error page even though with no humour”, Jumia.com.ng was the worst for me because they did what is not advisable which is, auto-redirecting users to the homepage without letting them know what went wrong. It adds more worries and this feeling of low self confidence that users don’t know what they are doing totally on your page.
Please see image below for full analysis.
So how can we teach designers and developers how to develop awesome 404 pages for their users?
To do that, I assumed a meal ordering website I called ordermeal.com ( a non-existing site where users can order meals online and perform other catering related services.
So I wanted the website to pass all the tests that the African websites failed or did poorly or was just okay in. Remember this standard globally is what makes a good 404 error page. So why are we not putting in our best to design it well?
I wanted to design a 404 page that:
- Is not confusing
- has great humour to relief disappointed or angry or frustrated users.
- has a sitemap
- has a search field
- and surely, does not auto redirect users to anywhere just like Jumia.com.ng
After lots of brainstorming, see below what I believe makes a good 404 error page that will be loved by anyone.
Look well and you will notice all the points listed above with great humour added I guess. Hahahahaha
DISCLAIMER: I represent myself and myself alone and not any company or secret agency trying to mar or destroy African websites’ online image. I am just a learning designer trying to improve, by looking at real life design scenarios. This is for educational purposes only.
Thank you so much for reaching the end of this article. Your feedback will be highly appreciated and please don’t forget to “recommend” and “share” the article if it made sense to you.
