Pros and cons of Interactive prototypes

Interactive prototypes

Prototypes are created using a number of mediums, but for a digital product such as websites and apps, they generally fit into 3 categories:

• Paper (sketches)
• Interactive (wireframes or full UI design)
• Code (built by developers)

This blog focuses on interactive prototypes using both wireframes and fully designed user interfaces (UI).

So what is meant by an ‘interactive prototype’? These are comprised of a designed set of screens where users can click and navigate around the product. You can create prototypes of a full website flow, or a select few screens if introducing new functionality to an existing product.

Interactive prototypes are typically built using a digital tool such as Figma or InVision and importing either flat greyscale wireframes or a fully designed interface, depending on when in the product lifecycle the prototype is being created.

Why choose this type of prototype?

Oftentimes, it can be useful for stakeholders and users to have something tangible to review designs with. If changes to the user flow are to be made, it can be more efficient to test this this with a prototype, then redesign if needed, before getting too far in the development process. If such changes are introduced later on in the process, can be more difficult and costly to implement.

Wireframing in particular is a process used to define, and agree on, content layout and hierarchy before introducing stylistic elements. They are created to ensure the structure and functionality of an interface meets both user and business needs.

When creating prototypes using fully stylised UI designs, it gives stakeholders and users an accurate idea of how the product will look. Additionally, depending on the fidelity of the prototype and which tool it’s being built in, interactions such as basic page transitions or hover states can be added, which allows the prototype to feel more true-to-life.

Where does this method of prototyping fit into the product dev cycle?

For wireframe layouts, prototypes of these are typically created after the information architecture (IA) has been defined. Waiting until after sitemaps and user flows have been established can help inform what type of screens are needed for the prototype, in order to illustrate the journey a user could take.

Prototypes can also be created from the fully designed UI, before development starts.

Either way, prototypes can either be delivered at the same time to supplement wireframes or UI, or can be created separately depending on the stakeholder needs.

Design is an iterative process, so that means you can create multiple prototypes over the course of the product’s lifecycle. It’s good practice to create a new prototype after each significant milestone, for example:

• Initial wireframing
• UI design
• Development releases
• New functionality additions

How does this method work in practice?

To test out flow and structure, designs are imported into tools such as Figma or InVision. From here, clickable ‘hotspots’ are added to areas in which the user needs to interact with in order to get to the next step – e.g. clicking a ‘Find out more’ button would redirect the user to a different page, or tapping a country selector expands to show dropdown menu with a list of countries.

Often with these tools, designs can be created and tested for different devices, such as desktop, tablet and mobile. However, these prototypes are created as flat designs rather than responsive layouts that automatically adapt to individual devices – what might look great on a MacBook might appear zoomed out if viewed on an iPad.

What are the pros & cons of this method?

Pros
For wireframes, by considering only the layout and structure of page content, this ensures the focus remains on hierarchy and usability, without the need for visual aids that come later in the process during the UI phase. This also enables designers to ensure there are sufficient screens being created, which allows the user journey to be as seamless as possible.

Within UI, stakeholders and users get an accurate representation of how the product will look and feel with all of the branded elements included. Since spacing, typography, and any other styled elements are defined within this phase, it allows the user to understand how information is displayed, and exactly how much content is available to them on each screen.

Cons
The more complex the prototype, the longer it takes to create. For example, a large amount of screens, as well as inclusion of hover effects and transitions can all have an impact on project timings.

It’s important to remember that these prototypes aren’t real webpages, so certain functionality won’t work as expected – you wouldn’t be able to enter text for example, and requires a bit of imagination!

Tools such as Figma, InVision and Adobe XD do allow you to have some forms of interactive behaviour, but sometimes a product requires a more complex animation that prototyping tools cannot achieve. In this instance, an animator may need to be involved to create these elements, which in turn take more time.

Conclusion

Interactive prototypes can help stakeholders and wider project teams gain a visual understanding of a webpage or app at an early stage. Wireframes are easier to adapt, but full UI design offers a clearer picture on how the product will look and feel.