What every “404 Error” Page should have

404 Error Pages are a necessary part of the web and you just have to accept they crop up from time to time. However we should be mindful of helping our site visitors gain the information they seek as efficiently and painlessly as possible.

1 – Brand Recognition?
Design the page so that it is recognisably the business/website the user is looking for and is consistant with the brand. Keep the Primary navigation in place – don’t hide it. This will aid those who clicked an expired URL in an email or referenced an outdated publication to navigate back to your home page, key product or services pages. The below page from www.thefwa.com represents a standard Windows IIS Server 404 Error page and realistically isn’t really useful to anyone – the second Apache Server page is even less useful. In both instances if you are navigating around a website and hit a snag, you have to hit the back button on your web browser – to many users this is very disorientating and many might not be even sure if they are on the correct website or not.

Standard Windows IIS Server 404 Error Page

2 – You were looking for?
The small step of actually displaying what the users typing efforts inputted into the URL address bar assists in the user being able to validate their typing – and desired destination. Representing the URL in the window can allow a second inspection to take place by the user, as it could reveal a typo in a link supplied in an email. Remember, not everyone has the address bar visible (Full screen F11 browsing) all the time.

3 – Key site areas:
People visit websites for specific reasons – you can identify key areas of interest by way of your site analytics package. Offering a breakdown of these key site sections into a neat array of alternatives on a 404 Error page is an excellent way of  guiding your users to their chosen area of interest. The www.apple.com website is very well setup in this regard.

Apple - 404 Error Page

4 – Search:
If your website has a search facility, placing this within the framework of your 404 Error page will allow users to start looking for what they are after within your site. Particularly if you have predictive search enabled, then this will further assist wayward site users in finding what they are after. Highlighting it like the www.dailymirror.co.uk is a nice and visually subtle way to draw attention to the facility.

5 – Offer Instructions, Tips & Guidance:
Don’t be shy – offer instructions about what a site visitor can do to improve their search, including use of operators like “and”, “or” and use of “quotations” to help put into context word groupings etc. On that, direct people to the search e.g. “Site search is located in the top right hand corner of this page” – it doesn’t hurt to state the obvious.

6 – Offer access to your Site Map::
A general layout, again as illustrated by the Judicial College of Victoria website below will prove useful in guiding your users to finding the appropriate area of the site they are interested in.

7 – Be open to Feedback:
The nature of modern web systems is that many people may be involved in the day to day maintenance and management of the environment. It is entirely feasible and plausible that those tasked with looking after the site might not even be aware of the error in missing content in the first place. Offering the immediate ability to offer feedback by way of a feedback/contact form is a great way to defer the responsibility of site content management. Many people  are quite conscientious about reporting small errors to site content.

8 – Most recently searched items:
If someone is visiting a website, chances are they actually are looking for something they have either heard the business does or they want to find out something they heard recently about the business. Offering the 5 top search items, generated by popularity is a helpful way to offer possible relevance to the site visitors.

9 – News/Cross Promotion:
Just 3 headlines will do. It won’t hurt search engine ranking and page update relevance. Based on the idea that someone is specifically looking for information in relation to your organisation, the fact that the latest news is presented, increases the likelihood of engaging users directly with what the business is currently communicating.

10 – Offer some light-hearted humour:
People can take things too seriously at the wrong times. Consider injecting some humour into your 404 messages. Obviously this approach needs to be treated with care and consideration to the end user audience and the representing website.

Network Navigation

I’ll paint a scene for you – you represent an organisation that is either:

Type A -  multiple facilities i.e. buildings, infrastructure, assets, location. Diversified stakeholders that cover the spread across corporate, general public, specific interest groups, educated and newly aware of your offering.

Type B – is the custodian of a collective group of self sustaining brands, identities and personas i.e. the business is the umbrella marketing and operational owner of a family of best of breed products.

These represent what my esteemed colleague Simon Julian terms ‘Network Navigation’ focussed sites. Yes, you can be part of both groups whereby representation of multiple channels and being all things to all people, is a mandatory requirement. Because of the sheer volume of enquiry that they undergo both Types have site visitors that have an interest in visiting the website with the goal of learning and want an outcome to be firmly fixed into:

Type A: Where the locations are, How to get there and When to get there and what will be there when they arrive.

Type B: What product, what other products, where to buy and product specifications themselves

These are the logical outcomes of such sites. It’s what I term a somewhat ‘brochureware’ type of existence. Point & Shoot. Aim & Fire.

