A mobile app designer works on a project in her office on a sunny morning - prototyping realism concept
PHOTO: Shutterstock

Prototyping is an important step in a customer experience (CX) or user experience (UX) process. Whether you start with sketching or wireframes, or you work immediately in Axure, Framer, or real code, there’s never a bad time to mock up how the product might actually appear to function for customers. We need to experience it, socialize it, get internal feedback and test it on customers before engineering writes a line of code.

Additionally, we can be leaner about our documentation by providing engineering teams with realistic prototypes with some annotations. This is often easier to digest than long documentation or pages of annotated wireframes. Engineers can see the product brought to life and use that as the reference for what they are building. Click-through models don’t provide this level of detail, and would still require extra documentation to explain functionality and intentions.

Many CX and UX practitioners opt for a simple click-through model like you can create in Invision. This type of prototype might be high fidelity (fully visually designed), but is often not realistic to the user’s experience. Invision prototypes represent the user flow, the steps the customer takes through a digital experience. This can bring a flow chart to life but is not an accurate representation of the product.

More Than One Action Per Page

Once upon a time, our screens were simple and often had one action per page. Anything you clicked loaded a completely new screen. Even tabs or radio buttons took you to another web page. However, this hasn’t been the case for many years. For over a decade, we have had pages with more interactivity and states. A page can come in different forms for different types of customers such as logged in vs. logged out, or trial customer vs. paying customer. Our tabs, modals and progressive disclosure now shift and change without having to load a new web page.

Our flow charts had to become more complex to represent different types of customers taking a larger variety of paths for each task they are trying to complete. Multiple steps can live on one page and the possible number of errors a user can encounter is also greater. Our customers aren't directed to “see this page,” “see page 2” and then “see page 3,” because currently, a huge amount of information, functionality and features can exist on one web page. Yet, in many cases, some CX and UX practitioners haven’t changed their prototyping style or software in many years.

Related Article: User Testing Belongs in the UX Process: Here's Why

Consider What Your Prototype Represents

When we test products or features on users, we want to test something as realistic as possible: our model, prototype, or demo version. It wouldn't make sense to use an unrealistic model unlike our product for testing. That could be junk science as we're testing something that doesn't match the concept or architecture. Therefore, we must go beyond the click-through model for prototypes, and choose to create more realistic prototypes that allow true user interaction.

If the prototype is to show a stakeholder a high-level walk through of the product, an Invision prototype can certainly be a great choice. But what should we use when we want co-workers or testing participants to fill out forms, put items in shopping carts, manipulate data, interact with a dashboard, or perform a realistic user task? This is where and when we need to employ more realistic prototyping.

What Is the Best Prototyping Software?

Visit LinkedIn posts for more than 5 minutes and someone will express love for Axure, Framer, Principle, Invision, Adobe XD, or one of dozens of prototyping tools. CX and UX practitioners are often showing off, complaining about, or discussing these tools. So which is the best?

The best one is the one that gets the job done. If you need to run user testing on a realistic prototype, then you wouldn’t choose software that specializes in showing how small interface moments might be animated. You might not choose the prototyping system that simply clicks through a user flow. You will have to look at creating something more realistic.

If you don’t write your own code and your team doesn’t have a dedicated prototyping resource, it might take a while for you to learn to code well enough to prototype what you have designed. Therefore, it’s often best to invest in learning the key prototyping tools that are our there. With conditional logic, variables and other features, these software packages can seem hard to learn. Photoshop probably looked pretty hard to learn the first time you opened it, but many of you knew it was important to your craft and job, and you learned if not mastered it.

Given what many jobs are currently requesting for prototyping, your best bets are Axure and Framer for creating more realistic prototypes. Go beyond what you can mock up in Sketch or Figma. It’s time for our prototypes to look more like the concepts we have and the products we are developing.