3 Levels of Prototyping and When to Use Them
Prototypes are created to save time, communicate better and focus on how the product will actually work.
Prototypes are often created early on and used for user testing or done through code to understand the feasibility of a technology. Both are extremely important parts of the product development process. They help with the understanding of user flows, feeling out interactions, communicating the desired experience with the broader team, used to raise money and more.
“If a picture is worth a thousand words, a prototype is worth a thousand meetings” — IDEO
Level 1: Click Through Prototypes
The prototype shown above is composed of around 25 images that are linked together from invisible buttons that you can tap on. You can see that some screens slide in from the side or bottom and you can scroll with fixed navigation. These are basic functionalities that help mimic the feel of a truly mobile experience.
Many design programs such as Sketch, Figma, and XD allow you to build click through prototypes right in their apps. Invision is a popular online tool that allows you to create and share these prototypes with the world and there is even a tool called POP that allows you to make prototypes from drawings on paper.
Pros
— Very quick
— Easy to create
— Easily shared
— Free tools available
Cons
— Limited interactions
— Static images only
— Can’t access device inputs like camera and keyboard
— No logic
— No gestures
— Can become hard to maintain
Why create a click through prototype?
Even though click through prototypes have limitations, they still serve a vital role within the design process. I like to use click through prototypes early on in the design process to find answers to the early questions. I will often prototype out several takes of an experience to see how the content fits and feels on a mobile device or how I can break it up into steps or screens. These prototypes are great for exploring early concepts, user testing, getting buy in from team members, and communicating an overall strategy.
Even at this low fidelity state, a hands on experience is far easier to understand than written notes or several slides in pitch deck.
With click-through prototypes, it is common to do them atvarious levels of fidelity. Pen and paper all the way through high fidelity screens are both fine to use. The main purpose is to understand the flow and get a feel for how the mobile application connects all the parts.
Level 2: High Fidelity Prototypes
High Fidelity Prototypes don’t have to be as thorough as the gif above, but the above design does a great job of making us feel like it’s a fully functional app. The term fidelity here does not only talk about the professional level of visual design but also types of interactions that are shown above. The pan of the map, animated location pin, searching transitions and even swiping gestures. All of these steps are pre scripted and none of the functionality actually works.
Prototypes with this much fidelity and polish do their best to mimic a true native app experience.
Creating high fidelity prototypes such as these takes a lot more time, skill and at this level the programs start to cost money. Programs such as Principal for Mac, Flinto, and ProtoPie are a few popular tools to create such prototypes. The functionality of these tools fluctuate a little between the tools but high fidelity prototypes are easily made in all.
Pros
— Animations
— Custom transitions
— Can swipe, pinch, long press, etc.
— Can feel like a real app
Cons
— Pay for application to create
— More time and expertise required
— No logic
— Can’t access device inputs like camera and keyboard
Why create a High Fidelity Prototype?
Since high fidelity prototypes take so much more time and finesse to create, they are typically done farther along in the design process when you are more confident in the direction of the product. Even though these prototypes take more time to create, they are still faster than implementing it through code with an engineer.
High fidelity prototypes are excellent for understanding micro-interactions.
Micro Interactions:
The moments within an experience where the experience communicates back to the user. Think of how you pull to refresh or delete an app on your phone.
The visual user interface is only half of what you actually experience when navigating through a great mobile app. High fidelity prototypes help you understand how the product actually works, how it feels to operate, it’s usability and most importantly, how enjoyable it is.
Level 3: Logic/Code Based Prototypes
Logic-based prototypes are created with code rather than created in a design software tool. The end result allows you to virtually tap into all the functionality of the device it’s running on. They can pull data such as photos and videos from an API, take photos with the camera, record with the microphone, use the keyboard, set timers and more.
Given that the possibilities are pretty endless these do take the most time, thought and skill to create. There are a few tools designed specifically for these prototypes such as origami by facebook, framer.com, atomic.io or you can work directly with an engineer to create a prototype with native code.
Pros
— Virtually full potential of the hardware (Depending on tool)
— Innovative technology
— Haptic feedback (phone vibration)
— Full gesture support
— Logic
— Animations
— Video
Cons
— High level of expertise needed
— More time
Why create logic/code based prototypes?
Even though logic/code based prototypes take the most time, they allow you to insight into the toughest problems. Click through and high fidelity prototypes are scripted experiences with pseudo functionality. If you require dynamic information, video, microphone or keyboard usage. Creating a logic or code based prototype is the way to go.
Logic/code based prototypes are not always necessary but they are critical when understanding capabilities.
Innovative Technology
If you have ever asked yourself, “Is this possible?”, then I recommend starting a chat with an engineer to see if a prototype is right your idea.
When it comes to new technologies like Augmented Reality (AR), Virtual Reality (VR), Wearables, IoT, Blockchain, Natural Language Processing (NPL), Machine Learning and Chatbots.
There are constant improvements with the technology and depending on your vision for your product. A code based prototype could rapidly help you to uncover possibilities and constraints with new technology.
Conclusion
Hopefully these three levels of prototyping give you more insight to the product development process and when to think about doing each of them.
If you are not sure where you should start, always keep in mind what you want to get out of the process. Quick learnings, how it actually feels or how doable is my idea.