However, if you pause for a moment, consideration needs to be given to a raft of other areas which can be communicated – staffing & recruitment, company news, event information, shareholder enquiry etc. Existing customers and clients looking to revisit and search for updates. To extend this, these stakeholders could come to the website for specifications, support documentation and if you want to embrace Web 2.0 these very same visitors are looking for validation and confirmation via other user viewpoints – blogs, testimonials, experience driven endorsement.

Underlying all this is the driving need to clearly represent the ‘Network’ or family of products, facilities and services that the whole business represents. I’ve recently been involved in some work in network navigation website strategy and a cursory look around has yielded the following:

Epworth Health http://www.epworth.org.au – Type A

This site is really well setup from an information layout point of view, and considering it is a hospital, the branding is not too bad. I particularly like the visual treatment in the primary navigation offered around the overarching Epworth organisation umbrella vs the different facilities locations. 2nd level primary in the upper 3rd of the page is good and drills down to content with quality layout landing pages. Colour treatment could be better, but really clutching at straws here. 9/10

Museums Victoria http://museumvictoria.com.au – Type A

Again, a visually strong site, with expected branding which is par for the course for this sort of institution. Lack of a breadcrumb is a killer. Structure of events and the information design around event treatment falls away badly as the information across pages is inconsistant. On the upside, navigationally, you are always aware where you are on the site and it is easy to get around via the persistant navigation.  Annoying how it is optimised to barely skip through the screen fold – this minimal information presentation can lead to an excess of clicking around to get information being split across so many screens. 7/10

Wilson Sporting Goods http://www.wilson.com – Type B

Strongly branded, taking the product approach harnessing the strength of the parent brand and than shelving off to the 14 different sporting endeavours as required. Brilliantly executed aside from the Employment Opportunities area which is laughable in its simplicity and glaring lack of branding compared to the rest of the network. Also the dealer search arriving via the evil popup window warrants a -1 point. 8/10

Coca Cola Amatil http://www.ccamatil.com.au – Type B

Representative of Coca Cola, Goulburn Valley & Powerade, this is an average representation of how an umbrella brand can pale next to the strength of its subsidiary brands. Drilling down to find the brands themselves is a chore and you are left sitting there not even being able to decipher them, due to the miniscule size of the images, the errors on the page and the generally poor information design. Layout for shareholder information is a challenge too. Corporate Image representation is poor.  4/10

Mars http://www.mars.com – Type B

Aside from this site being devilishly slow, a strong representation of the brands from the umbrella perspective with succinct summaries and leads to the individually localised and branded websites. The site presents both flaws and strengths. There has been some strong effort at offering marketing led insight with a high level of visual interactivity, however it is let down by the somewhat skimpy treatment of key areas of information which umbrella company focussed visitors would be looking for. 8/10

Volkswagen AG http://www.volkswagenag.com – Type A & Type B

Austere. Minimalist. German. Not many people are aware that Volkswagen AG own Audi, Volkwagen Automotive & Commercial, Lamborghini, Bugatti, Seat, Bentley, Skoda & Scania. Easy to move around, the navigation is particularly easy to use and follow, mitigating the need for a breadcrumb. It could be argued that implicit notification of additional layers of navigation would be useful, but really just a minor point. 7/10

Top Quality – Consumer focused websites

Recently I wrote about my poor experiences in researching a lawn mower and the hurdles I came across in finding out the basic information I needed to make an informed choice. The manufacturer sites were all flawed in one fashion or another, with the summation of faults being a mix of poor execution or just plain devoid of any semblance of usability or consistency in the areas of:

• information presentation
• content quality including  clarity of writing, accuracy and relevence
• image use
• corporate identity & brand mark execution
• construction artifacts such as font use, breadcrumbs, navigation features & highlights

The end result is that I found the usability and the ability to perform specific tasks was found wanting in many of the sites. As a consequence a poor User Experience was the hallmark of my interaction, which led to frustration  in finding the information I was looking for. Not good for the brands in question, particularly if I was looking for a lawn mower to be reliable and “just work” I could, like many users, be tainted by my online experience with the brand in question. Really.

So, with that in mind, what do I think are good websites which portray products and consumer driven information well? I’ve chosen the below 3 for entirely different reasons. Each is markedly different in their information presentaion, layout and fucntionality, however at the heart, each IMHO meets its target audience really nicely.

