Axes of Fidelity

I’ve been trotting out this idea frequently over the past year when students have questions about making medium- or mid-fidelity wifeframes. Many new designers seem fairly comfortable with sketching early on, but as soon as a digital tool is being used, the thirst to make it look like a finished design becomes difficult to ignore.

In an effort to help, I bring up this notion that I like to call “axes of fidelity”. The axes I talk about are the different components of a design, or the pieces that decisions ultimately need to be made about. I start off usually with only a few: copy, images, and color; to which you could add type, interaction, motion/animation, and others. Each axis has its own scale. Color fidelity is relatively easy to tease out first: at the lowest level of fidelity we are working with black and white, grayscale introduces a medium-level, and full color is high color fidelity.

Copy fidelity (or content fidelity if you prefer, but I usually want to distinguish between written content and image content) is perhaps less immediately obvious. When we are sketching, we may represent words, phrases, or blocks of text with squiggly lines or straight lines, and we may occasionally throw in an actual word if it’s an action on a button. This is all a fairly low level of copy fidelity. Using placeholder text in a digital wireframe or mockup is probably a little higher fidelity than the lines used in sketches, but not by much. We start to have a sense for how much space text may occupy, how many words may roughly be given room—to a slightly better degree than we can judge with squiggles. I usually contend that a medium-level of copy fidelity begins to replace copy on interface elements like buttons and navigation with actual words, and more prominent text with descriptive placeholders, like “Article Title Goes Here”. A higher level of fidelity than this would replace more of the copy with example or test copy. And the highest level is reserved for final copy, which may only ever appear in the final product.

A similar thought process can be easily applied to images (boxes, placeholders, representative images, final images); type (handwritten, “neutral” font, branded type); interaction (illustrated with annotations and/or arrows, manually switching between printouts, digital clickable prototypes, coded front-ends); and motion (illustrated with annotations and/or arrows, manually demonstrated with paper, basic full-screen animations using digital prototyping tools, component-level animations, etc.).

When we break down fidelity in this way it becomes easier to acknowledge that we’ve implicitly made some choices about what sorts of fidelity we want to be higher, and which can be lower. Spending time advancing one area typically comes at the expense of another. If we focus first on type and color, that often comes at the expense of copy and interaction. Expose that choice, and we can be more deliberate in where we place our efforts first.