Running a Focus Group

What are focus groups?

A focus group involves encouraging an invited group of participants to share their thoughts, feelings, attitudes and ideas on certain subject. Organising focus groups within an organisation can also be very useful in getting buy-in to a project from within that company.

When and why to use focus groups

Focus groups are most often used as an input to design.

Advantages of focus groups include:

  • Quick, cheap and relatively easy to assemble
  • Good for getting rich data in participants’ own words and developing deeper insights
  • People are able to build on one another’s responses and come up with ideas they might not have thought of in a 1-on-1 interview
  • Good for obtaining data from children and/or people with low levels of literacy
  • Provides an opportunity to involve people in data analysis (e.g. “Out of the issues we have talked about, which ones are most important to you?”)
  • Participants can act as checks and balances on one another – identifying factual errors or extreme views

Limitations of focus groups include:

  • The responses of each participant are not independent
  • A few dominant focus group members can skew the session
  • Focus groups require a skilled and experienced moderator
  • The data which results from a focus group requires skill and experience to analyse

How to plan and prepare for focus groups

Invite around 6 to 8 people to participate for a session to last for about an hour. Then, prepare an agenda including a list of the top-level issues to be tackled (if appropriate).

Prepare an introduction script explaining the purpose of the day and how the day will be run. This can include issues of consent and fire regulations (if relevant). Be sure to always use a quiet room with few distractions and arrange people in a circle (possibly around a table).

Running focus groups

If appropriate, ask the participants to introduce themselves and/or wear name tags. Most importantly, all questions you ask should be open and neutral. It’s also important for the moderator to be aware of participants’ energy and concentration levels and provide short breaks if necessary. The moderator should encourage free-flowing discussion around the relevant issue(s).

Other tips for running focus groups include:

  • Start on an issue people have strong feelings about and are familiar with
  • Phrase issues in terms people will be familiar with
  • Let participants know their contributions are valuable (both through what you say and also your body language)

It’s also important that the moderator realises that:

  • It may be necessary for them to step in and keep the session on-track
  • Disagreements and debates are useful when they lead to new and interesting ideas, but have to be managed carefully
  • Issues of power and privacy need to be managed sensitively

Focus groups should end with the moderator winding-up the session by stressing all that has achieved and casting it in a positive light.

Managing risks

A number of potential problems could arise during focus groups, which will all need addressing:

  • If one participant tries to dominate the session, the moderator should invite each person to speak in turn
  • Avoid interviewing friends in the same group as they can form cliques – if cliques do form, suggest taking a break and changing seating positions upon returning from the break
  • Avoid personal confrontation – allow the group to police itself (e.g. “do others in the group agree?”)
  • Respect someone’s right to be quiet, but do give them a chance to share their ideas 1-to-1 (e.g. during a break)
  • Use differences of opinion as a topic of discussion – the moderator should avoid taking sides

Useful tips to encourage discussion

To facilitate useful, free-flowing discussion during the focus group, follow some of these tips:

  • Ask participants to think about an issue for a few minutes and write down their responses
  • Ask each participant to read, and elaborate on, one of their responses
  • Note the responses on a flipchart/whiteboard
  • Once everyone has given a response, participants will be asked for a second or third response, until all of their answers have been noted
  • These responses can then be discussed

How to report

The minutes, or a summary document, should be produced for each session. A report should be written up, containing relevant profile information about the people who attended the session.

This article was written by Tim Fidgeon, Head of Usability at Webcredible. He’s crazy about usability and runs Webcredible’s writing for the web training and is passionate about user centered design.

Read More
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.

Read More
Making Money with CSS

Although CSS layouts have been around for years, they haven’t become so commonplace until recently. This was basically due to limited browser support (especially from Netscape 4) – nowadays though, CSS 2.0 (which introduced positioning) is compatible with over 99% of browsers out there (check out the browser stats over at The Counter).

So, why should you convert your website from its current table-based layout to a CSS layout? It’ll make you money. Simple really. And here’s four reasons to explain why:

Reduced bandwidth costs

