The Web Accessibility Toolbar

Testing a website for accessibility can be a time-consuming and laborious process. The free Web Accessibility Toolbar can do most of the hard work for you though and is an indispensable tool for anyone interested in accessibility.

The toolbar is not an automated testing tool so does require manual work from you. It’s therefore able to avoid the many problems with automated accessibility testing tools. It doesn’t require any technical knowledge so even the biggest technophobe can check their website for accessibility!

Installing the Web Accessibility Toolbar

You can download the toolbar for free from, and after you install it, it will sit in the toolbar area of Internet Explorer. The total file size is just 550kb so the download won’t take too long. The toolbar only works on Internet Explorer on Windows, so if Internet Explorer isn’t your first-choice browser you’ll have to switch browsers when using it. (Alternatively, you can download the Web Developer Toolbar for Firefox which offers similar, but not identical, functionality.)

Using the Web Accessibility Toolbar

Now you’ve downloaded and installed the Web Accessibility Toolbar you can start using it! There are 12 buttons in total on the toolbar, each with a down arrow to the right of the text. If you click on the down arrow for any of these buttons then a dropdown menu appears with all the available options (alternatively you can use the keyboard shortcut keys assigned to each button).

Checking for document structure

One of the most useful buttons is the seventh, Structure. It’s essential that the structure within the HTML code accurately reflects the visual structure of the page. This is so that visually impaired web users using screen readers can gain an understanding of the page structure.Some of the most useful items in the Structure dropdown menu include:

  • Headings – Shows which items on the page are labelled as headings within the HTML code. The main page heading should be an <h1> (heading level one) and other headings should be <h2>s (heading level twos). Any sub-heading of an <h2> should be an <h3>, then <h4> and so on. Heading numbers should always be sequential – an <h4> shouldn’t follow an <h2> if there’s no <h3>. Headings are especially useful for screen reader users as they can call up a list of headings and jump straight to the section in which they’re most interested.
  • List items – Shows which items on the page are labelled as lists within the HTML code, by displaying

  • next to any list item. Lists can be horizontal or vertical, and all navigation should be marked up as a list item. Lists are very useful for screen reader users as the screen reader will announce the number of items in the list before reading the list items.
  • Fieldset / Label – Shows which items on the page are called labels within the title=”Hypertext Markup Language”>HTML code. After selecting Fieldset / Label, the text next to each form should say the word label next to it – if not, that text hasn’t been called a label in the code.
  • Table border – Places a border around each table. Nested tables within tables can cause huge difficulties for screen reader users. After selecting this item, the first table will have a black border the second blue, then green, yellow, orange, red and purple. If you see any of these last four colours it’s time to take a good look at the code behind the page.
  • Table cell order – Shows the order in which the page is read out to screen reader users (if a table is used for layout). Hopefully, the order should be reasonably logical.

Checking the site works under all circumstances

It’s important that your website doesn’t depend on any one type of technology, or users whose browsers don’t support that technology may be unable to access your site. You can check to see if your site depends on any one technology:

  • Images > Toggle Image/Alt – One of the most useful functions on the toolbar, replaces images with their ALT, or alternative, text. Alt text is read out to screen reader users or displayed to web users with images turned off, instead of the image itself (e.g. users on dial-up modems may turn off images to speed up the download time of pages). It’s essential that the ALT text provides an adequate description of the image.
  • IE Options > Toggle JavaScript – Turns off JavaScript. After selecting this option, work through the pages on your website – is the whole site still accessible to you?
  • IE Options > Toggle ActiveX – Turns off ActiveX controls. Again, after selecting this, work through your website to see if the whole site is still accessible to you.
  • IE Options > Toggle CSS – Turns off CSS. Are pages still legible? If CSS is used for layout then you will see the page content in the order that it’s read out to screen reader users. (If you toggle image/alt after this, you’ll have a complete visual representation of what screen reader users will hear.)

Other useful accessibility checks

