People Hate Your Website… Now What?

So there you are, site has been completely built and in your opinion it couldn’t be better. Then it happens…. BAM… someone complains that they can’t find something on the site. Then another complaint…. BLAMMO… they can’t see the site at all in their IE6 browser. Suddenly you realize that though your site looks beautiful in Firefox, and to you it makes total sense navigating your way around, your users aren’t having the same experience as you are.

How the crap do you fix it?? How do you even find out what exactly people are having a problem? Well let me try to help you with this brief but completely badass post about accessibility and usability.

What the Hell is Accessibility and Usability?

I’m sure you’ve heard the terms before, but do they make sense? Accessibility refers to the idea of your website being available to a wide range of people on a wide array of devices. Sure, your site looks good on your computer with Firefox, but what if you were blind? Would your site still function in a logical manner?

Usability refers to the ease of use and understandibility (yes, I just made up that word) of your site. Often times the “curse of knowledge” prevents you, as the creator, to understand what its like being a brand new user of the site. More often than not, a site fails because users of the site can’t find what they are looking for.

So what happens when you don’t include these two aspects of design into your process? Quite simply, you suck. Users of your site become agitated and leave, thus your business suffers. But how do you know if you suck? Ask yourself some simple questions:

  * Are visitors finding what they need on the site in an efficient manner?
  * Are visitors encountering any unexpected results that hinder their experience?
  * Is the site usable by someone who is visually impaired or blind?
  * Can the site be visited by using a mobile phone or other non-standard device?
  * Are people happy to use the site? (This one might be the most telling)

So… do you suck? If the answer is yes, I’m sure your next question is, “why bother fixing it?” Well let’s take a look at some numbers that may change your perception:

  * An estimated 19.4% of civilians in the United States, totaling 48.9 million people, have a disability.
  * Between 15% and 30% of the population have functional limitations that can affect their ability to use technology products (50 million in US, 750 million worldwide).
  * Use of assistive technology increases with age, with 52% of AT devices used by those 65+.

These numbers are more than just statistics, these are your future customers. By continuing to engage in your sucky ways you are excluding a huge amount of potential business. The simple fact is, if users find your site difficult to use, they will leave.

So How Do I Make My Site More Accessible?

There are a grip of tools that exist both online and offline that provide excellent insight your website’s possible problems with accessibility. Lets take a look at each tool individually and see how they can help us.

HTML Validation

The first and simplest stop on your path to an accessible website is to actually test the code your site is built on. Often times some of the biggest issues boil down to simple omissions or errors in code. The authority on web standards, W3C, provides us with an invaluable tool; the HTML Validator.

HTML Validator – http://validator.w3.org

While this tool tests your website thoroughly, the results can sometimes be a little hard to decipher. Often times a set of errors are actually caused by one small error; so don’t fret if you are seeing 30 errors on a page as this may only be 5 typos in the code. Some of the other common errors your website could be facing include:

  * Doctype: Each website is required to have this parameter at the top of the code. This tells the application viewing the code (browser, phone, screen reader, etc) what type of code it is dealing with. Omitting this vital parameter can lead to errors in loading the page with some applications.

  * Alt Attribute: The “alt” attribute is what describes these images without actually relying on context. When using images on a site, it is important to include the alt attribute to describe the content of the image. While an image in context may make complete sense to a sighted individual, someone who is visually impaired may not find it as easy to understand.

  * Closing tags: Each element in HTML consists of an opening tag and a closing tag. For some tags, both are contained in one block of code. For instance the “br” tag can be written as both
and
. While both correctly work in all modern browsers, the same may not be true in other applications. The correct form to use in this case is
as it accounts for both the opening of the tag and the closing denoted by the “/” character.

  * Form Labels: Forms are crucial to most websites, acting as anything from a sign-up form to a newsletter subscription form. A common error with form elements is the lack of labels needed to describe them. Similar to an “alt” tag for an image, these labels help the visually impaired to understand the form being shown.

Section 508 Compliance