Web pages using CSS for layout tend to have much smaller file sizes than those using tabular layouts. It’s not unusual to see reductions of 50% or more in file size when switching from CSS to tables. Smaller file sizes obviously mean reduced bandwidth costs, which for high traffic sites can mean enormous savings.

The main reason for this dramatic decrease in file size is that presentation information is placed in the external CSS document, called up once when the homepage loads up and then cached (stored) on to the user’s computer. Table layouts on the other hand, place all presentation information inside each HTML, which is then called up and downloaded for every page on the site.

Additionally, CSS can be used to replace JavaScript image rollovers, again allowing a large reduction in overall page size. See the article, CSS navigation menu for more on this.

A higher search engine ranking

A CSS-based website will appear higher in the search engine rankings for three reasons:

  • The code is cleaner and therefore more accessible to search engines
  • Important content can be placed at the top of the HTML document
  • There is a greater density of content compared to coding

A higher search engine ranking means more site visitors, which, provided your website is usable, should lead to an increase in enquiries or sales.

Faster download speed

A faster download speed will make you money? Well, yes. Slow download speed is often cited as one of the biggest usability complaints for websites. A faster download speed therefore leads to increased usability, and a web usability redesign can increase the sales/conversion rate by 100% (source: Jakob Nielson).

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

Increase in reach

The more people you can reach, the more visitors you’ll get to your site and the more enquiries or sales you should get. A CSS-based website is compatible with PDAs, mobile phones, in-car browsers and WebTV. Don’t underestimate the importance of this: In 2008 alone an estimated 58 million PDAs will be sold (source: eTForecast) and one third of the world’s population will own a wireless device (source: ClickZ).

You can make an additional CSS document specifically for handheld devices, which will be called up in place of the regular CSS document, thereby ensuring your website is accessible to this lucrative market. This isn’t possible with a tabular layout.

Conclusion: Switch to CSS!

Switching your website from a table layout to a CSS layout can be a long, arduous process, especially for large websites. Given the money making possibilities though, it could very well prove to be well worth it.

This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He’s extremely good at usability testing and knows an awful lot about accessible CSS web design.

Read More
Internet Explorer CSS Issues

Trying to get CSS-based websites to look the same across all browsers can often be difficult. Many of the problems however lie with Internet Explorer implementing CSS commands differently to other, more standards compliant browsers. All is not lost, however, as many of the differences you see across browsers are caused by the same Internet Explorer CSS issues…

1. Page elements are narrower in Internet Explorer

Perhaps the most famous IE and CSS problem is Internet Explorer’s misinterpretation of the CSS box model, which can cause page elements to be narrower in IE. Every HTML element is essentially a box, the width of which is the total of its margin, border, padding and content area. Imagine the following CSS rule:


 div {
margin: 5em;

padding: 4em;

border: 1em solid green;

width: 30em

}

This means that each div is 50em wide in total. This amount is made up of a 30em wide content area, and a 4em padding, 1em border and 5em (invisible) margin on both the left and right sides.

In IE however, the border and padding are included in the width of the content, as opposed to added on. In IE therefore, the width of the content is only 20em (30em less 5em padding and border on either side), and the total width of the div is just 40em.

This CSS box model problem occurs in IE5.x, and can occur in IE6, depending on how you declare the ISO value in the HTML code. There are two ways of doing this:

  • <?xml version="1.0" encoding="iso-8859-1"?>
  • <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

The first command is placed on the very first line of the HTML document and the second can be placed anywhere within the <head>. In order for XHTML pages to validate it’s compulsory to use one of these commands. The W3C recommends using the first command as the second will be phased out in the future.

By using the first command however, Internet Explorer 6 will render the CSS box model incorrectly, just like in version 5 browsers. To fix the box model problem, you’ll need to insert a CSS hack to send different width values to different browsers. The CSS hack you use will depend on which ISO value you use, and therefore which versions of IE are rendering the box model incorrectly.

To fix up only IE5.x, use the following CSS commands:


 div {
margin: 5em;

padding: 4em;

border: 1em solid green;

width/**/:/**/ 40em;

 width: 30em

}