There’s a huge amount of functionality available on the Web Accessibility Toolbar, but some of the other most important accessibility checks you can carry out with the toolbar include:

  • Validate > W3C HTML validator > Validate HTML – Checks whether the page is based on valid HTML or not. If the page is not valid, you’ll be told why.
  • CSS > Deprecated HTML > Deprecated elements & attributes – Checks for code that shouldn’t be used and is being phased out. A new window will open containing the HTML code – anything in red is deprecated and should be removed.
  • Doc info > Page speed report – Examines all the files used to display the web page and prepares a report on the average download speed for that page for different Internet connections.
  • Doc info > List links – Displays a list of all on-page links. Screen reader users can call up a list of links and jump straight to the page in which they’re most interested, so it’s essential that link text makes sense out of context. Link text such as ?click here? should be avoided at all costs!
  • Colour > Greyscale – Shows the page in greyscale. Great for checking colour contrast.

Other functionality

The Web Accessibility Toolbar offers some other interesting functionality:
  • Resize – See how your website looks for users on 640 x 480px, 800 x 600px and 1024 x 768px screen resolutions.
  • Tools > Simulations – Put yourself in the shoes of a special needs users with these fascinating simulations.


The Web Accessibility Toolbar offers an enormous amount of functionality. Download it for free from href=””> and start using it. Without any technical expertise, you can perform a mini-accessibility audit on any site in just a couple of minutes.

This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He’s extremely good at usability training and writing for the web training.

Speed Up with CSS and Usability

Why is download speed so important?

Do you like to wait for pages to download? Neither do your site users. Read on…

1. Lay out your pages with CSS, not tables

CSS downloads faster than tables because:

  • Browsers read through tables twice before displaying their contents, once to work out their structure and once to determine their content
  • Tables appear on the screen all in one go – no part of the table will appear until the entire table is downloaded and rendered
  • Tables encourage the use of spacer images to aid with positioning
  • CSS generally requires less code than cumbersome tables
  • All code to do with the layout can be placed in an external CSS document, which will be called up just once and then cached (stored) on the user’s computer; table layout, stored in each HTML document, must be loaded up each time a new page downloads
  • With CSS you can control the order items download on to the screen – make the content appear before slow-loading images and your site users will definitely appreciate it

2. Don’t use images to display text

It’s our old friend CSS to the rescue again. There’s no need to use images to display text as so much can be accomplished through CSS. For example:

check out the example here

Put your mouse over the above link, created entirely through CSS. This is just a very simple example – the tabs at the top of this page are made with CSS too. Have a look at how else you can use CSS to make navigation buttons.

To learn more about CSS and the amazing things it can do for your website, please visit our CSS resources area.

3. Call up decorative images through CSS

It’s possible to present images as part of the background, called up through CSS. If you’ve got an image that’s 200px by 100px you can use the following HTML code:

<div class=”pretty-image”></div>

And this CSS:

.pretty-image { background: url(filename.gif); width: 200px; height: 100px }

This may at first seem a little pointless but this technique could really increase the download time of your pages. Browsers basically download background images after everything else. By using this technique, your text will load instantaneously and your site users can freely roam about the page while your 50kb fancy image downloads.

This technique disables the ALT attribute though so if you really want to have one then replace the above HTML code with this:

<image src=”spacer.gif” class=”pretty-image” alt=”description” />

Spacer.gif is a 1px x 1px transparent image. Now you have a 50 byte transparent image and the main content loading first, and your great big decorative image, complete with ALT text, loading second. Perfect.

Please note that this technique is only good for decorative images and not informational ones. Any user who has CSS disabled will not be able to see your CSS-embedded images (or their alternative text).

4. Use contextual selectors

This is inefficient:

<p class=”text”>This is a sentence</p>

<p class=”text”>This is another sentence</p>

<p class=”text”>This is yet another sentence</p>

