Prototypes are essential for UX Design. Imagine the following situation: you have recently started working on your first project as a UX designer. It took many hours of research, meetings, and work to arrive at the final version of the product. You are excited!

But before the launch, the Director of Marketing asked to take a look at the product. Until then, no one had ever actually interacted with him.

And to everyone’s surprise, several elements hinder the experience when the director starts interacting with the product. For example, the user journey is flawed, buttons don’t respond as they should, and some texts don’t have good readability.

When something like this happens, there’s a lot of rework, which wastes time, money, and motivation. But could this have been avoided? Was there any way or tool to test these elements and user interaction before it was too late? Keep reading to know more!

What are prototypes?

Prototypes are functional tools to test a product; it aims to test functionalities and see how users interact with the product, looking for weaknesses.

This way, prototypes can be considered a proof of concept to understand whether the user journey runs as expected or not.

They can also have different levels of complexity; you can build prototypes with a sheet of paper or specialized software. Thus, we can say that prototypes have four main attributes:

• Representation: what is the shape of the prototype, and how it was built;
• Precision: is related to the prototype’s fidelity in representing the product’s features or interface;
• Interactivity: which interactions will be available for the end user to test;
• Evolution: a prototype can evolve as the project evolves, and, in this way, it considers the insights of each test with the user.

Also, it is essential to remember that a prototype is used continuously throughout a project to verify improvements or new features from new insights.

So, the sooner and more often you use prototypes in your project, the better the outcome of your interface development will be.

Reading tip: Usability: How To Develop A User-Friendly Website

Prototypes benefits

UX Design relies on a User-Centered Design approach to deliver the best experience to users. Now, if the main objective of UX Design is helping users achieve their goals, it is crucial to understand if the project development is meeting these expectations.

That’s why prototypes are so important to UX Design projects; obtaining user feedback before developing or improving a digital product provides designers visibility into the user experience—saving you time and money.

Check a few other benefits:

1. Evaluate the technical feasibility of the product

Prototypes make it possible to visualize the design ideas in a concrete way. This way, it is possible to have a deeper analysis of its technical, physical, and financial characteristics.

2. Mitigate risks

The prototype is an opportunity to test the functionalities and interactions of your product before programming.

They offer designers a chance to correct errors and improve features before coding.

3. A reference for developers

As a visual and functional tool, prototypes become a reference for developers when programming.

A prototype can show how a button or other micro-interactions should work.

4. And a reference for stakeholders

Prototypes are also a reference for the organization’s stakeholders.

A prototype aligns expectations and provides a unique view of the final product. They are also crucial for effective communication and for promoting the project internally in the company.

5. Quick to create

There are many types of prototypes — and we’ll cover this topic later — but you don’t need complexity to develop a good one.

You can develop an efficient low-fidelity prototype with just a pen and ciar essa fase do desenvolvimento do produto durante o seu projeto de UX Design.

Reading tip: User-Centered Design: Building Products To Meet User Needs

Types of prototypes

We have already seen that prototypes are essential for any UX design project. So, now comes the best part: what types of prototypes are there?

There are two categories of prototypes: low-fidelity and high-fidelity. And within each of these categories, there are several types of prototypes.

The difference between low fidelity and high fidelity will be discussed later. For the moment, we will mention the types of prototypes and what are the benefits of each one. We are starting with the least complex and cheapest type and evolving to the most complex.

Sketch

Sketches are the most rudimentary, simple, and low-cost prototypes out there. Because building them takes literally only a pen and paper.

This type of prototype usually represents the initial assumption of the interface and is often used in groups and meetings to create ideas around the product.

When to use Sketch?

The Sketch prototype is generally used in the early stages of product design since the focus is to use this prototype to generate more ideas and start discussions about the product and its usability.

Because of this, it can be created collaboratively, involving other project people and other stakeholders.

The benefits of Sketch

The main benefit of Sketch is that it is simple to make, fast and cheap.

Also, if done collaboratively, it is an excellent way to involve stakeholders in the project.

Paper prototypes

Example of a paper prototype by Aela’s MID student Joyce Almazan.

Despite the name, paper prototypes are not like sketches.

Paper prototypes are a bit more elaborate than sketches, providing more details.

The purpose of a paper prototype is to represent the UI to simulate the user’s journey. Therefore, this tool is widely used to conduct tests with the end user and understand the opportunities for improving the product and its interactions.

When to use paper prototypes?

Like sketches, paper prototypes are often built at the project’s early stages but can also be used throughout product development to carry out tests with the end user.

The benefits of paper prototypes

Paper prototypes are one of the cheapest and fastest tools you can create. However, unlike the sketch, they give more details about the interface and help to collect information about the user journey.

In addition, they are flexible and versatile and can be easily updated and used throughout the entire UX Design project.

Reading tip: Nielsen’s Heuristics: 10 Usability Principles To Improve UI Design

Click-through prototypes

Click-through prototypes are simulations that are a little more advanced than sketches and paper prototypes.

Click-throughs are more interactive and done with specific software. They represent the interface screen and demonstrate interactions through various clickable hotspots.

When to use click-through prototypes?

Click-throughs are suitable for the first interaction tests with the UI at the beginning of the project. Despite this, they are a step ahead of sketches and paper prototypes.

The benefits of click-through prototypes

Because they are closer to real user interaction, click-throughs require less effort and imagination from the end user to test.

Of course, they take more time to build than sketches and paper prototypes, but they are still a cheap and relatively quick alternative.

Interactive or digital prototypes

Interactive prototype by Aela’s MID student Inis Leahey.