To fix up all versions of IE, use these CSS commands:


 div {
margin: 5em;

padding: 4em;

border: 1em solid green;

width: 40em

 }

html>body div {

width: 30em

}

(See the article, CSS hacks & browser detection for more on these hacks.)

2. Text spilling out of its container in non-IE browsers

Internet Explorer, unlike other browsers, will expand borders and background colours so text doesn’t spill out of its containing element.

Let’s say a div has been assigned class="box" and has the following CSS commands assigned to it:


 .box {
width: 40px;

}

Non-IE browsers will adhere to the width: 40px CSS command, so the box won't expand to fit any text that's longer than 40px. IE however interprets width as min-width, and therefore will expand the div to fit the text (the same applies with height and min-height).

To ensure the text doesn’t spill out of the box in all browsers, you’ll need to use the following CSS rule, in addition to the first one:


 html>body .box
{

width: auto;

min-width: 40px

}

IE will ignore this CSS command, as the command has html>body at the front of it (see the article, CSS hacks & browser detection for more on this). As such, this CSS command is only for non-IE browsers. The first CSS rule, width: auto, cancels out the original width rule. The second command, min-width: 40px then assigns a minimum width to the box, so the box will always expand to fit the text.

3. Disappearing background images

IE has a very freaky bug where it likes to make background images (and sometimes even text – particularly if there are floated elements around) disappear. This often happens when you scroll up and down on a web page and you can usually make the background re-appear by refreshing the page.

Obviously you won’t want your site visitors to have to refresh a page to see a background image in full! A freaky solution to this freaky problem is to insert the CSS command, position: relative into the CSS rule containing the background image:


 .foo {

background: url(filename.jpg);position: relative

 }

Occasionally this won't work, so another solution is to assign a width or a height to the element with the background image. You may not want to assign a height or width, so a solution is to assign a height of 1% for Internet Explorer. Because IE interprets height as min-height (see point 2 above) this CSS rule won't affect the appearance:


 .foo {
background: url(filename.jpg);

height: 1%

 }

html>body .foo {

height: auto

 }

The height: 1% CSS command is cancelled out by the height: auto CSS command. Internet Explorer doesn't understand html>body, so by inserting this in front of the second CSS rule this whole CSS rule is ignored by IE.

4. Widths only working on IE

Every HTML element is either a block or an inline element. Examples of block elements include <div>, <p>, <h1>, <form> and <li>. Example of inline elements include <span>, <a>, <label>, <strong> and <em>.

One of the characteristics of inline elements is that you can’t change the width of an inline element. The following CSS rule shouldn’t, in theory, work:


 span {
width: 100px

}

This CSS rule won't work, except in Internet Explorer where each span will now have a width of 100px. In every other browser however, the width of the span will simply be the width of the number of characters contained in the element. The solution? Make the span a block level element:


 span {
width: 100px;

display: block

 }

(Turning the span into a block element will make the width command work in every browser, but it will also make the span begin on a new line. To combat this, you could assign float: left to the span.)

5. Unstyled version of web page appearing in IE

When your website loads up in Internet Explorer, does an unstyled version of the page appear for a second or two, before the styled version kicks in this? If so, your website may be suffering from what’s known as the Flash Of Unstyled Content (or FOUC).

If you’re using the @import directive (e.g. <style type="text/css">@import "styles.css";</style>) to call up your CSS file then this phenomenon may be happening on your website in IE. It’s weird, there’s no logical explanation for it, but this problem obviously needs to be fixed.

The simple solution to this illogical problem is an equally illogical solution – insert either a link or a script element into the header:

  • <script type="text/javascript" src="scripts.js"></script>
  • <link rel="stylesheet" href="styles.css" type="text/css" media="print" />

It doesn’t matter which one you insert (or even if you insert both). If you provide a print stylesheet, using the link element to reference it (as indicated in the example above), then you’ll never see the FOUC phenomenon.

6. Fixed width web page not sitting in centre of window

Got a fixed width website and can’t get it to centrally align in the window in Internet Explorer? Or you can get it to centrally align in IE but not in any other browser? Fear not, it’s not your fault! Unfortunately, the correct way of centrally aligning content through CSS doesn’t actually work in IE:


 #container {
