I do internet sometimes.

Copywriting for the web is not easy – that’s why there are smart and talented people who get paid to take care of this important and delicate aspect of communication. But not every design/development shop/department is staffed with these sorts of people. I’m no professional when it comes to any kind of writing, but I think one of my pet peeves from the perspective of a user can serve as good advice for do-it-yourself copywriters.

Here’s my non-professional advice

Don’t include the visual location of elements of your layout in your copy text.

If someone can’t find the button you want them to click, then that’s a usability problem. As a general rule of thumb: if you feel you need to add instructions, maybe you should re-think the design. Users want to feel powerful – like they know what to do. They want to feel smart – when you walk them though every step, that does not make them feel smart. But that’s beside the point. Back to referring to layout in your copy.

One of the main reasons that you should avoid referring to your layout in your copy is that the layout won’t stay the same forever. Hopefully there are people managing the website who want to continue making it better – if they’re making it better, there’s a chance that they’re going to change the layout. If you’ve got instructions that refer to the old layout, then the user experience for those that need the instructions can be rather annoying and sometimes confusing. You could update the directions to refer to the new layout, but do you want to do that every time? Why not make it so easy that you don’t need any instructions at all?

Example 1 – a personal blog

I saw one example on a personal blog. I can’t find the link at the moment, but the text read something like “To see the blogs that I like, check out the blogroll in the right sidebar.”

Problems

1. the site had been redesigned since that had been written, and the blogroll was actually on the left.
2. I’m not sure that the body of the page is the best place to describe what your blogroll is. If you don’t think your audience is going to know what “blogroll” means, then maybe you could instead
   • Include that statement in the same area as the links to other blogs (proximity)
   • Change the label “blogroll” to something else that’s more easy to understand.

Example 2 – a calendar on a computer training website

This website sells training in programming-related topics. Since I’m seeking training for work, and the site was recommended by a colleague, my expectation was that the site would be really professional. This bit of copy really didn’t make a very good impression on me. (I had intended to go get a screengrab to demonstrate the layout, but when I tried the link today it had an error 500 and I couldn’t access it!) Anyway, the copy went like this:

“We also provide course calendar information in the form of an RSS feed. This feed allows you to create a bookmark in some browsers, that is dynamically updated with our latest course calendar. If you are using a browser, such as Firefox, that supports this feature, click on the RSS button at the bottom of your browser window to add a “live” bookmark to our calendar.”

— http://www.otg-nc.com/training-course-calendar/

Problems

1. Browsers change. The most recent version of Firefox actually displays the RSS icon in the address bar, and Opera displays an icon there but doesn’t offer live bookmarks. Chrome doesn’t offer this feature, and I refuse to open IE to see what it does.
2. It seems rather noble to provide such instructions – you’re educating them! But it also hints that live bookmarks are the only way or the best way to use an RSS feed – we’re not getting the whole story here.
3. It doesn’t seem like the target customers of the site will actually need these instructions.

Example 3 – Dryad data

I was curious about this dryad site – I followed a link from somewhere else so I was clicking around in the informational pages. Including explicit instructions here seemed appropriate, but the text read:

“The best way to find data in Dryad is to search, using the search box at the top left of the page.”

– http://www.datadryad.org/using

Hmmm. I see a search box in the top right of the page. I think this could have been communicated just as clearly without referring to the visual location of the search box.

What if I don’t have a top-left corner on my page?

I’m a sighted user, but I know not all users are. How does referring to the visual location of an element in your instructional copy further confuse and waste the time of a user browsing the web using a screen reader, or using an alternate layout to zoom the text?

My two cents

Don’t refer to areas of your layout in your site copy. If you feel like you have to include instructions (especially for end-users), there’s probably a larger problem that you’re trying to band-aid. You should fix the problem instead of covering it over with words. Referring to the visual location of something leaves you with copy that’s out of date if you ever change the layout, and it doesn’t work if your users are browsing with a screenreader or another method that displays your page differently than you see it.