Learn what fidelity means in UX prototyping and how fidelity evolves through the design process. In this tutorial, Diane Cronenwett describes fidelity of UX prototypes and its role in the design process.
- [Instructor] Let's take a moment and talk about fidelity. Fidelity refers to the degree of completeness of the user interface, interactivity, and flows. Fidelity can refer to the visual appearance, but also to the degree of functionality represented in a prototype. Low-fidelity would refer to a design concept that is in a sketchy state and doesn't have a very defined interface or flow. For example, if you are in the early stages of your project, you might be focused on interviewing users to understand their pain points and get a broad understanding of what kind of experience they might be looking for.
In this early phase, you may not even have a prototype yet, because you don't know exactly what you're solving for. It might be a completely new idea and you're just trying to empathize and listen to understand what your users might need. Or you may be in the early phase of interviewing your users, but you might have some idea of the problem you want to solve and you think it might be useful to get user feedback on. In this case, sketching out some high level ideas and putting them in front of users is a great way to get feedback and track their reactions. Sketches can introduce new ideas that the user may not have thought about until seeing the sketch.
A single standalone sketch would not be considered a prototype, but it is a useful artifact for user research and can illicit a lot of great insights and start conversations. A single standalone sketch would not be considered a protoype, but it is a useful artifact for user research and can illicit a lot of great insights and start conversations. Multiple sketches can be a form of a low-fidelity prototype, as they can represent a flow or process, and we'll get into detail on this later. One of the benefits to sketching is that you can updating your sketches and create new sketches to get more feedback and rapidly iterate through the concepts and incorporate the users' feedback.
As you get further in the user-centered design process, you'll want to define the problem statement to make sure that you're ideating and designing for the right problem. Once that problem statement is defined, you can start thinking about design approaches that might solve the issue. Low-fidelity prototypes don't only apply to sketches. You can have a low-fidelity prototype that has a very unpolished interface, like a wireframe with very minimal interactions. Typically, these are created in a tool and some tools are designed to simulate a sketchy interface using basic shapes to convey this minimal level of fidelity.
These tool-based low-fidelity prototypes are also used at the beginning of the design process as you are establishing your design direction. Typically, the first design you put in front of your users will be some form of a low-fidelity prototype, whether that be a series of sketches or a wireframe style approach. Medium-fidelity prototypes can have a mix of basic functionality and some defined interface elements, but some flows may not be complete, because you may want more input and feedback from the user to guide the design. Typically, medium-fidelity prototypes are used in the phase of design where you have some key elements in place, but still need to validate some concepts to get a better understanding of the user's needs.
They're sort of refined-looking, but with a lot of open questions about the details of the design. For example, in a recent project I was working on, I put a medium-fidelity prototype in front of users and only a few of the links worked, because, as a project team, we wanted feedback on the links that didn't work and we wanted the user to tell us where they think they should go and why. In this example, the design was about halfway defined and we still needed more understanding on the needs of the user to define the rest of the design. High-fidelity prototypes are best used for scenarios where you have a solid idea of how the design interface should look and work and you want to get some feedback from the user that is more usability-focused and specific.
At this stage, the high-fidelity prototype looks and feels like the real product. High-fidelity prototypes, however, can vary in functionality. Some high-fidelity prototypes have a very defined visual interface, but some of the functionality isn't fully represented. This highly defined visual interface gives the impression that the product is final, so it's still considered a high-fidelity prototype, because the kind of feedback you receive might be focused on these design elements. Before your product is delivered, you'll want to put your high-fidelity prototype in front of users to get any input on the usability and flows to make sure that problems in the design don't show up after the product has been released.
The high-fidelity prototype will be fully rendered with color and branding elements applied. High-fidelity design prototypes are also useful for the final deliverable to engineering, because it allows everyone on the development team to engage with the design to see how it works. Prototyping is useful at any part of the design process and the fidelity will be determined by the type of feedback you want and where you are in the process.
Explore the benefits, techniques, and tools of prototyping in this introductory course with designer Diane Cronenwett. Diane covers the basics of building effective prototypes with the right "fidelity," and getting more valuable feedback from your design testing. Learn how to build simple, satisfying prototypes on paper, and use digital prototyping tools like Moqups, InVision, and Axure to add interactivity and animation.
- What is a prototype?
- How prototyping helps user experience
- Defining prototype goals
- Sketching ideas
- Creating paper prototypes
- Building low-fidelity and high-fidelity prototypes
- Creating HTML prototypes
- Testing and evaluating prototypes
- Choosing the right prototyping tool