Wireframe Fidelity: How Low Can You Go?

If there were one "silver bullet" piece of advice for an aspiring user interface (UX) designer, it would be to keep interface planning as low fidelity as possible. Too often an interface designer wants to jump into the full design. This approach, however, usually results in numerous time-consuming revisions, which cost the designer time and the client a missed schedule. Far worse, however, is the end-user — their needs, goal, and expectations were not met because the designer was too focused on the "fun" part of web design — typography, color, gradients, icons, and imagery.

Consider this: are you able to understand the goals and objectives of the following mock-up with only a quick glance?

Probably not. The first thing you probably did, without any intention, was look at the sections of the page design that were most colorful. In this case, the blue parts. Don't be ashamed — this is instinctual and expected!

Now imagine you were a project stakeholder seeing the design for the first time. You would become focused on color and icon selection instead of what truly mattered — does the interface support the end-user's needs and your business goals? Does the layout provide proper prominence for key tasks? Does the copy provide process feedback that is helpful and clear?

Low Fidelity Sketches

This is where low fidelity design comes in. At Sherpa!, we start with basic pen and paper (or, in order to collaborate, marker and whiteboard). Statement of Work or Requirements Document in hand, we meet with the client and walk-through the goal of each screen, or "view", one-by-one. At the top of each view we list the few main goals for that screen — its raison d'etre to be overly dramatic.

Often at this point the client starts asking what the design will look like. We push back and ask them to list what things they want to see on the screen — fields, buttons, navigation, and nomenclature. The end result is not very sexy or complex, as you can tell by the photo above.

Low Fidelity Wireframes

Next, we take our notes and begin wireframing the views. Our wireframing tool of choice is Balsamiq, a rapid wireframing tool. We like it because its cartoonish, inexact lines, grids, icons and buttons reproduce the experience of sketching on a whiteboard. But because it's digital it's easy to iterate and share. Our clients like it because they don't get distracted or confused with details of design or layout; they focus on the view's goals.

We talk-through the wireframes with the clients, discussing possible interaction points and animations. We can also "link" views together by linking buttons, images, and text links in a clickable PDF.

Moving On Up to High Fidelity Designs

Once we get iterate and get final approval on the wireframes, we are ready for the mock-ups.

Take another look at the original mock-up we showed you earlier. Now what do you see?