97 Things Every UX Practitioner Should Know

Chapter 18. When Prototyping, Consider Both Visual Fidelity and Functional Fidelity

Chris Callaghan

Most UX design tools focus on visual elements such as typography, graphics, motion, and CSS handoff. Although many tools promise prototyping, few actually provide the features needed to adequately architect inputs, outputs, stateful components, or conditional elements. For example, many “UX design” tools don’t provide the features to create a working form field, a core element of many experiences.

The promise of prototyping is broken, and designers are left without the necessary tools to explore and communicate the fundamental behaviors of user interfaces. This results in an interaction design blind spot.

I once encountered a perfect example of this blind spot as I prepared a usability study for an ecommerce client. My client wanted to test a new checkout their agency had designed. As you’d expect from a checkout, there were many key experiences, such as sign-up journeys, basket management, delivery selections, payment details, and order summaries.

The agency told me they’d provide a “high fidelity” prototype for me to usability test. Timeframes were tight, and as the study date drew near, I became increasingly concerned that the prototype had not yet been shared with me. But at the last minute, the agency delivered it.

However, there was a problem. Though the prototype was high ...