Website design and technical communication
Branding and visual design are important parts of website design, but they are not sufficient to produce a good website that meets the requirements of customers. This article shows how the principles of technical communication affect the design of websites.
First, we consider the business requirements of a website, and then show how usability, security, accessibility, findability, and readability affect a customer's experience of a website. The headings are a convenient method of categorising the information. They are not definitive, nor does content apply to only the heading under which it falls. For example, readability affects usability. Additionally, if a user has a cognitive difficulty, readability becomes an accessibility problem.
Regulatory compliance is not covered; www.out-law.com is an excellent source of information.
Business requirements
The business requirements that underpin a website influence the design of the website. What is the purpose of the website? Whom does it serve?
A website can serve many audiences, for example, you may want to attract potential clients, job seekers, potential suppliers, and search engines. Readers may be scattered across the world, and English may not be their first language. These audiences may have conflicting requirements.
Usability
Usability pertains to the ease or efficiency of performing a task. Typical tasks on a website include purchasing products, finding contact information, and evaluating products and services.
Bad design causes online shoppers to abandon purchases. Less dramatically, bad design reflects unfavourably on a company. For a primer on usability, Jakob Nielsen's website (www.useit.com) is a good start.
Some usability problems are caused because code does not conform to standards. No excuse for non-conformant code is acceptable, because the W3C standards are publicly available (www.w3.org), as are free validation tools.
Sometimes, clear answers may be difficult to decide. For example, a web page usually contains a navigation menu, which is not applicable to a printed page. Many website designs cater for this by having special 'print-friendly' pages. Does that help usability, or does it hinder usability? Certainly, it involves an extra step (opening the page) for the user.
Typically, a print-friendly page is supplied as a PDF file. Therefore, two copies of a document exist. Every time that a web page is changed, the corresponding PDF file must be changed. Instead of using additional print-friendly pages, using style sheets is an option (we do this on the TechScribe website). One style sheet specifies the screen appearance, and another one specifies the appearance of the printed pages. When a web page is printed, the menu (for example) does not appear on paper.
A counter-argument is that readers expect to see a 'print-friendly' button. If that is true, educate them. The 'print-friendly' button could open a web page that explains that all pages are print-friendly by default. Readers would soon learn, and in the long term, they would have fewer buttons to click. Website designers would have a lower maintenance burden.
Security of a user's system
One online bank migrated customer accounts to a new system in early 2007. Unfortunately, thousands of customers could not use their accounts, because their web browser settings were incompatible with the new system. Service desk staff had to answer thousands of extra service calls, according to Computer Weekly (www.computerweekly.com/Articles/2007/03/27/222668/browser-glitches-stretch-first-direct.htm).
Certainly, some websites need scripting and ActiveX. Typically, this is with database-driven websites such as travel timetables, online shopping, and banking. However, for many websites, scripting is not necessary.
Security-conscious visitors may not let scripts run, and therefore, a website may not be usable. Unlike the bank's customers, who had a strong reason for using the website, these people are likely to abandon a website that makes them decrease their security settings. If no business or technical reason exists for using scripting, why put obstacles in the way of potential customers?
Accessibility
To reach the widest audience, a website should be easy to use and accessible to everyone. Accessibility is a legal requirement (see the Disability Rights Commission, www.drc-gb.org).
What does accessible mean? Simply, content is accessible when it can be used by someone with a disability. That is a narrow perspective; all users at some time may suffer from access limitations, for example, because they are using a dial-up connection or because they are using a device with a small screen.
Where do you start with accessibility? At the simplest level, follow best-practice guidelines. The RNIB (www.rnib.org.uk) has much useful information.
If you think that accessible design is dull, look at css Zen Garden (www.csszengarden.com).
Findability
No matter how good the visual design of a website, without content, the website is pointless. Therefore, give your readers the information that they want. Some will want much background, and others will want only an overview. A good design caters for both types of customer by organising the information carefully. (The trendy technical term for the organisation of information is Information Architecture.)
Without a clear navigation system, readers can become disoriented. Good practice is to have simple and consistent navigation in the website. Let readers see where they are in the structure. Show them where they have visited by displaying links to visited pages in a different colour (many website designers think that is old-fashioned—it is, but it works).
Instead of the popular FAQ page, which usually is a dump of information factoids prefixed by 'How do I', embed the answers in suitable topics.
A typical website contains a site map, and a search option. Although useful, these are sometimes not sufficient. A search engine is excellent for finding pages that contain particular words, but it does not organise the results into conceptual categories. An A to Z index page shows the website content in a structured manner, and in more detail than a site map. It shows relations between terms, and it lets a reader see the scope of the website at a glance. For a detailed discussion, see 'Indexing technical documents'.
Readability
Reading from a screen is more tiring on the eyes than reading from paper. Therefore, plenty of headings, much white space, and relatively small topics are important. Do not just duplicate a paper document on a website.
"The possibility of not obfuscating the inherent meaning of the intended message should be considered by all interested parties prior to the dissemination of the aforementioned message to the putative audience." In other words, "Do not hide your message behind complex language." A good starting point is 'How to write in Plain English' (www.plainenglish.co.uk/howto.pdf).
Marketing communications must be persuasive. Usually, we find synonyms, clichés, elegant variations on a theme, and clever plays on words. However, synonyms can confuse people, particularly if the website contains technical terms. In technical domains, best practice is 'one term=one meaning'. A glossary of terms is useful.
Using a controlled vocabulary helps to make the content clear, particularly to readers whose first language is not English. A rigorous method is to use some type of simplified English, which controls both vocabulary and grammar. However, controlling the vocabulary means that if a reader types a synonymous word into a search engine, the search results will not show the website.
Finally, if your website is for an international market, make sure that you write for an international audience.
Summary
Creating an effective website that fulfils its business purpose may require trade-offs. You possibly cannot please all potential readers, but can create a website that suits most people most of the time, and which encourages people to purchase your products and services.
This is a revised version of the article that appeared in the May 2007 issue of ITNOW Extra (www.bcs.org/itnowextra/).
RSS feed