What's the optimal level of detail for a wireframe?

Nevermind how wireframes are defined; how do you know the one you're working on has the appropriate level of detail? What's the best practice for handling written content in a wireframe: should it be represented by squiggly lines, lorem ipsum, or real copy? What about a combination of all three?

My colleague Jay Miles helped me understand wireframe fidelity in a new way: he said, “it’s helpful to think of fidelity as a sliding scale across three different areas: visual fidelity, interaction fidelity, and information fidelity.”

Visual fidelity is the level of polish. Are you showing someone a series of photos of wireframes you drew on a couple napkins, or are you using a digital tool like Balsamiq or Axure to draw perfect shapes that are carefully aligned? There are gains and tradeoffs with both!

Interaction fidelity is how realistic the clicks, taps, drags, and swipes are in your wireframe. Again, if you’re working with analog tools (pen and paper), the boxes and buttons won’t have any response to someone poking and prodding them. The interaction fidelity on a paper wireframe is low. But if you’re using a digital tool like Axure, you can add if/then logic to things like text input fields, which give you really high interaction fidelity.

Information fidelity is how realistic the content and data is in your wireframe. You might draw squiggly lines with a fat sharpie to represent the headline of an article, which would be low fidelity. Or you might use actual headlines that have been or will be published—high fidelity.

So the question then becomes: what’s the right combination of fidelity? What levels of fidelity in those three areas do you need for a successful wireframe? Well, it depends. It depends on:

• Who will see it? Who is the audience for the wireframe? Is it other designers, a customer, the sales team, or the CEO? These audiences will each have varying levels of familiarity with wireframes.
• Will your audience have access to your wireframes after you’ve presented them? Or will you always be there to answer questions and walk folks through what they’re looking at?
• Why are you making this wireframe (what is its job)? Is it to communicate an early idea for a new feature? Is it to recommend a change to an existing experience?
• What’s its intended shelf life? Will you reference it over and over and over, or will you present it once and immediately iterate on it?
  

How you answer each of those questions will impact how you handle fidelity across all three areas: visuals, interactions, and information.

Here’s an example scenario:

I need to show another designer what I believe is an improved experience for buying a t-shirt on our company’s website. I want their opinion on my proposed changes before I continue refining my idea. Here’s what I think would be appropriate levels of fidelity across the three areas:

• Low visual fidelity, because our website already exists and most of the wireframe will reuse existing patterns. I’m not introducing new components, I’m just making tweaks to how folks interact with them at certain stages of the t-shirt buying process. Also, this other designer is already very familiar with the general flow I’m proposing changes to.
• Mid to high interaction fidelity, because the improvements I’m making to the experience are focused on interactions! I want to emphasize these, and to do that I need the designer to clearly see the difference between my proposed interactions and the interactions that exist today.
• I’d go low or mid-level for information fidelity. I might pull some existing data for certain parts of the wireframe, but I can get away with squiggly lines and grey boxes for areas that I don’t need this designer to focus on. Put another way, I’m zeroing in on interactions, so the data around those interactions can be high, but the other stuff isn’t important. I’m also planning to keep refining this idea, and don’t intend to share this wireframe beyond this meeting with the designer, so I don’t want to waste time bringing in high fidelity content.

The most important thing with all of this is that your wireframe is helping you communicate ideas and make decisions about how to move forward. Considering different levels of fidelity across visuals, interactions, and information, will help you maximize the value of your wireframe and save time making it.