<img class=”alignright” title=”Pen” src=”/images/0810/pen.jpg” alt="” width=”200” height=”134” />When we talk about usability, we generally refer to the user interface (UI) – the layout of buttons, labels, tabs and so on. But there is one other element that should not be ignored as it alone can waste all the hard work you’ve put into crafting a beautiful UI. Copy.
Copy is a term used to refer to the text on your website. It covers many different types of text, from marketing blurbs to articles. In this post I’ll talk about the copy you use to direct and inform visitors around your site – things like directions on how to download files, how to subscribe to your feeds, what the site is about and so on. Informational copy.
So how does copy impact usability? To answer this, let me first illustrate how people generally browse the web. It’s chaotic. We don’t tend to read everything that’s on a particular page. Instead, we scan the page very quickly, dashing from one point to another, trying to find what we’re looking for. Here’s an illustration of what someone’s attention path may look like – the red line and dots show various attention spots and where the gaze of the visitor moves:
<img class=”alignnone” title=”Chaos” src=”/images/0810/chaos.jpg” alt="” width=”490” height=”302” />
This all happens very quickly. Within a few seconds we’ve scanned the page, looking for things of interest.
The greatest problem that can happen to copy is length. It’s very easy to write too much, especially when we know what we’re talking about. It’s easy to think that by adding more information we’re making things clearer for our visitors. That may be true if they actually read it all – but they don’t.
Your visitors are scanning madly for little pieces of information, and the majority of them don’t have the patience to read paragraphs of text – sometimes not even a sentence of text. You must provide very short and concise focus points for each bit of vital information on your page. These focus points should do two things: grab your visitors’ attention and call to action.
Let’s see a real example. Here’s the content area of the home page of MacPorts, a Mac tool that helps you install various open source software:
<img class=”alignnone” title=”MacPorts home page” src=”/images/0810/macports_old.png” alt="” width=”490” height=”422” />
That’s a lot of text. Nobody is going to read all that – and if they do, they won’t be too happy about it. I’m guessing the majority of people who arrive at this landing page will want to actually download MacPorts, but the installation link is buried deep in the text. What’s more, about 80% of this copy can be cut without losing any information value. Here’s my quick redesign:
<img class=”alignnone” title=”MacPorts homepage redesigned” src=”/images/0810/macports_new.png” alt="” width=”490” height=”363” />
It’s not perfect, but I think it’s a big improvement. If I had more time I’d redesign it a little more, and rewrite the top and bottom sections, but the most important area has been modified – how to get started. Bullet points, concise labels, larger fonts and calls to action all help make the page scannable. People can see what links are available, and find the ones they’re looking for quickly, without having to read much text.
Usable copy must be succinct and concise. Use larger font sizes to grab attention. Give clear next action directions in as few words as possible and never dwell on the details. Most important – cut out any words and sentences that add no real value.
Be brutal. You may think the copy is short enough, but you’re the one who wrote it – you know everything it says. The visitor won’t, and to find out they’ll have to read it. But they’re not here to read – they’re here to do something, so save their time and attention by making things super easy to scan and find.