Usability – designing for people

In a recent article on the BBC News web site entitled “Do small firms really need a website?“, there were some counter arguments from people who were not necessarily in agreement with the Federation of Small Businesses view that small businesses need to keep up or lose out.

One of these views, from a building contractor, commented that nine months after a new Web site was launched, it had ‘not generated a single phone call’.

Update: this web site has been significantly improved since I first looked at it. The comments below are based on the original site.

After assessing the Pople Design Construction site, it becomes immediately apparent this site has many serious failings which prevent it from being found in the first place and render it next to useless for anyone who does manage to find it.

Here are a few reasons why this site will not be successful:

1. Almost zero search engine visibility
   • no text for search engines to digest and index.
   • opening page has a JavaScript link which opens a pop-up window.
   • site uses one page containing a Flash object: no SEO, deep linking, etc.
   • use of a .com domain will lead some people think this business is not UK based.
2. Unhelpful content
   • There is no explanation of what services this business offers. You are left to take a guess based on project images alone.
   • Projects are titled unhelpfully – ‘fairwarp’, ‘highfields’, ‘holly bank’, etc. – there is no information about the nature of the project or the type of work which was done. For example, if you were looking for loft conversion projects, you would have to sift through everything.
   • Most of the images on the site are good, showing a wide range of work. There are, however, some which look out of place. For example, a shot of a roof top vent next to a wall with a splat of bird poop on it. Some other photos show unfinished work, which is not the outcome you want when you get the builders in.
   • Recommendation is a crucial source of new business in the design and building industry. Where are the testimonials?
3. Poor usability
   • The navigation menu is not visible until you click on a small grey arrow.
   • Designed as one single Flash object, this suffers from a range of problems, as I have already highlighted in my posting about the problems with bad use of Flash.

This Web site will not generate much attention in its current form. Due to its very design, it is turning its back on many potential visitors, which of course are potential customers.

There is probably a great business behind this ailing Web site. A Web site designed to be found, usable and useful will really benefit any small business – Pople Design Construction could have a vastly more positive experience of being on the Web.

The Map and Globe Web site has some show-stopping problems, some of which will be seriously affecting how much traffic the site receives…

1. Deep linking not possible – links to specific pages simply don’t work, sometimes generating user hostile server errors.
2. JavaScript dependent navigation – most links rely on JavaScript, rendering the site almost unusable without script functionality.
3. Product classification lacks coherence – it can be difficult to find the product category you are looking for. Main left-hand navigation is the biggest problem with one long unstructured list.
4. Concealed links and buttons - some important buttons don’t look like links or buttons and don’t even cause a hovering mouse cursor to change indicating ‘clickable’ status.
5. Unlinked thumbnails – many thumbnail images not linked to relevant pages.
6. CAPS-TASTIC – excessive use of all-caps, particularly the main side navigation, making it jarring to read. Text in all caps usually slows down reading speeds.
7. Small text – size-locked in most commonly used Web browsers.
8. Almost non-existent search visibility – probably caused by a Script-dependent link handling technique which search crawlers cannot follow, and generally weak SEO.
9. Right click disabled – this will not prevent people from viewing the source code or grabbing images.
10. Large images used for thumbnails – scaled down, often distorted, look poor, and sluggish to download.
11. Poor accessibility – comprehensively fails Web content accessibility compliance and Section 508.
12. Site logo doesn’t link to home – the most important navigation device.
13. and many more…

I have never seen an e-commerce Web site try so hard not to be found, and to discourage anyone who does find it from using it. This is a real shame – I like the products and wanted this site to be good.

There is no doubt that MapandGlobe.com could significantly increase its level of business by fixing these problems. Thankfully, these fundamental mistakes are becoming less common, but MapandGlobe.com is seriously afflicted and needs and a total re-build.

It might not be the worst usability problem you will find on a typical shopping site, but poor product images are a persistent weakness.

Aside from the all too common fault of not linking photo thumbnails to the larger image, another major cause of irritation is the ‘larger’ image turning out to be the same size, or only slightly bigger, than the original image or thumbnail. This wastes everybody’s time.

Here are some significant UK shopping sites with under-sized product images and time-wasting ‘larger’ images that aren’t:

