Prototyping plays a vital role in the UX design process - but what is it? A prototype is a primitive version of a product, which UX teams use for testing before handing over the final designs to engineering teams for development. The aim of a prototype is to test and validate ideas by simulating a working product to improve its design. Prototypes allow for usability testing, communicating solutions to stakeholders, and to improve the quality of designs.
Choosing the right fidelity
Fidelity means how closely your prototype replicates the end state of the product. Before you begin prototyping, it is important to decide its fidelity. This will determine how much time and energy you will need to put into it. Choosing the right prototype comes down to choosing between high, medium and low fidelity.
When deciding what level of fidelity is suitable for your prototype you will need to consider resources and skills, time, the audience, and what needs testing.
About low-fidelity prototypes
Low fidelity prototypes are sketches. They are used to test broad concepts and flows at the early stages of the design process, rather than the visual appearance of the product i.e. demonstrating barebones functionality without any aesthetic design.
Paper prototyping is a common low-fidelity technique, where all you need to get started is a pen and paper. It’s useful when a product team needs to explore different ideas and refine designs quickly. These low-tech designs allow UX teams to visualise screen layouts, test navigation and experience user flows. Digital low-fidelity prototypes help UX teams organise information architecture and user flows before committing to mockups.
Pros of low-fidelity prototypes:
Easy and quick to make and iterate: a designer can quickly erase or change part of the design between (or during) test sessions
Cheap: teams can test multiple variations and iterations at a low cost
Catch potential problems early: low-fidelity prototypes put less pressure on users - they can feel more relaxed and express their views in more detail
Low skill level needed: they only use simple lines and shapes, even non-design team members can provide valuable input.
Validates ideas early: make it clear whether the concept of your project is clear to users
Cons of low-fidelity prototypes:
Limited learning: low fidelity prototypes do not provide meaningful feedback during usability testing
Difficult to test: users might get distracted by the unfamiliarity of the product which may result in them focusing on the wrong elements
Limited interactivity: It’s impossible to convey complex animations or transitions using this type of prototype
About high-fidelity prototypes
High-fidelity prototypes are used to assess flows and concepts, screen design and layout, data workflows, and interactions. They are highly functional and interactive, and as close as possible to the final product. They demonstrate functionality as well as the aesthetic look and feel of the product. The process involves choosing the prototyping tool, building the screens, and incorporating text, labels and interactions.
Designers should only begin building high-fidelity prototypes after the low-fidelity prototypes have been thoroughly tested. High-fidelity prototypes should be in the last stages of the design process before handing over final designs to the development teams.
Pros of high-fidelity prototypes:
Allow for testing rich interactions: such as mapping
Deep user insights: test participants are more likely to behave as if they are interacting with a real system, other than unnatural behaviours they may have when interacting with a sketchy prototype
Testing of visual design: hi-fi prototypes allow for testing of specific UI components and graphical elements
More presentable to stakeholders: Clients and team members will get a clear idea of how the product will look and work before it ever goes live
Cons of high-fidelity prototypes:
Learning curve required: prototyping tools can take time to learn
Time-consuming and costly: UX designers must spend more time making changes with greater detail, so high-fidelity prototypes cost more to produce
Difficult to know when to stop: can be easy to get caught up in the minor detail
Focus on choosing the most effective method of prototyping based on your product’s needs and thoroughly test each prototype with its users. Low-fidelity prototypes are best used in the early stages of the design process to test concepts and user flows. Use high-fidelity prototypes when you are ready to gather more data on specific areas including content, interactions, and visual design.