84

What are the best practices in designing a 404 error page?

I read so many blogs and articles regarding this. Some says about using fancy images , when some days about sticking to the basics.

Are there any guidelines regarding this? What are the best practices? Which of the following details are wrong or to be followed?

Redirection

  • To home page
  • To search page
  • To site map
  • Automatic redirection??

Error message

  • Should we explicitly state 404 Page not found

  • Some other fancy user friendly messages

Images to be used

  • Image relevant to the error

  • Image matching the type of website

Other page elements

  • Should the common elements in websites like Navigation , footer etc be included?

  • Contrasting colour theme or same theme as that of website?

Any useful guidance is appreciated

Edit:

Whom to put the blame on?

In the error message should we specify that the page you typed not exist (putting the blame on the user) or some other messages taking the blame on ourselves even if the reason might be a wrong url ?

Improve this question
15
  • 27
    404 Error not found would indicate the error itself isn't found. 404 Page not found is more common.
    – Mast - on strike
    Sep 22, 2015 at 20:34
  • 4
    always offer the user a link to the site home page. pretty good chance your user, especially a newcomer, will be looking for a quick bailout
    – Jedi Commymullah
    Sep 23, 2015 at 4:36
  • 28
    Whatever you do, never redirect (of the kind that changes the address bar) to an error page. When one types or copies/pastes an address, few things are more infuriating than not being able to correct the address because it's gone. (Especially when the Error page says "please correct the address". I've seen this.)
    – Medinoc
    Sep 23, 2015 at 9:00
  • 7
    I once saw in a pet's store webpage the 404 error page had the 404 on it along with some random messages like "Sorry, the page you were looking for was eaten by the dog" or "A hamster used this page as his bed". It adds a nice customization to your site depending on what is it about, but also has to be noted that it quite depends on the user knowning what the 404 actually means.
    – Josh Part
    Sep 23, 2015 at 17:13
  • 5
    Also ensure that HTTP response code is actually 404, not "200 OK".
    – Vi.
    Sep 24, 2015 at 21:23

8 Answers 8

Reset to default
89

Redirection: should I redirect, and if so, where?

In general, no.

Not unless you're pretty confident that you know where the user actually wanted to go (and in most cases, you won’t). It’s better to give them the explicit error message, and let them decide where to go next.

If the user is trying to reach an old URL which has been moved, it's fine to redirect them to the old URL. But you should really be using a 3xx redirect instead of a 404.

Should the page explicitly state 404: Page not found?

I like having the 404 on the page, because I think many people know what that number means, and it acts as a shorthand for the error. But that's just a preference – for example, Apple and Microsoft's 404 pages don't mention it.

There should definitely be phrasing to the effect “the page was not found”. That's a common and well-understood message.

How should the page designed?

It should fit in with the rest of your site. You don't want to confuse people into thinking they've accidentally gone to a different site, rather than finding a missing page on the site they were actually looking at.

Who should be blamed?

Nobody. The simple message “The page was not found” is neutral and accurate.

  • Putting blame on the user will annoy them; putting blame on yourself is unnecessarily self-deprecating.
  • You can't tell whose fault it is. Perhaps the user typed in a nonsense URL (their fault), or part of the site is broken (your fault).

It's not appropriate to point the finger of blame; it would be easy to get it wrong.

Any other suggestions?

The URL the user types in can give you information about where they wanted to go. If you're careful, you can use this to redirect or suggest an alternative. (This assumes you don't have lots of similar URLs, and that you have some sort of finite list to compare to; this won't work on all sites.)

  • I like the Apache mod_speling module. If the page isn't found, it looks for pages that are very similar (a one or two character difference), and redirects appropriately. It's a good way to catch typos. But it's pretty conservative, because redirecting to the wrong page is probably worse than returning an error.

  • When it's too far off a genuine URL, you can still suggest what the user might have typed. This is an idea from Brett Terpstra: his 404 page suggests similar URLs to the current page. For example, this is the result for http://brettterpstra.com/2013:

    enter image description here

Those aren't appropriate for all sites, but I think they're interesting ideas, and potentially a bit more useful than a generic error page.

