Website Owner’s Manual

Know your site

Qualitative feedback

I’ve already discussed stakeholder interviews and will cover user testing in chapter 6, “User-centric design.” This section will focus on other feedback mechanisms.

Most websites provide some method by which users can submit feedback. This is normally a contact page, but something more proactive is needed if you want consistent user feedback. Most users won’t think to send in comments unless they’re frustrated with your site. The problem is that in such situations, users tend to leave rather than complain.

If you want feedback about your site, then specifically ask for it. You can do so with a simple feedback form or a more comprehensive survey. But here’s a word of warning if you’re considering a full-blown survey: few users take the time to complete a long questionnaire, so keep your questions to a minimum. Also avoid making your requests for feedback too intrusive—they shouldn’t hinder users from completing their goals.

If you’re considering making changes to an existing site, it’s well worth implementing a basic feedback mechanism to canvas opinion before you begin. Whether you’re getting feedback from your site through user testing or via stakeholder interviews, you need to assess the value of the comments made. When analyzing negative comments about your site use these four criteria to judge how seriously those comments need to be taken:

• How often the comment is being made

• Who makes the comment

• What affect the problem has on the user and your objectives for the site

• How easy the problem is to fix

The more often you’re hearing the same negative comment, the more likely it is that the comment is justified and needs addressing. But you can’t rely on numbers alone. If your biggest customer has a problem, then you had better address that concern fast!

You also need to ascertain the seriousness of each problem. Does it stop the user from completing a task, or is it simply a mild inconvenience? Does it in some way hamper a business objective? If it does, then it needs to be dealt with.

Adobe support provides a simple but unobtrusive feedback mechanism. The side column asks users if they found the support document useful..

Finally, establish how difficult the problem is to fix. Even a minor problem is worth fixing if it’s easy to do. Conversely, fixing a major problem may be unjustifiable if the expense is prohibitive. In such situations, look for a workaround that lessens the seriousness of the issue. Ultimately, these decisions are about return on investment. Does the seriousness of the problem justify the cost of fixing it?

Although nothing is better than feedback from your users, obtaining it can be a battle. Stakeholder interviews and user testing are time consuming, and site feedback mechanisms are often ignored. Quantitative analysis is much less work, but you should use it to support, not replace, qualitative feedback.

Quantitative analysis

At the beginning of the chapter, I talked about how bad I am at assembling flat-pack furniture. Part of my problem is that I never have the right tools. Fortunately, when it comes to analyzing the strengths and weaknesses of your site, there is no shortage of tools. Let’s look at the three types of analytical tools I mentioned earlier, starting with web stats.

Traffic analysis

The best-known form of analysis is carried out on a site’s log files. Log files track where a user came from, what pages they have visited, how long they spent on each page, and other data about users’ interaction with your site. The problem is that log files are hard to understand. Many tools are available to help with this, from free open source software to expensive enterprise-level products.

Google Analytics gathers a wealth of information about your users and how they navigate your site.

It’s probably best to start with something cheap. In my experience, the majority of website owners don’t use the advanced features offered by high-end tools. You can always upgrade later.

Another option is to use a statistics collector that doesn’t rely on log files. One such tool is Google Analytics. It collects considerably more data than web logs and has an easy-to-use interface for analyzing the results. It’s free of charge and only requires a small piece of code on each page to work.

How do you judge if an existing site is performing? You can look at three basic things:

• The number of unique users and where they’re coming from— If many sites are linking to you, it’s a good sign that you’re doing something right. Traffic levels also indicate the performance of existing marketing campaigns. But here’s a word of warning: large numbers of unique users don’t necessarily indicate a successful site. Quality is more important than quantity.

• The percentage of repeat visitors compared to first-time users— If users are returning to your site regularly, it’s normally a sign of satisfaction.

• How users are moving around your site— How long are they spending on individual pages? How many pages are they viewing? From which page are they leaving the site?

The final test is trickier to interpret. A user may visit many pages, which can appear to be a sign of interest in the site. It may also mean they can’t find the information they require. Compare the time on site to the number of pages viewed. If the user looks at a good number of pages for a reasonable time, then you know things are going well.

By looking at where a user leaves, you can get an indication of potential problems. Are users only looking at your home page? If they’re leaving without viewing other pages, then you have a problem with your home page. Are users getting to checkout on your e-commerce website and then giving up? Perhaps it’s time to user test your checkout process.

You can do a lot more with web stats, but this should be enough for you to analyze your existing site. Let’s now turn our attention to automated checkers.

It’s easy to misinterpret website statistics. For example, a large number of page views may mean people can’t find the information they’re looking for.

Automated performance checkers

When analyzing your web stats, you may notice a significant number of users who leave your site without viewing a single page. This can be happen for a variety of reasons. They may have come to the wrong site or been confused by the user interface. But it may also mean they have met technical difficulties accessing your site.

