What are prototypes?
In a design process, prototypes are one of the most important steps. A prototype comes in many shapes, from basic sketches representing different screens to a high fidelity prelaunch interface.
“A simulation or sample version of a final product, which is used for testing prior to launch.” – Jerry Cao at UXPin
The main goal of a prototype is to test products or product ideas before spending a lot of time and money on it. This way, it is possible to test your idea quickly with it’s users whether it works or not.
Prototypes come in different shapes and variety. A few common categories are: Paper, digital and HTML. In this post, I’m going to define “Digital prototypes”, explain different variations and how to make them, and most importantly, test which one is the best prototyping tool for windows.
When do we make prototypes?
Whether you are working on an User Experience project in a company or a project during your studies, we end up making digital prototypes to test with our target groups (also known as the user).
But at which point in the design process are you making a digital prototype?
In the beginning of a design process we are more likely to make sketches. Ideas and early stage products are made into relatively low-time consuming prototypes. Please look at image 1: Timeline digital prototypes to see where in a design process the digital prototype appears.
Image 1: Timeline digital prototypes
“What users believe they know about a UI strongly impacts how they use it. Mismatched mental models are common, especially with designs that try something new.”
– by Jakob Nielsen on October 18, 2010 from NNgroup
Why do we make prototypes?
Prototyping is essential for testing and resolving usability issues, reveal areas that need improvement or just simply test your user’s mental model about your idea or product. Once a draft of your product idea is used by a real user, you’ll see how they want to use the product.
Prototypes are any version of your product which can be used for testing. As long as it gives you new insights into how the real user will use the product.
I want to make a prototype
Well, this is when the frustration begins, or at least it was for me. Starting with our sketches and having a lot of ideas for a digital prototype, we need to choose a prototyping tool which suits our needs and skills. To find out which tools are available, I used prototyper.io which is a very nice website to give you an impression and a nice overview of all tools. There even is a comparison function, which makes it easier to pick the right tool (see image 2: UX Prototyping tools, by http://www.prototypr.io).
Image 2: UX Prototyping tools by Prototypr
As the title of this post says, I will be only comparing and testing prototyping tools which are available for a windows 10 operating system. And to choose the right tools for testing, I will compare prototyping tools based on speed (speed is everything) and another different aspects.
- Speed & Fidelity
- Speed & Interactivity
- Speed & Collaborating
Comparing: Speed & Fidelity
Image 3: speed & fidelity chart by Prototypr
Depending on what kind of prototype it will be is actually the main question in choosing the right tool. I tend to focus on free versions beforehand, but this is only because of the reason that I’m still a student.
Before we look at the tools, i’d rather ask myself these questions:
- Is this a quick mockup prototype?
- Is this an advanced interactive prototype?
Based on the first question, the tool should perceive and act according to speed rather than interactivity. Therefore, question two is more in need of a highly interactive tool.
As we discussed earlier, in this post we focus on digital prototypes. Which means that we skip a low-fidelity prototype and move on to a higher fidelity prototype.
Based on what we see in the chart (image 3: speed & fidelity chart), I will make a top 3 in prototyping tools with in mind that it has to work on a windows operating system, it needs to be relatively fast (speed) and it has to be of a higher fidelity purpose.
- Adobe XD
Comparing: Speed & Interactivity
Image 4: speed & interactivity chart by Prototypr
For interactivity, we are looking for tools which can make highly interactive prototypes such as creating animations or multiple gestures (see image 4: speed & interactivity). As we’ve done in the previous comparison, the top three will be based on whether the tool is available on windows operating system, is relatively fast (speed) and has the possibility to create hi-fidelity interactions such as animations or multiple gestures.
Comparing: Speed & Collaboration
Image 5: speed & collaboration by Prototypr
In future projects, no matter the size, it’s always nice if programs can collaborate with others. This enhances the working-flow and speed in many cases. Taking this as a requirement for this comparison, we look at shareability, test-ability (is it easy to test with?) and whether it’s available for windows operating system (see image 5: speed & collaboration).
Testing the prototyping tools
With the comparisons I will test these prototyping tools myself;
- Adobe XD
ProtoPie is a windows application for desktop and has both interactivity and higher fidelity based on the comparisons, this should be a good program to test. Quant-UX is a web-based program so it can be used on any device. It contains all three requirements as seen in the comparisons. Adobe XD is quite fast and good for high fidelity prototypes. The program is still in beta version and therefore potentially a good program for interactivity as well.
What am I going to test?
Currently as a student at CMD (Communication & Media Design) I’m working on my mastertest from the Minor User Experience Design at the Hogeschool van Amsterdam. In this project, I have to create a prototype to test with it’s users. This will be a high fidelity, medium interactive prototype which is great to test these tools with.
Image 6: ProtoPie Test, ProtoPie
A no-nonsense interface. Not quite sure how it works on first sight, luckily they have tutorial video’s about the basics. They focus on one screen at a time and you can make multiple screens by making scenes. This is a high interactivity based tool, because of the one screen focus where you can add a lot of animations or containers and such.
- Highly interactive
- Focus on one screen
- Maximum control on outcomes, f.e. Animations
- Images, video’s, shapes, text and containers
- Deploy application on mobile for testing
- Hard to start
- No page overview for quick links
- Trial version
Image 7: Quant-UX Test, Quant -UX
An agile quick tool with a intuïtive interface. Starts with an overview where you can easily add screens and quick links. It’s an medium interactive based tool, because of the screen overview and no one screen focus. Animations are limited.
- Medium interactive
- Quick set-up and screen linking
- Images, shapes, text and containers
- Easy widgets to use
- Simulation on mobile
- Web-based, accessible for everyone
- No maximum control over animations
- No export except png (still beta)
Image 8: Adobe XD Test, Adobe
There is a switch between design and prototype. Starts with an overview and has a few tutorials. It’s not very clear where to start. Easy screen control and import from other Adobe programs. Wide variety to export. Overall a steady program, but not as interactive as either ProtoPie or Quant-UX. It’s mainly screen flows.
- Quick set-up and screen linking
- Images, shapes, text
- Share online and desktop simulation
- Wide variety for export
- Collaborates with other Adobe programs
- No animations, just screen transitions
- No containers
- Low interactive
Based on these tests and considering the pro’s and con’s which are defined during testing these tools, I came to a conclusion which of the programs is the best in case of creating a relatively high interactive prototype.
ProtoPie is in my opinion the best program to go for as it is very interactive and good for both lower and higher fidelity. There is a broad variety with animation and interaction options and it possesses a way to create a quick screen flow. Deployment to your phone works via an application which you download on your phone, so it won’t depend on your computer whether it’s online or not.
Quant-UX is also a nice tool to use, but misses the higher interactiveness. It’s a great tool for creating quick screen flows, since it’s very agile in both creating and sharing.
Adobe XD is a no-go for me. At least in this beta version it is. I hope they will give us more interactivity in the future, but for now I will stick with ProtoPie.
Graphic Designer and student at CMD, Hogeschool van Amsterdam with a focus on User Experience Design (UXD).
Author: Robbin Lenior
Communication & Media Design (CMD)
Hogeschool van Amsterdam
See my research before creating this blog