Improve this answer
8
  • 3
    From a UX perspective, throwing bunch of links like the brettersptra.com is not ideal for it will lead to further frustration with many options to choose from. Quick question: The bunch of links you are throwing to the user, is it relevant to the reason why they landed on that 404 page?, giving someone more hard maths questions after he failed one hard one will make the person to quit maths :) I think a link to the website's sitemap is enough . see this post from alistapart.com/article/perfect404
    – Chimdi2000
    Sep 22, 2015 at 13:50
  • 3
    @Chimdi2000 Yeah, that screenshot was probably a poor choice of example. Usually it's more like one or two links which are very similar to the URL typed in, or nothing if it's a totally bizarre URL. I agree that it could be confusing if you throw out too many URLs, but if tuned correctly I think it works well.
    – alexwlchan
    Sep 22, 2015 at 15:40
  • 3
    Definitely include the 404 error code. When the user calls the help desk, that is a key piece of information to have, and it will almost certainly speed up resolution of the problem.
    – Mohair
    Sep 22, 2015 at 17:22
  • 5
    Technically, you can sometimes tell that it's your fault, e.g. if the request contains a Referer(sic) header pointing back to your site. Whether it's worth altering the error message for this special case is questionable; however, it's definitely worth logging at least. (Fortunately, most webservers do log that information by default.)
    – Ilmari Karonen
    Sep 23, 2015 at 5:48
  • 3
    @IlmariKaronen You cannot really trust the Referer to be accurate as it is sent by the client (e.g., often bots fake a your-site referrer for whatever reason). Also I assume that you already routinely keep an eye on all internal links and their validity.
    – Hagen von Eitzen
    Sep 24, 2015 at 13:53
23

I'm not saying it's perfect, but we launched a new 404 page this year and we included options asking people to give us feedback when they find a broken link.

Consequently we get a few emails a week which are helping us tidy up our site and fix problems.

We also included an obvious search box to try and help people find what they were looking for. We're revamping our sitemap but once that's done we'll link to it again from here.

I do like the Brett Terpstra solution (suggesting what page you might have been after), but I think that would have been hard for us to code, based on our CMS...

http://lawsociety.org.uk/broken-link/

enter image description here

Improve this answer
4
  • 7
    The part about emailing was useful and new information. Thanks
    – Sooraj
    Sep 22, 2015 at 14:54
  • 1
    I always wonder why that's not automated on the server side, with appropriate rate limits.
    – Cees Timmerman
    Sep 23, 2015 at 17:02
  • 3
    @CeesTimmerman Depending on the technology stack, it can be automated. ASP.NET has the ELMAH plugin that when added will (by default) log all errors, and has a few ways to configure what gets filtered and what generates a notification. I'd be surprised if other frameworks didn't have something similar.
    – Tieson T.
    Sep 25, 2015 at 1:44
  • 1
    Not sure if this is what you intended, but my eye was first drawn to the big green scale on the right-hand side.
    – Blacklight Shining
    Sep 26, 2015 at 7:41
7

I always appreciate a witty 404 page since not only does it convey that the Page Does Not Exist but also contributes to an experience that relates to your brand.

For example, I am a Part Time employee at Haptik and they have the No Calls, Only Text approach to improve Customer Service.

Hence, here's what they have done to theme their 404 page:

enter image description here

Observe the number of options it gives you below.

The goal is to convey that the Page does not exist, and you can use various metaphors to say that, but it's at best interest to leave a hint of "Page not found"

As a good design pattern, auto-redirection should be avoided. If you can have the User navigate to a section he wants by providing options, why auto-navigate to anything?

A good sense of how users end up on your website and what they mostly look out for gives you the advantage on theming the 404 page that way by providing multiple options they would want to go to in chronological order of their page-hits.

Everyone does this differently, and creativity is what should be your aim when creating a strong brand recognition.

Improve this answer
12
  • 2
    A good example is Apple's 404 page: apple.com/404 (it has a more useful navigation that the menu itself and you still have a search field!)
    – Ismael Miguel
    Sep 22, 2015 at 11:47
  • 32
    I strongly dislike "It seems like you might have dialed a wrong number". I did not dial anything, I entered a wrong URL or followed a wrong link.
    – Uwe Keim
    Sep 22, 2015 at 12:00
  • 1
    That's the metaphor. It's how you brand your product. The description is provided below.
    – Swapnil Borkar
    Sep 22, 2015 at 12:38
  • 16
    Please note that this user is affiliated with Haptik, which is probably why his post reads like an ad for Haptik, rather than an actual answer...
    – ValarDohaeris
    Sep 22, 2015 at 13:24
  • 6
    Your post has been temorarily deleted. As you are affiliated with this site you are required to declare your affiliation (as stated here: ux.stackexchange.com/help/promotion). Once you have done so we will be happy to reinstate your answer (but try to make it read less spam-y). It's a valid post, but doesn't declare your affiliation as is required.
    – JonW ♦
    Sep 22, 2015 at 13:48
