The beginner’s guide to prototypes
Which type of prototype is right for your UX design project? In this post, we breakdown common methodologies and their benefits
There are many different methods of prototyping out there for the UX designer to choose from. Whether it’s a quick sketch on a scrap piece of paper of a fully functional design in Justinmind, it can be difficult to know which method to use when embarking on a UX design project.
In this post, we’ll run through how prototyping helps the user experience as well as the common methodologies that people use to create great user experiences.
What is a prototype?
A prototype is a primitive version of something that will, potentially, be iterated upon until it is a final product.
Whether it’s a mobile app, a website or even the oven you use to cook your pizza, all of those things ideally will have gone through a prototyping process. You can think of prototypes as drafts. Drafts that will be edited until published. It is through this process of iteration and development that products and services come to life.
So, is a sketch a prototype? It’s not. Mockups, sketches and wireframes are not prototypes. They’re useful and should be used in conjunction with prototypes but it’s important to make a distinction.
A prototype is used to understand and see how a product or application works, what it does and how you should interact with it. They’re simulations of how a finished product will work. Sketches, wireframes and mockups serve other purposes in the design and prototyping process.
Prototypes are easy to make and cheap to construct. The beauty of prototypes is that they allow UX and UI designers to explore undiscovered avenues to reach a cohesive final design. They’re also useful when you need to test performance, save money and improve the user experience.
How prototypes improve the user experience
When it comes to designing mobile apps and websites, prototyping can play a big role in improving the user experience.
A good user experience doesn’t just happen. It’s made that way by experts who painstakingly iterate, improve and adjust until the UX design is perfect.
“If a picture is worth a thousand words, a prototype is worth 1000 meetings.” – IDEO
If you’ve had an easy experience booking an apartment on Airbnb or were able to successfully unsubscribe to a newsletter without any headaches then you’ll understand why prototyping helps the user experience. These aren’t prodigious decisions that have been made by some high-in-the-sky UX Chief but meticulous planning and prototyping. At Bankrate, the financial services company, the philosophy is to prototype everything.
Drag and drop your way to successful prototypes. Download Justinmind.
Through countless meetings, iterations, and hundreds of interface designs, the pleasant experience you’re having is created.
The main reason that prototypes are effective in improving the user experience is that they lend themselves to innovation. You can repeat and test your hypothesis until the cows come home. All of this can be done before you make an expensive decision (which you might regret without prototyping)
Different types of prototyping
Prototyping is not a monolith. There are various methods of prototyping which all serve a purpose within UX design. Depending on the types of problems you’re trying to solve, you’ll most likely know which prototyping method to use. Those methods are:
- Paper prototypes
- Low-fidelity wireframe
- HTML prototypes
- Interactive prototypes
Sketching is self-explanatory. It’s where you get a pencil and paper (or an free, easy to use Sketching UI kit) and sketch out your ideas.
Usually, sketching in the prototyping process is confined to idea generation and communication. Author of Sketch Thinking, Jose Berengueres, argues that sketching can improve communication which can lead to improved IQ in companies.
You don’t have to be the next Picasso either when it comes to getting your ideas down onto paper.
The sketching stage is useful to get stakeholders involved and allows them to share their ideas, making the prototyping process more collaborative. This can spark early discussions about usability and project goals.
A few benefits of sketching include:
- It’s quick
- They’re non-committal
- Opportunity to be collaborative
Find out more on sketching web and mobile wireframes here.
You might be thinking that sketching and paper prototypes are the same. But you’d be wrong. Even though they both use paper and pen, their intention is different. Paper prototypes are quite popular among UX designers because they’re inexpensive and versatile.
Paper prototypes have a more defined structure than your napkin sketches. You can use more materials like cardboard and stencils to help you create more defined screens.
A paper prototype can be cut out of paper so that you can switch and move UI elements around easily and coupled with post-it notes, you can start to define the application flow.
Paper prototypes are low-fidelity but that doesn’t necessarily mean they are low-fidelity prototypes.
The visual aspect of paper prototypes is minimal. There are no fancy colors with paper prototypes. And, like sketching, you can invite other stakeholders to join in during their creation. They’re a good precursor to an interactive prototype.
Since they’re just made of paper, you don’t need to be a skilled professional to get involved in making them. That means even the novice UX designer can create paper prototypes – only the limits of their imagination is a constraint.
Some benefits of using paper prototypes:
- No skill required to make them
- They’re inexpensive
As we evolve from sketching to paper prototypes, we land at low-fidelity wireframe. Low-fidelity prototypes are often fixated around a singular idea.
That is to say, if you want to change the configuration of a form or see what a UI component would look like in another position then a low-fidelity prototype is a good option. Limited function may be the best way to describe it.
Low-fidelity wireframes are usually concerned with what goes where in a design more than how it looks or the colors that will be chosen.
They’re faster to create than their more robust counterpart the high-fidelity prototype, which makes them a popular choice. The low-fidelity vs. high-fidelity debate is nuanced and is best summed up by Nielsen Norman Group.
Benefits of using low-fidelity prototypes:
- Less time to prepare than high-fidelity prototypes
- Stakeholders understand that the work is incomplete
- Designers are less committed to low-fi prototypes
HTML prototypes may be a thing of the past but they still have a place in the world of UX design.
A HTML prototype is a prototype that has been built and developed using HTML. It’s a great option for people confident and fluent in coding languages. They’re not designed with any stylistic choices and are minimal in their appearance. That means there’s no fancy typography or imagery.
HTML prototypes set the foundation for a product and that foundation can be iterated upon, providing it’s solid. Plus, a HTML prototype can go onto the coding stage a lot faster than other prototypes because it has already been partly written in code.
The benefits of a HTML wireframe:
- Can be viewed in any browser
- Cheap to make
- Set the technical foundation
Interactive prototypes are like a concoction of all the previous types in one. They’re a versatile method of prototyping because of how robust they can be. Robust in that you can see functionality, usability, and realism all in one.
Stakeholders can get a full picture of how your mobile app or website will look like before it goes into production with an interactive prototype because it will be clickable and respond to their actions.
Sometimes UX designers need a prototype which demonstrates interactions and animations. It used to be the case that a high fidelity prototype was a complex endeavor especially with graphic elements and coding. But there are prototyping tools, like Justinmind, which have drag and drop interfaces and you don’t need any coding knowledge to get started.
Interactive prototypes often come further down the prototyping and design process The aesthetics and functionality is more defined and can be used to validate complex interactions during user testing.
Benefits of interactive prototypes:
- They’re realistic
- Can reduce development time
- Useful reference for developers
Now you now what a prototype is. Build one. Download Justinmind.
Why you should use interactive prototypes
You might have thought that all you need to get designing is a good paper prototype or low-fidelity wireframe. But, is a low-fidelity wireframe going to give you everything you need, as a UX designer?
Many designers of all stripes and shades like to impress with their visual design. If you’ve designed a user interface and want to show off an interesting interaction to stakeholders, then a low-fidelity wireframe just won’t cut the mustard. Sure, you’ll be able to explain functionality but there’s a big difference between showing and telling.
Roman Kamushken succinctly put it well: showing static designs makes no sense to your client.
An interactive prototype can convey the interactions you want to show and don’t require much effort to create either. Defining complex interactions may strike fear in a designer but in just a few simple steps, you can create a prototype that will really impress. And you can take into stakeholder requests with powerful sharing capabilities. Key stakeholders can even leave comments on specific UI elements in your interactive prototype.
With pre-built UI widget library and a drag and drop user interface, building your dream prototype doesn’t have to take months on end. In a matter of hours you can create your own mobile app in 6 steps. No more sleepless nights.
There’s a whole menu of prototypes to choose from when you want to create mobile apps and websites. Whether you decide to sketch your idea down or craft a fully functional interactive prototype, the best route to success is one which uses a combination of different methods until you find the right workflow.