Section 508 of the Rehabilitation Act is an amendment that deals with removing barriers in information technology. Building a site that doesn’t follow the 508 guidelines is actually illegal (edit: for federal websites), and it’s also just plain uncool. To figure out if your site is 508 compliant, use the validator provided by Cynthia Says:

Cynthia Says Validator – http://www.cynthiasays.com/

WCAG Compliance

The WCAG is a set of accessibility guidelines that have been put together by the W3C, an organization that provides the HTML Validator tool mentioned earlier. This guideline is meant to provide general best practices for a website design. While the list is often criticized and not universally agreed upon, it still serves as a good resource for developing a more accessible and usable website. Some tools for validating your site under WCAG are:

Functional Accessibility Evaluator – http://fae.cita.uiuc.edu/

HERA – http://www.sidar.org/hera/

Browser Testing

One of the most challenging obstacles in web-design today is that every browser renders a page differently. Aside from installing every browser and every operating system on your computer (if you do this, you are my hero, nerdlinger), you can use services such as BrowserShots or Litmus, which will give you an image of what your webpage looks like on a particular browser.

Browser Shots – http://browsershots.org/

Litmus App – http://litmusapp.com/

Colorblind Testing

10% of all people currently suffer from some form of colorblindness. Fortunately, there is a super funky fresh application available to assist in designing your website for this demographic. Color Oracle will actually replicate your website and allow you to view it as your colorblind audience would. It’s available at http://colororacle.cartography.ch/

So How Do I Make My Site More Usable?

Usability testing is specific to each website and audience. Some sites are more complex than others or may expose users to unfamiliar experiences. The only reliable way of knowing if your site is usable is by watching people use the site.

Selecting the Ideal Participant

  * Profile fitting: The best choice in participants for testing are strangers that fit the profile of your website’s target audience. For instance, a fifteen year-old boy may not be the best candidate for the testing of a website selling hearing aides.

  * Existing users: Some of the best user testing comes from those already using your site. These people not only have insights to the site first time users might not have but they also have a self-interest for the site to become better.

  * New hires: Brand new employees can be perfect for usability testing as they have a vested interest in familiarizing themselves with the site so their input can be very insightful.

Conducting the Testing

After you have selected participants, the testing can begin. Some major points to keep in mind when conducting your test:

  * Have participants vocalize their thoughts: It’s important to know the thought process of your participant to understand what they are expecting, trying to accomplish, and where he/she may be having trouble. Plus it can be weird sitting in a completely quiet environment… I’ve had dates end up badly cause of it.

  * Do not participate in the testing process: This is very important! Let the participant act on their own without affecting them in anyway. Give them only the necessary details, let them know you cannot assist them in any way during the test, and let them be.

  * Use scenarios: This is helpful if you are trying to test certain key aspects of your site. Give participants certain duties, such as signing up for a new account or registering for an event to identify areas of struggle. Identify some key concepts of your site and tell the participant to complete them. If you want to test out how users sign up for a new account, let them know.

  * Record the testing: While a notebook and copious notes is a start, the ultimate goal is to record their interactions in a format that others can observe later. Videotape the testing or use an application like Silverback (discussed in the next section) to fully record everything. This will allow your team to come to their own conclusions based on their own perceptions of the recording; thus resulting in a more valid test.

Silverback

I cannot stress enough how utterly badass this application is. It will record the entire testing session including mouse movement, mouse clicks, and even has the ability to take a video recording of the participants’ face. This tool will be vital in any website usability testing you decide to conduct.

Silverback Intro Screen – http://silverbackapp.com/
Results from Usability Testing

The results from your initial test will help to improve your site in the short-term, but the only way to know with certainty that your website is usable is to constantly test, analyze and make appropriate changes to your site. This should be an ongoing and regular process, typically coupled with any changes you make to your website. Each new round of testing should result in fewer changes.

Why, Thank You, Sunny!

No friend, thank you for taking the time to make the web a better place. I hope this guide has at least directed you towards that path.