Sandisk’s Sansa ‘microsite’ is a frustrating and unsuccessful attempt at a product oriented Web site. It looks quite respectable on the surface, but if your goal is to find information and make a purchasing decision, this site fails to deliver.

Here are some of the problems I noticed:

• No deep linking – many issues arise from this.
• Poorly presented product information.
• Text content crammed into a small pane with fiddly scroll up/down buttons.
• No summary of key product features, just a few pale icons which look like spurious design elements.
• Small text with weak contrast will be difficult to read for some users.
• Navigation buttons scattered around the screen, inconsistent positioning.
• Site starts playing a sound track without choice or warning – not good for covert surfing in an office environment.
• Product comparison table lacks detail, makes for difficult horizontal eye tracking and has no links back to individual product info.
• Hover highlight on accessories nav block conceals next/previous buttons.
• Product reviews are pointless: they don’t quote any review content or link to the original source.

Fortunately, the Sansa microsite also has poor SEO and no deep linking, which will limit the number of people who find and ultimately have to suffer this Web site.

Web sites are often used to get location info – the classic ‘how to find us’ page – and despite some fantastic dedicated mapping sites, many sites still offer poor maps and difficult to follow directions.

Including a link to an external mapping or route planning site – such as Google Maps, MultiMap, ViaMichelin, Map24 UK, MapQuest – should be a no, brainer. These sites offer large easy to use maps and/or great route planning facilities which can map out a custom route for each individual visitor.

Another option is to embed a third-party map into your own page, but this can result in a small map with many of the interactive and route planning features missing, so always include a link to a full mapping / route planning site.

Sites should also clearly display a postcode for satnav users. Mobile route planning devices are very common these days – make it easy for people to use them!

For downloadable PDF maps to print out, Give Way produces superb custom maps which are very detailed yet extremely easy to read. (download a sample Give Way map – PDF, 235k). Incidentally, this is a great example of usability in print design.

Here are some examples of sites with poor location maps, weak directions or no help for satnav users:

• Coors Visitor Centre – update: the CVC has now closed, presumably because nobody could find it.
• Salisbury Race Course
• Scottish Arts Council – users are invited to download a Word document.
  
• Silverstone Circuit
• The O2 (Dome)
• University of Sussex
• York Art Gallery
• Chessington World of Adventures – update: this used to be in the list of good examples. As well as changing the address of the page, therefore creating a load of dead links all over the place, the updated page seems to be a step backwards. Acceptable map, with a link to a routeplanning site where you get dumped at the front door and have to do the rest yourself.

Some helpful ‘how to find us’ pages:

• Alton Towers – update: another address change, more dead links.
• Birmingham NEC – embedded Google map, but needs a link to open the map in a new window.
  
• UK Identity and Passport Service – embedded Google map, but needs a link to open the map in a new window. Update: another address change, more dead links.

Flash is great for delivering enhanced content, embedded video, animations and for achieving more complex interactions. It even makes development easier with consistent and predictable results across different browsers and platforms.

Many of the problems its misuse can cause are demonstrated quite nicely by the Manchester Central Web site, (exhibition / event complex).

The interface on the Manchester Central site has quite a few problems, which I’m not going to describe in detail here. Perhaps its most notable weakness is the way in which it limits inbound traffic due to its very design.

As this site demonstrates, the most serious problems arise when Web sites function entirely within Flash from one container page. Taking the Manchester Central Web site as an example, here are some of the problems it has created for itself and its visitors…

One URL, no deep linking

Without support for deep linking, quite a few serious problems arise because all inbound links, including search result links, dump you in at the front door, so you have to navigate through to find the information you are looking for.

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

Other problems:

1. The browser back button doesn’t work as expected. Navigate around the site and as soon as you click the back button, you get dumped out to whatever page you were looking at before you entered the site.
2. Accessibility compliance is probably non-existent. Unless an accessible alternative is provided, users with disabilities are shut out.
3. You cannot print out pages of information from the site unless PDF downloads have been provided.
4. The site will not be viewable on most mobile or hand held devices. Unless a non-Flash version is provided, an increasing number of mobile users will be excluded.
5. The JavaScript loaders will effectively block any users who may not have script functionality running on their browsers.
6. Site owners are probably getting little or no analytics data on site activity. This is even more important for sites that have SEO and usability problems.

