Better by design

Article 9 of 26
M-iD, October 2004

Publishing a web or intranet site is easy, but designing it well takes skill and a well-balanced team.

Page 1 | Page 2 | Page 3 | Page 4 | All 4 Pages

Worthing Borough Council's web site used to exemplify almost all that is bad about web site design. It had been cobbled together by an outside consultancy on a bespoke system that was little more than "a glorified HTML editor", according to the council's e-government office Jarrett Holland.

As a result, even small changes to the site could be expensive to implement. "If we wanted to change the name of the business development councillor, for example, that two-word change would cost us £53," says Holland. Not surprisingly, therefore, its home page was not updated for years at a time.

The problem that many organisations find is that getting a web site up and running is deceptively easy - but putting together a well-designed, easy-to-maintain site requires much more skill. Furthermore, there is a slew of laws that can make launching a web site more troublesome.

To try to avoid the problems, experts offer the following best practice advice:

Get the right skills mix

The first step in any web project is to put together a team with appropriate skills. There are four stages to building any web site - design, implementation, testing and launch. Finding one company, let alone one individual, who can take a site through all four stages is a significant challenge.

The key skills needed are extremely wide and include: coding skills; experience with software packages such as Photoshop, Flash and Illustrator; content management system expertise; experience in doing user testing with focus groups; the ability to optimise code for low bandwidth environments; and knowledge of how to work with cookies and browser security policies. Too often, however, organisations focus on design at the expense of usability.

"There's a lot of rope to hang yourself with," says Malcolm McIlhagga, managing director of Sigmer Technologies, "which is why it is often worth employing someone who knows what they're talking about to interview potential web site designers." Key areas to question them on, says McIlhagga, include their design methodology, their knowledge of usability, and the principles of site structure.

In Practice: Worthing Borough Council

For years, Worthing Borough Council's web site was caught in a time warp. Making even rudimentary changes could be costly, so it was rarely updated - a state of affairs that could not continue if Worthing was to stand a chance of meeting e-government targets.

In September 2003, newly appointed e-government officer Jarrett Holland put the project to build a new web site out to tender, listing 80 separate requirements. These included the e-government targets, which require such features as standardised metadata tagging.

From the very start, the Council's staff were involved. "We didn't want this to be an IT-led project. We invited everyone to comment on how we could improve the online service," says Holland.

From a standing start in September and a budget of £50,000, by December the Council had a web site ready for testing.

One of the key challenges faced along the way was ensuring that the content met the World Wide Web Consortium's (W3C) accessibility standards. That was especially challenging when migrating content from the old system. Many minor but time-consuming changes had to be made.

Another problem for Holland has been coping with the turnover of web site administrators, because most are students on placement from university. In order to cope, Holland has drawn up a number of policies to ensure that the established best practices are followed.

These include locking down the templates on the site so that no one can alter them without permission; giving new users at the Council comprehensive training on how they should use the system; and distributing a style sheet on best practice, warning users not to change colours or font sizes.

Now, Holland believes Worthing Borough Council has not only escaped from its mid-1990s time warp, but is also set to meet all its e-government targets - early.

Keep the structure simple

Planning the site structure is usually the first area where design falls apart. Many will try to design a site based on the structure of their organisation rather than on logical areas from an end user's point of view. This can result in too many top levels in the navigation, which will reduce scalability.

"Any good web designer knows there should be no more than a dozen top-level sections," says Andrew Craig, creative director of web site designer Realise. Six to eight top-level sections are normally enough and these sections should be sufficiently broad to cope with any future development.

Make it usable

Once the site structure is determined, initial designs can be developed, but there are external considerations other than just aesthetics to consider.

There are many pieces of legislation, for instance, that can affect how a web site should look, says Paul Dawson, head of user experience at Conchango, a business technology consultancy. Many of the principles behind usability apply to both web sites and their bricks and mortar counterparts.

"There's the Sale of Goods Act - whether something's fit for sale and how people can return it; local trading standards; property mis-description for estate agents. But the biggest issue that affects most e-commerce sites' bottom line is returned goods," says Dawson. Since shoppers cannot touch the products they buy from a web site until they are delivered, returns are usually much higher for e-commerce sites than for bricks and mortar outlets. Good design principles can, therefore, help to minimise the number of returns.

How a product is described and how it is displayed can discourage people from buying something unsuitable in the first place. "The larger the images, the more images I get, the more detail I can see - the less likely I am to return it," says Dawson. "If you're selling me a PC, show me the back so I can see what ports it has. If you're selling me a music player, give me the infinite technical details so I know whether it supports a particular format."

