Wireframe Fidelity

Often when creating wireframes for projects I have to stop and ask myself or my team just how detailed should the wireframes be? In some cases it’s important to get very granular in regards to behavior and interaction. In other instances I want to empower the graphical designer to have as much freedom as possible. Also there are times when rapid prototyping is in order and I work closely with a developer to start creating the building blocks of the interaction.

I’ve created a simple breakdown of three types of wireframe that have worked well for me in most situations.

  • · Low Fi
  • · Medium Fi
  • · HiFi


Low Fidelity

Low Fidelity is created using XHTML the real strength here is in the mark-up itself. There are a lot of advantages to properly marking up your elements to help streamline the understanding of visible elements. I end up using the code as a place to store meta information about the content itself. When rendered I like to keep everything in a top to bottom listed format. Here is a basic example of a low fidelity.

Low Fi Source Code Example Low Fi Rendered Example

I’ve found using a low fidelity wireframe to work very well when I’m either working with a developer in a agile development environment or when I’m working with a strong design that I want to offer them the most flexibility. It doesn’t work well when trying to present ideas around inline user interaction. Sometimes the wireframes can become very long and some of the minor changes go un-noticed if they are far below the fold. In the cases it can be helpful to break out functionality in to smaller lowfi templates where just a specific element is contained. So as an example I have a web page that I would like to show the desired log-in process. Let say the page is very heavy already so instead of offering up the entire page every time a simple component could be broken out separately. Then just the log-in / log out process could be handled on its own.

In fact in all the cases of low, surgeon
medium and high I try to always approach the wireframe process with a modular solution. It makes for easy updates and changes and also helps with distributing activities to a larger team.

The Medium Fidelity Wireframe

mediumFiI believe this is the classic interpretation of the wireframe, doctor
simple black & white boxes with labels. Throughout my experience this is an effective way to portray information to all the stakeholders involved. Something is nice about medium fidelity is the ability whiteboard or sketch the concepts quickly in various mediums. The challenge is when you start putting too much time in to a medium fidelity wireframe effort. It’s hard to know when a simple pencil sketch is actually a better solution then trying to recreate the sketch in Visio, physiotherapist
Illustrator or whichever tool you choose. In fact that’s another article that I will have to write about soon. There are a lot of ways to do the same thing with many different tools, but some do a much better job than others. Before I get too far off topic, let’s get back to the medium fidelity wireframe. When is it best to use it? When you really need to show how the information is visually arranged to help tell the story. Sometimes a list of all the elements isn’t going to be the strongest way to showcase the concepts. However that being said this is still an effective way to not get too busy and get in the way of the overall goal which is to be a simple representation of what your website or application could look like. 

When it comes to a new client or team I always explain that the wireframe is just an example of how it could be. It’s a straw man of sorts to get the discussions going around how the experience might look and feel.

One of my favorite parts of the medium fidelity wireframe is the ability to show more or less detail when necessary. For example, if I’m attempting to show the behavior of some inline graph elements I can mock them up with a little more detail and turn down the details of the rest of the elements to just boxes with labels.

The High Fidelity Wireframe

clip_image001This is when you need to tell the whole story. It’s very close to creating the actual look & feel of the final deliverables being created. In fact you should be able to create a site or application using these wireframes. This level of wireframe is much more closely aligned with something created by the interaction designer. The big difference here is that it’s still just a static representation. The interaction designer or developer would be responsible for creating the functionality in place.

Wireframe Annotation

In all the cases above there is a solution that I have found for proper annotation of the wireframes. I think this is the challenge of any user experience architect or designer. How much time should you spend describing the visual elements? It does depend on your working relationship with the whole team. In cases where I’m handing of the wireframes as a final product I’m also sure to include the most amount of information possible. Even in cases where I’m working with a small team who is responsible for the end to end solution, I still make sure to write up as much as possible. In many cases features get bumped and some ideas get saved for later. I’ve always found this to be the best way to keep track of that information.

So how do you decide which way to go? Well, I wish there was a simple formula for this, but really it’s just a gut thing. In most cased you can start low and move to medium and them move to high without throwing any work away.

Let me know if this was helpful


One Response to “Wireframe Fidelity”

  1. […] and can be in either of two main guises: low fidelity or high fidelity. (Some even distinguish three types, including medium fidelity wireframes.) Knowing which fidelity to employ is of crucial importance […]

Leave a Reply