In short, this makes the site harder to find (= less traffic) and when users do visit the site, frustration is likely to feature highly in the whole experience.

Try it now!

Visit Manchester Central site and find out what music events are scheduled in two or three months from now.

If and when you eventually find this information, can you Email that page to someone? No. Print it out? No. Bookmark it? No. Go back and re-trace your navigation steps to find something of interest you noticed a few pages earlier? No.

You may also have noticed one of the other big problems with many Flash sites: non-standard home-brew UI gadgets. In this case it’s a painfully slow scrolling frame, no page jump, no grab box, and no other means of navigating easily to the information you want.

There are other problems with the Manchester Central site: low text contrast in places (bad readability), inconsistent style on active/linked text, use of ‘click here’, confusing navigation with poor sense of orientation, no site search or site map. These are classic problems, not caused by Flash itself.

Flash is great, but use it wisely

Flash encourages creative expression, design freedom, an opportunity to do something different and push the boundaries. This is great – just make sure the result is usable, can be found and linked to.

Many of the problems exhibited by the Manchester Central web site can be avoided by sensible design and it is quite possible to allow at least partial deep linking into Flash sites. Flash content can also be accessible – Adobe provides plenty of documentation on Flash accessibility.

There is no reason why imagination and creativity should be stifled by usability issues. However, always remember that Web sites are used by real people attempting to accomplish real tasks. Make sure that designs work for the people who really count.

For business owners, deliberately losing traffic and frustrating their customers is indefensible.

Using the words ‘click here’, ‘here’, ‘read more’, or ‘more’ as your link text is nearly always bad, very bad. Click here is this decade’s skip intro, worse in fact.
Because users scan pages for highlighted text – bold, different colour, and particularly underlined linked text – using meaningless link text makes a page more cumbersome to navigate and useful links become difficult to see.

Scanning through page text to see ‘click here’ several times and you have no idea what those links relate to or what is on the other end of them.

Using relevant link text makes links much easier to read and understand.

A few people will spend time to read more of the surrounding text and therefore won’t suffer so badly from ‘click here’ syndrome, but for most people, link text is very important.

This example of ‘click here’ shows why.

Other click here examples:

• www.greatrun.org
• www.dma.org.uk (note tiny unreadable text size)
• www.emigroup.com
• www.conferencebookings.co.uk

Meaningful link text is essential for intuitive navigation and contributes to good pagerank in search results. Good Web copywriters know how important this is and will know how to write useful link text.

Thankfully, ‘click here’ is becoming less common, but we still see too much of what is one of the easiest usability problems to fix.

Usability is becoming an increasingly important element of Web design and development, yet why is it such a tough sell?

1. Consequences are invisible – users might be shaking their heads in despair and bailing out of a site within seconds of arriving, yet most usability problems go unnoticed and unreported; if you can’t see a problem, there’s nothing to fix.
2. Clients want click-click-wow! – Web sites typically get judged on very superficial criteria. A great concept and slick design are enough to get a thumbs up and the invoice paid. Like any business, agencies must satisfy their clients.
3. Fun factor for the project team – creativity, innovation and pushing boundaries are undoubtedly more fun than dry boring user-centred design practices.
4. Usability perceived to stifle design – if a project starts with and is driven by a creative process, there will be resistance to user-centred design practices interfering with aesthetics. There is no reason why this should be such a problem. Teams need to work in harmony.
5. Overstretched budgets – what gets dropped when the budget starts to run out? Usability, and documentation are often the first to go. Core activities gobble up budgets which are already eaten in to by client/project acquisition costs.
6. No measurement of success - remarkably, many Web sites are not evaluated for how successful they are. With most other forms of marketing or promotional activity, measuring results is essential. Web sites seem to escape this scrutiny.

What is missing here? Users.

Clients quite correctly assume that when their appointed design/Web agency creates a Web site, the job will be done well, and this includes whatever needs to be done to deliver a successful project.

Taking responsibility

So, if important work like usability (which includes accessibility) and basic SEO get neglected, is the client or the agency responsible?

Few clients will insist upon specific technicalities, never mind conduct due diligence checks. It is therefore up to agencies to ensure that project scope includes work like usability and that budget allocation covers it.

Herein lies the problem: Web sites are more time (and therefore, cost) intensive than most people realise and it is the less visible work which typically gives way when tight budgets are stretched, particularly by expansive agency overheads.

