Get in touch.

Thanks for reaching out! I'll be in touch soon.
Yikes! Looks like the form is busted. Check back later, or try getting in touch with me on twitter

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

Alice threw this one into the void on
March 4, 2021
The definition of wireframe may change depending on who you ask, or what sites you visit after googing “what is a wireframe?” Some folks describe wireframes as being strictly rectangles and squiggly lines drawn on paper, others might count something like a clickable Axure prototype as a wireframe. These different definitions of what is and isn’t a wireframe make it hard to know if what you’re making is the right level of fidelity 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:

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:

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.

Interested in more?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.