Low fidelity prototype vs high fidelity prototype, which one is more suitable for your design?

Have you ever wondered whether to use low fidelity prototypes or high fidelity prototypes in the process of designing products ？ What are the differences between the two ？ When is the best time to use ？

In this article , Discuss with you the main differences between low fidelity prototypes and high fidelity prototypes , The most appropriate use time and the case analysis of the two prototypes .

 1. What is? Low fidelity prototypes ？

A low fidelity prototype is a sketch or prototype drawn on paper , It can also be a product page designed on a computer . The role of low fidelity prototypes is to represent the page relationships involved in the most important user processes and functions in the product .

Before designing low fidelity , We will first conduct user research and collect a series of product requirements , After all this work is done , The next step is to consider the function of the product .

Basic functions and information architecture

In the early stages of design , We don't want to get bogged down in page layout 、 In details such as images and gradients , Instead, we need to show the core functions of the product 、 Information architecture and flow between pages .

We will first outline some basic information about the page , These designs can help users achieve the main goals and meet the basic requirements of each function .

Basic layout and elements

In addition to information architecture and processes , Low fidelity also helps define the product UI Basic layout , For example, determine the size of page elements and components 、 Location and use of white space in the page .

 2. What is? High fidelity prototype ？

The high fidelity prototype shows more details than the low fidelity , The high fidelity prototype is as close to the final product as possible . High fidelity prototypes have the same process and information architecture as low fidelity , It will also show more details and page relationships .

Advanced page design

The goal of the high fidelity prototype is to discuss the final product , Include everything you see in the final product , For example, the color of the product 、 The gradient 、 shadow 、 Graphics and typesetting .

Advanced interactive prototypes and features

The high fidelity prototype will further demonstrate the dynamic effect of the product , More advanced than simply clicking on the prototype , For example, show the scrolling effect of the page 、 Accordion menu 、 The drop-down list 、 Drag and drop etc .

High fidelity prototypes may also contain graphics and animations that move on the page , Or elements that users can manipulate , It also includes, for example, error messages and verification of form design , And the ability to store and reproduce data on various other page sizes .

3. When to use low fidelity prototypes ？

Brainstorming

Low fidelity prototypes are suitable for rapid brainstorming , And to the customer 、 Development and project participants demonstrate design ideas , It is suitable for integrating some early user tests into product design .

Gain development recognition

By showing the prototype , Development can tell us from the beginning whether some designs are technically feasible , It avoids spending a lot of time to design requirements but being told that some functions cannot be realized when they are submitted .

Conduct early user testing

The product is prepared for users , So it makes sense to test them in the early stages of design .

for example , When moving towards high fidelity prototyping , We will add a lot of additional details and minor features , If in the process , It is found that a core function of the product is neglected at an early stage , What to do if the product has usability defects ？

In the low fidelity prototype design stage , It is much easier to undo and modify the design . Showing the low fidelity prototype to the user will help to grasp the key functions before making more advanced design requirements , Better define the process 、 Information architecture and UI Layout .

Always start with low fidelity

Low fidelity prototypes not only help designers brainstorm ideas , It also helps keep in touch with customers . By clearly showing the low fidelity prototype to the director instead of simply talking about what you are going to do , It helps to avoid tedious rework .

 4. When to use high fidelity prototypes ？

The product needs to provide the best possible user body , Making high fidelity prototypes ensures that everything from product managers to UX The designer , Everyone can grasp the direction of the product .

After the realization of basic functions

Basic function implementation refers to the completion of the process and page , At least in terms of core functional requirements, it meets the basic goals of users . Through low fidelity, we will know the page prototype we need to design , And the basic layout of each page , Then you can make high fidelity .

When testing more advanced interactions

When you start designing or testing more complex interactions and functions , High fidelity prototypes should be used . We need to make sure that most of the interactions in the prototype are intuitive , It can bring value and even interest to users .

When the design is handed over to development

High fidelity prototype design makes it easier for developers to write products in code , Don't need too much imagination . This not only reduces errors and rework , It also reduces the time spent writing code , This reduces the time it takes to bring the product to market .

 5. Low fidelity prototypes case analysis  

▲  Web pages use very few colors to highlight basic functions , For example, menu options 、 My connection, etc , The rest is grey , In this way, you can ignore the details and focus on the main functions of the product .

▲  Use the paper prototype to show the low fidelity of the product , Including clip art 、 The sketch 、 Color blocks, etc . Doing so can quickly demonstrate basic page processes and functions , Refine these functions and processes through continuous iterations , Enhance product experience .

▲  When you want users to notice the core functions of the product , That is, the company's position on the map in Figure 2 , The map can be displayed in more detail in low fidelity , Design that weakens other elements .

▲  Low fidelity in software , The spacing of elements 、 The location and size will be clearer than the paper version , This prototype is also what it looked like before entering the high fidelity iteration .

6. High fidelity prototype case analysis  

▲  A high fidelity prototype of a flight reservation product , The user can select the city 、 date 、 Add functions such as passengers . This example shows how close a high fidelity prototype should behave before delivering the final product to development .

▲  This high fidelity e-commerce page has the function of rotation , Users can browse back and forth through the range of products offered . It also has other interactive functions , For example, the expandable hamburger menu , And buttons to attract users' attention . Low fidelity prototypes usually don't involve much detail , Only basic clickability .

▲  The high fidelity prototype of Apple watch not only shows the degree of reality that the prototype may achieve , It also shows that the prototype need not be limited to mobile phones 、 Tablet or web page .

▲  High fidelity usually means color , The prototype of Nike website perfectly reflects this concept . Pages have strong colors 、 Shadows and gradients , And real interaction 、 copy 、 Price and product image, etc .

▲  a 3D High fidelity prototype of printer products , Shows how interactive the page is , Users can print 3D See the real animation of the final product . The graphics on the page have clear details , It feels like the final version of the product .

Last

The difference between low fidelity and high fidelity prototypes is the level of detail involved . In the design process , In fact, you don't have to worry too much about fidelity , Carefully consider what design objectives need to be met at each stage before selecting the appropriate prototype , This is more practical .

Take your time , I hope it helps you ～