Building a Constructive 404 Error Page (With Examples)

by on 15th March 2011 with 15 Comments

The error page is a common facet in web design often overlooked by the mainstream crowd. Generally when a user finds themselves on an error page it constitutes as a failure on their part. Something about their actions have caused an error on the site, and all hope seems lost.

As generations are advancing we’re seeing the youth of today much more applicable to deal with technological errors and trace the routes to one source issue. When dealing with the majority it’s important to understand user experience is everything. This goes double for new-age web applications and distracting mobile games. While constructing these pages always keep the end user in mind – and remember there’s a vast difference from person to person!

screenshot

Here we’ll cover a few ideas in forming terrific 404 error pages. These will display a brief message to your visitors and possible solutions to find their way out. The ideas are fairly common and resonate well within the community of professional web designers.

What can be done with 404 Errors?

When the browser returns a 404 error code this means the page requests could not be found on the server. In correlation to websites this means either a routing problem in the backend logic or the physical file could not be located (.html page, video file, images, etc).

screenshot

The difficulties stem from pinpointing the source of the issue. Was the user following a broken link from another website? Or is it possible there are broken links within your navigation? This is a difficult task to solve. All of these options should be considered and offered as solutions to the user.

In truth though, once a user has reached the error page they don’t have many options for debugging. They could return to the previously viewed page or redirect to a staple, such as Home or sitemap.

I generally offer these links on most 404 pages I build. This gives the user an open choice and keeps them in control of the ride. Alternatively it may be wise to offer a link or e-mail address for bug reporting. If you are unaware of issues with lost pages/broken links how can you possibly take precautions to fix them?

Keep the Mood Light

Another technique I’ve discovered is to keep language chipper and up-beat. It’s often very frustrating when using the web and encountering an error which you didn’t expect. Even worse, the Internet users of today hold very little patience for buggy apps or “URL Not Found!” messages.

If you are graphically capable I have seen great 404 pages with alternative illustrations or backgrounds. These could be created in Adobe Illustrator or Fireworks and exported as a vector format. In comparison soft imagery and vector characters offer the feeling of making a boo-boo, while plain website text and links appear as though a technological disaster has occurred at the hands of your users.

screenshot

Using playful context and colorful headlines will detract the weary mood often pinned to website errors. When drafting your 404 page copy examine the details in your language. Don’t make the user feel at fault or put any blame onto anybody, for that matter.

Error Reporting

When a visitor finds such an error page many times they may want to contribute a ticket of concern. This is where offering a contact e-mail or small in-page form can do wonders of good.

By just offering a chance to input some comments and send off a message to the site administrator most users will feel more than beneficial in helping you pinpoint a site error. In most web sever setups this could be done with a simple PHP mail() function call and a single input form containing a comments textarea.

screenshot

If you don’t enjoy receiving error e-mails as a webmaster or can’t support SMTP mailing you may also consider an internal ticketing system. By offering user input along with reporting back the error code and the URL which it occurred this data could be stored inside a database table and accessed through an Administrator account.

If you are running a small setup and don’t need this amount of protection, there are certainly alternatives. However when counting in the millions of pageviews daily sometimes the e-mails can build up quickly in too short of time.

Reduce Confusion at all Costs

Encountering an error page is flustering enough of an act to users. This means the page they receive shouldn’t be too confusing to comprehend, lest they just abandon the website entirely to search somewhere else.

By offering simple, bolded page content you can offer at-a-glance solutions for the problem. Visitors who wish to leave the page can head back home or possibly try searching the site. Others may notice the error and examine what could have gone wrong in an attempt to fix things.

In either scenario a clear, concise explanation of what happened and why they didn’t receive their requested page is an absolute must. This should also be completed reasonably – leave plenty of white space and “room to breathe” for users to figure out what they want to do.

After all, the name of the game is great user experience. Regardless of your page’s design or aesthetics great 404 errors will solve the problem for users and offer some typical solutions as collateral.

404 Page Gallery

Below I’ve grabbed a few shots of some radical 404 error pages located around the web. These range from all types and offer a bright insight into the new-age trends in modern design. Hopefully these may also guide your inspiration towards more creative, pleasing UX layouts.

Carol Rivello

screenshot

WPBundle

screenshot

Jamie Huskisson

screenshot

Deaxon

screenshot

Homestar Runner

screenshot

Mixx

screenshot

Impact Ideas

screenshot

Find Icons

screenshot

Duoh

screenshot

Wufoo

screenshot

Foursquare

screenshot

Leap Anywhere

screenshot

Groupon

screenshot

WeFunction

screenshot

MailChimp

screenshot

Comments & Discussion

15 Comments

  • http://404.sweetthemes.co Paul

    Some nice examples.

    If you’d like a 404 page that’s a bit different from the norm but don’t have the time or ability to make one, then you can download some for free from 404 Found, it’s a hobby of mine. http://sweetthemes.co/404/

    :)

  • http://www.geekartist.com Janice Schwarz

    I like that you showed some examples where the 404 page is actually helpful (plain English content, seach boxes, contact info, and so on).

    I’ve seen 404 roundups before that are big on cute but oh so unhelpful to site visitors. Most surfers don’t know what 404 means and some will even panic a bit when they see it (I’ve seen surfers have strange reactions to things we take for granted).

    Showing what, to them, is a random cute image with the words 404 is just not a good idea. Explaining that the link is broken or page is missing is a good step. Adding the means to help them find what they need: excellent.

  • http://mycoffeecupisempty.com Floris

    What’s so wrong with just catching every error internally with a weekly digest to the web developer, and redirecting the user to search matching the keywords, or just back to index.php with a notice at the top saying the content wasn’t found?

  • http://404.sweetthemes.co Paul

    @Floris, I think jumping back to index would confuse many users at least as much as a 404 message. I say that because they’re not seeing what they expect, and quite possibly skim over the top where the error would pop-up as I believe many assume that section of a page to be navigation, logo and advert space, not “content” space.

  • http://www.inowown.com Jimmy

    I like this 404 page a lot: http://www.inowown.com/404

    it’s funny and innovative

  • http://www.nathanbweb.com Nathan B

    Helpful, thanks.

    Sometimes I resent 404 pages that try to blame me (did you spell it wrong? Did you click on something you shouldn’t have?) Chances are the 404 isn’t my fault, it’s yours.

  • http://me.minnix.info Minnix

    I’m running a gallery of 404 error pages :)
    http://welove404.com

  • Pingback: Shared on FAQPAL.com()

  • http://www.mowebu.com Jan

    Nice, thanks!

  • http://www.kooldotshosting.com/ TheKoolDots

    Nice example, really like: Jamie Huskisson

  • http://dejanseo.com.au Jaaved

    I agree with Janice… cutesy characters are fine, provided the rest of the 404 page is actually helpful.
    Foursquare has a great 404 page. No confusing 404 error message, simple clear message, immediate push towards finding the right page (to make you do what you came to do at Foursquare) plus there’s a cute character for the fun of it.

  • Pingback: Small Business Web Applications | Micro Conversions | Wikipedia Listings | Diamond Website Conversion()

  • http://www.2keysgames.com 2keysgames

    Really funny 404 Error Pages :)

  • Pingback: 8 Usability Mistakes Made By Web Designers | Arbenting()

  • http://newinternetdirectory.com Elroy Citroni

    Hey there is alot of useful info here that I will use. I myself have just set up an article directory recently and I was wondering if you guys might like to give me some tips on how to get it ranking in the serps. The website is http://newinternetdirectory.com. Any information would be greatly appreciated.

Subscribe

Membership
About the Author