Keep The Noise Down

Four-oh-Four : give it the respect it deserves

The 404 error is the most notorious of all status codes.   Four-oh-Four has hit the mainstream, becoming part of our Internet vocabulary and even infiltrating our everyday language. It’s so popular that this status code has abandoned its mates (401, 403...) for international stardom, with galleries, forums and Facebook groups hosting heated debates as to which is the best 404 message.

So what is a 404 error?  It’s an important question as not everybody knows, something we often take for granted. Despite so many users being in the dark about 404’s many sites persist in displaying messages such as  "this is a 404 error message" to their users. 

This status code is a server response when a document or file is requested and can't be found on the web server. Yup, it's a techie term.  Yet we're happy to throw this jargon at unsuspecting users who have got lost through no fault of their own.  Motley Fool explain it in their 404 message: “That's 404: File not found for the technically inclined. For the not so technically inclined that means the link you clicked, or the URL you typed in to your browser, didn't work for some reason."

For some web sites the 404 error message can be the most visited page on your site! For most sites the 404 message will be the response to around 0.1-0.5% of server requests. Yet as Tayler points out in her post "my very first 404 page goes live!" this page often gets overlooked and users who get lost in a web site are left to find their own way out.  The way I view it is that when a user receives a 404 error they have one foot out of the door. The purpose of the 404 message screen is to bring the user back in to your web site before they walk away.  The important thing to remember is that a user arrived at your 404 page because they were looking for something. You need to help them find it

The default error message for most web servers when they get a request for a URL that they don't have is the "404 Not Found" error message.  Fortunately the 404 message can be customised. The design of your 404 message can be crafted to meet the needs of your brand and target audience but there are some basic principles that must be followed. 

Pages go missing for many reasons. The page may have been moved elsewhere, some external site has given an incorrect link, the page no longer exists, or the user makes a typing error. So be realistic, it's going to happen.  The failure to address to 404 error screen is usually down to stubbornness to acknowledge that your site will have errors.  No matter how rigorous you are there will always be errors.

So face the fact, your site will have errors and employ these basic principles when customising your 404 error:-

Do no redirect
Many sites still redirect to the home page. This will disorientate the user. The user deserves an explanation for why they have not reached their intended destination.

Use clear jargon-free language that non-technical folk will understand
Something the user looked for can't be found.  Tell them that.   Your user doesn't care that it's a 404 so why call it that.  Many savvy web users or 'geekier' types know what a 404 is, but equally many existing and new users don't.  I have carried out repeated user testing on 404 screens and the message is loud and clear - talk to users in clear English and reserve “404” for technical discussions only.

Don't blame the user
For example, "oops, you've messed up″ may seem fun and cheeky, but a lost user can rapidly become a disgruntled user so put your hands in the air, take the blame and help them on their way. For example “It’s not you. It’s me.”  Do not make the user feel that they have done something wrong!

Be informative and give an explanation for why they have received the 404 error message
Inform the user what has happened.  For example, the standard message "the page you requested not been found", or the quirkier "this page has gone missing" or "oops, we're sorry the page you requested can't be found”.

Offer a site map so users are able to easily continue their exploration
Provide either a site map or at the minimum links to your web sites most popular pages or sections.  Place obstacles in the way of the user finding what they are after and they are likely to go elsewhere. For example, see Conchango  or Samsung's 404 Error.

Provide a search engine 
For large sites it is recommended to offer search functionality. Remember the user was looking for something when they reached this page so for the same reason as providing a site map, help them find it. For example, Twitter.

Provide Contact details
If all else fails give your users a phone number or email address to get in touch.

Retain the overall look and feel of the site
The 404 experience is part of the users overall site experience. 

What if the 404 error message was the first page a user ever saw of your website?  For some it will be.  Give this message the attention it deserves and treat this page like any other page during a site design. 

It's good to see 404's start getting the respect they deserve.  They are often neglected or an afterthought in a site design.  When a user clicks a button or link they have expectations of the destination screen, so when an error occurs they receive an unexpected page. To avoid disorientating the user this page must be well designed.  As well as following the basic principles above it's important to make sure it's on brand.  I wouldn't expect humour on a Crown Prosecution Service 404 message, but would expect something playful from the likes of Flickr and Twitter.

There are plenty of sites and articles which discuss the heroes and villains of error messages so I won't attempt to reproduce them but point you at 404 Research Lab and Smashing Magazine’s 404 Error Pages: Reloaded.

I’m building a comprehensive set of 404 error’s  - worth bookmarking if 404’s excite you as I’ll be adding to this collection daily. Unfortunately the Flickr screengrab doesn’t do justice to Bluedaniel’s 404 error.  It may not follow my recommendations above but it can't be ignored for its creative and engaging take on the 404 message.

P.S. Conchango are recruiting! If any of my ramblings interest you and you are passionate about User Experience then we'd like to hear from you.  Why not contact me and let's have a chat?

 

 

Listening to: Bloody Mother F****ng A**hole EP by Martha Wainwright

Locating the Search Box

 

In a recent Design Review a client remarked that Search functionality should be positioned on the right hand side.  Their reasoning is that this is what other ecommerce sites do.   

 

Search will succeed on either side providing the page is well-designed, so this remark gave me an interesting insight in to the clients understanding of user-centric design. 

 

In my early days as an Information Architect there was more focus on design consistency and a commonly held naive view that familiarity breeds usability.  This was like Designing-by-numbers.

 

Caution: Because everyone else is doing something does not mean that it is right for your users.  Humans are adaptable and well-designed pages are more important that designing-by-numbers.

 

OK – so right or left?

 

In the right corner we have Debehams, Net-a-Porter, Woolworths, Saks and Fortnum & Mason.  In the left corner we have John Lewis, Marks and Spencers, Boots, Macys, Nordstrom and Sephora.  And somewhere in-between are HMV and Amazon.

 

Do any of these sites suffer usability issues? Amazon does not appear to have any usability issues with their left-of-centre search box. 

 

Information architecture is essentially the art of organising information.  A rule for positioning the search box in the top right ignores the interconnectivity of the page elements.  A successful page design depends on page dynamics and page elements should not be viewed in isolation but as part of the bigger picture.

 

OK – so left or right?

 

#1  Jakob Nielsen and Jared Spool both take the view that the search box should be placed in a prominent position on either left or right side.

 

#2  In a recent study only 31% of sites had the search box positioned on the right side so even for those advocates of ‘familiarity breeds usability’ this is not conclusive enough to infer that a search box should be placed on the right.

#3  Eyetracking studies that show that users look for the search box in 4 or 5 main regions.  Users therefore do not make the assumption that it is always positioned in the top right.

 

OK – so right or left?

 

I don’t have the answer as it depends on a number of factors.  However, there are some basic principles I always follow,

 

• Make the search box prominent
• Position towards top of page
• Repeat on every page
• Use explicit labelling (e.g. Search)
• Keep a clear exclusion zone around the search box
• test with users
• test with user
• and test with users

 

 

Providing the user can easily locate the search box then it does not matters whether it’s right, left or somewhere in-between. Testing with your users is critical.  By making assumptions that because other sites are doing something means that it is right can often lead projects to overlook these elements when user testing.