width: 770px;

margin: 0 auto

}

The second command, margin: 0 auto, basically gives our containing element an automatic margin on the left and right, thereby positioning the containing element in the centre of the browser window.

IE however, will need slightly different commands to make this work:


 body {
text-align: center

 }

#container {

width: 770px;

margin: 0 auto;

text-align: left

 }

This will then centrally align the container in IE too. To prevent the text from centrally aligning too, we insert text-align: left into the container div.

This article was written by Trenton Moss, who’s crazy about web usability and accessibility. He’s the founder of Webcredible, a web usability and accessibility consultancy and is extremely good at usability training and usability testing.

Read More
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

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

Drag-and-drop

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

Conclusion

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.

Read More
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!

Conclusion

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.

Read More
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.

Conclusion

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.

Read More
Filter & sort: Improving ecommerce 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.

Conclusion

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.

Read More
Designing websites for older users

According to the 2001 UK census , the UK now has more people aged over 60 than under 16. It also revealed that there are now 1.1 million people aged over 85.

Webcredible recently analysed and compared the results of 16 usability testing sessions – 8 of these sessions were conducted with elderly users (i.e. over the age of 65), and 8 with younger users (i.e. under the age of 40).

The 40-minute ‘talk-aloud’ sessions involved asking participants to find information on a range of government websites.

Assigning blame

The main finding of our study was that elderly users were more likely to assign blame when using the Internet.

Of the 8 elderly participants, 3 appeared to blame themselves for any difficulties which they encountered (sample quotes: “I don’t really know what I’m doing”; “It’s probably my fault”; “This always happens to me”). 4 of the elderly users, however, seemed to blame the site(s) for any difficulties which they encountered (sample quotes: “I hate it when websites do this”; “Well, that’s stupid”; “That doesn’t make any sense”).

We found that the younger group of users were far less likely to assign explicit blame for any difficulties encountered – with only 1 user from this group assigning blame (to themselves).

Emotional reaction

We also found that elderly users used far more emotive words and phrases when referring to websites than younger users.

All of the elderly users employed strongly positive or negative words in their remarks, such as “love”, “hate”, “stupid”, “helpful” and “friendly”. Indeed, one participant even talked to the website as if it were a pet (“That’s a good boy”)!

In contrast, only 2 of the younger participants expressed themselves in comparably strong terms (both when talking negatively about aspects of a site).

Weaker mental models

A very interesting finding was that 6 of the elderly participants regularly failed to scroll down a page (i.e. did not do so six or more times in a session). This failure led these participants to often miss information that was directly relevant to their task.

In comparison, none of the younger participants failed to scroll down a page six or more times in a session.

In our opinion, this is likely to be attributable to elderly users not having fully internalised the concept of browser-windows often requiring scrolling – a concept novel to computer-technology.

Technical language

We also found that elderly users were less likely to understand technical language. For instance, a moderator’s request to “bring up the minimised window” was not understood by 5 elderly users (in comparison to not being understood by only 2 of the younger users).

We found that elderly users were at least twice as likely as younger users to not understand the following phrases: ‘Homepage’, ‘URL’ and ‘Browser’.

Link identification

Our sessions showed that elderly participants were – as a group – more likely to click on elements of a page which weren’t links (an average of 14 times per session, in comparison to the younger participants’ average of 5 times per session).

It was also the case that all elderly users reported preferring websites that changed the colour of their visited links, whereas only 5 of the younger participants considered the matter significant.

Aversion to downloading

Of the 8 elderly participants, 5 expressed a strong aversion to downloading documents from the internet because they were “worried about bugs [i.e. viruses] and things”. None of the younger participants expressed such views.

Higher incidence of ‘search’ usage

Of the younger participant group in our study, only 2 individuals used the available search functionality, whereas 6 of the elderly participant group chose to make use of it.

It is possible that this may have developed as a means of compensating for their apparent difficulties/discomfort with traditional browsing.

It should be noted that all users expected a site to have a single ‘Search’ function that searched all of the site’s content.

Slow task-completion and reading

