Usability – designing for people

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.

I have updated my list of on-line marketing essentials and top traffic generators.

In many cases, marketers are spending a proportion (probably too small) of their budget on creating a Web site, but not actually marketing it. There is still a misconception that customers find Web sites automatically and traffic grows without any further effort.

This is a bit like getting a fantastic brochure designed and printed at considerable expense, but leaving most of the print run in a skip outside the printers, hoping the right people come along and find it.

Good Web development and e-marketing agencies will be fully up to speed with how things should be done, but if you need to know what kind of measures need to be taken for correctly building and successfully marketing a Web site, this is a good place to start.

There is no doubt that usability is incredibly important for most Web sites, yet an alarming number of sites exhibit serious usability faults suggesting strongly they were not user tested and probably not developed with user-centred design practices.

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.

Laterlife.com has quite a few problems, but consider this one forms-related issue:

View the work and retirement survey form and check out the highly prominent ‘reset’ button near the ’submit’ button. Just what you don’t want to click on by mistake after filling in this long and badly designed form.

Reset buttons are nearly always a bad idea due to accidental clicking. Users rarely want to clear a form and start over.

The reset function can be useful as an undo button for editing a pre-filled form, but we rarely see undo buttons in situations where they would actually be useful rather than a hazardous.

There is no doubt the pace of development in mobile Internet on phones and handheld devices is moving ahead fast. Recent announcements from Apple and Google only serve to highlight this trend.

It’s all happening, and with Apple, it’s not only the excessively hyped iPhone, but the new iPod touch – the phoneless iPhone with its WiFi Web browsing capability – which will help to push mobile Internet applications forward.

Archos also offers some WiFi enabled handheld media players with Web browsing capability, and improvements in mobile phone software and connection speeds are starting to make Web browsing only a thumb tip away wherever you are.

I predict that convenient, usable devices like iPod touch, will bring handheld Internet access to the masses. Even in the home, where many people already have WiFi broadband connections, accessing the Web anywhere in the house on a handheld without needing to fire up a personal computer – even a notebook – will be a big winner.

I have been using mobile Internet services on my phone for a while now and almost take it for granted. The Gmail mobile applet is great, Google Maps for mobile is super useful and Opera Mini makes non-mobile Web sites usable on a small handset. We are also seeing more Web sites starting to serve pared-down mobile pages for speedy access to existing content on the move.

Handset developments are seeing bigger better screens, a choice of connectivity options, some of which are very fast, and built-in GPS which will might have a good effect on mapping and location-based services. Even though it is possible to determine the location of a mobile handset without GPS, this is rarely used due to privacy and accuracy issues.

The mobile networks are doing their bit as well: affordable flat rate data tariffs are becoming more common and fenced-in network access is a thing of a the past.

Developers and agencies need to get on board with this sooner rather than later. Get into the habit of making your Web sites work on mobile devices, at least ensuring that navigation is usable and essential content is available.

Standards based coding will go a long way to achieving this, but it may still be necessary to employ transparent content negotiation techniques. Browser testing will become a bigger issue and mobile browsers, particularly variations of Opera and Safari, will need to be tested.

It makes sense for a Web site to reach the most number of users as possible, and with many more people experiencing mobile Web access, this is another source of eyeballs which should not be ignored.

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.