Getting Started with High-Fidelity Prototyping

Originally published on Medium · 6 min read

In today's industry of rapidly-growing products, user experience (UX) design has become increasingly important — it's clear that design-led companies outperform their competitors. Prototyping plays a vital role in the process of creating successful UX, but for many product teams, prototyping is still one of the most confusing parts of the UX design process. No wonder it's unclear: a prototype can be almost anything, from a series of paper sketches representing the different screens or states of an app to a fully-functional, pixel-perfect app.

What a prototype is, and what it isn't

A prototype is, in its basic form, an expression of design intent. Prototyping allows designers to present their ideas and see them in action. Depending on what a product team needs a prototype to do, it can simulate an entire digital or physical experience, or just a single interaction.

A lot of people confuse prototypes with sketches, wireframes, and mockups. These assets are not prototypes. The idea of simulation is focused on "interactivity," which is essential for prototypes — that's why static assets, such as sketches, wireframes, and mockups, can't be considered prototypes. That said, this doesn't mean all prototypes are digital.

Why we need prototypes (and when to use them)

The primary goal of building a prototype is to test designs — and product ideas — before creating real products. Your product's success is directly related to whether you test it or not. Without any doubt, your design will be tested when the product becomes available on the market and people begin using it. If this is the first-ever testing, there's a high likelihood of negative feedback from users. It's always better to collect feedback during the low-risk research phase, before public release.

Ensure the design concept works as intended. In most cases, it's relatively easy to test a concept with real users. Once an interactive version of a product idea is in the hands of real users, a product team will be able to see how a target audience wants to use the product — based on this feedback, it's possible to adjust the initial concept.

Determine if people are able to use a product. Prototyping is essential for finding and resolving usability issues before launch. Testing reveals areas that need improvement.

What is fidelity?

Prototypes don't necessarily look like final products — they can have different levels of fidelity. The fidelity of a prototype refers to how closely it reflects the look-and-feel of the final product.

Fidelity can vary in the areas of:

• Visual/physical design
• Content
• Interactivity

Product teams choose a prototype's fidelity based on the goals of prototyping, the completeness of the design, and available resources.

Low-fidelity vs. high-fidelity

Low-fidelity

Low-fidelity prototyping is a quick and easy way to translate high-level design concepts into tangible, testable artifacts. Its first and most important role is to check and test usability, rather than the visual appearance of the product.

Low-fidelity prototypes usually contain the following characteristics:

• Visual design: Only some of the visual attributes of the final product are presented, such as the shapes of elements or a basic visual hierarchy.
• Content: Only key elements of the content are included.
• Interactivity: The prototype can be simulated by a real human — during a testing session, the moderator acts as a computer and manually changes the design's state in real time. Interactivity can also be created from wireframes, also known as "connected wireframes."

Pros:

• Inexpensive. The clear advantage of low-fidelity prototyping is its extremely low cost.
• Fast. It's possible to create a low-fidelity paper prototype in just five to ten minutes, letting product teams explore different ideas without too much effort.
• Collaborative. This type of prototyping stimulates group work. Since it doesn't require special skills, more people can be involved in the design process — even non-designers can play an active part in idea formulation.
• Clarifying. Both team members and stakeholders get a much clearer sense of what to expect from an upcoming project.

Cons:

• Uncertainty during testing. With a low-fidelity prototype, it might be unclear to test participants what's supposed to work and what isn't. It can require some imagination from the user, typically based on a scenario the research team has written in advance — which limits the outcome of user testing.
• Limited interactivity. It's impossible to convey complex animations or transitions using this type of prototype.

Popular techniques:

• Paper prototyping — creating hand drawings of different screens that represent a product's user interfaces.
• Clickable wireframes — wireframes are a visual representation of a product page that a designer can use to arrange page elements, and they can serve as a foundation for lo-fi prototypes. Clickable wireframes are the simplest form of interactive prototype, created by linking static wireframes together. Just like paper prototypes, they often don't look like the finished product — but they have one significant advantage over paper prototypes: they don't require a separate person to act as facilitator during the testing session.

High-fidelity

High-fidelity prototypes appear and function as similarly as possible to the actual product that will ship. Teams usually create high-fidelity prototypes when they have a solid understanding of what they're going to build and need to either test it with real users or get final-design approval from stakeholders.

High-fidelity prototypes usually contain the following characteristics:

• Visual design: Realistic and detailed — all interface elements, spacing, and graphics look just like the real version of the product.
• Content: Designers use real or close-to-real content, including most or all of what will appear in the final design.
• Interactivity: Prototypes are highly realistic in their interactions.

Pros:

• Meaningful feedback during usability testing. High-fidelity prototypes often look like real products to users, so during usability testing sessions, participants are more likely to behave naturally, as if interacting with the real product.
• Testability of specific UI elements or interactions. With high-fidelity interactivity, it's possible to test graphical elements like affordance, or specific interactions such as animated transitions and microinteractions.
• Easy buy-in from clients and stakeholders. This type of prototype is also good for demonstrations — it gives clients and potential investors a clear idea of how a product is supposed to work. A well-crafted high-fidelity prototype gets people excited about your design in ways a low-fidelity, bare-bones prototype can't.

Cons:

• Higher costs. Compared with low-fidelity prototypes, creating high-fidelity prototypes implies higher costs, both in time and money.
• Timing and misunderstanding. Presenting or demonstrating high-fidelity prototypes early in the design process can sometimes become a distraction for stakeholders — a discussion on functionality can quickly derail into an argument about a missing period, so it's important to consider where the team actually is in the design process.

Popular techniques:

• Prototyping software — a variety of digital prototyping tools exist, differing in purpose, ease of use, and functionality. Some of the more widely known and utilized tools include Figma, InVision, Flinto, Origami, Sketch (with plugins), Spark AR, Adobe XD, Unity, Principle, Proto.io, Atomic, and UXPin.
• Coding — the name says it all. In some instances, coding a segment of your site or application is the only means to test its functionality with users.
• 3D printing — if your product calls for a physical form, 3D printing can be a great way to quickly generate a prototype that users can interact with on a tactile level.