Our elderly participants required over double the average time of our younger participants to complete a task.

3 of our elderly participants also displayed a tendency to read all of the text on a page before being willing to decide on their next course of action. None of our younger participants did this.

Preference for ‘big and simple’ design

7 of our elderly participants reported anything less than 12-point type as being too small to read comfortably – and even though all users agreed that being able to re-size the text on the screen would be a good idea, only one of them knew how to do so through the browser.

It was also the case that all elderly participants preferred 800×600 over 1024×768 resolution.

Our recommendations

Although more research into the internet behaviours and preferences of elderly users is obviously required, we would like to suggest the following:

  • Designers should investigate innovative ways to communicate the fact that a page is not finished and requires scrolling
  • Technical terms should be avoided if possible – and where they have to be used, a clear explanation must be easily accessible (including examples wherever appropriate)
  • Links should be identified in a consistent and obvious way (e.g. blue, bold, underline, red on mouse-over)
  • The attention-grabbing features on a page (e.g. headings, pictures, icons, instructions and bullets) should be links
  • Visited links should change colour
  • Provide an HTML-version of as much content as possible and do not require users to install software (even Adobe Acrobat) in order to be able to access information
  • Make content as concise and clear as possible – consider providing two versions of the same content (‘simple’ and ‘detailed’) and allow users to decide which they want to access
  • Sites should provide a ‘Make the writing bigger’ link with accompanying illustrations/icons and always use high contrast to display text e.g. black text on an off-white background (N.B. using an off-white background is preferable to white because it reduces the chances of eyestrain for people who are slow readers)
  • Provide explicit instructions by using the imperative forms of verbs (e.g. ‘Go to more details on…’, ‘Find a…’, etc.)

Conclusions

Elderly users are an audience group that will grow in size and importance over the next few years. Our studies indicate that there are lots of simple things we can do to support their use of the internet.

We believe that these recommendations should be taken into account by all sites, and efforts should be made to further expand our knowledge of how to design for these users.

This article was written by Tim Fidgeon, Head of Usability at Webcredible. He’s crazy about usability and runs Webcredible’s web usability training and is passionate about user centered design.

Read More
CSS Usability Hacks

More and more web developers are ditching tables and coming round to the idea of using CSS to control the layout of their site. With the many benefits of using CSS, such as quicker download time, improved accessibility and easier site management, why not?

The problem with CSS

Historically the main problem with using CSS has been lack of browser support. This is no longer the case as version 5 browsers, which all have good support for CSS, now account for over 99% of browsers in use.

Instead, the problem is that browsers can sometimes interpret CSS commands in different ways, causing developers to throw their arms up in the air and switch back to pixel-perfect table layouts. Fear not though, as you learn more about CSS you’ll gradually start to understand the different browser interpretations and realise that there aren’t really that many.

How browser detection using CSS hacks works

The way browser detection using CSS hacks works is to send one CSS rule to the browser(s) you’re trying to trick, and then send a second CSS rule to the other browsers, overriding this first command. If you have two CSS rules with identical selectors then the second CSS rule will always take precedence.

Say for example you wanted the space between your header area and the content to have a gap of 25px in Internet Explorer, or IE as it’s affectionately known. This gap looks good in IE but in Firefox, Opera and Safari the gap is huge and a 10px gap looks far better. To achieve this perfect look in all these browsers you would need the following two CSS rules:

#header {margin-bottom:25px}

#header {margin-bottom:10px}

The first command is intended for IE, the second for all other browsers. How does this work? Well, it won't at the moment because all browsers can understand both CSS rules so will use the second CSS rule because it comes after the first one.

By inserting a CSS hack we can perform our browser detection by hiding the second CSS rule from IE. This means that IE won't even know it exists and will therefore use the first CSS rule. How do we do this? Read on and find out!

Browser detection for Internet Explorer

To send different CSS rules to IE, we can use the child selector command which IE can’t understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

Using the example of the header margin, our CSS command would be:

#header {margin-bottom:25px}

html>body #header {margin-bottom:10px}

IE can't understand the second CSS rule due to the html>body CSS command so will ignore it and use the first rule. All other browsers will use the second rule.

