What Role Does Copy Play in Your Wireframes?

February 10, 2011

Conveying your intended meaning in wireframe presentations is just plain hard. One of the obstacles we talked about last week was that wireframes force your team to envision a final solution from an abstraction.

Because wireframes are sans graphic design, copy can be the most tangible element available for people to hook their understanding on. The words in your wireframes inform and influence.

Let’s look at a specific example of how differences in copy can guide assumptions with a small, straightforward interface element: an email newsletter signup.

Label in lieu of copy

This low fidelity wireframe doesn’t include any copy, but it does mark out room in the visual design for this element and provide a label.

Here are some assumptions your audience might have based on this mockup:

There will be a box on the home page that relates to the email newsletter. It will be wider than it is long.
It might be contain a text field and a submit button, or possibly a graphical internal ad that links to a page with more information, or maybe it just reveals a form on this page.
There probably won’t be much copy since it’s just an email signup and the box is relatively small.

Filler or canned copy

Another option for the type of copy included in the wireframes is filler text like Lorem Ipsum or possibly some generic copy. The amount depends on the expected length of the final copy.

Let’s think about the assumptions that your clients or team might make here:

There will be a signup form that can be filled out on the home page. It will be wider than it is long.
It will have a submit button and one line of description, possibly something like “Sign up for our email newsletter.”
This seems pretty straightforward. Let’s move on.

Wait, not so fast! Let’s stop and examine this more closely with some critical questions:

Does the size of this area and its location on the page convey its importance?
Does this label resemble the final copy? Where did it come from? Does it match the tone of the site? Does it provide enough meaning to help site visitors decide if they should sign up?
Should this field have any copy preloaded that would disappear on click?
Is “Submit” the right copy for this button? Does it convey the action that will happen on click? What happens after this button is clicked?
Does there need to be more context? What questions will the site visitors want answered before they commit to signup? Is this email list very popular or is it more obscure?

High Fidelity Copy

Let’s say you asked those questions and found that:

the benefits of the email newsletter weren’t clear to visitors
the newsletters are high quality and valuable but there hasn’t been any effort to demonstrate this
the tone of the header and button need to be less formal to match other site copy
the company creates valuable content on Facebook, twitter, and their blog that could reinforce the perception of quality

With that information in hand, and ideally a content strategist at your side, you might modify the newsletter area to look something like this:

You can see in this last example that the wireframe, design, and consequent development changed significantly because of the more refined copy. It’s easier for everyone to envision the final product, verbalize their assumptions further through dialogue, and offer meaningful feedback.

It’s not reasonable to assume that for every project you will be able to work closely with a content strategist or have all the content you need from your client during the wireframing process. It’s also not true that high fidelity wireframes are the best for every stage of your work. Just strive to think critically about the assumptions that might be created from the copy in each document you present. The result from this awareness is always a better end product and a happier team!