Rapid interactive prototyping, a web design trend that can improve your designs

By making time for Rapid interactive prototyping in your web design process you can improve the user experience of your designs, you can improve your communication with your clients and you can save time and money.

The method of designing an interactive prototype is gaining popularity and with tools available like Adobe XD and Usability Hub, the trend is set to continue.

Good communication between client and designer is a real benefit as it can generate feedback into the design early in the process and prototyping nurtures this relationship from the early stages.

Another good reason is the opportunity to involve the audience, you can start testing with the very people that will be using this website.

It may not seem so in the early stages but prototyping saves time and money as, when done well, you will find you are planning up front and not firefighting so much in later stages.

What is involved with Rapid Interactive Prototyping?

Generally, Prototyping is a process that involves repeating three key steps, you prototype, you review and you refine. These steps are repeated until a solution can be found that fits what you the web designer and what the client wishes the project to be.

Prototyping – This is your interpretation of the project, as a web designer you take what you know about user experience design and you plans a website or application that fits the goals of the client and still creates a good experience.

Reviewing – This is the testing phase, a chance for the target audience to get their hands on it and find out if it appeals to them, they can give their feedback and you can watch how they interact with your prototype. Note anything that might be surprising or confusing about how they interact and the choices they make.

A B testing is a popular component of the reviewing process. Your testers will be shown two variants of a design and asked to choose a preference then asked to state why they made this decision. In this case, it’s best to keep the differences to a minimum and ask them to answer specific questions. Like “Can you clearly identify the special offers”, or “what do you think is the purpose of this button”.

Refining – You have your data, now you need to put it into practice. In this process, you will clarify and define elements, add functionality or lose redundant elements altogether.

The rapid component is the small iterations that are sent back and forth between designer and client. it’s a process that is done quickly, the actual time taken varies on the project size and complexity.

One aspect of prototyping is that can become quite time-consuming is the idea that everything needs to be prototyped. Clients tend to believe this must be the case. This can really slow the process down and clients can start to imagine their prototype is intended to be a fully functioning version of what it will be like once coded. It’s possible but not everything needs to be prototyped.

Prototyping saves time because you are building the complex interactive elements as a visual story rather that building and rebuilding them as complex fully featured elements in the final design.

A good rule of thumb is to focus on the 20% of the functionality that will be used 80% of the time.

To help you understand how to apply this to your prototype think about the user’s story. First identify areas that might need to be prototyped, here your looking for complex interactions, next think of the scenarios that your users are likely to be facing. In the real world on an online store, you might have one focused user looking for something specific or another leisurely user more open to suggestions.

Other good candidates for prototyping are the features where you intend to deviate far from standard designs, this could be search or navigation. I recently prototyped a complex navigation for a client who wanted to experiment with a mega menu. The process was helpful as had I built it right away I would have taken a very different direction.

How much detail should you include?

As well as staying in control of how much of the functionality should be prototyped, it is also worth considering how much detail will be included. In the web design world, this is known as fidelity as refers to how closely you prototype resembles your final intention.

Fidelity is not just the look and feel, it is also the functionality. A prototype with low fidelity could be a sketch on a piece of paper. High fidelity has more details and had probably been refined in a design tool.

Sometimes it’s useful for a prototype to be low fidelity, clients can’t help but focus on the details when they see a shiny full featured concept but this might not be good timing as the functionality may need their full focus first.

Rapid prototyping tools

I mentioned two of my favourite prototyping tools earlier, here I am going to explore these in more depth. These tools are Adobe XD – for quick visual designs and Usability Hub – for help with testing and research of your designs.

Learning to communicate effectively with clients has always been a barrier for designers but tools like these are helping to smash that barrier down.

Adobe XD – the prototype stage

This is a product that recognises that a web designer’s role has evolved and they are now with responsible for designing how things on the screen behave. This tool primarily allows for a very quick expression for a web designers thoughts and vision. It also speeds up the process by allowing users to quickly reuse and remix elements of their design to offer multiple solutions. This product is free for now while it is in the Adobe preview period.

Usability Hub – the review stage

To avoid making assumptions designers should set up tests and research activities to make sure any assumptions they do make are valid and to make sure the design is suitable and works well for the user.

I’ve met countless web designers and developers that don’t want to go out and test with people simply because they find the idea intimidating, well this process helps solve that problem by putting the designer in contact with a tester who has already registered they are willing. It’s a paid service that pays back – quite literally for the actual testers – in getting user feedback data.