Thursday, April 09, 2009

Write Your Design

When you’re considering a new or refreshed website, it can be tempting to think about design first. It’s natural: we want to appear attractive to our audiences, and generally we have very definite ideas of what this looks like. So often website design takes up a lot of energy, time, and resources at the beginning, and sometimes it leaves little left over for other elements of the website. Like copy.

Don’t get us wrong ... we love great design and see it as a major source of competitive advantage. But copy is king on the web. Copy is content, and content is what everyone is looking for. We are looking for relevant information we need now presented in a logical way that respects that we have no time.

What are the implications of this?

Don’t

• Don’t get fixated on design at the expense of content.
• Don’t leave content to the last minute.
• Don’t think flashy design will make up for sloppy or lackluster content.
• Don’t think copy you write on paper translates seamlessly to a website: different mediums need different approaches.

Do

• Do see design and content as inextricably, happily linked.
• Do see design as having a priority: to support content effectively.
• Do work on content preferably before or at least at the same time as design. At the recent Mesh 2009 conference, 37signals’ Ryan Singer put it this way: “Interface design is 90% copywriting ... good writing is good design.”
• Do place your copy strategically according to the way users navigate text on sites.

To this last point, eyetracking studies provide important clues as to how to match copy and design to users’ behaviours. The study Eyetrack III (conducted by The Poynter Institute, the Estlow Center for Journalism and New Media, and Eyetools Inc.) “observed 46 people for one hour as their eyes followed mock news websites and real multimedia content.”

Some of the most significant findings from Eyetrack III for web designers and anyone with a website are:

• Users’ eyes are attracted to text, not graphics “both in order viewed and in overall time spent looking at it.”
• Users look first at the upper portion of a webpage—left first, then right—and give less attention to the lower portions of a page. So make sure you reference your most important messages up top, probably through headlines and subheads.
• Large type promotes scanning, while smaller type promotes more focused reading. Both are important behaviours, so it’s up to you to decide which text you’d like readers to scan (e.g., to decide what they’d like to read further) and which you’d like them to zero in on.
• Users tend to look only at the first few words of headlines. Make sure those first few words are good and catchy.
• Navigation bars placed at the top of a page performed better than navigation placed elsewhere.
• Short paragraphs perform much better than longer ones in terms of users’ focusing on them.
• Ads placed on the top-left, bigger ads, and ads placed close to editorial have the greatest chance of making an impression.
• Big images, especially those with people’s faces in them, attract the most attention.

Findings like these underline the importance of marrying copywriting and design for websites. In fact, separating the two given this sort of information seems counterproductive. This is well illustrated by a passage from 37signals’ book Getting Real (p. 110):

Do you label a button Submit or Save or Update or New or Create? That’s copywriting. Do you write three sentences or five? Do you explain with general examples or with details? Do you label content New or Updated or Recently Updated or Modified? Is it There are new messages: 5 or There are 5 new messages or is it 5 or five or messages or posts? All of this matters.

For more on writing good website copy, see our post “Writing Web Copy that Gets Read.”