A prototype is an early model of a product that demonstrates its functionality, without actually building the entire product.
Fidelity means how closely a design matches the look and feel of the final product.
A low-fidelity prototype is a simple interactive model that provides a basic idea of what the product would look like.
A low-fidelity prototype can be on paper or digital. For a paper low-fidelity prototype interactivity might be human acting as a computer and manually changing the design in real-time. For a digital low-fidelity prototype, interactivity might be connected to wireframes where you can click on a certain part of the wireframe like a submit button and be taken to the next wireframe.
Benefits of paper prototypes
- Inexpensive; all you need is a pen and paper.
- Rapid iteration. Because you’re only using pen and paper, you can whip up paper prototypes for lots of different ideas quickly.
- Low commitment. Digital prototypes take a while to make, so it can be painful if you need to totally scrap them.
- Encourage honest feedback. They are less polished, which makes your teammates and users feel more comfortable criticizing them.
- Collaborative activity. Different members of your team could each quickly sketch their own prototype for a specific page of an app.
Drawbacks of paper prototypes
- Hard to interpret. It requires a lot of imagination for users who are testing a paper prototype to picture what the real product will actually look like.
- Can only be tested in person. A person has to act as a computer to manually change the design in real time.
- Difficult to create with a remote team. Because paper prototyping is so hands-on, collaboration is best for this activity when you’re together in person.
Paper prototypes are great to make during brainstorming sessions. You can quickly draw multiple ideas and compare those ideas. Paper prototypes are great to build during early product testing, especially if there are ideas that need to be clarified with visual portrayals.
Why do you think designers usually decide to design for mobile as a first step? Because it’s the smallest space our designs might appear in. If our design works well on the limited screen of a mobile device, there’s a good chance it’ll fit on a larger interface like a computer monitor too.
- Index cards
- Instead of sketching all of your ideas on one piece of paper, try drawing them on a bunch of different index cards. Each index card can represent a mobile phone screen. Use tape or push pins to stick the index cards to a whiteboard or wall, or arrange the index cards in order on a table.
- Designing on index cards is especially useful for brainstorming sessions because you can easily add, reorder, or remove index cards from the user flow. Members of your team can each create their own index cards with unique designs, which can be combined into one user flow through the app or website you’re creating. In addition, you can quickly rearrange individual screens, or index cards, and put them in any order to follow the user flow through your app.
- Sticky notes
- Try using sticky notes of different sizes and colours to represent different parts of your design idea. Or use coloured sticky notes to call out important parts of your wireframes and prototypes.
- Stencils
- Pre-made stencils can be super helpful during the paper wireframing and prototyping process, especially if you’re new to drawing or intimidated by it. Stencils often include a built-in ruler, symbols, and icons that are common in UX designs. Using a stencil like this one can help your drawings look neater and more realistic.
- Demo device
- A demo device is a piece of paper or other material cut out in the shape of a mobile phone. You can place your sketches inside of the demo device to simulate a more realistic user experience with your product.
A low-fidelity prototype is a simple, interactive model that provides a basic idea of a product’s design, so it can be tested early in the design process.
Creating a low-fidelity prototype
- Gather materials and tools:
- The paper wireframes you created for your app
- A pair of scissors
- A pen or pencil and paper, in case any screens are missing from the user flow
- Cut out each screen: Using a pair of scissors, cut out each paper wireframe screen. All of the screens should be their own separate pieces of paper that can be placed beside each other in a sequence.
- Select the user journey to prototype: Review the user journey maps from your app research, and select the user journey you want to prototype and test, like placing an order for coffee through the app.
- Arrange the screens in order: Think about the order a user will experience the screens in the user journey. Arrange the screens in a row to follow this user journey sequence: Begin the order with the screen the user will start on and end the order with the last screen in the journey.
- Review your paper prototype’s sequence: Now that your paper screens are arranged to follow the user journey, try to imagine your new paper prototype as an actual app. Then perform the sequence as a user would. This can help you determine whether screens need to be rearranged, or if any screens are missing in the user journey.
- If any elements in the paper screens would need to be tapped or clicked to progress in the mobile app, it’s best practice to tap them on the paper screens during your review as well. This could include any elements like menu icons or buttons. It might seem silly at first, but it’s a great way to figure out whether these elements are in the best locations for the user journey.
- Feel free to rearrange screens to make sure the order you’ve decided creates a clear, focused user journey. If any screens are missing in the user journey, use your pen or pencil and paper to draw these missing wireframes.
In a wireframe, the long length signals that the screen will scroll, since we’ll be using these wireframes for our prototypes, having the longer screen will allow users to scroll down the screen.
In a digital low-fidelity prototype, users should be able to click a button and be taken to the correct screen.
Preparing to create your prototype, some questions to consider are:
- What flows might users follow?
- What buttons will users interact with? What order will they perform these actions in?
- What will users expect to happen after they click a button or submit a form?
If an interactive element doesn’t have a screen to connect to, that element needs to be removed from your design or a new screen needs to be created!
Be sure to address the following questions in your completed
- Did you connect all the wireframes required to complete the main user flow?
- Did you provide a means for users to proceed forward and backward within the flow?
- Are cues for navigation clearly indicated within your prototype?
- Did you indicate successful completion of the simulated activity?
- Did you return users to a sample origin after completing the simulated activity?