You can easily perform three tests to identify potential problems:

• Check your site on as many different browsers as possible. I recommend that you look at your site in at least the last two versions of Internet Explorer, Firefox, Opera, and Safari. If you don’t have access to all of these browsers, then try an online service such as BrowserShots (http://www.browsershots.org).

• Check your site’s accessibility using an online accessibility checker. These tools provide a report outlining the various accessibility problems with your site. A word of warning: automated accessibility reports can be both misleading and confusing, as you’ll discover in chapter 7, “Ensuring access for all.” Nevertheless, they can help you identify possible accessibility problem with your site.

• Carry out a speed test on your site. Users will often abandon a site they perceive as taking too long to download. How quickly a page should load depends on the type of content and the connection speed of most users.

Automated checkers have a broader role than monitoring site performance. They can also be used to track your site’s online visibility.

Online visibility trackers

Web stats and performance checkers provide information about site usability and accessibility, but they don’t tell you how easy your site is to find. Fortunately, tools are available that do exactly that.

Start with a site like http://www.popuri.us. This site checks various sources to ascertain your online visibility.

If you want information about your site’s ranking for specific search terms, then a tool like http://www.googlerankings.com will help. Despite the name, this free application checks all major search engines and reports your rankings for whatever terms you specify.

In addition, a number of desktop tools bring all this functionality (and more) together. For the purposes of assessing an existing site, the free online tools are adequate. Chapter 10, “Driving traffic,” will discuss the need to monitor your site’s visibility on an ongoing basis, especially when you’re tracking marketing campaigns. In this situation, a desktop application may be more convenient.

Popuri.us is a free web application that checks your site’s ranking on search engines, blog listings, and social networking applications.

Of course, knowing that your site ranks 4,653 on Alexa or that 364 people link to it from del.icio.us isn’t in itself that useful. The real power of online visibility trackers is that you can check on your competition as well.

Check out the competition

To assess the strengths and weaknesses of your existing site, you need to judge it in context. The best way to achieve this is to compare it with your competition.

Most organizations have a clear picture of who their competition is. Depending on your sector, this list can be long. Doing a detailed competitive analysis of everyone isn’t cost efficient. I recommend keeping the analysis lightweight and selecting a small number of sites to look at (between four and six). Be careful: the tendency when narrowing the field is to focus on the largest competitors, which can be a mistake. The smaller competitors, or those new to the marketplace, are more likely to be doing something innovative, which you may be able to learn from. Try to ensure a mix of both larger and smaller sites.

Take the time to look at your competition’s websites and identify what works and what doesn’t.

[View full size image]

Reviewing your competition

Try to review your competitor’s website in a similar way to your own. Some adaptation will be required when you don’t have access to information.

For example, it won’t be possible to interview their internal stakeholders. You also won’t be able to survey existing visitors through contact forms or online polls. Instead, you need to deploy alternative methods like user testing. Testing the competition gives you an opportunity to try responses to design, content, site structure, and functionality. You can learn from what they have done right and improve on what they have done badly. It’s the perfect training ground.

Although user testing is useful, it shouldn’t replace basic analysis on your part. Take time to look at your competition and ask yourself these questions:

• What message and tone of voice are used on this site?

• What content and functionality are highlighted on the home page and in the navigation?

• What image are they trying to project through the design?

• What functionality and content do they have compared to your website?

• What labeling are they applying to the content areas and site sections?

The aim is to better understand your competition’s online strategy. Why have they chosen to approach a problem in a different way than you? Does that alternative approach give them an advantage? But always remember, just because a competitor’s website is successful for them doesn’t mean the same approach will work for you. You should learn from your competitors, not copy them blindly.

It isn’t necessary to limit your analysis of the competition to qualitative methods (such as user testing). You can do quantitative analysis too.

Testing your competition

As with reviewing the competition, some adaptation is required when doing quantitative analysis. This is because you don’t have access to their log files. But you can learn a lot from checking the competition’s online visibility.

Do your competitors’ websites rank higher than your own? Do more people link to them? Is there more talk about your competitors’ brands? Who links to your competition, and can you persuade them to link to you?

To quickly find out who is linking to your competition, you can type the following into Google link: http://www.yourCompetition.com.

[View full size image]

Finding the answers to all these questions is simple. Use the same popuri.us service I mentioned earlier, and enter your competition’s web addresses. You can also use other tools to test your competition, such as using the automated checkers to see how well built their websites are.

All these techniques should give you a clear understanding of your competition. But more important is the need to understand your users.

Create an accessibility policy

As I’ve said, many organizations embrace accessibility not due to a desire to improve access, but from a fear of litigation. This leads to a “butt-covering” mentality. They fixate on a set of guidelines (like WCAG) and blindly check every box until they have fully conformed with the specification.

This approach is flawed because it’s organizationally focused rather than user focused. Following generic guidelines that may or may not apply to your users’ specific needs is wasteful and serves nobody.

A better approach is to use WCAG as a starting point for the creation of an accessibility policy. This outlines your organization’s approach to dealing with issues of accessibility and should include the following:

• Your ultimate objectives in terms of W3C guidelines

• A roadmap for reaching these objectives

• A process for testing compliance with these objectives

• A plan for maintaining the accessibility of your site over time

• A procedure for responding to complaints

Many organizations only choose to comply with the W3C accessibility guidelines in order to avoid prosecution.

This policy shouldn’t be drawn up in isolation but in consultation with your developers (who must implement the objectives) and your content providers (whose help will be vital if your site is to remain accessible). Let’s look at each of the elements that appear in your accessibility policy.

Establishing your long-term accessibility goal

Every accessibility policy should have an end goal in mind. This objective will probably change over time, but there is value in documenting your current aim. What that aim should be comes from discussion with developers, content providers, and end users. But it will probably be based on some aspect of WCAG 2.

Each WCAG 2 guideline is broken down into one or more success criteria. These criteria are rated according to their level of conformance. There are three levels: A, AA, and AAA.

[View full size image]

Traditionally, organizations have decided to reach a certainly level across all guidelines. For example, a company may aim to make an entire site Level AA compliant. Depending on your circumstances, this may prove difficult to achieve. A better approach is to aim for a minimum of Level A across the board but seek to comply to higher levels of accessibility on some guidelines. This more tailored approach take into account the varying requirements of your business, content, and audience.

Of course, identifying an end goal is one thing. Getting there is another.

Having a roadmap for overcoming common problems

Even achieving the most basic level of accessibility (Level A) can be challenging if you’re implement it on an existing website. It is far cheaper and easier to plan with accessibility in mind from the outset. But when you don’t have that luxury, you don’t need to immediately implement Level A. Your accessibility policy can outline a roadmap for achieving longer-term goals.

The Pareto principle or 80/20 rule (http://en.wikipedia.org/wiki/Pareto_principle) states that for many events, 80% of the effects come from 20% of the causes. This holds true for accessibility, where a small number of issues cause the vast majority of problems. It’s logical to start any roadmap by resolving these issues first—but what are they? That is a subjective question, but here are the most common problems I encounter:

Poorly described images

I’ve mentioned that images should have associated ALT attributes. This benefits both visually impaired users and search-engine placement. But the problem of poorly described images isn’t due only to a lack of description. It’s also caused by badly written descriptions.

Because many people realize the benefit of ALT attributes for search-engine placement, they fill these descriptions with keywords and make them overly long. You should make sure all content images have an ALT attribute and that it clearly describes what is being shown in a single sentence. Longer descriptions can be annoying when read back by a screen reader.

But it isn’t just images that are labeled badly; so are links.

Badly labeled links

The text in a link should describe that link without context. Screen readers can read all the links on a page as a single list, which helps users quickly navigate without listening to the entire page. The problem arises when a link is entitled “click here,” which doesn’t give the user any information about where the link leads. A better link would read “latest news.” Where a longer description is required, a title attribute (similar to an ALT attribute) can provide more information.

If a link is labeled “click here,” it’s meaningless out of context. For visually impaired users, this can be frustrating.

Using descriptive links helps not only screen-reader users but also users who are quickly scanning a page looking for the next link to follow. And search engines use the content of a link as a way of judging what the page linked to is about.

In addition to describing links and images, you also need to consider other forms of media.

No alternatives to media

When you’re using video, audio, or any form of media that requires additional plug-ins, you need to provide an alternative version. This alternative should be in the form of either a transcript (in the case of audio) or captions (in the case of video or other media where visuals and audio are synced).

At first glance, this seems like a massive undertaking. But a number of services like Casting Words provide transcription at a reasonable rate, and tools like Overstream (http://www.overstream.net/) can help you create captions.

It’s important to provide these alternatives because users may not be able to perceive the content due to technological limitations or disability. This is also true for JavaScript.

Casting Words (http://Castingwords.com) converts audio to text. This is just one of the services that can help your site become more accessible.

Reliance on JavaScript

JavaScript is a programming language that is used to achieve many of the interactions you see on websites. From pop-up windows to services like Google Maps, JavaScript is amazingly flexible and heavily used.

JavaScript itself isn’t inaccessible. It exists to add interaction and behavior to a website in the same way HTML provides content and CSS provides design. The problem is in the implementation.

Not everyone has access to JavaScript, and search engines regularly ignore it. It’s therefore important that all content is accessible even when JavaScript isn’t available. The most common problem is using JavaScript to create navigation and other links. If JavaScript isn’t available, it’s impossible for users to follow those links to the content beneath. Similarly, when JavaScript is used to add content to a page, this content becomes inaccessible if JavaScript is disabled. Never rely solely on JavaScript as a method of accessing content.

The final accessibility mistake I see regularly is preventing users from resizing text.

Hard-to-read text

By default, all major browsers let users control text size. This is required for users with less than perfect vision. Most visual impairments require font sizes to be increased. But some people need smaller text to fit better within a limited field of view.

Also, many visual impairments are made worse by poor color contrast between the text and background colors.

Although browsers provide the ability to resize text, and it’s relatively trivial to design with sufficient contrast, many web designers fail to build with this in mind. When the user resizes text, the design breaks and becomes unreadable. Poor color combinations increase the problem. There is no good reason for this beyond laziness. Ensure that your designers consider these issues when developing your site.

By addressing these five problems, you can dramatically improve the accessibility of your website. None of these issues is particularly hard to overcome, and the financial investment is minimal. You’ll increase the traffic to your site and the number of visitors able to successfully navigate it.

But an accessibility policy shouldn’t just address quick fixes. It should also provide a comprehensive approach to improving and maintaining site accessibility. To do this, it needs to include a degree of accessibility testing.

The BestBuy site (http://www.bestbuy.com/) doesn’t adapt well when users enlarge the text. Screen elements are forced out of position, and text overlaps.

Testing accessibility

How you intend to test the accessibility of your site should be a fundamental component of any accessibility policy.

Most organizations rely too heavily on automated services. These online services claim to test web accessibility but can only carry out a basic review. For example, they can’t ascertain whether descriptions in ALT attributes on images are meaningful or merely stuffed with keywords to improve search-engine placement. They’re unable to test some guidelines at all—and this is particularly true with WCAG 2.

Although they’re sometimes misused, accessibility checkers have a role to play. For a list of tools, see http://www.w3.org/WAI/ER/tools/.

There is a place for automated testing. It’s useful for identifying potential problems across a large site, but you should never use it in isolation.

User testing with disabled users is far more effective than any amount of automated testing. Granted, finding appropriate disabled users isn’t easy, especially when you’re faced with a wide range of potential disabilities. Fortunately, a number of organizations can help you with recruitment. They can arrange testing for you and even advise you on how to solve any problems that arise.

Paying for real users may be beyond your budget. If this is the case, ensure that somebody is made responsible for regularly testing the accessibility of your site through a mixture of manual quality control and automated testing.

Whatever approach you adopt, make sure it’s documented in your accessibility policy, including how often you intend to test. Frequent testing is important because although it’s easy to launch an accessible website, such a site can be difficult to maintain.

Maintaining accessibility

Maintaining the accessibility of your site can be problematic if it’s being updated on a regular basis. It’s even more complex if multiple people are involved in adding content. Your accessibility policy should address how to maintain accessibility over the long term. You can do so in three ways:

• Regular testing (as explained earlier)

• Training

• Using the right technology

The most important of these is training. Ensure that your development team and content providers understand the basic rules of accessibility. Content providers may only need a set of simple rules to follow. Your development team, on the other hand, will need a deeper understanding and may require formal training.

Unfortunately, a good understanding of accessibility doesn’t help when technology fails to produce accessible code. This is especially important when you use a CMS. Make sure your CMS can output clean, accessible code and that wherever possible it enforces accessibility on content editors (such as requiring ALT attributes to be defined for images). This is certainly an important point to consider when procuring a CMS.

Future Site Evolution

If the future lies in the continual evolution of your site, then you must break down the barriers between client and agency. You and your team need to really engage in order to move your site forward.

A good web-design agency should constantly suggest new ideas to you. It should share what it has learned from other projects and from the industry at large. You can then decide which of these ideas apply to your business.

Web designers aren’t just experts in building sites; they’re also experts at the web. They’re aware of what other sites are doing and what is possible. Use this knowledge.

This kind of relationship takes time to develop. The agency needs to understand your business and objectives before it can make suggestions. This won’t work if you regularly change suppliers or talk to your agency only every couple of years.

Arrange regular meetings with your agency. Encourage it to share what it’s been doing on other projects and what innovations it has seen online. Invite suggestions.

You may think that having an in-house team will foster this relationship. After all, an in-house team will know the business and always be around to make suggestions.

Having in-house capacity offers many benefits (see chapter 3), but it also has some drawbacks. An in-house team doesn’t work on other websites and so can’t learn from those sites. Many in-house teams are preoccupied with day-to-day maintenance rather than long-term strategy.

If you use an external web designer, ask them to share ideas from other projects. You may find some of them are applicable to your site.