Browser detection for Internet Explorer 5

It may seem strange at first to send different CSS rules to different versions of a browser, but in the case of IE5 it’s very necessary. This is due to IE5′s misinterpretation of the box model. When specifying the width of an element in CSS, padding and borders aren’t included in this value. IE5 however, incoporates these values into the width value causing element widths to become smaller in this browser.

The following CSS rule would result in a width of 10em for all browsers, except IE5 which would give it a width of just 5em (IE5 would incorporate two sets of padding and border, on both the left and right, when calculating the width):

#header {padding: 2em; border: 0.5em; width: 10em}

The solution to this problem? The box model hack, invented by Tantek Çelik who has become quite famous in the CSS world as a result of this CSS hack. And rightly so when you see what he came up with. To perform browser detection and send a different CSS rule to IE5 you would use:

#header {padding: 2em; border: 0.5em; width: 15em; voice-family: "\"}\""; voice-family:inherit; width: 10em}

How he worked out how to do this is anyone’s guess! The important thing is that it works: IE5 will use the first width value of 15em, 5em of which will be taken up by the two sets of padding and border (one each for the left and for the right). This would ultimately give the element a width of 10em in IE5.

The 15em value will then be overridden by the second width value of 10em by all browsers except IE5, which for some reason can’t understand the CSS command that comes immediately after all of those squiggles. It doesn’t look pretty but it does work!

Browser detection for Internet Explorer on the Mac

Quite simply, IE on the Mac does strange things with CSS. The browser’s become somewhat obsolete as Microsoft aren’t going to be bringing out an updated version. As such, many web developers code their CSS-driven sites so that the site works in IE/Mac, although it may not offer the same level of advanced functionality or design. Provided IE/Mac users can access all areas of the site this is seen as a suitable way of doing things.

To hide a command using the IE/Mac CSS hack is simple, and involves wrapping a set of dashes and stars around as many CSS rules as you like:

/* Hide from IE-Mac \*/

#header {margin-bottom:3em}

#footer {margin-top:1.5em}

/* End hide */

IE/Mac will simply ignore all these commands. This CSS hack can actually be quite useful if there's a certain area of the site not working properly in IE/Mac. If that section isn't fundamental to being able to use the site, you can simply hide it from IE/Mac like so:


#noiemac {display: none}


/* Hide from IE-Mac \*/

#noiemac {display: block}

/* End hide */

The first CSS rule hides the entire section assigned the noiemac id (i.e.

). The second CSS rule, which IE/Mac can't see, displays this section.

Browser detection for Netscape 4

Netscape 4 has limited and somewhat erratic support for CSS. Making a CSS layout in this browser, whose market share has now slipped well below 1%, can be extremely challenging. It's become common practice nowadays to completely hide the CSS file from this browser. This can be achieved using the @import directive to call up the CSS document:

Netscape 4 will display a non-styled version of the site as it can't understand this @import directive.

Checking your site in the different browsers

At the time of writing, the major Internet browsers include IE5, IE6, Firefox, Opera and Safari. (Check out TheCounter.com for up-to-date browser statistics.) You can download all these browsers, and a number of more obscure ones, at the Evolt browser archive. If you're not sure how, find out how to install multiple versions of IE on your PC.

Ideally you should check your site in all these browsers, on both PC and Mac (except IE6 and Safari, which are only available on PC and Mac respectively). If you don't have access to a Mac you can get a screenshot of your site on Safari by running it through Dan Vine's iCapture or you can pay to use Browsercam which offers a more extensive screen capturing service.

Conclusion

On the whole, modern browsers have very good support for CSS - certainly good enough for you to be using CSS to control layout and presentation. Sometimes however, certain page elements will appear differently in different browsers. Don't worry too much if you don't know the reason why - if you can fix it up with these CSS hacks then your web pages should look great across all browsers!

This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He's extremely good at usability testing and running CSS training courses.

Read More

Join our team

Do you enjoy technical writing? Care about cross platform mobile apps, HTML5, Javascript and Ninja's? Write for us! We would like to hear from you, get in touch!