The web site of electrical retailer Comet is a good case in point, providing users with a whole list of technical details to help customers make their choice. In addition to minimising returns, it also helps instil confidence in buyers.

Don't overlook the law

There are a number of other legal issues that need to be taken into consideration including the Data Protection Act, which requires explanations of how information collected from the site will be used, and the Privacy and Electronic Communications Act, which will require end users to check boxes rather than uncheck them to sign up for emails from web sites.

In addition, the Copyright and Patents Act (CPA) and the Disability Discrimination Act should be taken into account. Although the CPA usually just results in copyright notices on each page and a 'terms and conditions' page explaining how content may or may not be used by third parties, by far the biggest effect it has is in dictating the look and feel of a site.

"Before you launch [a site], you have to make sure no one else has made anything identical - to make sure no one accuses you of plagiarism," says Dawson. "If you come up with a design identical to someone else's, it may cause problems if you're in the same line of business."

Any organisation deploying a web site needs to make sure that the site design is not too similar to anyone else's, even if the actual code used to create the page is completely different.

Make it inclusive

Whenever people talk about web site usability, the Disability Discrimination Act inevitably comes up. Any organisation providing a service needs to ensure that those with disabilities are able to access it, and that includes web-based services.

However, is not only disabled people that can benefit. "Something like a large font size - or letting the user change the font size - is very important to elderly users," says Jakob Nielsen, a web site accessibility guru.

"Reduced eye sight starts to happen to the entire population as they age, starting at 40 but becoming a severe problem when people get to 50 or 60. So that's just about every senior executive or high-level decision maker - and about 20% of users," says Nielsen.

However, there are no laws about web site accessibility for the elderly. "As a result, the guidelines from my company's web site about accessibility for disabled users sell 10 times more than the guidelines for elderly users, even though there's 10 times as many elderly users, they're worth much more money and are more important for e-business and e-government. It's contrary to all business sense," says Nielsen.

Implement cascading stylesheets

Technically, the biggest improvement that any web site owner can make to a web site to make it more accessible, easier to maintain, better looking and more compliant with legislation is to separate the content and the presentation of the site using cascading stylesheets (CSS), a now-standard web technology.

Stylesheets are separately downloadable documents that web pages can reference, which contain information about the fonts, colours, sizes and positions of elements in the page. By storing this information in a separate file, a consistent look can be maintained across the site, since the information does not need to be repeated and updated in every file and web pages will be smaller because they no longer contain formatting information. Stylesheets also provide far greater control over the look of a web page than simple HTML alone.

Employ iterative testing

Once a basic design has been developed, iterative testing should advance the design of the site step-by-step. "Rather than decide what the site should look like at the beginning then develop it, it's better to 'iterate' the site using cheap design methods and try to get as many users involved in testing those prototypes up to the final build," says John Knight, director of interaction design at Usability Labs at the Birmingham Institute of Art and Design.

"You're more likely to build sites that users find intuitive because they'll have been involved in it, the structure and the architecture," he says. "People in development teams tend to have enthusiasm for a particular technology or design aspect, such as a new kind of search. All of the resources get put into developing this feature, but actually no one wants to use it."

Ideally, disabled users should also play a part in the testing, but if it's not possible to find anyone willing to take part, automatic tools such as Bobby is able to check coding to ensure it does not breach any accessibility guidelines.

Testing the site with different platforms and browsers will also ensure that as many people as possible can view the site. Writing the HTML to the latest standards - HTML 4.0 or XHTML - will future-proof the site as best as possible.

Realise, an Internet services company, has a standard build for its PCs which covers 95% of users' browsers. "We have Internet Explorer 5 and above on the PC, as well as Mozilla and Netscape," says Andrew Craig, creative director at Realise. "On the Mac, we only test on the most popular, which are Safari and IE 5.2. There's always going to be some strange user with Netscape 1.0, but to make it work on those types of browsers will quite considerably restrict you in terms of coding and what the site looks like."

Realise varies the build according to the browser distribution of users in the expected demographic; with sites for schools, for example, the company performs more Mac testing, reflecting their greater prevalence in education.

Don't stop at deployment

Deployment should not be viewed as the end of a site's development, however. A style guide that lists procedures for users so that content and design remain accessible and within the organisation's intentions is a must.

This should be a constantly evolving documentation of procedure, so that as staff come and go, procedures are not forgotten and those that do not work are not continued.