57

I'm trying to create a useful HTTP Error 500 Internal server error page and the recommendations I have found and the live examples I have stumpled upon use a very simple layout. They basically include:

  • a logo
  • a headline
  • a message
  • and a couple of solutions how to fix it such as reload the page, come back later or contact the webmaster.

What are the reasons not to also include the main site navigation or a search bar so that the visitor could find another page on the website? Is it technical or is it just to keep an focus on the error message?

3
  • Please please please Alert the web master yourself. you've just created an Error catching website and shown it to the user and then ask the User to contact the web master.
    – Barfieldmv
    Jan 10, 2012 at 13:42
  • 1
    You mean it's rude? :) I believe the best way is to automatically send an email to the webmaster with the details (as I asked about here - webmasters.stackexchange.com/q/24386/12031) Jan 10, 2012 at 13:56
  • 1
    If at all possible present a meaningful error message if there is a reason for the 500. Many sites that have common 500s know why they have a problem. Fark.com has a custom error message which, erm, caters to both their admins and users.
    – Ben Brocka
    Jan 10, 2012 at 23:52

4 Answers 4

39

The point of a good error page is to apologize for the error, explain what happened in layman terms, what might be responsible for this, and what next steps to take.

Yet, error 500 rarely supplies a good explanation so the error page has to be vague. This results in users starting to refresh the page hoping it would miraculously render, even in cases of major botched up code deployments. Thus, you need to prevent such behavior with clear instructions on what to do next.

Telling your visitors, "The site is dead. You should give up," isn't a good practice. Users need to have some feeling of control & involvement into the situation, so give it to them by letting them send a message to the engineering team no matter how large or small it is. Then, once the site is back up email them (even generically) thanking for reporting the error & notifying of the resurrection.

The best sample design I've found so far is Goodbye, Old 500 Page on Think Vitamin (web.archive.org). You can also see error page examples from NetTuts+ (one and two) and Smashing Magazine (one). Search the page for 500 in all of them as they're in multiple locations.

3
  • 1
    I really liked the idea about sending the visitor an message when the page is up again. Upvote it is! Jan 10, 2012 at 13:46
  • I like the principle of being able to report - but I think that example error page given actually has too much information on it. img.skitch.com/20081018-fk9bgfpyrep85dabg6958f4jpk.jpg Users have to think about it - and that's bad.
    – PhillipW
    Jan 28, 2012 at 11:30
  • 9
    Came here to tell you that - all - links are dead / not linking to the proper resource. Aug 1, 2016 at 18:34
15

I think it's a really good idea to provide navigation or a search capability on an error page, because once the user realizes that something has gone wrong her next thought will most likely be "what do I do now?". We, as designers, can and should help the user make that decision.

This example from Carsonified is one of my favorites: example 500 error page

The tone might not be right for your brand, but these are the things that I like about it:

  1. It takes responsibility for the error instead of blaming the user, even going so far as to put the developer's picture on the page.
  2. The humor can help an irritated user feel better
  3. The user has the option to send feedback to the team. Ideally, this would mean steps to reproduce, but even a rant can help the user feel more in control of the situation.
  4. It implies that the problem is being investigated

I've been thinking about custom 500 server error pages for my own application. If you're interested you can checkout my blog, where I've talked about this list in more detail and have additional screenshots.

11

I guess there are no rational reason to treat a 500 differently than any other error. However, when an error is within the 5xx range you may run into any of the following issues:

  • The server configuration is invalid—not just affecting the current resource but the entire site, thus rendering a main menu useless (it's just a link to a lot of other error pages)
  • The same may apply for search functionality
  • The error may simply be fixable by an administrator only, thus rendering it useless to reload the page (at least until the administrator has fixed the error)

Considering this, I can understand that some prefer to "play it safe" and present logo, headline and error message only.

1
  • 2
    Also, often the 500 error page is served up from a static resource at the basic web-server level, before the request is handed off to the CMS which is where the full gamut of navigation links etc are generated. Quite possibly because the CMS has borked itself. The full links are not available, not unless they get manually updated.
    – Erics
    Jan 12, 2012 at 5:02
-4

I think that schema is very good and the standard for a 500 error page. I recommend you not to focus to much in this kind of stuff, make it simple and focus in your website's design, or content.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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