The solution, therefore, is not only to raise awareness amongst both clients and agencies, but also for budgets to be more accommodating. For this to happen, clients need to appreciate the value, importance and scale of their online initiatives, and agencies need to control costs and manage budgets more carefully.

It is not unusual for large proportions of a Web site budget to get consumed by project acquisition costs and creative work, even before the developers have fired up their code editors. This leaves little room for the likes of usability, copywriting, content development, QA testing, SEO, security audits, online marketing…

It is quite understandable that agencies are driven not only by their own creative values, but also by a desire – and business need – to satisfy their clients. Until users, customers and true results start to count more, usability will struggle to attain the level of importance it needs and deserves.

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.

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.

My web site assessments are effectively mini Heuristic Evaluations where a site is tested for usability problems against a list of known issues. The bottom line is that many web sites are fundamentally flawed, alienating or turning away countless users. Many of the problems I see can be easily fixed and some, well, some of the faults we find simply beggar belief.

To cut to the chase, here are ten of the most common faults I find:

1. Poor text readability: font size too small, poor contrast with background, bad use of colour
   For most web sites, textual content is the main reason why people visit a site. If the text isn’t readable, the site is almost hiding it’s main reason for existing.
2. Poor sense of orientation or little indication of where you are within the site
   As users navigate through a site, particularly if there is a lot of content organised in a hierarchy, they need to know approximately where they are within the site, have some indication of how they got there and where they can go next. A good sense of orientation is vital to the overall user experience.
3. Main logo not linked to home page
   Having a main site or company logo link back to the home page is an important and universally understood navigation device which users often resort to if they get lost and want to go back to the start. Even if there is a button labelled ‘home’, users will often click on the main site logo almost as an instinctive reaction.
4. Bad use of hyperlinks: link text, colour, duplicate links
   Many users jump from link to link when scanning a page or looking for information. When they do this, typically the link text is read, not the surrounding text. Therefore, it is important that link text makes sense when not contextualized by the words around it. ‘Click here’ is particularly bad. Unvisited/visited link colours should be appropriate and different.
5. No product comparison
   One very common goal for users who are researching products on the Internet is to compare key features of similar products side by side, without having to juggle multiple windows or print out pages. Comparison tables showing key characteristics are extremely useful for helping users achieve product selection goals.
6. Form problems, a wide assortment of
   Select from a menu of problems, including: no use of label tags, email field too short, bad tab order, overly strict validation, ambiguous checkbox/radio button layout, javascript dependency, presence of a reset button. Most bad forms combine an interesting selection of different problems.
7. Small ‘click zones’
   Usability improves significantly as clickable ‘hotzones’ increase in size. Make it easy for users to click on something without having to position the mouse pointer carefully and accurately over a small active zone.
8. No site map
   Even with the best navigation and content structure, users will sometimes need to resort to a site map to help them find what they are looking for. Sitemaps can also help users to visualise the structure of the entire site, at a glance.
9. Ineffective or non-existent site search
   Users can quickly give up navigating to find the information they are looking for. Providing a search facility gives people a catch all method of locating that difficult to find content. Search problems ranged from simple searches not returning results for pages which did exist, right through to getting too many non-relevant results.
10. Poor SEO: weak page titles, bad META data, no deep linking, etc.
    If people can’t find your site, you’re wasting your time!

That was my top ten most frequently encountered usability problems and there are many more which nearly made the list.

Bruce Tognazzini’s article, First Principles of Interaction Design, gives you some idea of the issues we need to consider when testing a web site.

The whole process of video sharing took a huge leap forward in ease of use, if not quality. YouTube content is the real star, of course, but this still shows the enabling power of usability which in this case, helped to set video sharing free.

Here’s my take on what makes a web site ‘2.0′:

1. Ground-breaking utility
2. Great usability
3. Clean functional design
4. Lots of user generated content
5. Personalisation
6. APIs to allow other sites to hook into content and functionality
7. Content aggregation / mashups
8. A bit of luck

If the term paradigm shift hadn’t fallen so far out of favour, I would have used that too! Based on these characteristics, you could say that Web 2.0 is just 1.0 done properly. A gross oversimplification I admit.

One key element of a great W2 site (we need a more suitable moniker for this) is rapid growth and large numbers of users. This would not happen without exceptional usability.

I guess what I am getting around to saying is that usability is a key driver for any successful web site. The W2 phenomenon proves this.