What Role Does Copy Play in Your Wireframes?

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

Low fidelity signup image consisting of a box with a label

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

Email newsletter signup wireframe with lorem ipsum

Email newsletter wireframe with 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:

Same as previous wireframe, but with numbers to indicate problem areas

  1. Does the size of this area and its location on the page convey its importance?
  2. 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?
  3. Should this field have any copy preloaded that would disappear on click?
  4. 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?
  5. 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:

Example wireframe with high fidelity copy

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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Login

    The final wireframe example isn’t showing up.

  • http://twitter.com/nathj07 Nathan Davies

    Good comments and advice. The key is in the last 2 sentences:
    “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!”

    Thanks for the tips and pointers

  • http://palimadra.tumblr.com Pali Madra

    Good and thought provoking post.

    The question I would have is that how much time should you spend on wireframing as compared to the total time for the project. I mean if you critically examine each part of the wireframe then it can become a long process which would not be appreciated by everyone.

    Having said I agree with Emily that more thought needs to be applied when building wireframes and wireframes should not be created for the sake of it.

  • http://twitter.com/emilysmith Emily Smith

    @Nathan Thanks! You’re right, the whole post can be framed by those last 2 sentences.

    @Pali Great question. It varies for every project and team, but we probably spend an average of 10-15% of the project on research and forming a strategy and another 10-15% for wireframing. That being said, any percentage helps!

  • http://www.milkbottleproductions.com Lou Pardi

    Great post!

    From a content making perspective – it’s always amazing to meet the design and SEO (and marketing and PR) team members as early as possible in the process so we’re all on the same page. Even if content strategists don’t have a lot of input into details of the wireframe – having the same understanding of the project from the beginning can save a lot of edits down the track for everyone.