Rushfaster Australia http://www.rushfaster.com.au
An online based retailer specialising in showcasing bags. The areas which stand out head and shoulders above most sites are:

Photography: simply put, it is stunning. Well shot, clear, and taken in context as to how you would want to investigate a bag, short of being there touching it yourself. There is no doubt in my mind that these guys spend big money getting professional photo shoots of the products done, as in many cases they are a cut above the bag manufacturers site itself.In
Image Size: little irritates me more than a product site with small, useless images. Rushfaster has got it right – good image size, small file size, crystal clear.
Search: using key traits of what you look for – size, type, style, brand, price – it just works. I also particularly like the calculator which works out if your laptop will fit into the bag you are looking at and offer alternatives if it doesn’t.
Shopping Cart/Checkout: easy to use, offers cross links of other product, easy to signup. Can exit and return back in at any stage.
Information Design: layout is clear, logical, comprehensive, consistant and well written, cross linked promotions and similar items are presented

Citizen Watch Australia http://www.citizenwatches.com.au
Noted by a work colleague who was searching for a watch for his girlfriends birthday. Whilst you can’t actually purchase online from this site, it is a good showcase of the products and presents a useful reference point for you to visit a store. On that, slightly annoying that such a nice website is totally let down by this one area – no list of dealers to purchase from.

Watch Search: selector with its persistant right hand side navigation bar is absolutely fantastic in its functionality and speed with which it whittles down literally hundreds of models.
Fat Footer: I’m a professed fan of the big fat footer which sits at the bottom of pages with all the ‘floating’ navigation items you are likely to want whilst browsing.
Information Design: Again, like Rushfaster, lots of consistantly arranged information and groupings of features.
Images: Watches are very personal items – the quality photography here illustrates each watch in fine detail, giving a sense of the product.

Ping Golf http://www.pinggolf.com
Now, I don’t play golf as such (yet) but know alot of people that do and the underlying thread of all these people is that when they are spending their money on new clubs, drivers and bags/buggys, they do an immense ammount of research. As a consequence, their baseline understanding is somewhat higher than your average consumer. But. The big thing about the Ping website which I noticed is that if you were a first time researcher or visitor, this would quickly become the default standard by which you rate all the other big brands like King Cobra, Calloway, Titlelist, Taylor Made, Wilson and so forth. The site really takes you on a journey in presenting information and illustrative examples which are relevent, supportive and most of all, don’t leave you lost as you make your way through the site. Really good. A nice touch is the Ping Golf Club owner letters being read out by the staff, who albeit from their biased point of view, extol the virtues of the products and make you see how everybody else is using them.

I just wanted to buy a lawn mower….

Recently I had to bow to the inevitable and admit I needed to buy myself a lawnmower. Not withstanding the change from being a bar hopping, inner city urban sort of guy, to the fact that I was now a renovating, suburban, family man with responsibilities like a backyard of knee high grass, I succumbed and started to look around for why it was lawn mowers at my local ranged from $80 to well north of $1500. What on earth? I’m only trying to cut grass and maintain civil relations with my neighbours of not being labeled “that house.”

So, thinking that looking for a product, I’d have a similar view to any other person I set out to look for the following, in no particular order:

• Specifications
• Recommended Retail Price
• Features,  Benefits and Unique Selling Point
• Where to buy – Dealer Locations

With the above goals and objectives, I proceeded to visit a bunch of different lawn mower manufacturer sites from a purely task oriented position. I had specific objectives and a set amount of time to achieve these in ie. I didn’t want to waste too much time looking. Underlying this, I think, like most people I was shopping on the following principles:

• Budget – something to fit within the specified budget.
• Intended purpose/requirement – something that addresses requirement.
• Value add – features and benefits which would justify an increase in my allotted budget.

Considering it was a lawn mower, aesthetics, usability and its desirability – hey, it IS a lawnmower – play slightly lower in the requirements. Translating this to the complex world of mowing my back yard,  I also didn’t want to be on a one way street of having to shell out lots of money for ongoing repairs and maintenance – I would happily pay extra for reliability, sturdy construction and execution of intended function. My starting budget was $500 – as good a place as any to start – with which I would use as a yard stick to rate and judge the good/bad of the machines.

So what were the good and bad with the websites I encountered?

