13 June 2012

Responsive web content case study:

One of the websites my colleagues and I have been paying attention to is the new UK government beta website. Clients have been asking us to think about what design lessons we can draw from it.

Here are some comments I've heard:
"How did the UK government manage to describe government content in such simple language?"

"Is there some special design principle they're using that we didn't know about?"

"This is the British we're talking about. Of course they know the rules of English better than we do--that's how they came up with this content!"
That last comment was a striking reminder of the lingering post-colonial anxiety we have in Singapore over all things related to the English language. I found myself persuading people (to little effect): No, British English is not a special class of English. It's just English.

Copy on looks and reads the way it does is not because it had something essentially British about it. Rather, it's because of three factors:
  • The copy was written so that the less literate can understand it. Hence the simple words, and the short sentences.
  • The copy was written for usability. This means it was designed for people who are not digitally literate. The sort who wouldn't know the difference between "sign up" and "sign in".
  • The copy was designed to work with responsive design, i.e., a layout that adjusts itself to both desktop and mobile screens. There's just no luxury for the long paragraphs that governments worldwide seem to prefer.

It certainly looks better

If nothing else, the generous praise for the project has led me to two conclusions:
1) Shorter always looks better. As web usability experts love to say, "Users don't read. They scan." For a text-heavy website, certainly reads very well. And when I say that it " reads well", what I really mean is, "it's easy to skip the stuff  that I don't need." is also easy on the eyes. Even though the content was specifically written for the mobile screen, the lack of clutter makes's content look good on the desktop screen as well.

Most people write copy for how it reads. Very few people write for how it looks. But on the web, especially the mobile web, that's exactly what it's supposed to work.

2) Shorter is always possible. Public services tend to excuse their poor content on the grounds that government content is exceptional-that it's important to explain things in detail and full accuracy. Supposedly, users will never accept anything less than the complete detail--even though it's ultimately only middle-men and lawyers who can make sense of it all.

The extensively user-tested project (and its predecessor, put this self-serving myth to rest. The UK government has concluded that the British public really does want clarity and simplicity in public communications. It also shows that clear communications is possible if there is political will in the organisation.

But how does it read?

Its modern design aside, how well does the content on read? Surprisingly, not as good as the theory promises.

For example, despite the emphasis on short sentences, there's still plenty of run-on sentences. They're certainly avoided the problem of comma splices (because they seem to have removed most of the commas!), but plenty of run-on sentences lay about:
You will be responsible for Council Tax and can include part of the cost in the rent you charge. You must tell your council if having a tenant means you’re no longer entitled to a single person discount. (source)
There's also indiscriminate use of common copywriting principles, particularly the rule of the second person, and the active voice. For example, this passage on the rights of disabled parents:
You shouldn’t be denied fertility treatment because you’re disabled. (source)
The sentence seems to have been cast this way because 1) the writer wanted to lead the sentence with the word "You", and 2) they read somewhere that the legalistic sounding "shall" should be replaced with "should" or "must" in order to be clear.

But "should" makes it a normative statement. It suggests that fertility treatment is subjectively desirable for the disabled, but not necessarily a right grounded in objective law: "You shouldn't be denied fertility treatment because you're disabled. Yeah, we sympathise."

The sentence could have been easily fixed with basic copywriting rules, like making the actor the subject of the sentence:

 Original You shouldn’t be denied fertility treatment because you’re disabled. (source)
Edited (by stating the actor, i.e. hospitals or the doctors) Hospitals are not allowed to deny the disabled fertility treatment.
Edited (if you must use active voice and the 2nd pronoun) Hospitals cannot deny your request for  fertility treatment just because you're disabled.

There are many other examples:

You can’t get debt advice from an Official Receiver. For debt advice contact Citizens Advice or the National Debtline. (source)Official receivers cannot give you debt advice. If you need debt advice, contact Citizens Advice or the National Debtline.

(Sentence leads with the real actor, rather than "you")
If you're travelling from outside the EU, you only have to pay [customs duty] if you go over your allowance. (source)If you're travelling from outside the EU, you only have to pay [customs duty] if you go over the maximum amount allowed by the law.

(Passive construction clarifies what "allowance" it is we are talking about*)

* Oh, and by the way, the passive voice is not evil. Use it when  the law is the actor.

Problematic lists

Writers have been advocating the use of more vertical lists on the web for years. This is because people tend to "scan" when reading text off a screen. Vertical lists helps readers focus on important points.

In accordance with usability orthodoxy, yes, we do get lots of vertical lists on But most of them look like this:

