Why you should write your interface first

This is an excerpt from Making a Product Designer, an InVision e-course by Scott Hurff.

Imagine if you’d witnessed the birth of the Macintosh project in 1979. Disco. Bell bottoms. Anticipation for The Empire Strikes Back.

But in a dingy office in Cupertino, you’d have seen the implementation of the first commercial graphical user interface. The invention of the one-button mouse. The creation of some of the most essential, foundational apps in computing.

But, even more powerfully, you’d have been exposed to the idea that the computer could be something used by regular people and not just scientists or engineers.

This was a huge step in thinking at the time. Computers are business machines, went the conventional thinking at the time.

Not only was Jef Raskin there, but he started the Macintosh project at Apple. Seeing that the Apple II was still too complex for everyday use, he believed that the computer could be as easy to use as a home appliance.

So Jef decided to define the guiding principles of what a so-called easy-to-use computer should be. And in his book The Humane Interface, he revisited and refined his ideas about human-computer interfaces.

Jef believed that the success of a product’s interface was dependent upon how well the designer understood 2 parties: the human using it, and the capabilities of the machine on which the software ran.

One of his core beliefs was that a designer should start designing the UI with…

…copy.

The place to start the implementation is to list exactly what the user will do to achieve his or her goals and how the system will respond to each user action.

In other words, a product’s interface begins with a list of how a customer will move through your product and what they’ll see along the way.

Yes, the guy who started the Macintosh project also started the trend of writing out one’s interface first.

Why?

Because starting with copy focuses you on the customer and the dream product you’re creating for them. You’re not worried about which font you should use, the border radius on your dialogs, or the interaction convention of the week.

But a lot of us get this backwards. We get sucked into the dopamine rush of inventing novel interactions and layouts, worried too much about impressing our peers in the product design community.

By doing so, we risk becoming more artist than problem solver.

There’s obviously a place for beauty in a product. Aesthetics are known to build trust, understanding, and comfort amongst customers. But aesthetics aren’t the first thing that we as product designers should tackle.

In an interview I conducted with Jon Troutman for my upcoming book How Product Designers Work, Jon told me about how he uses this exact process to begin all of his design work.

And it starts in the unlikeliest of places: TextEdit.

“I like to start in TextEdit as a content inventory canvas, where I start to type things out that I know are going to be on the page or in the app,” said Troutman.

Writing out your interface first forces your app’s content to be well-written. There’s no filler content, no lorem ipsum, and no copy created solely because the design needs a gap to be filled.

Troutman will then turn these words into rough HTML prototypes that can be clicked through. It’s a quick-and-dirty way to test if a flow feels right.

Jason Zimdars, a designer at Basecamp, uses a similar method. “UI design starts with words,” he wrote. “Writing first makes me treat UI as a conversation. How would I tell a friend what they can do here and how?”

The traits of good interface copywriting

Here’s the beauty of starting your design with words: it can help you set the tone of your product—especially if you’ve researched your audience as we discussed in the previous lesson.

These early words are the foundation on which the walls of your interface will be built. So they’d better be good. Here are 3 broad principles that you can use to make sure your copywriting starts off on the right foot… er, key?

Who’s the audience?

Who’s using your product? How comfortable they are with your product on any given screen? Are they just now being introduced to your product’s capabilities, or are they veteran customers? Have they paid for anything yet, or are they on a free plan?

Use the jargon you found while researching your customers to ingratiate yourself with them. What words and terminology will be most recognizable?

But don’t mistake your customer’s jargon for your own. Internal terms—like project nicknames, error codes, acronyms, inside jokes, or placeholder copy—have no place in your product’s interface. Your job is to make it make sense for your audience, not for you.

In what tone is it written?

Good interface copywriting isn’t overly technical, vague, or laden with branded or internal buzzwords. It’s helpful and forgiving, and it’s aware of when it’s delivering good or bad news.

So take the opportunity to speak to the people who are using it, and in what mindset they’ll be.

Is your product for stock brokers? Teenage girls? Book authors? Eco-conscious mothers? The tone in which you write should be conscious of this. Humor, seriousness, playfulness, precision, and other tones each have their place.

The ultimate tone to strike, though, is that your product is capable of fulfilling its promise—that it can be relied upon to do the job it said it can do.

What’s the context?

Is it a landing page? A signup form? Settings? The first time a customer sees a screen? Your shipping policy? In response to something on which they explicitly took action?

Good interface copywriting takes into account where a customer is reading. And it helps them to decide action they should take next, if any. Most of the time an interface is presenting information to a person so they can make a decision. Be as clear as possible about which decision might be best for your customer in this context.

Effective interface copywriting also takes into account the limitations of the context. For example, if you’re sending information via text message, you should be courteous and write your message in less than or equal to 160 characters.

Be the newspaper editor you’ve always wanted to be

The best way I’ve heard the copywriting process described is to act like a newspaper editor. You’re trying to create short, direct, easily-absorbed text that succinctly describes a situation. The goal is to make it quickly absorbed without any effort so your customer knows what to do next.