Prototyping
Last updated
Was this helpful?
Last updated
Was this helpful?
A prototype is a preliminary version of a product or interface created to simulate its functionality, interactions, and user experience. Prototypes can vary in fidelity, ranging from low-fidelity wireframes or sketches to high-fidelity interactive mockups that closely resemble the final product. These days, are mainly done with digital software, but in case of need, you can jump back into the past and create a paper prototype, kinda like in this example:
A testable prototype is a preliminary design solution proposed to solve a specific user interface problem. It acts like a hypothesis that can be validated by observing how users interact with it.
Prototypes come in various forms, ranging from simple to complex:
Single page vs. multipage: From a basic one-page layout to complex multiple pages with full navigation and interactive elements allowing users to complete tasks.
Detail level: From detailed, realistic renderings to basic, hand-sketched outlines.
Interactivity: From fully interactive, clickable prototypes to static ones requiring manual manipulation to simulate user interaction.
The type of prototype you choose depends on the testing goals, the maturity of the design, the tools available for creating the prototype, and the resources you can dedicate to conducting usability tests. Regardless of the prototype used, testing it provides essential insights into user behavior and feedback, enabling improvements to the design.
Representation of Design Concepts—Prototypes serve as visual and interactive representations of design concepts, allowing designers to communicate their ideas and vision.
Functionality Simulation - Prototypes simulate the functionality of the final product, including interactions, navigation, and user flow. They enable designers to test and refine the user experience before investing time and resources into development.
User Testing Tool - Prototypes are used for user testing purposes, allowing designers to gather feedback from real users on the usability, effectiveness, and satisfaction of the design. User testing with prototypes helps identify usability issues, uncover user preferences, and evaluate design decisions.
Iterative Design - Prototyping facilitates an iterative design process, where designers can quickly iterate on their designs based on feedback and insights gathered from testing. By creating multiple versions of prototypes, designers can refine and improve the design over time.
Risk Reduction - Prototyping helps mitigate risks associated with product development by identifying potential usability problems, technical challenges, or design flaws early in the process. By addressing these issues during the prototyping phase, designers can reduce the likelihood of costly revisions or rework later in the development cycle.
Collaboration Tool - Prototypes promote collaboration among cross-functional teams by providing a platform for stakeholders, designers, developers, and other project members to review, discuss, and iterate on the design together.
Not necessarily! Aim for the just-enough prototype. Watch this video to find out more:
Within a Figma prototype, you can make elements clickable while leaving others non-clickable. Typically, interactive elements such as buttons, links, menus, and form fields should be made clickable to simulate user interactions. Non-interactive elements, such as static images or text, may not require clickability. However, you cannot always make everything clickable simply because you do not have the wireframe ready. Consider your goals for user testing when deciding which elements to make clickable. If you're conducting usability testing to gather feedback on specific interactions or user flows, you'll likely want to make those elements clickable to simulate realistic user interactions.
However, if you're conducting concept testing or gathering initial feedback on visual design, clickability may be less important. Let’s make an example. You have a hotel booking app. You have designed various “User Flows” because, through user research, you have seen that a user will take different tasks to accomplish different goals. Now, you want to test one of these tasks. Specifically, you decide to test the “User Flow” path that leads to the registration of a new account.
As the entry point you chose for the login/registration page:
In this case you may decide that there’s no need to make the button “Join” and the link “Continue as a guest” clickables. This is because when you will test your prototype, you will have in advance informed the user that he/she will have to accomplish a task, register a new account. If the user clicks on "Join" instead, we will already know there is a problem. Perhaps the "Join" button was designed to be more prominent (not necessarily in this specific case), and there would be no need to make the "Join" button clickable. If this is the case, we have already failed, so we should ask the user why. Once the user has clicked on “Sign in”, as we have made this button clickable, the user will be brought to the next screen:
Find out about different types of prototypes on the next page: Type of Prototypes
You can leave comments here.
Here, you may have made every text field using pre-compiled text so that when the user clicks on the text field, it is automatically filled in (software limits). Once he has clicked on the password field, the “Join” button turns black, and at that point, you may have prepared a confirmation screen for when the user clicks on the “Join” button. Instead, the one below is a sketch that represents a happy path. The “User Flow” represents the task taken to achieve the goal of reviewing something: Turned into a mid-fidelity prototype, you would have had the email and password field clickable, the “login” button clickable and linked to the “home” screen where the “search bar” on top would have been clickable and linked to the “search results” screen. At that point, one of the cards would have also been clickable and linked to the “detailed view” screen, which would have had the button “leave a review” clickable and linked to the “review” screen with the star rating system clickable and linked to the “review submitted” screen.