4

I will answer this from a human perspective since empathy is something that we strive for when working on solutions for users.

Assumption: Three of your friends came visiting after they heard that something bad happened to you.

Website = YOU that is having a bad day or disappointed or lost something and needed encouragement.

Image 1 = your friend Bob, Image 2 = your friend Ryan and Image 3 = your friend Liza

Image 1: Bob Image 1 = Bob

Image 2: Ryan Image 2 = Ryan

Image 3: Liza Image 3 = Liza

Which of your image friends will you give a hearty thank you or call later for helping you remain positive when all becomes well?

I will leave you to answer that question. :)

Improve this answer
3
  • 12
    I'm not quite sure what point you're making. None of these look like good options to me: 1) is confusing, it doesn't make it clear what happened and looks a bit like an advert. 2) is sympathetic but also confusing and doesn't offer any next action to take. 3) is clear to technical audiences, but not clear to others, and is needlessly dramatic and also offers no next action. Visiting a website is not like visiting a friend - with few exceptions, I visit websites to complete specific tasks or find things out, I visit friends to hang out (no fixed goal).
    – user56reinstatemonica8
    Sep 23, 2015 at 17:11
  • I must agree with @user568458. Your context is split and this makes your answer and examples invalid. Based on your exact analogy of "I had a bad day" I would choose friendly image 1. But the question is about end user messages, and so your image 3 is better as while not as "friendly" as image 1, it's what an internet user requires - information. If I'm on a website and a page cannot be found, I don't want "cheering up" or "a friendly face" I want information, potential solutions, etc. I can see what you were trying to do, though :)
    – James
    Sep 23, 2015 at 17:54
  • Very interesting way to look at the question, but being an answer I think it is still better to explicitly give an answer based on your own thoughts around the question.
    – Michael Lai ♦
    Feb 26, 2016 at 0:52
4

To paraphrase Steve Jobs, design is 'how it works'.

A 404 page is something you want to avoid, therefore the most important thing with a 404 page is to design it in such a way that you know it has been shown and can then do something to make sure it is not being shown in the future. By this I mean logging. Yes, this will be in the server logs already but fixing problems from the server logs might not be that easy. If you are generating the 404 from an index.php point of entry then you can do something to log the 404 page, so, when it is hit you have pertinent information in a place where you can review matters easily.

A well designed website really does not 404 that often, the design is 'prevention rather than cure' when it comes to 404. This being the case you can keep it simple and to the point, so, if it does get shown it is clear to the user and not wasting your bandwidth on bots or other sources of incorrect urls. That means not bothering with CMS blocks of helpfulness, search boxes and other trimmings, just the 'page not found' with a link to the homepage will suffice (The homepage being known to load and known to have site navigation).

It is that simple. Yes you can add a simple image or have your CSS style it up, but other than that, save the hard work for the content you do wish for your visitors to see and fix those broken links in your content or in some .htaccess style rewrites before Easter-egging the 404.

Improve this answer
1
  • 2
    "A well designed website really does not 404 that often, the design is 'prevention rather than cure' when it comes to 404." - this is a false assumption - most of the answers don't consider that 404s can easily occur from another site linking to a non-existent page in your site, e.g. some developer makes a typo or copies your url wrong.
    – GWR
    Feb 12, 2016 at 12:22
2

I use 404 pages combined with humor to make a better connection with the user. I like to provide some helpful links and guidance.

There are many good examples of eCommerce 404 pages full of personality that attempt to increase conversions - some even with product recommendations. Perhaps they consider that the same as walking down the wrong aisle in a store.

Improve this answer
0

The answer is in the title: 404 Not Found.

Unless you are able to take them to a new location that will display the content they were expecting to see, I think that you should simply display the standard 404 not found error, with possibly some instructions on how they may be able to find what they're looking for.

Improve this answer
-1

I like the idea of combining humor with a 404 redirect. I am thinking of displaying our latest blogs below the message to make for engaging copy. Our current 404 page looks really bad and has a high bounce rate- http://www.sevenatoms.com/article_writing_services.shtml

Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.