The problems, in brief:
  • Lack of parallel structure. The list items variously start with "if", "when" and "you". Instead of starting each item at an identical point, the reader is forced to start over cognitively with every bullet point, as if each item is a new paragraph. 
  • The list doesn't flow (but the style suggests otherwise). Ending the lead-in sentence with "and" is misleading--the vertical list isn't actually structured anything like a single sentence. The reader would just stumble at the end of the first sentence (where a period should be) and find himself having to start again.
In the print world, the Chicago Manual of Style recommends using sentences to lead into a vertical list, as well as using punctuation and conjunctions in vertical list items. This technique allows a writer to preserve the flow of prose while taking advantage of the scanability of a vertical list.

This convention has carried over onto the web. The Federal plain language guidelines say it best: "Use parallel construction. Make sure each of the bullets in a list can make a complete sentence if combined with the lead-in sentence."

This may all sound very strange to most copywriters--none of us has had to learn a special style called "lists", not even when we were in college. The fact remains that the vertical list is not a straightforward style. It even has its own set of rules for punctuation.

There's an easy fix, of course. But the best solution would have been to write the whole thing as plain-old paragraphs:

 Original Edited 
Customs duty

This is a tax on goods produced outside the EU and:
  • you don't have to pay it if you're travelling from the EU
  • if you're travelling from outside the EU, you only have to pay it if you go over your allowance.
Customs duty

Customs duty is a tax on goods produced outside the EU. You have to pay customs duty if you are travelling [into the UK] from outside the EU, and you go over the maximum amount allowed.

You do not have to pay customs duty if you are entering the UK from an EU country.

The vertical list as cognitive see-saw

One particularly egregious example of a vertical list is the page on minimum wages. It deserves its own section in this blog entry:


The whole list reads like a series of equivocations. Apprentices qualify for minimum wage BUT it depends on their age and IF they are in their first year of apprenticeship. Workers gaining work experience (don't all workers?) can earn minimum wage but they, by the way, can be unpaid. Workers temporarily working outside UK can earn minimum wage too, but only if they usually work in the UK. (Isn't "temporarily" clear enough?)

Vertical lists can only present one dimension of information. They cannot properly accommodate two dimensions, e.g. an item name and item descriptions. It's obvious that a table would have been better:

Eligible categoriesRemarks
agency workers
apprentices1st year apprentices only; age limit applies
trainees/workers on probation
work experience workerspaid and unpaid
piece-rate workers
commission workers
homeworkersexclude business owners
disabled workersexcludes therapy activities
agricultural workersagricultural minimum wage applies
seafarers & offshore workers
workers temporarily working outside the UK
foreign workers

So why was a vertical list used in the first place? Perhaps it's because tables are notoriously difficult to implement in responsive design. But to avoid tables just because they cannot reflow well on a small screen is no good reason to compromise readability on a bigger screen reader comprehension. Even an undecorated definition list would have been better.

Good design doesn't fix bad copy

You might be wondering: Why am I picking on copy on Isn't the website still in user beta? Isn't criticising copy on a government website, of all things, like... shooting fish in a barrel?

Let me clarify, in case I haven't been clear enough: I think is awesome. The massive information architecture of its predecessor,, was already a marvel. Now, they're going to convert a few thousand pages of text content into responsive design. Hats off to the UK Government Digital Service.

I wrote this entry because it's been suggested to me that is proof that copy on a responsive website is exempt from conventional language rules. That the fragmented style used on the site points the way for English content development for a new generation of mobile-savvy users.

That conclusion... can only be made by someone who hasn't actually tried to use the copy. I did. And I'm glad I'm not a minimum-wage worker in the UK in search of the rules governing my pay.

The true measure of usability is determined by users actually trying to follow instructions on your website, not a bunch of usability experts checking the amount of white space your pages have when viewed on a  smartphone.

I agree with the adage that, on the web, "Users don't read. They scan." But what happens after they are done scanning, when they've found something that's caught their attention?

They read.

Content on large websites is typically buried under verbiage because their owners hide behind the excuse that more text means being more "informative". When the content is as radically reduced as on, the deficiencies of poorly worded copy stand out because there's so much less of it.

Mobile users have notoriously lower tolerance for usage difficulties than desktop computer users. Reducing information workload and having shorter, more concise copy is certainly one step in the right direction for usability.

But it would be a mistake to think that was all there is to it.


Take2_sam said...
This comment has been removed by the author.
Take2_sam said...
This comment has been removed by a blog administrator.