The 404 error is the most notorious of all status codes.
Four-oh-Four has hit the mainstream, becoming part of our Internet
vocabulary and even infiltrating our everyday language. It’s so popular that
this status code has abandoned its mates (401, 403...) for international
stardom, with galleries, forums and Facebook groups hosting heated debates as
to which is the best 404 message.
So what is a 404 error? It’s an important question as not
everybody knows, something we often take for granted. Despite so many users
being in the dark about 404’s many sites persist in displaying messages such as
"this is a 404 error message" to their users.
This status code is a server response when a document or file is
requested and can't be found on the web server. Yup, it's a techie term.
Yet we're happy to throw this jargon at unsuspecting users who have got lost
through no fault of their own. Motley Fool explain it in their 404 message: “That's 404: File not found
for the technically inclined. For the not so technically inclined that means
the link you clicked, or the URL you typed in to your browser, didn't work for
some reason."
For some web sites the 404 error message can be the most visited
page on your site! For most sites the 404 message will be the response to
around 0.1-0.5% of server requests. Yet as Tayler points out in her post "my
very first 404 page goes live!" this page often gets overlooked and users who get lost in
a web site are left to find their own way out. The way I view it is that
when a user receives a 404 error they have one foot out of the door. The
purpose of the 404 message screen is to bring the user back in to your web site
before they walk away. The important thing to remember is that a user
arrived at your 404 page because they were looking for something. You need to help
them find it
The default error message for most web servers when they get a
request for a URL that they don't have is the "404 Not Found" error
message. Fortunately the 404 message can be customised. The design of
your 404 message can be crafted to meet the needs of your brand and target
audience but there are some basic principles that must be followed.
Pages go missing for many reasons. The page may have been moved
elsewhere, some external site has given an incorrect link, the page no longer
exists, or the user makes a typing error. So be realistic, it's going to
happen. The failure to address to 404 error screen is usually down to
stubbornness to acknowledge that your site will have errors. No matter
how rigorous you are there will always be errors.
So face the fact, your site will have errors and employ these
basic principles when customising your 404 error:-
Do no
redirect
Many sites still redirect to the home page. This will
disorientate the user. The user deserves an explanation for why they have not
reached their intended destination.
Use
clear jargon-free language that non-technical folk will understand
Something the user looked for can't be found. Tell them
that. Your user doesn't care that it's a 404 so why call it
that. Many savvy web users or 'geekier' types know what a 404 is, but
equally many existing and new users don't. I have carried out repeated
user testing on 404 screens and the message is loud and clear - talk to users
in clear English and reserve “404” for technical discussions only.
Don't
blame the user
For example, "oops, you've messed up″ may seem fun and
cheeky, but a lost user can rapidly become a disgruntled user so put your hands
in the air, take the blame and help them on their way. For example “It’s not you. It’s me.” Do not make
the user feel that they have done something wrong!
Be informative and give an explanation for why they have
received the 404 error message
Inform the user what has happened. For example, the
standard message "the page you requested not been found", or the
quirkier "this page has gone missing" or "oops,
we're sorry the page you requested can't be found”.
Offer a
site map so users are able to easily continue their exploration
Provide either a site map or at the minimum links to your web
sites most popular pages or sections. Place obstacles in the way of the
user finding what they are after and they are likely to go elsewhere. For
example, see Conchango or Samsung's 404 Error.
Provide
a search engine
For large sites it is recommended to offer search functionality.
Remember the user was looking for something when they reached this page so for
the same reason as providing a site map, help them find it. For example, Twitter.
Provide
Contact details
If all else fails give your users a phone number or email
address to get in touch.
Retain
the overall look and feel of the site
The 404 experience is part of the users overall site
experience.
What if the 404 error message was the first page a user ever saw
of your website? For some it will be. Give this message the
attention it deserves and treat this page like any other page during a site
design.
It's good to see 404's start getting the respect they
deserve. They are often neglected or an afterthought in a site
design. When a user clicks a button or link they have expectations of the
destination screen, so when an error occurs they receive an unexpected page. To
avoid disorientating the user this page must be well designed. As well as
following the basic principles above it's important to make sure it's on
brand. I wouldn't expect humour on a Crown Prosecution Service 404
message, but would expect something playful from the likes of Flickr and
Twitter.
There are plenty of sites and articles
which discuss the heroes and villains of error messages so I won't attempt to
reproduce them but point you at 404 Research Lab and Smashing Magazine’s 404
Error Pages: Reloaded.
I’m building a comprehensive set of 404 error’s
- worth bookmarking if 404’s excite you as I’ll be adding
to this collection daily. Unfortunately the Flickr screengrab doesn’t do
justice to Bluedaniel’s
404 error. It may not follow my
recommendations above but it can't be ignored for its creative and engaging
take on the 404 message.
P.S. Conchango are recruiting! If any of my ramblings interest you and you are passionate about User Experience then we'd like to hear from you. Why not contact me and let's have a chat?
Listening to: Bloody Mother F****ng A**hole EP by Martha Wainwright