• comet.co.uk
• currys.co.uk
• argos.co.uk
• dixons.co.uk
• empiredirect.co.uk, some product images are good, many products don’t have larger images
• dabs.com, no larger images offered
• dfsonline.co.uk (sale ends soon!)
• pier.co.uk
• bhs.co.uk
• firebox.com
• ikea.co.uk
• debenhams.com
• findwatches.co.uk
• homebase.co.uk
• beaverbrooks.co.uk
• redsave.com

Slightly better, but still lacking:

• woolworths.co.uk – fairly good product images, just about worth viewing
• johnlewis.co.uk – does have some alternate angles and some pan & zoom images
• direct.tesco.com – includes alternate angles. open/close, etc.
• jjbsports.com – product images are a little on the small side, but the ajax/lightbox implementation works well
• gadgetshop.com – a good variety of images, but only a few large ones

Pan and Zoom

Some sites make more of an effort with product images by taking the pan & zoom route, typically using Scene7 technology. Scene7 has some good product configurator solutions, great for applying different colour, texture, material or finish options to a common product or room set photos.

Unfortunately, the way many sites implement ‘enlarged’ product images, results in a cumbersome pan & zoom arrangement which is quite fiddly to operate, confining users to a small porthole through which to view an otherwise good image. Some examples of this are:

• marksandspencer.com
• diy.com (B&Q)
• halfords.co.uk
• furniturevillage.co.uk
• harrods.co.uk
• ernestjones.co.uk – Scene7 pan & zoom works quite well for examining detail close up, but it is still rather frustrating to have to peep at the image through a small porthole

Good product images:

• artgalleriesdirect.com – generous-sized images with some room set options. Use of basic pop-up browser window is not so good
• and… a shortage of good examples

The problems

Good product images help users to make buying decisions. Poor or under-sized product images contribute to a negative user experience – you click, and the result is disappointing.

Why then, if businesses go to the not inconsiderable trouble of shooting product photos, can decent quality images not be made available on their web sites in a usable form?

Pan & Zoom gadgets work well in some cases, particularly when you want to examine specific areas of a product in detail. For the majority of users, however, peeping through a small porthole is fiddly, frustrating and prevents you from getting a good view of the overall picture.

Standard web browser pop-up windows don’t cut the mustard these days either. Confusion can be caused when they disappear behind other windows, some pop-up blockers catch them and window sizes are often difficult set or unpredictable to calculate.

The solutions

Good product images – or any primary subject image for that matter – are an important element of any web site’s content, particularly when the user goal is a purchase or product selection task.

It is also important to present these images in a usable and accessible form. Here are a few tips for successful use of product images:

1. Link thumbnail images to the corresponding main/enlarged image
2. Display enlarged images at a useful size that makes good use of available screen space
3. Use a well-coded ajax type pop-up mechanism which degrades to maintain accessibility
4. For pan & zoom implementations, make better use of available screen space to minimise ‘porthole syndrome’
5. Use good quality sensibly cropped images, minimise unnecessary white space and avoid distracting backgrounds
6. Offer alternative views/angles and close-ups of important areas

Footnote: if you think this is a minor issue, read Usability: fine details make a big difference.

The OneOneMap flood data layer I mentioned just a few weeks ago has now been withdrawn, thanks to the Environment Agency.

Incredibly, and at a time when the UK is suffering some of the worst flooding in recent memory, the Environment Agency has seen fit to insist on the removal of OnOneMap’s excellent flood risk layer.

Despite the fact that the data used has been collected at the tax-payers’ expense, its seems the public will be denied easy access to this information in a form which has never been so accessible.

The Environment Agency still makes this information freely available on its own web site, but in a far less accessible form. This does not excuse the fact that they have made an incredibly bad decision, at a time when people need easy access to exactly this kind of information.

The excellent OnOneMap property search site has added a UK flood data layer.

Just click on the flood risk checkbox and a layer of blue will appear, showing exactly where the flood risk areas are. It couldn’t be easier and while the data comes from the UK Environment Agency where you can also find a flood risk map of sorts, the OnOneMap interpretation makes this information vastly more accessible and usable than ever before.

Hats off to the people at OnOneMap (and Google), this is how it should be done.