<p class=”text”>This is one more sentence</p>.text { color: #03c; font-size: 2em }
Instead of assigning a value to each individual paragraph, we can nest them within a <div> tag and assign a value to this tag:

<div class=”text”>

<p>This is a sentence</p>

<p>This is another sentence</p>

<p>This is yet another sentence</p>

<p>This is one more sentence</p>

</div>.text p { color: #03c; font-size:2em }
This second CSS example basically says that every paragraph within class=”text” should be assigned a colour value of #03c and a font size of 2em.

At first glance this doesn’t look too important, but if you can apply this properly throughout your document you can easily knock off 20% of the file size.

You may have noticed the colour values are shorter than normal. #03c is a shortened version of #0033cc – you can assign this abbreviated value to any colour value like this.

5. Use shorthand CSS properties



font: 1em/1.5em bold italic serif

…instead of

font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif



border: 1px black solid

…instead of

border-width: 1px; border-color: black; border-style: solid



background: #fff url(image.gif) no-repeat top left

…instead of

background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left;

Margin, padding, border


margin: 2px 1px 3px 4px (top, right, bottom, left)
…instead of

margin-top: 2px; margin-right: 1px; margin-bottom: 3px; margin-right: 4px


margin: 5em 1em 3em (top, left and right, bottom)
…instead of

margin-top: 5em; margin-bottom: 1em; margin-right: 1em; margin-right: 4em


margin: 5% 1% (top and bottom, left and right)
…instead of

margin-top: 5%; margin-bottom: 5%; margin-right: 1%; margin-right: 1%

These rules can be applied to margin, border and padding.

6. Minimise white space, line returns and comment tags

Every single letter or space in your HTML code takes up one byte. It doesn’t sound like much but it all adds up. We’ve found that by working through your page source and eliminating unnecessary white space and comments, you can shave off up to, or even over (if your HTML is really inefficient) 10% of its file size.

7. Use relative call-ups

Try to avoid absolute call ups as they take up more space. An example of an absolute call up is: <a href=””>. Much better would be <a href=”filename.htm”>. But what if some files are in different folders to other ones? Use these shorthand properties:

  • <a href=”/”> – Calls up
  • <a href=”/filename.html”> – Calls up
  • <a href=”/directory/filename.html”> – Calls up
  • <a href=”./”> – Calls up index.html within that directory
  • <a href=”../”> – Calls up index.html one directory above
  • <a href=”../filename.html”> – Calls up filename.html one directory above
  • <a href=”../../”> – Calls up index.html two directories above

8. Remove unnecessary META tags and META content

Most META tags are pretty much unnecessary and don’t achieve very much. If you’re interested, you can see a list of META tags that are available. The most important tags for search engine optimisation are the keywords and description tags, although due to mass abuse they’ve lost a lot of importance in recent times. When using these META tags try to keep the content for each under 200 characters – anything more increases the size of your pages. Lengthy META tags are not good for search engines anyway because they dilute your keywords.

9. Put CSS and JavaScript into external documents

To place CSS in an external document use:

<link type=”text/css” rel=”stylesheet” href=”filename.css” />

To place JavaScript in an external document use:

<script language=”JavaScript” src=”filename.js” type=”text/javascript”></script>

Any external file is called up just once and then cached (stored) on the user’s computer. Instead of repeating JavaScript or CSS over and over again in HTML files, just write it out once in an external document.

And don’t forget, there’s no limit to the number of these external documents that you can use! For example, instead of making one huge CSS document, have one main one and some others that are specific to certain areas of your site.

10. Use / at the end of directory links

Don’t do this: <a href=””>
Do this instead: <a href=”“>

Why? If there’s no slash at the end of the URL the server doesn’t know if the link is pointing to a file or to a directory. By including the slash the server instantly knows that the URL is pointing to a directory and doesn’t need to spend any time trying to work it out.

This article was written by Trenton Moss. He’s crazy about web usability and accessibility – so crazy that he went and started his own web usability and accessibility consultancy to help make the Internet a better place for everyone.

Mobile and Handheld Usability Testing

Mobile phone and PDA usability testing is critical to your business. In fact, mobile and handheld usability testing could be even more important than computer-based usability testing. The main reasons for this are:

  • The number of people accessing the Internet from mobile and handheld devices is increasing at a massive rate – in 2008 alone there’ll be an estimated 58 million PDAs sold worldwide (source: eTForecast).
  • People generally have a lot less experience of using their mobile to go online than they do of using their computer. This means that computer-based users can be assumed to have a higher level of existing expertise than mobile and handheld users
  • The platform through which users access your site is far less predictable when using mobile phones. Computer-based site visitors generally only differ from one another in their browser and operating system (i.e. most people will use a screen, mouse and keyboard), whereas the different types of mobile phones and PDAs differ can drastically.

Which mobile phones and PDAs do you need to consider?

Mobile phones and PDAs can differ from one another dramatically, and this will radically change how people experience and use websites. Some of the ways in which handheld devices can differ include:

  • Screen size (small vs. large)
  • Screen layout (portrait vs. landscape)
  • Input device (stylus, numeric keypad, dial-wheel, QWERTY keypad)

Because the mobile phone / PDA that someone is using will have such a profound effect on their experience of your site, you should try to test with as many mobile phones and PDAs as possible.

Of course, testing with every mobile phone and PDA is impossible. Here are some ideas to help narrow down the number of devices you’ll need to test with:

  • Your mobile site visitors may belong to a specific audience. Certain audiences tend to prefer particular types of phones (e.g. phones with big screens that are designed to support online access vs. small-screen models that aren’t).
  • There are ‘phone families’ that offer a very similar user experience (and will not need to be tested individually).
  • You may only want to test with the most popular mobile phones in Europe or the most popular models that are being used to access your site (you can check your site statistics to find out this information).

Who do you want to test with?

The people you want to conduct your mobile phone usability testing sessions with will, of course, depend on your particular business and its audience. Some things to bear in mind include:

  • How much experience they should have of using their mobile phones to access services. This is particularly important as the market for accessing online services through mobile phones is growing and the percent of ‘complete novices’ (i.e. people using the technology for the first time) will be far higher than for computer users of your website.
  • Which mobile phone or PDA they have. We would usually recommend that people use their own mobile phone in a session, so the test can focus on your website and not on the way the handheld device works.

Where should mobile usability testing sessions be conducted?

Mobile phones and PDAs are used in the real world so usability testing of handheld devices should therefore not only take place in a usability laboratory.

Where, when and how a mobile phone is used is critical to a person’s experience of the site they are accessing. Any of the following circumstances could influence this experience and therefore considerations of the site’s usability:

  • Lighting
  • Background noise
  • Distractions
  • Concurrent tasks (i.e. anything the person is doing at the same time)
  • Physical movement

As such, we’d recommend, if possible, that any mobile phone and PDA usability testing is conducted both in a laboratory and also in the ‘outside world’.

How you plan and run mobile phone usability sessions will be based on your business and its audience, but the most popular methods of mobile usability testing include:

  • Lab-based (using a camera to record the session)
  • Diary-studies (asking people to keep a diary of how they have used their mobile phone and any problems they encounter)
  • Paper prototypes (running usability testing on a paper-based version of the site, using mobile phone screen-sized pieces of paper)

This article was written by Tim Fidgeon, a consultant at a leading usability and accessibility consultancy, Webcredible. He’s extremely good at running focus groups and likes to conduct a website review as often as he can.

Innovative User Interface Design

Increasing numbers of websites are developing new types of user interface design, taking advantage of users’ increasing levels of Internet-sophistication and faster connections. These new interfaces often allow users to view and manipulate large quantities of data.

This article will have a look at some of the more interesting user interface design ideas we’ve come across recently:

  • Slider-based filtering
  • Fisheye menus
  • Treemaps
  • Drag-and-drop

The point of this article is not to promote any of these user interface designs, but rather to offer them for the purposes of interest and inspiration. Although we have yet to run any large-scale usability testing on them, we consider each to have the potential (if used in the appropriate circumstances) to offer interesting possibilities for supporting users in the performance of their tasks.

Slider-based filtering

The user interface design of Amazon’s Diamond Search uses click-and-drag sliders to allow users to broaden and narrow a wide range of filtering criteria. The page then automatically updates to show how many results conform to the users’ selected criteria.

This can be used to create an intuitive and informative interface, making it easy for users to search through a large data set:

Amazon's diamond search showing 13593 diamonds available for all shapes, prices, carats, cuts, colours and clarities. For each of these criteria sliders can be used to set a range, thereby filtering the search results.

The number of results is displayed on the right hand side of the page. This means that users only need to submit their search when they’re happy that the number of search results is sufficiently small.

Users can narrow their search criteria by using the sliders, thereby reducing the number of results that will be displayed:

Amazon's diamond search showing 278 diamonds available for the price range $18,000-$87,000

When users are happy with the search criteria, they simply select the ‘See results’ button. The great thing about this design is that users will know if there’ll be no search results, without having to actually run the search.

Fisheye menus

Fisheye menus can be very useful in helping users to navigate and select items from a long, ordered list. These menus dynamically change the size of menu items to provide a magnified-focus area around the cursor. This makes it possible to present the entire menu on a single screen without requiring buttons, scrollbars, or hierarchies.

Fisheye menu showing an alphabetical list of the countries of the world. The magnified focus is on the United Kingdom.

Fisheye menus could potentially be a great way of having users easily navigate through a long lists.


Treemaps display rows of data as groups of squares that can be arranged, sized and coloured to graphically reveal underlying data patterns. This user interface design can be used to present complicated data relationships (such as hierarchical relationships).

An example can be found on the Smartmoney website, where a tool allows visitors to view information on hundreds of stocks at a glance. In the example below, stocks are grouped according to sector and represented in differently-sized rectangles according to their market capitalisation. Colours are used to indicate significant positive (green) and negative (red) price movements.

Further details on a company are available by mousing over their rectangle (e.g. General Electric in the example below).

Treemap representing different sectors for stocks


This type of user interface designs makes use of users’ familiarity with moving elements around (users may have experience of doing this within Microsoft Windows applications, for example). Panic Room’s online store allows users to either click a ‘button/plus symbol’ to add an item to their cart or drag-and-drop the item into it.

To do this is relatively simple. You simply click on the product you want to drag into the basket:
Screenshot from Panicroom, showing three T-shirts and a large shpping cart area at the bottom of the screen. The shopping cart displays the instructions, 'drag any item here to add to your cart'.

Whilst holding down the mouse button, drag the item across the screen and into the basket:
Screenshot from Panicroom, showing a T-shirt being dragged across the screen

Screenshot from Panicroom, showing a T-shirt being dragged into the cart area

Finally, release the mouse button to drop the item into the basket:
Screenshot from Panicroom, showing the T-shirt now successfully placed into the cart area


Innovative user interface design is key to developing new and improved user interaction online. The problem with designing a totally unique user interface however is that users may be unable to quickly and easily learn how to interact with it.

If you do develop a totally innovative user interface design, do be sure to carry out usability testing before launching. This way you can check if users can grasp what they need to do and what you need to do to make the interface more intuitive.

Do of course make an effort to visit the site we’ve mentioned above, as interfaces are made to be interacted with!

This article was written by Tim Fidgeon, a usability consultant at usability and accessibility consultancy, Webcredible. He knows an awful lot about user interface design and intranet usability.

Increased Usability with Accessibility

The secret benefit of accessibility part 1: Increased usability

Web accessibility has so many benefits that I really do wonder why such a large number of websites have such diabolically bad accessibility. One of the main benefits is increased usability, which according to usability guru, Jakob Nielson, can increase the sales/conversion rate of a website by 100% and traffic by 150%.

At which point you must surely be asking, ?So if I make my website accessible its usability will increase and I’ll make more money out of it??. Well, not quite. An accessible website is not automatically more usable but there are many areas of overlap:

1. Descriptive link text

Visually impaired web users can scan web pages by tabbing from link to link and listening to the content of the link text. As such, the link text in an accessible website must always be descriptive of its destination.

Equally, regularly sighted web users don’t read web pages word-for-word, but scan them looking for the information they’re after.

Link text such as ‘Click here’ has poor accessibility and usability as both regularly sighted and visually impaired web users scanning the paragraph will take no meaning from this link text by itself. Link text that effectively describes its destination is far easier to scan and the destination of the link can be understood without having to read its surrounding words.

2. Prompt text assigned to form input

In order to make forms accessible we need to assign the prompt text to its form item. This is especially useful when done with checkboxes and radioboxes, as the text becomes clickable too. Checkboxes and radioboxes are small and pernickety for even the steadiest of hands so by increasing the clickable region everyone benefits.

3. Large chunks of information divided up

There are a number of techniques that can be taken to increase the usability for visually impaired users, who have to listen to the information on each page and try to remember it. By structuring information into small, manageable groups, enhanced usability for these users can be achieved.

Methods to accomplish this can include using sub-headings to break up body content, grouping form items with the fieldset command and using lists. Breaking down groups of information is obviously highly useful for sighted web users too, as it greatly enhances our ability to scan the screen quickly.

4. Site map provided

Site maps can be a useful accessibility tool for visually impaired users as they provide a straightforward list of links to the main pages on the site, without any of the fluff in between. Site maps are of course useful for everyone as they provide us with a way of finding pages quickly and help us visualise the structure of the website.

5. Simple and easy language

From an accessibility point of view, this one’s important for people with reading and/or cognitive disabilities and site visitors who’s first language isn’t the one you’re writing in. From a usability point of view, well, it helps everyone. Reading from computer screens is tiring for the eyes and about 25% slower than reading from paper. As such, the easier the style of writing the easier it is for site visitors to absorb your words of wisdom. Wherever possible shorten your sentences. Use, ‘apply’ instead of ‘make an application’ or ‘use’ instead of ‘make use of’.

6. Consistent navigation

Having consistent navigation across pages is also important for maximising accessibility to people with reading and/or cognitive disabilities, but again everyone benefits. Each time you visit a new website it takes you a few seconds to adjust to the unique layout and user interface of that page. Well imagine if you had to do that every time you follow a link to a new page!

By having a consistent interface across a website we can instantly locate the navigation and page content without having to look around for it. In reality, most sites do have consistent navigation across most pages. The main culprit for falling foul of this guideline is the homepage, which some websites structure quite differently to the rest of the site. By having a consistent interface across the entire website we can instantly locate the page content without having to look around for it.

7. No unannounced pop-ups

For web users utilising screen readers pop-ups can be a real accessibility nuisance. Screen readers read out the content of whichever window is on top of the others. Pop-ups display over the top of the main website so will always be read out first. For visually impaired users this can be frustrating as they may not realise that what they’re hearing isn’t the ?real? website.

So, pop-ups are bad for accessibility. As for usability, well I’m sure you hate pop-ups as much as I do. Many toolbars, such as the Google toolbar, now come packaged with a pop-up blocker so allow you to surf the web without the irritation of new windows popping up.

8. CSS used for layout

CSS-based sites are generally have a greater ratio of content to HTML code so are more accessible to screen readers and search engines. Websites using CSS for layout can also be made accessible to in-car browsers, WebTV and PDAs. Don’t underestimate the importance of this – in 2008 alone there’ll be an estimated 58 million PDAs sold worldwide (source: eTForecast).

As well as improved accessibility, CSS-based websites have one large usability benefit: increased download speed. Broadband isn’t as widespread as you may think. In the UK for example, just one in four web users are hooked up to broadband (source: Office of National Statistics) so improving the download speed of your web pages could provide a great usability advantage over your competitors.

9. Transcripts available for audio

One group of web users with special accessibility needs that doesn’t get much press is hearing impaired users, who need written equivalents for audio content. Providing transcripts is in fact highly beneficial to all users. Many of your site visitors probably can’t be bothered to wait for your 3Mb audio file to download and start playing. They may prefer just a quick outline of what’s contained in the audio content.

By providing a transcript, broken up by sub-headings and with the key terms highlighted, non-disabled site visitors can skim through it and get a general idea of the content. They can then make a more informed decision about if they want to wait for the 3Mb audio file to download.

10. Screen flickering and movement avoided

Some epileptic web users must be careful to avoid screen flicker of between 2 and 55 Hz. Web users with reading and/or cognitive disabilities and those using screen magnifiers will struggle to keep up with scrolling text (if you do have scrolling text be sure to provide a mechanism to stop it).

In addition to being a bad idea for accessibility, neither flickering nor scrolling text are good for usability either. The former can be distracting when you’re trying to read something and you see flashing out the corner of your eye; the latter isn’t good either as you have to wait for the content to slowly appear. When you see scrolling text do you usually bother to stop what you’re doing so you can read it as it gradually materialises? Or do you ignore it?

The other disadvantage of scrolling or changing text is that you might see something you want to click on, but before you know it it’s gone. And now you have to wait 30 seconds for it to re-appear again!


With all this overlap between web usability and web accessibility there’s no excuses for not implementing basic accessibility on to your website. Outside of the ethical argument there are many reasons to make your website accessible, one of the main one being that its usability will be improved. No one can argue with that.

This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He’s extremely good at web accessibility training and knows an awful lot about the Disability Discrimination Act.

Improving ecommerce product findability

On both ecommerce and shopping comparison sites, users can find products in two different ways: searching and browsing. Searching obviously means using the site search whilst browsing involves drilling down through the categories provided by the website.

Regardless of which method is used, users will be presented with a product listing from which to find the product(s) they want. This product listing can contain tens, hundreds or even thousands of products, so finding the right product from this list can be a difficult or even impossible task on any ecommerce site.

Getting sorting and filtering right improves findability and allows users to find the product they want in less time, from this product listing. If users can’t find the exact product they require in the minimal time, there’s a good chance they’ll go to an ecommerce site where they can.

What is sorting and filtering?

Sorting is a method of changing the order of any product listing, where by users can choose which criteria they want the products to be listed by. So, price-conscious web users may choose to list the products in order of price, from cheapest to most expensive.

Filtering is a way of reducing the number of products in a product listing. Users choose which criteria are important to them and view only relevant products. For example, price-conscious users may choose to view only products for under £10 (thereby filtering out all products over £10).

Sort by options

Bringing products with certain criteria to the top of the page can be particularly useful for users who aren’t exactly sure what they want. This is especially true if there are a large number of products in the product listing. (Product listings, or a list of products, can be found either by running a search or browsing through the available categories.)

The Waterstones website, for example, provides extensive options to sort its search results. As well as basic sort by options (e.g. ‘Alphabetical: A-Z’) the site also tailors its sorting to the fact that it’s an online ecommerce bookshop. Users may find it helpful to sort by ‘Bestselling’, ‘Publication date’ or ‘Average customer review’. The latter is an increasingly popular way of choosing products on the web due to its independent nature.

The language of the options is also plain and simple. For example, ‘Price: Low to high’ is used instead of ‘Price ascending’, the former being slightly less ambiguous.

Presenting sort by options

Utilising a dropdown menu for sorting uses up minimal screen space and is generally familiar to users of ecommerce sites. It does however ‘hide’ some of the options as they’re not all visible at first glance.

You could instead offer sort by options as radio buttons. The main advantage of using radio buttons is that all sort by options are visible to users at one glance. Also, there should be less need to abbreviate terms as options aren’t confined to the width of the dropdown field.

As a rough guide, if you offer users four or more sort by options, use a dropdown box. Three or less sort by options then use radio buttons as the options won’t be ‘hidden’ in a dropdown box. Do be sure to restrict radio buttons to one row for easy scanning.

Filtering within product listings

Due to historically poor search results within websites, users are sometimes wary of site searches and will often browse through ecommerce sites to find a product. (They’ll then use the search function only if they can’t find what they’re looking for). For users that are browsing in order to find a product, filtering within a category is crucial to enhance product findability.

Filters let users reduce the number of items within any product listing, by filtering out products that don’t conform to specific criteria. This is often more useful for users who have a certain level of knowledge about the product(s) they require.

Dell offers a number of filtering options for their computers with a wide range of specifications. The product filtering concentrates on the technical specifics and usage but also has the option to ‘View all…’, thereby catering for all users. Filter options must be specific to each product listing and shouldn’t be generically applied across the site.

Using filtering to influence a purchase

Filtering can also be useful when there are many different parameters to a product and can be used as a tool to persuade and influence a purchase. H.Samuel, for example, uses an extensive filtering system for their range of watches. The product listing uses commonly-used filters such as ‘Price’, which many users will be familiar with. It also uses other, more clever filters, such as ‘Occasion: Anniversary, Christmas, Love, Good luck…’ and ‘Who is it for: For boys, For father, For groom, For bride…’.

These additional filters ‘humanise’ the online shopping experience matching users’ real life expectations and requirements. They essentially create an online ‘shop assistant’, matching users’ needs with specific products.


Do be sure to employ sorting and filtering across all product listings on any ecommerce or shopping comparison website. The options you provide for both should speak users’ language and be specific to the actual product listing (and not generically applied across the site).

Sorting and filtering are essential for helping users to find the products they’re looking for. Users’ increasing levels of sophistication when shopping online means they’re likely to ‘flick’ between similar sites in a matter of seconds. Providing effective sorting and filtering for product listings can play a major part in helping users find (and ultimately buy) the product(s) they’re looking for.

This article was written by Jonathan Webb. Jonathan’s crazy about usability – so crazy that he works for Webcredible, an industry leading web usability and accessibility consultancy. He’s very good at conducting focus groups and likes to work on intranet usability projects.