Introduction
Low-fidelity prototypes are functional wireframes in action.
By making your wireframes interactive, you get a much better sense of how the screen states should change as the user interacts with the interface. Putting thought into this area will enhance the user experience and create a better product overall.
Prototypes such as these can also be used in early user research to get feedback on the layout, information hierarchy and navigation.
People
Low-fidelity prototypes are created by the UX Designer.
Instructions
Prep
Before you can begin prototyping it’s important to have a sense of the basic make-up of your screens. We typically start from the end-point of a functional wireframing process.
Decide how you would like to generate the prototypes. This is best done through software that comes with a prototyping feature like Figma. Alternatively, if you want to keep it really low-fi you can use paper prototypes, or if your team is more code literate you could make the prototype in the browser with HTML & CSS.
Method
- Think about the first state of the feature you would like to prototype and arrange the content on the screen.
- Then create the second state of the feature, thinking about:
- What did the user interact with?
- What do they expect to happen?
- How do they know they have completed the action?
- Are there any loading or error states?
- Connect these two states together. Prototyping software usually has options to control how the states will transition between each other.
- Test the prototype yourself, making changes as required.
- Share the prototype with other designers and team members for feedback. You can even set up some user research sessions to test the prototype with real users.
Other resources
- Accessible user testing with browser-based prototypes shows you how to build a functional prototype using Astro and Keystatic to properly test user accessibility.
- Storybook and Mock APIs shows you how to prototype a back-end API during development in order to better understand how the data of your underlying app or website needs to work in order to support functional interface requirements.
- Prototyping: Solutions vs. Interactions talks about how solution prototypes and interaction prototypes aren’t always the same thing, and why the distinction is sometimes important.
