404 – Engage Even When You Are Not Found!

by Vishal Mehta on July 16, 2011

in Business, User Experience, Web Design, Websites

 

You expended good amount of effort on SEO to make your website findable on Google and other search engines. People land up on your site through various sources. Let’s say few years and few website revamp exercises later, some audience is coming to your site, but on a dead page (a page link that originally existed, but has been changed or removed after the revamp). Or let’s say someone is visiting your site by typing a URL of a direct page (again non-existent). They SEE the following 404 error on their browser:

404 How useful is this? People may have assumed that your company profile page would be “about.html”, Contact page would be “contact.html” and so on. 404 error feels like a slap on the face and it’s an instant turn-off for the visitor. The visitor does like being wronged. And a default browser “page not found” page like the above simply suggests that you don’t care and would not bother guiding your visitor to a proper place on your site.

Try this experiment. Go to some sites of big brands that you know, but add some junk page name at the end of the URL, and see where you land. For example: http://microsoft.com/r98n2rafn.html

404

Imagine the difference achieved by a little design and technical effort. You are the master of your domain! You can easily guide the lost visitor into finding something that he was looking for. Let the visitor feel warm when he lands on your domain, even if the page he requested does not exist. This is real engagement and a complete experience – for the visitor. Even a simple 404 with your branding colors with a link to jump to your home page is good enough.

How to achieve this technically? You can easily find many resources on the web to implement this.

Let’s go over few points that you can pick and choose, which can make your 404 usable:

  • Kick out the default 404 error page from your hosting provider
  • Bring in your branding (colors, fonts, etc.)
  • Provide a mini site map or few quick links to important sections
  • Provide a search functionality
  • Keep it simple; don’t go overboard in providing everything that the visitor might be seeking on your site

Few neat examples of 404:

 

 

 

 

 

 

 

 

 

 

 

Do you have a 404 of your own? Is it good enough to engage with your lost visitor? Please share your experience/encounters with the pages that weren’t found, and build one “missing” page of yours today!

Vishal Mehta

Vishal Mehta

Vishal Mehta is a usability professional who loves to play chess and has a strong eye for details. He's also the CEO of IDYeah Creations, a UX practice in Pune, India. Vishal is also a guest blogger on UXBooth, Technorati, BlogCritics, and SAP Community Network.

More Posts - Website

Follow Me:
TwitterFacebookLinkedIn

{ 4 comments… read them below or add one }

Justin M. Woodum December 31, 2012 at 9:57 PM

Thanks for the cool creative ideas for 404 pages, Vishal. After browsing through these, I am thinking of updating my own a bit (website link leads to the 404 on my personal website). Providing a Google – search like Audiko has done above – seems like a very polite solution. The FW (birds on a telephone wire) tries to make the user laugh a little – I like that, too. Time to come up with some fun ideas! :]

Vishal Mehta Vishal Mehta December 31, 2012 at 11:54 PM

You are right, Justin. These are good inspiration to come up with something nice and fun. Please share/add your link when you update your 404.

Branden December 8, 2013 at 12:05 PM

We were exploring galleries before creating our own. Here’s some of the great examples we found around the web:

Heinz ketchup http://www.heinz.com/error.aspx, Titlest https://www.titleist.com/404, eHarmony http://www.eharmony.com/404/, Sporting Solutions http://www.sportingsolutions.com/404 (for football fans).

Our own attempt: http://theinformr.com/404/.

Vishal Mehta Vishal Mehta December 9, 2013 at 7:32 AM

Hey, nice one there – Branden. Thanks for adding more examples…

Leave a Comment

{ 3 trackbacks }

Previous post:

Next post: