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.
Many design programs such as Sketch, Figma, and XD allow you to build click-through prototypes right in their apps. Also, Invision is a popular online tool that allows you to create and share these prototypes with the world. There is also a tool called POP that allows you to make prototypes from drawings on paper.
- Quick and easy to create
- Easily shared
- Free tools available
- 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. 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.
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 varies a little between tools, but high fidelity prototypes are easily made in all.
- Custom transitions
- Can swipe, pinch, long press, etc.
- Can feel like a real app
- 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.
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.
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.
- Virtually full potential of the hardware (Depending on the tool)
- Innovative technology
- Haptic feedback (phone vibration)
- Full gesture support
- 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.
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.
Hopefully, these three levels of prototyping give you more insight into 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 prototype, whether it be quick learnings, how it actually feels or how doable is the idea.
We at SwiftKick often explore all 3 on client projects, our own concepts and hackathons. Feel free to comment below or Contact Us if you would like to get a bigger conversation started.