In Depth: How to make a user friendly 404 error page: "
As much as web design is about big things – getting your site structure right, creating a compelling visual design, ensuring your code doesn't cause browsers to copiously vomit error messages on an absurdly regular basis shortly before committing seppuku – it's also about little things.
A good site is polished and finely tuned, taking care to include and refine content that many users won't ever see, because the savvy designer knows full well that some of them will.
A case in point: the humble 404 error, an HTTP standard response code that's shoved in your face when a browser communicates with a server and promptly discovers that what it was looking for isn't there.
There are a whole bunch of reasons why a user might happen across such an error message, but they usually arrive because of one of two reasons: user error or webmaster error – unintended or otherwise.
Spulling mistokes
Probably the most common reason for a 404 is that someone with sausage fingers (or, indeed, perfectly normal fingers, but that's a much less funny image) hammered away at the keyboard, hit Enter, and failed to realise that the URL they wanted doesn't actually exist due to, for example, cunningly spelling 'contact-details.html' with some exciting extra characters that really shouldn't be there.
Net result: the server unintelligently goes 'We're all out of cpntact-details.html, I'm afraid' and spews out a 404. The other issue is your fault (assuming you're a designer, developer or general website-making person), if you've linked to something that doesn't exist (due to some amazing sausage-finger handiwork of your own) or if a once perfectly valid URL is now a dead link, due to you moving content about.
Depending on your hosting environment, the 404 can take on all manner of guises, most of which are somewhat unhelpful. On IIS, you often get an error message that makes perfect sense to web designers, but that will make the typical user squeal in horror at its barrage of technical information.
Apache is rather more blunt, uttering 'Not Found' and scant other information, doing the rough digital equivalent of slamming the door in your face and grumpily muttering about 'when it was much quieter around these parts and you didn't keep getting interrupted'. And if you're using Internet Explorer, there's a good chance it'll hijack whatever it should be showing to instead display Microsoft's 'friendly' error message anyway. (To be fair to Microsoft, its message is friendlier than the standard one, but hijacking default behaviour is always reprehensible and makes us angry.)
Creating custom error messages
With a little thought, most of this nastiness can be avoided, since it's simple enough to create custom error messages for the vast majority of hosting environments. This means that instead of seeing whatever garbage a server spews out, or whatever branded message your host has decided to apply (several hosts now cunningly hijack 404s to present an equivalent page with a URL back to their homepage, rather than yours), you get to decide exactly what appears on the error page. The important thing is to ensure that whatever you present is a lot better than what exists by default.
Jakob Nielsen more or less suggests that because default error messages are so appallingly bad, the very act of changing them at all is an improvement. However, he cites as a starting point taking into account three basic guidelines.
First, the error message must be written in a language that can be fully understood by everyone, including non-technical users, and in a way that doesn't imply what's happened is the user's fault. Secondly, the message needs to detail precisely what's gone wrong. Finally, suggestions need to be made regarding how the user can deal with the problem at hand.
A quick scoot around dozens of 404 pages shows that the majority of sites don't in fact take a great deal of notice of such advice. Some actually go as far as to call the user a ham-fisted idiot, which might just about be OK for a cartoon site for teens, but it's not going to win much praise for a shopping portal.
Too many sites also have a seriously geeky love-in, peppering their 404 pages with imagery and in-jokes that'd even make the typical B3ta aficionado wince and then request a claw hammer for uncurling their toes. (As a quick sidenote, the characters '404' are particularly overused as a design device, despite meaning nothing at all to non-technical people.) Most importantly, many of the pages simply aren't usable: they don't provide any indication of what's happened to get the user there, nor do they offer any means of helping them figure out what to do next.
Amazon's 404 page is brutally simple but surprisingly effective, and covers most of Nielsen's points in just a few lines of text. The user is told that the address entered is not a functioning page on the website, and a clear link is provided back to Amazon's homepage (along with a logo, which does the same).
Yes, the company could do more to help, but as a minimum Amazon's is a good model to follow. Play.com, by comparison, commits one of the worst sins in 404 world, by just redirecting you to its homepage instead of displaying any kind of error message.
The problem there is that a user might assume that the site itself is defective (rather than their typing or a search-engine listing) and go elsewhere. At the very least, it'll take a second attempt to get to relevant content, which psychologically makes people think negatively of the site that's being used.
If no-frills 404 doesn't appeal, others have taken their pages a bit further, with varying degrees of success. BBC News offers simple branding on a white background, and displays '404 - Page Not Found' in red.
Underneath, there's a clear explanation of why this page may have been arrived at, including a brief explanation of link conventions, stating that spaces and capital letters don't exist in BBC URLs. It also explains that the user can click the back button, and gives links to homepages and the BBC's full list of sites and services.
Note that the BBC provides a link to its sites and services, rather than nailing a site map to its error page. The latter was once considered good practice, but it can be overwhelming on an error page for lost users; nowadays, a diminishing number of sites use site maps in this way.
Search boxes
One device that's proving harder to shift, however, is the search box. Although it often makes sense to enable users to search from an error page, it's almost a method of avoiding truly helping the user out: you're providing the pretence of doing so, but actually forcing them to do further work themselves.
If you're keen on integrating a search, follow Microsoft's example. On visiting its 404, you're presented with a search form, but with results based on the erroneous string that led to you ending up on the error page.
Common misspellings are also corrected using a 'Did you mean... ?' sentence, and the entire system is far friendlier and more helpful than just presenting a barren search box. (Also, if your site has integrated search, try using your standard layout for your 404 – more on doing this later.)
If you have neither the time nor the inclination to work on an advanced search tool, there are other ways of helping users access your content. You could, for example, present a short list of links to particularly popular items or pages, or to recent posts on a news site or blog.
These shouldn't become a distraction, though, and simple design devices – headings, coloured boxes and so on – enable you to separate information regarding what's happened from suggestions regarding what to do next.
Fully integrated 404s
A final consideration is whether to fully integrate 404s into your site's design. Again, opinion is divided, with some suggesting that error pages should be simple and have no distracting elements.
Others note that if you do use your site's design on the 404 page it should be stripped back, lacking things like navigation. Frankly, we're not so sure: if your site has a fairly simple design there's really no reason why the 404 can't be directly integrated.
One of the best examples of this is Happy Cog's 404, which uses the site's standard layout, typography and navigation. Because all of the components of the site are clear, the user shouldn't be confused, and because the site's standard navigation is there, access to site sections is only a click away, rather than forcing the user back to the homepage before progressing. (Note, though, how Happy Cog still uses inline links within the error text to direct users to the homepage, design work and company information page.)
Apple also uses this kind of layout although its 404 is less successful, due to welding a site map (albeit a simplified one) to the page. Some might argue that these links enable you to access content more quickly, but Apple has a serviceable search in its navigation toolbar, and dozens of links clamouring for attention isn't what a lost user needs.
Once you're settled on the type of 404 you want to create and have put it together, making it live depends on the type of hosting you have, but is generally a simple process. For example, on Apache you can create a .htaccess file and use the following line of code to redirect the error message to your custom page (replacing '/path/to/file/' with the actual path to your file):
ErrorDocument 404 /path/to/file/404.html
Once you have your custom error pages up and running, things will be easier for your users. However, you can also take advantage of errors to make things easier for you. Consider setting up a system that provides you with reports detailing the 404 errors on your site.
The bulk of 404s will be mis-typed URLs, but many will be links to dead content from search engines, and some might unearth problems in your site itself. If you see the same strings showing up time and time again, you can do something about them, such as fixing broken links or redirecting popular URL misspellings to correct locations.
-------------------------------------------------------------------------------------------------------
First published in .net magazine, Issue 185
Now read 10 things to put on your web design to-do list
Sign up for the free weekly TechRadar newsletter
Get tech news delivered straight to your inbox. Register for the free TechRadar newsletter and stay on top of the week's biggest stories and product releases. Sign up at http://www.techradar.com/register
 |  |
(Via Clippings.)
No comments:
Post a Comment