They are an evolution of click-throughs. They provide better interaction, and some animations, with a more advanced design and aesthetics.

Interactive or digital prototypes are built with the help of specialized software and show UI elements more accurately.

When to use interactive or digital prototypes?

Because it is more detailed and takes longer to create, these prototypes are usually used when the product has more definitions already.

Thus, the interactive prototype is recommended for testing with users and analyzing their journey and their feedback.

Benefits of interactive prototypes

The interactive prototype is more realistic than its predecessors listed here. Thus, they can guarantee a good idea of what the final version of the product will look like.

This type of prototype is not that complicated to build, despite being more complex. Thus, it’s best to use them further along a project after it has been tested in other ways and its development has already been approved.

Because of this, this type of prototype should never be the first technique to be used in a UX Design project.

The digital prototype is quite faithful to what would be the final version of the product. However, despite being aesthetically elaborate, the interactions do not behave exactly like the real version of the interface.

However, having a close view of the UI is excellent.

Reading tip: Animation in UI: How to Create Motion Design

Coded prototypes

This type of prototype is the closest to the final version of a product.

You need a developer to create it or a designer who has at least basic programming skills. In general terms, it’s a way to create a project that simulates the features without delving too much into codes.

Due to its fidelity to the final product, it is an excellent tool for carrying out final tests with users.

When to use coded prototypes?

As it is a process that requires more specific knowledge (or involves a developer), using this method depends on the availability of other team members.

Benefits of coded prototypes

They are very faithful to the final version of your product, offering aesthetics and behavior that are very realistic to the project objectives.

Therefore, they can be viewed and used in different and responsive environments. If it is a mobile app, tests can be conducted directly from a phone, for example.

High-fidelity and low-fidelity prototypes

There are two categories of prototypes: High fidelity and low fidelity.

The difference between these two categories is due to how realistic they are in relation to the final version of the product. That is, how much they are faithful to it.

This way, we can categorize the fidelity of each prototype by analyzing three characteristics:

• Interactivity;
• Visual;
• Content and commands.

Therefore, considering these three attributes, we can categorize each type of prototype mentioned earlier.

Low fidelity prototypes:

• Sketches;
• Paper;
• Click-through.

High fidelity prototypes:

• Interactive or Digital;
• Coded.

Benefits of low-fidelity prototypes

• Less time to create;
• Changes are easy to make during the process;
• Low-fidelity prototypes put less pressure on the end user during usability testing;
• Designers feel less attached to the prototype;
• Stakeholders are aware that the project is not finished yet.

Benefits of high-fidelity prototypes

• They provide a faster interaction and response in tests (in comparison to low-fidelity prototypes;
• With high-fidelity interactions, designers can test flows, specific UI elements, and graphics;
• Users tend to behave more naturally during tests with high-fidelity prototypes;
• There is more focus on observing the test with the user than on worrying whether the prototype will work or not;
• High-fidelity prototypes are less prone to human error while testing with end-users.

Reading tip: Creating Responsive Design With Grids

Prototypes vs Wireframes

omes to UX design and overall technology, some concepts are often confused.

For context, a wireframe represents the interface of a website or a mobile app. The wireframes’ focus is to demonstrate the UI’s structural elements without focusing on the interactions.

Prototypes, as we have seen so far, are more flexible tools. They may or may not contain texts and images. They can be static or dynamic. But they do have a solid focus on interactions and the elements responsible for the overall user experience.

This way, we can say that every wireframe is a prototype, but not every prototype is a wireframe.

Therefore, it is essential to remember that these two tools have different goals.

While a wireframe is concerned with the structural elements of a UI, a prototype is concerned with user interaction and design elements.

Reading tip: Visual Hierarchy: How To Prioritize and Highlight Information

How to choose your prototype tool

First, we should clarify that there is no “best” tool for prototyping. The important thing is to have a couple of questions answered before you make a choice. Such as:

• Your learning curve: that is, how long it will take you to learn and master the tool;
• The type of UI you are prototyping: depending on the interface, one tool may be more suitable than others;
• What is the level of fidelity you want to achieve: low fidelity or high fidelity;
• If it is a collaborative prototype: if there will be many hands building the prototype, there are tools that facilitate its sharing;
• What skills are needed: do you need to know how to code or just visual concepts?
• What is your budget: how much is the company willing to invest in tools.

Answering the questions above makes it easier to understand which tool is most suitable for your project and your prototype.

Tools to build prototypes

• Sketch App: despite being exclusive to macOS, it is still the most adopted tool on the market. Today, it has click-through-style prototyping tools;
• Adobe XD: One of Sketch’s competitors, it’s excellent for creating high-fidelity prototypes;
• Figma: also follows the same line as Sketch and Adobe XD and is gaining more followers every day due to the various collaborative and prototyping tools;
• InVision: allows collaborative and interactive prototypes (click-through type) and can be integrated with other tools, such as Sketch and Adobe XD;
• Axure RP: a comprehensive tool that allows the use of complex logic to simulate systems very close to reality;
• ProtoPie: a tool for macOS, which has been gaining more and more power focusing on creating animations that don’t require code;
• UXPin: a quick tool for various levels of fidelity;
• Framer: a powerful tool that aims to create a bridge between design and code. It has a higher learning curve but allows you to create very detailed interactions and animations;
• Origami Studio: created by the Facebook team, it is a tool more focused on animations and mobile apps;
• Principle: exclusive to Mac, it’s also a good choice for animations;
• Marvel App: with functionalities similar to InVision, it’s great for any Designer — junior or senior — and lets you create high- and low-fidelity prototypes.

‍