13 tips and techniques to help you get better at prototyping
By: Darren Bennett
Tags: UX Research, Product Design, UX, Interaction Design, Prototyping

1. The smoke and mirrors technique

Prototypes are fake. It’s easy to forget this especially with advanced tools like ProtoPie or Framer. So tip number one is don’t try too hard to make things as they will be built in a real app. I like to think of prototyping like a movie set. You just need to make it feel believable. Take whatever shortcuts you can, to achieve what you need to achieve in the shortest possible time. This should be your mantra when prototyping.

The smoke and mirrors technique is all about creating something advanced or more involved in a much simpler way. Using the power of illusion to trick the eye to think that the experience is doing something which in reality, it isn’t.

Try taking a step back and thinking about how you might achieve a feature using this mindset. Like movies, your prototype has a very short shelf life.

Using Opacity and two camera layers in ProtoPie to mimic a photo being added.

2. Let your brain fill in the gaps

The human brain is designed to create sense from nonsense. What you have to remember is that what your eyes see isn’t really what your see. What you actually see is your brain’s interpretation. The optical input from your eyes is just one of many inputs that are used to create what you see and you can take advantage of this ‘fill in the gaps’ aspect to save you bags of time.

Time for an example. Does the image actually drop into the icon?

This technique relies on tried and tested animation techniques originally devised by animators at Disney.

Using some of the 12 principles of animation to trick the brain into thinking the image drops into the tab.

3. Use Graphical Furniture

In a prototype, you want to focus on making only certain things interactive. You don’t have time to make everything work but like a movie set, you want it to be believable. Think about what is likely to be interacted with and what is not. Just make sure everything looks like it could be. Graphical furniture is the name I give to these non-interactive parts of a prototype. I flatten any UI graphics into single png’s that I’m not intending on using. This reduces the overall complexity of a prototype and also helps performance when it runs.

A single image is used here for a list instead of importing 20 separate images.

4. Use variable content

There’s nothing more likely to break the fourth wall than content that looks immediately fake. While creating fake content is time-consuming and you don’t want to go overboard you also need to make sure you're prototype looks believable.

Keep content variable, avoid reusing the same images or duplicating the same content over and over. People will notice repeating patterns as our brains are hard-wired to look for them.

Avoid repeating images and text, it just makes your prototype look fake.

5. Make content readable

You probably believe that people don’t read much text on websites and apps. The percentage that people read is indeed low but in the case of prototyping, they will definitely scan and read the few words you put in. I’ve witnessed over and over in user testing sessions that people do actually read content in prototypes so make sure it makes sense. Avoid Latin or placeholder text, as the nonsensical text will just add to people’s confusion.

6. Start your prototype at the beginning

It’s not common for people to land on an app or website in the middle of the experience for the first time. When I’m prototyping a mobile app I make the first screen of the prototype the operating system (for the web you could start it at a Google search page). This immediately gives people the impression that they are using something real even though they are already in my prototype. This allows me to blur the line between fantasy and reality. This is another technique that uses illusion and trickery to help create a believable experience and trigger focus mode.

7. Performance is king

There’s nothing worse than a juddering laggy prototype to break its believability. People are used to real experiences being fast and optimised. This also has an effect on their perception of speed within the experience as well, which can lead to a changed perception of how easy it feels to use.

8. Fake user choice’s

Building choices into a prototype facilitates freedom of movement and that, in turn, creates a more believable prototype. It also makes sure that people testing your prototype stay in the ‘doing zone’ rather than the ‘talking zone’. What I mean by that is as soon as your prototype is seen as not working people disengage using your prototype and instead just start talking about it. Asking people their opinion of what they think of how something works is not as desirable as observing people using it.

Designing with multiple choices in mind also has a huge benefit when you are designing. It will help you find the cracks in your design. Things that you wouldn’t normally find will quickly become very clear to you. To read more how prototyping tools can help your design smarter check out my article How design tools are shaping the way we design.

9. Personalise your Prototype

Where possible I either get people using my prototypes to enter their name in a faux login or I’ll have a mechanism within the prototype to easily add it in. I can then use their name in the prototype to create a more personalised experience.

Another way to personalise is to create functionality which allows the person to use it to make an actual change, such as saving an item to a favourites section. Be careful how you onboard this though. Just saying “hey how about you save that item” probably isn’t going to cut it. With advanced prototyping tools that have the ability to set conditions, you can achieve this fairly easily.

10. Don’t start in the middle

When designing It’s easy to forget that people using your prototype aren’t going to be familiar with it like you are. After all, you’ve poured hours over designing and understanding it. Often I see prototypes that start quite a long way into the experience. It then becomes the moderator's job to ‘set the scene’.

No matter how good the moderator is there’s no substitute for actually starting the prototype at the beginning of the experience. Let people get that knowledge first-hand where possible and in return, you’ll get much better insights.

If you are testing something fairly deep you can be smart about how you deliver this first-hand learning. Try starting with a signup journey and initial look prototype before diving into a deeper journey prototype.

11. Make it a two-way street

I’ve seen a lot of designers make their prototypes go one way, the happy path way. This obviously isn’t reflective of a real experience. Prototypes should give as much freedom of movement as possible because that’s how you’ll find the failures. That’s why you’re testing in the first place. Prototype for the unexpected. The less free the prototype is the less believable it will be.

12. Have an offline backup

I’ve lost count the number of times that I’ve arrived at a lab or office to find that the wifi is flakey or plain doesn’t work. I always make sure that I have an offline backup. In fact, if I can use an offline prototype I will. Most prototyping tools should give you this option so don’t get caught out.

13. Build prototypes like Lego®

A lot of work goes into the prototypes your building and almost certainly you’ll want to pivot the design and try different things out. I’ve done this quite often on a test day. I’ve observed something several participants have done which has made me want to try other things out so I’ll often change a prototype on the fly.

Think about how you are building. You are probably prototyping at speed and speed is rife with a mess and a lack of structure.

Building in a more thoughtful and modular way will enable you to easily change things. This initially creates more effort but you will almost certainly get that investment back. Remember the more reusable UI you build the faster you will get and you will surpass the ‘at speed’ approach.