By prototype in the field of data-driven UX design, we mean a fast and simulated implementation of the solution idea.
We agree with all approaches that do not necessarily require an executable version but rather have the goal of mapping the interaction between the user and the product as quickly and simply as possible.
Depending on your approach, your prototype can be anything from a block model to a cardboard model, a drawing, a video, or a digital prototype you made yourself. Once you decide to work with a prototype, you must determine beforehand what you’re building a prototype for. Depending on the goal, you’ll need to fulfill different requirements for the prototype, and the effort required to create it will change.
Therefore, an essential step is to think about the goal in advance. In this section, we’ll explore the different types of prototypes—and then return to our discussion of the goal.
Horizontal and Vertical Prototypes
In general, you can distinguish between two kinds of prototypes: horizontal and vertical. Horizontal prototypes present the solution in its full breadth; that is, they show the possible range of functions without defining the individual interaction paths. They go into the breadth—the horizontal—but not the depth. An example of this could be a home page on a website where the complete navigation menu is there with all the entries, but none are clickable, as shown in this figure.
The opposite of this are vertical prototypes, which usually do not provide an overview of the solution, but make a specific workflow testable instead. Following a particular workflow, these prototypes go deep (i.e., vertical). The breadth of the solution is neglected.
An example could be the same start page, which until now has only placeholder texts (LOREM IPSUM), except for one link. However, when you click on that link, you experience the entire interaction to completion instead, as shown below.
Of course, you can also combine both variants. However, if you build a completely defined prototype that describes every step in terms of both breadth and depth, you might be spending too much time on the prototype.
High- and Low-Fidelity Prototypes
Whether you have invested too much time in a prototype also depends on how much effort it took to create the prototype. In this context, too, different types of prototypes can be distinguished: low-fidelity prototypes and high-fidelity prototypes. They differ in the level of detail in the design and the options already built in. Note that “fidelity” is not a yes/no question, but exists on a scale. Some prototypes will fall in the middle range. But what does that mean exactly?
A low-fidelity prototype is exclusively about making the interaction and mode of action clear. Hand drawings, modeling clay, simple pieces of paper, or other gadgets can be used for this purpose, as shown below.
Low-fidelity prototypes can usually be produced extremely quickly and cost little money, which makes them ideal for getting a first impression of the quality of the solution. In addition, their rustic appearance ensures that the evaluation focuses on the solution and the interaction and does not drift too quickly into the visuals: Every evaluating person looking at a low-fidelity prototype can clearly see that this is not the final product. This clarity is a huge advantage when you want to talk about the interaction and the mode of action—and not yet about the visuals.
Moreover, all too often, hours, days, and weeks are invested in tweaking the look of the wrong product. We always start with low-fidelity prototypes such as wireframes and screen flows before moving on to high-fidelity prototypes.
High-fidelity prototypes are based on the appearance of the finished product. It may even be the case that a skillfully made prototype is indistinguishable from the finished product, as shown in this figure.
A high-fidelity prototype is where the mode of action, the interaction, and the design meet. The advantages are obvious: With high-fidelity prototypes, you can evaluate all aspects of a design without actually having implemented the solution. On the other hand, high-fidelity prototypes take much longer to produce and are usually more cost-intensive, so they are only useful in some instances.
Which Prototype Should Be Used and When?
Before we create a prototype, a goal must be defined. Based on this goal, the choice of the prototype usually results relatively directly.
For example, if a specific workflow is to be tested with users in user research, we need a vertical prototype that maps the workflow. If we want to fundamentally test whether the solution is going in the right direction, then a horizontal prototype is a good choice. This combination is also often used in user tests. You start in a horizontal area (e.g., with a start page or a dashboard) for the overview and then go vertically deeper into a workflow with the users.
The choice according to fidelity is also based on the goal. We use high-fidelity prototypes, for example, when the prototype is used for advertising purposes—in other words, when internal or external stakeholders need to be convinced of a product. In this context, technical aspects often play a much smaller role than the UX of the decision-makers, which is why the effort is worthwhile (also, the effort is still far less than developing the final product). Another example could be a trade show, where you want to show something about the future product to collect customer feedback.
For our projects, however, low-fidelity prototypes in which particular areas are visually designed are often sufficient. We use the low-fidelity prototypes for feedback on the idea and the interaction; we then use the designed area to gather feedback on the visual appearance. In this way, we achieve a perfect balance between feedback on the interaction concept of the application and the visual appearance and UX. Furthermore, this approach is faster and more cost-efficient than a “full” high-fidelity prototype.
For a better understanding, you can map the different prototype types in a 4-field matrix, as shown in this figure.
On one matrix axis, you have the fidelity of the prototypes, and on the other axis, you have their alignment. You don’t need to fill in this matrix completely, but you can use the matrix to think in advance about what kind of prototype you need. This consideration will help you invest only the effort required for your endeavor.
Editor’s note: This post has been adapted from a section of the book Usability and User Experience Design: The Comprehensive Guide to Data-Driven UX Design by Benjamin Franz and Michaela Kauer-Franz. Benjamin received his doctorate in engineering; his UX-related dissertation on highly automated driving was awarded the Walter Rohmert Research Prize. In his jointly founded and managed company, Custom Interactions, he focuses on user interface design. He also works as a lecturer and a keynote speaker. Michaela has a doctorate in psychology with a focus on product design and user experience. Together with Benjamin Franz, she founded the data-driven UX agency Custom Interactions, which they manage together. She also contributes her extensive experience as a trainer, a lecturer at Technische Universität Darmstadt, a speaker, and on an International Organization for Standardization (ISO) committee.
This post was originally published 4/2025.
Comments