Toro Australia http://www.toro.com.au/
Home page – nice. It is reasonably well laid out, and broken down clearly by activity/location areas into Home, Golf Course, Contractor, Stadium and Agriculture. Pretty simplistic and a nice start. Selecting “Home”, and then in turn selecting, “Walk Power Mowers”,  the page was really, really long. It waxed lyrical about the features and benefits, having little photos next to each, to reinforce that position.  The photos were bordering on too small, almost pointless. The list of models was distinguished by way of Military style call sign model designations and limited to the blade diameter and the engine model type. No Prices. No pictures of product, no descriptions on why you would go for one model verses the other…. Worst of all, and this is bad considering I have a 24″ widescreen at work, the font was rendered in tiny 6 point . The dealer locator required a postcode and/or town – worked well, although again the screen real estate could have been utilised in a better fashion. Thumbs up to the persistent primary navigation along the top of the site all the time. 6/10 for overall design and intended function but bumps downwards  for that ridiculous font size and poorly executed sub sections. 4/10.

John Deere Australia http://www.deere.com/en_AU
Even before going to this site, I knew it was going to be expensive as the Green & Gold livery of the John Deere gear is considered the pinnacle of agricultural equipment as I am reliably informed by my farm running in laws. Similarly set up to the Toro site, it breaks down equipment by activity on the home page by way of smallish images buried within a poorly executed flash navigation supported by a very hard to read vertical  labeling. A nice touch was  the presentation of a Products and Equipment section allowing  step by step navigation to the allotted equipment areas. Content structure in the actual product pages is inconsistent, some models have an image, some  have their specs detailed in bullet points (with ambiguous headings) and some of them opt for tabulated data. No prices. Printer friendly button, is initially useful for older browsers although superfluous in light of a well designed page in the first place.  Overall, penalised heavily for the inconsistent information presentation across grouped products. Also, not so cool is the lack of a com.au domain – it is a sub domain on the global site, making it difficult to market for in the region from a memorable URL point of view. 5/10.

Honda Australia http://www.honda.com.au
This Japanese manufacturing giant’s home page is the direction for a network navigation, directing you to Automotive, Marine, Motorbike, Personal Watercraft & Power Equipment. Visually, light years ahead in terms of  aesthetic design, a real credit to the design agency and the strong brand which Honda has worldwide, but dig a bit further from a navigation point of view and the site becomes extraordinarily frustrating. You can find Lawn mowers easily enough, but you have to go through each model one by one and to get back to the overview, you have to hit the browser back button – there isn’t a breadcrumb in sight! Introduction, features & specifications are all uniformly well laid out and image quality is good. The only gripe, aside from the missing breadcrumb, is the dealer locator, which works fine but launches into a totally differently branded site, which is appeasing to the network navigation demons – a jar on the user experience. Again, you are forced to hit the back button to return back to the site. 8/10.

Masport http://www.masport.com.au/
Big site. Lots of lawn mowers. Too many, in fact with little to distinguish them until you get into the detail. The landing page has good images of the product, broken up into its product range, but there is no differentiation between the ranges aside from a technical spec overview, which to novice lawn mower hunter me, meant…. not much at all. Inoffensive design (just) is simple and easy to use. Navigation is persistent. Product pages are pretty good, if somewhat plain. Picture is okay size, information is consistent and informative. No price, leading to a lack of hierarchy amongst the machines. Dealer locator is a pain in the neck to use, forcing you to wade through a clumsy inelegant super long list and worse unless you click the relevant suburb, you can’t determine what sort of dealer it is ie. President Series Only, MSV Series Only or both etc.  6/10.

Victa http://www.victa.com.au/
Similar aesthetic and navigation standards to the Masport website – minimal. 2 main groups – Domestic & Professional, sorts out the inquiry direction. You get to the landing page and you are hit with 20+ different mowers and absolutely no way to determine hierarchy or features between any of them as they all look similar. Pictures are good. No prices. Dealer locator is by far and away the best. Select a state and bang, they are all shown up for you to browse through. 7/10.

So, overall, not a great rap for the lawn mower world – all sites had failings, some of them fatal from a usability point of view, others poorly representative of the brand.  I waded through and read for an hour or so and ended up going down to the local lawn mower shop and had a chat to the experts,  and followed up with a few friends and colleagues who had already ventured down this path. 2 things jumped out at me in every conversation I had – Get an Alloy Deck & stick with either Honda or Briggs & Stratton engine. Nothing else. The ironic thing after all this toil and endeavour in which I was about to lay down the hard earned cash, is that we got given a lawn mower as a Christmas present. Got a Masport 19″ with a Briggs & Stratton 4 Stroke Engine which has been great.