Source: unsplash.com

The power of prototyping: why prototypes?

A prototype is a tool for visually demonstrating to the client and the team how all the elements and modules of a project will work together, how users will interact with a website, application or product.

From a design perspective, prototypes help to gauge the level of user engagement, the effectiveness of their interaction with the product, derive a formula for their overall behaviour and see how they react to the design.

I’ve noticed that we use prototypes more often as a tool for testing apps, websites and products. But they can provide much more information, reduce risk and make decisions about design, functionality and the whole project easier to make.

Good prototypes answer questions that have not been asked. Great prototypes force you to think about the consequences of launching applications and products.

Objectives of prototyping

Prototyping is effective in achieving these objectives:

1. Communication research

Prototypes mimic what users can look at, what they can interact with. The key questions they answer are: Do users understand what they will be working with? Can they interact with the application or product as intended?

2. Determine the value of the product or application to the user

Prototypes help you determine the value and usefulness of your development to the user. The key questions they answer are: do users understand the role of the product/application/site? How useful and relevant do they find it?

3. Project feasibility

Prototyping allows you to flesh out an idea and assess what is difficult to implement. Prototyping in this case answers the questions: how will the idea be technically realized? How to make the future product work?

4. Consequences

If we are talking about socially relevant projects that can change or model human behaviour, then prototypes are needed to determine the consequences of implementing a product or launching a project. The key questions that can be answered through prototyping are: What are the unintended consequences of this decision on the person or society? What is the worst-case scenario for using the solution or idea? What is the likelihood of manipulation of the solution or idea?

The purpose of prototyping tends to vary from stage to stage in development. The same project can have several prototypes, e.g. for different target audiences. Also one prototype can cover several tasks.

Prototype forms

Prototypes can be created in any form — from sketches, schematics and storyboards, so-called Lo-Fi and Medium Fidelity prototypes, to High Fidelity prototypes, which are close to mimicking the final product. And yes, prototypes don’t necessarily have to be exactly a modelled product. You can prototype one of the modules to test a particular part of the solution or design.

Here are some types of prototypes that I think are interesting and effective:

Wizard of Oz prototypes

Allow the testing of functions that have not yet been implemented. The user only tests simulated real functionality. Instead of real functionality, the Wizard of Oz simulates actions in the background.

User-Driven Prototypes

The important thing here is to find a balance between how much functionality or design you give the user and how much you ask them to create. The ideal prototype should be elaborate enough so that the user has something to build on, and open enough so that the user can bring something of their own, give you their ideas that have emerged from interacting with the prototype.

Role-playing games

Role-playing (experimental prototyping) is best used to capture and replicate the user’s experience of using a product or application. Try to simulate their experience so that the product evokes empathy in the future. Objects and sound simulations are suitable for simulating the user environment.

Prototypes Live-Data

Qualitative testing helps to answer the question ‘why? Quantitative testing shows how effective your solution or design is. Live-Data real-time prototypes allow for precisely quantitative testing. These prototypes use data or an API to insert real content into the prototype, so they are created using HTML, CSS and Javascript.

Top 7 prototyping tools

I put together 20 prototyping tools in one post a few years ago. You might be surprised, but many of them are still relevant and useful. Today I will name the top 7 that I use myself.

Figma is a complete solution for prototyping. Ideal for real-time teamwork. Especially since the introduction of FigJam, a collaboration board that can be used to brainstorm and organise all ideas.

Source: Figma

2. Adobe XD

Adobe XD is one of the most popular and versatile applications among UI/UX designers for prototyping. You can test them directly on mobile devices. By the way, the tool is geared towards prototyping and assembling objects from ready-made designs.

3. UXPin

UXPin is not a bad system for project document management (wireframes, sitemaps, personas, flowcharts) and prototyping. One of its features is possibility to convert paper prototypes to digital if they were created with UXPin notepad. That is, you draw a prototype, take a photo of it, and it is automatically recognised by the app.

Source: discovermerge.png

4. ProtoPie

ProtoPie is a powerful hi-fi prototyping tool for mobile applications. Interactive prototypes created with this tool can be easily and quickly deployed on any Mac and Windows device.

Source: collaboration-hands-cursor.png

5. Framer

Framer is known for its flexibility, interactive design, realistic prototypes and adaptive layouts. It allows you to design realistic prototypes and immediately share the code with developers.

6. Octopus

Service with fresh approach to interface design, which works very fast. The basic idea of prototyping in Octopus is to form pages from blocks and low fidelity wireframes. The result is visual designs that give a clear idea of the structure of the future project.

7. FlowMapp

FlowMapp is an online design and prototyping service that supports real-time collaboration. It allows you to visualise the content of a resource and draw up a content plan for each block. It can be used to create a schematic page hierarchy and to analyse user paths.

Now you know exactly why prototyping is so valuable and which prototypes you can use in your project. There is only one thing left to do: create your own. By the way, write down which tool you will use.

You can follow me here

Dribbble | Twitter | Instagram

sergushkin.com