Have you ever spent time putting together a low fidelity wireframe only to find the rough design doesn’t hold up as you add fidelity? In some cases, the integrity of the design crumbles and you are forced to drop back into rough design. Of course, even this clumsy method is more efficient than starting with high fidelity, where changes are costly.
I’ve been in that boat, and it’s frustrating. Not only do unknown constraints offer an invalid picture of the future, the client must have an extraordinary amount of trust in the designer to bridge the rough wireframes to high fidelity interfaces.
I’ve tried style tiles a handful of times, and I’ve found clients get lost in the missing details. The level of fidelity paints a clear picture of the future, but the interface doesn’t support that same level of fidelity. The client has a hard time separating visual fidelity from functional fidelity, and the mismatch causes confusion.
Our job is to eliminate confusion.
I’ve been tackling this problem with a 4 step process that identifies constraints and complexity early, while laying foundational building blocks for production-ready artifacts.
Step 1 – Conceptual Wireframes
Conceptual wireframes are the lowest fidelity wireframes. Create these with pen and paper or a whiteboard. Conceptual wireframes communicate how content and functionality relate to one another in an interface. Keep these light-weight and easy to iterate on. Quite often you can co-create with the client at this level. Co-creation eliminates mystery and begins to build trust between the designer and the client.
Step 2 – Information Wireframes
Information wireframes discover constraints that real data puts on a design. These capture all of the nuances of the data and how they affect the density, utility and affordance within an interface. This is a critical step in converging towards a production ready artifact, and a natural progression of the conceptual wireframe.
It’s important to note this is where fidelity begins to weigh on production. In this step, context informs aspects of type, contrast and size. Consider what production will look and feel like minus color, texture and pattern.
I spent many years trying to make the leap from rough wireframes to high fidelity interfaces with varying degrees of success. Success often came not because of the process, but because clients weren’t engaged (which hardly feels like success) or displayed a blind trust.
A solid information wireframe is structurally sound, to the point a team can begin building the interface for the appropriate device.
Step 3 – Interaction wireframes
Interaction wireframes account for how the application will respond to the user over time and through input. Communicate this aspect to the client for two reasons. First, an off-canvas menu is a vastly different experience than that of a drop-down. The affordance in the interface may not indicate what the intent is, and failing to visualize it creates opportunity for misunderstanding. Second, interactions are critical elements in the user experience and should be budgeted accordingly. I’ve watched many unexpressed interactions get cut in production because they weren’t budgeted for, resulting in a drastically different experience.
Step 4 – High fidelity Interfaces
High fidelity interfaces are straight forward at this point. While you will spend time and care in this stage, much of the critical thinking has already taken place. There are no big jumps between the information and interaction wireframes to the high fidelity interfaces. Not only is this easier on the designer, it’s also easier on the client, as they have witnessed a natural transition from one level of fidelity to the next.
Although this may not be true bio-mimicry, we find building a structure from the inside out all around us in nature. I liken conceptual wireframes to the skeletal structure of an animal. Based on this structure we have a sense of the animal’s size, if it has a tail, and how many legs it has. The information and interaction wireframes are like the muscles and organs. We’re able to see if this animal is thin or stocky, and if it thrives in water or on land. The high fidelity interfaces equate to the skin of the animal showing if it has feathers, scales or fur. When combined, these layers create a healthy, robust animal ready to function in its natural environment.
If you find yourself frustrated when full, rich interfaces break the structure of low fidelity wireframes, give this approach a try. If you’re using something entirely different with great success, please share!
