3 Levels of Prototyping and When to Use Them
Prototypes are created to save time, communicate more effectively and focus on how the product will actually work. Prototypes are often created early in the development process and are used for user testing or are better developed 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 so much 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 true mobile experience.
Pros
Cons
Why create a click-through prototype?
Even though click-through prototypes have limitations, they still serve a vital role within the design process. We at Swift Kick like to use click-through prototypes early on in the design process to find answers to the initial questions. We often prototype several takes of an experience to see how the content fits and feels on a mobile device, or how we 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 a pitch deck.
With click-through prototypes, it is common to do them at various 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 the types of interactions shown above. Check out the pan of the map, animated location pin, searching transitions and 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.
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 further 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
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.
Pros
- Virtually full potential of the hardware (Depending on the 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 give you 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 chatting with an engineer to see if a prototype is the right 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.
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
Everything you need to grow your business
Crafting exceptional mobile experiences so you stand out in a crowded digital landscape. Trusted by Experian, Vrbo, & Expedia.
Let's do it together
