4 Common prototyping mistakes designers make (and how to avoid them)

Prototypes are clickable, high-fidelity representations of the end product that are designed with the purpose to simulate user interactions. Prototyping enables UX designers to evaluate how their design solutions align with user experience.

Specifically, it allows you to:

• Explore and conceptualize various ideas and candidate design solutions.
• Run user tests to determine how well it works.
• Eliminate ambiguities by improving your interpretation of client requirements.

In this article, we’ll take a look at some of the most common prototyping mistakes UI designers make and what steps you can take to steer clear of them. Along the way, we’ll recommend some tools and resources to help you avoid these pitfalls in your project’s prototyping stage.

Let’s begin.

Mistake #1: Jumping into prototyping too early

Jumping into prototyping before thoroughly planning out a design solution is one of the most common mistakes designers make. When you skip over creating wireframes or a mockup, you’re skipping over the design thinking process.

Here’s why jumping into prototyping too early is a mistake and how it can affect your project:

• You’re not able to generate lots of ideas. The purpose of sketching wireframes is to try out different design ideas. The ideation phase gives you an opportunity to create lots of ideas and decide on the best one. By doing so, you’re able to plan out the project better than you would if you skipped paper prototyping.
• Prototyping tools require more focus. Prototyping tools generally require designers to focus on details (such as alignment and spacing) rather than creating a simple, wireframe-esque prototype. Instead of prototyping breadth-first, designers often end up prototyping depth-first.

Instead of jumping into prototyping too early, create sketches, wireframes, and mockups that allow you to try out several design solutions at a high level. Exploring different design concepts early on makes it easier to plan out the project and make changes where necessary at a fraction of the cost.

Pro tip: Always create wireframes or sketches of your main screens/pages before designing them in a prototyping tool to save time.

Mistake #2: prototyping without a plan

Without a solid plan in mind, it’s easy to get carried away while designing prototypes. Instead, you should use your sketches and wireframes to develop a prototyping plan. This plan should map out which screens and interactions to design first.

Prototyping tools make it incredibly easy to create screens and add interactions to them. Because of this, it’s tempting to forget to follow the plan and, instead, get as much done as possible.

Here’s why, more often than not, this will end up being a mistake:

• It wastes time. Whenever you divert from the plan (or fail to create one in the first place), you’re wasting time. In the case of prototyping, you’ll either wind up creating elements that aren’t necessary at the prototyping stage or prioritize building secondary screens and interactions first.
• It’s easy to get lost in the details. Without a proper plan in place to keep you on track, you might get caught up in the details, like font sizes and microcopy to colors and typeface.
• You’ll end up with a complex, unfinished prototype. Spending too much time designing a prototype without a plan will likely result in a complex and unfinished prototype.

Once you’ve decided on a design solution to proceed with and have a sketch for it ready to go, plan out which screens to create in the prototype and in which order. Consider creating a checklist to help you stay on track. Next, use a prototyping tool (such as InVision) to begin designing your prototype according to plan.

When you share your prototype with project stakeholders or conduct usability tests, gather as much design feedback as you can and add the changes you’d like to make to your checklist.

Mistake #3: Prototyping at the wrong fidelity

Another common mistake designers make is using the same tool regardless of where they are in the design process. The problem with this approach is that they always prototype at the fidelity the tool offers. As a designer, you need to make sure that the fidelity you choose to prototype is in line with where you are in the design process.

There are a few major problems with prototyping at the wrong level of fidelity:

• Doesn’t match where you are in the design process. The biggest problem with creating prototypes at the same fidelity is that it may not always be the best solution for where you are in the design process. For instance, if you’re just starting and haven’t generated a lot of ideas, creating a high-fidelity prototype would be counter-intuitive.
• Your prototype may not align with your project goals. If you’re tasked with creating a prototype that accurately represents the final visual design of your project, you would want to use a tool that allows you to create mockups instead of a high-fidelity prototype that simulates complex interactions.

To determine the right level of fidelity for your prototype, start by identifying where you are in the design process and what your goals are. Are you in the ideation stage trying to come up with as many design solutions as possible? Or do you already have a direction in mind and you want to create a prototype on which to conduct usability tests?

Mistake #4: Not creating a prototype interaction guide

Prototypes are prototypes – despite how complex you make them. What this means is that your prototype serves a defined purpose and it isn’t by any means the final product.

High-fidelity, interactive prototypes need interaction guides to go with them that explains (1) which elements are clickable and which ones aren’t and (2) the main success scenarios – or paths – users need to follow to cover all of the screens and simulate all of the interactions.

Here are a few major problems that are likely to arise if you don’t create an interaction guide to go along with your prototype:

• Your usability testing won’t be useful. When you conduct usability testing, it’s important that the users have a clear understanding of the elements with which they can interact. Without an interaction guide, users might accidentally click on an inactive link or button which would affect the test results.
• You will not be able to get thorough design feedback. When project stakeholders review your prototype, they need to know the correct path they need to take to be able to cover all of the interactions to be able to give an accurate design review. Without a proper interaction guide, this is pretty difficult and unnecessarily time-consuming.

To avoid making this common prototyping mistake, create an interaction guide for your prototype that details:

• The main success scenarios and user flows users need to take to simulate interactions.
• The order in which users need to click through the prototype.

Axure RP is a prototyping tool that allows you to add annotations to clickable UI elements. You can enable this feature to quickly highlight clickable elements during design critiques and usability testing.

Conclusion

With the sheer amount of tools that are available to designers today, avoiding common prototyping mistakes shouldn’t be difficult.

Instead of prototyping too early, without a plan, at the wrong fidelity, or without creating a prototype interaction guide first, spend some time developing a plan that fits your timeline and budget. By doing so, you’ll be able to spend your time creating effective prototypes.

Are you guilty of making any of these mistakes in your prototypes? Let us know in the comments section below!