Usability – designing for people

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’s a tasty motorcycle for sure, but on the Triumph Street Triple Flash microsite, there are a couple of irritating little niggles which hit you fairly early on.

For people who actually want to read text on this Web site, two faults will make this a difficult task:

Firstly, the text size is on the small side, which on a high pixel density display (not uncommon) makes it difficult to read.

Secondly, the Flash object automatically cycles through a content sequence, which breaks the usability guideline of putting users in control. Biggest problem in this case is that each frame does not stay on screen long enough for you to comfortably read all of the text. There are some small and fiddly to use control buttons (pause, previous, next) but users should not need to resort to these just to read a paragraph of copy.

There are a few other problems with this site, but I’m only going to address text readability in this post.

This is a great looking ‘bike and a nice looking Web site too. It’s just a shame about those niggly little faults which are clearly evident, even without user testing.

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.

One of the most fundamental design requirements for effective online marketing, SEO, and traffic building is to allow deep linking direct to almost any page on your site.

The two biggest enemies of deep linking are frames and sites that operate from one container page, which is very common with Flash only sites.

This causes quite serious problems because all inbound links, including search result links, dump you in at the front door. This forces visitors to navigate through to find the information they are looking for, something which impatient users are reluctant to do.

With most well designed Web sites, search links and other deep links take you straight to (or near to) the information you want.

Not being able to link to a suitable landing page, also hinders online marketing initiatives such as email marketing and paid advertising.

The problems:

1. Search engine visibility is poor due to lack of indexable content.
2. Users cannot bookmark individual pages.
3. You cannot link to a specific page in a blog post or from a referral link on another site. Visitors must enter at the front door and hunt around for the information they are looking for.
4. It’s not possible to email links to particular pages. Again, you have to start at the home page and work it out.
5. Email marketing campaigns cannot deep-link to relevant parts of the site. Again, visitors get dumped at the front door.
6. PPC and paid advertising cannot link to a suitable landing page which can adversely affect their performance.
7. With frames, pages can get indexed on search engines but remain orphaned from the rest of the site when viewed without the containing frameset.

Don’t believe that forcing visitors to start at the home page is a good thing. In most cases, this is an added frustration which will cause users to bail out when they don’t find the page they expected after clicking on a link.

Without deep linking, sites experience poor visibility on search engines and lose out on a wide range of other traffic generating sources. This means fewer visitors, less traffic, restricted e-marketing opportunities and ultimately, reduced levels of business.

There is no reason to use frames these days. The many alternative methods include: back-end scripting, templating engines, frameworks, server side includes and even template-capable source code editing tools for smaller static sites.

Flash sites can also be designed to allow at least partial deep linking, so there’s no reason why lavish Flash sites can’t support deep linking where it’s needed.

So, deep linking is an essential enabler for driving traffic to a Web site. Incorporate this into your design and build process, but if the mistake has already been made, it is possible to deep-link enable existing framed or Flash sites without resorting to a total re-build.

Topfield UK recently launched their redesigned web site. It has quite a few major problems and for a new site, scores surprisingly low on the usability scale.

I won’t go into too much detail right now, but here’s the first problem I tripped up on: most of the links on this site have changed and there has been no provision for keeping old links working.

Most of the topfield.co.uk links in the Google index no longer work (at the time of writing, it will get updated at some stage) and to make matters worse, clicking on one of the dead links takes you to a default user-hostile error page (example) with no onward navigation links.

One really important rule of web site redesign is to keep existing links working and if this is not possible, at least have a useful error page with navigation links.

As a result of this oversight, most people clicking on a deep link to topfield.co.uk will hit a dead end error page. Many of these users will not find the site and some may even assume the site is down or Topfield has gone out of business.