Interface design is copywriting

Kind of impossible to separate the skills of interface design and copywriting.

There is a lot to like in the presentation The Language of Interfaces by Des Traynor, in which he makes several important points about Interface Design.

The first is that words mean everything in the interface. Every single word you choose is important, from the call-to-action button to the headline to the words in an error message. Each word, if carefully chosen, adds to the experience of the user, making them more confident and sure that they’re on the right track. When carelessly chosen, each word erodes confidence and adds confusion to an uneven experience.

Good design is not an accident. It’s not something that just happens by someone getting lucky. Sure, once in a while someone stumbles upon a cool core mechanic that happens to work, but to create a solid interface that many people can use and enjoy takes real attention to the details.

The real question is…what are the details that matter? There are many candidates…there is technology and social and gaming and psychology and experience and content and fill in the next buzzword please. Everybody has their hobby horse…in this post I’m sharing mine.

While I’ll be the first to say “Oh…look a shiny new JQuery widget!” I humbly submit that there is no single element more important to your interface than the copywriting. There is nothing that makes or breaks a positive experience more than the simple set of words that you choose to communicate with. In a world in which we have to simplify as much as possible, nothing matters more than the small vocabulary you end up with in your final work.

Traynor resurfaces a great post by Jason Fried in which Fried suggests that Copywriting is Interface Design…I think we should also look at it the other way. Interface Design is Copywriting. Designing an interface is largely an exercise in choosing the right words. When you lay out a page, you’re choosing copy for the headline, subheadline, call-to-action, content area, graphs and analysis areas, error messages. All of these design elements are built out of words. Are you an aspiring wordsmith? I hope so…because you’re choosing some very important words!

The best line in Traynor’s piece is this one:

Nothing says Send Message, like the words “Send Message”.

This simple statement says a lot about the field of Interface Design. So often we don’t think twice about the words we use, and while we want to write like Hemingway we end up writing something that might place 3rd in a regional high school essay contest.

And, by the way, I don’t mean to sit on a soapbox here. This is hard stuff…it’s hard for every designer and developer I know. Choosing words is the hardest part of my job and I get it wrong before I get it right. The first attempt at any design is almost always wrong…it’s only the stubborn people who stick with it, test it, and continually refine who will approach great design.

Here is an example I’ve been using lately at HubSpot because it is so easy to see the importance of words in hindsight. For many years the domain setup screen in HubSpot software used the terminology “Add Domain” as the primary call-to-action. When you get set up with HubSpot you want to point your domain to the HubSpot servers so that your website (now hosted by HubSpot) continues to work.

However, we recently did some user testing and found that the words “Add Domain” stopped people in their tracks. The people using the software in our test said something like “I have to add a domain…where do I add it?” or “I already have a domain…why do I need to add one?”. In their minds they already had a domain…there was no reason to add a new one!

But the software had that CTA for years. Nobody questioned it because the entire team knew what it meant. It is important to note that no amount of introspection would have caught this! But to a user…someone who is transitioning from hosting their website somewhere else to hosting it on HubSpot the words were entirely critical to what was going on.

So…the fix was straight-forward. Change the words from “Add a Domain” to “Connect your Domain”. Note the subtle yet crucial difference that two words make. You’re not adding anything…nothing is new here. Instead, you’re connecting something that already exists…a domain that is YOURS. Easy peasy.

Now, multiply this by 1,000 and you might have an idea of how many places in your web application it is crucial to get your words right. Every single headline, every single call-to-action, every single error message, every single bit of microcopy. All of it. Every word matters.

So if you’re not already, start thinking of yourself as a copywriter. You already are one anyway. 🙂

Published: September 18th, 2011