Mobile application prototyping: from idea to desktop

It is not for nothing that the prototyping stage is given so much attention when creating applications. Prototypes can help in different situations and at different stages of product development.

In this article, our designer Victoria Shishkina tells in detail what prototypes are, how they differ from each other, at which stages which prototypes should be used and which software is best suited for each stage.

Let's start with the definition:

A prototype is a model, a prototype of the final product. Prototypes differ in the degree of accuracy and proximity to the real product. In addition, different types of prototypes serve different purposes and are capable of solving different tasks. According to the stage of readiness, they can be divided into 3 stages:

1. Conceptual
2. Interactive
3. Animated

Prototypes provide an excellent opportunity not only to engage users in the design process, but also to quickly create a product that meets customer expectations.

Prototypes help with communication with the customer, can be a clear picture for developers and are able to present the idea of ​​the company.

Conceptual prototypes

The conceptual prototype is a schematic depiction of future screens and is created in the early stages of product development.

A conceptual prototype must always be done when creating the interface of a new application. This method will help in the early stages to solve most usability issues.

Conceptual prototyping is great for the fastest testing of ideas, because it allows you to sketch out the main elements of the screens in a matter of minutes. In addition, to create such a prototype, you do not need to have the skills to work with special tools, it is enough to use the improvised means — a notebook, a board, or even stickers.

Conceptual prototyping is indispensable when you need to transfer custom scripts to the screens of the future application. Thus, your application for the first time becomes a prototype of the final result.

The advantage of conceptual prototyping is the ability to work as a team. It often happens that the visualization of a particular functional requires the support of individual specialists - productologists, architects, developers. A conceptual prototype can ultimately represent the result of a group of people thinking, which is a very effective way to solve problem usability and find a balance between business goals and user goals. Do not refuse competent assistance and support of the team, be open to new ideas!

When I work on screens, several team members are involved in the process. Initially, ideas are worked out with a product specialist to identify contradictions from the business process, are discussed with the architect for technical implementation, and finally, with front-end developers. The prototype helps to speak with any specialist in the same language.

Practical solutions:

Online. There is a great application Post-it Plus , which with the help of the camera "transfers" stickers to the virtual board.

So Post-it Plus converts physical notes from photos into virtual ones (source: Post-it Plus)

Offline Plain board. I usually use a whiteboard, and nothing can replace it fully. I like the process of creating a prototype on the board so much that it seems to be a peculiar dependence on it. This prototype is easy to show, discuss with the team, improve, edit.

Interactive Prototypes

An interactive prototype is usually assembled from screens that have passed the stage of conceptual prototypes. The prototype becomes realistic enough to test it on end users.

When to make an interactive prototype:

• When you need to simulate any custom script (for example, registration in the application).
• When it is necessary to test part of the script on users, but there is no ready application yet. In this case, an interactive prototype is an excellent way to solve a problem in a short time.
• To show your team what stage you are at. Explain to the developers the logic of the interface.
• When you need to briefly and clearly show the leadership, what are you working on. This method may surprise managers, which will be a plus for you and the team.
• If you need to impress a potential investor. Or promote some kind of application idea in your company. The rule “It’s better to see once than hear a hundred times” works here. No story and no presentation will replace the prototype of the finished application.

We used interactive prototypes to demonstrate the work of the directors to show how real processes are reflected in the application. Qualitatively elaborated prototypes are in studies, for testing a scenario on users (some do not even understand that this is a prototype), for testing ideas and assumptions. This method is not exactly stale in the arsenal of the designer.

Practical solutions:

To create an interactive prototype, you need special tools for paging prototyping. For example, Marvel or InVision (both work on the web). These tools allow you to quickly load an exported design and establish connections between specific areas of the screens. They are simple and very intuitive, because the skill is acquired after a couple of times of use. Simplicity of tools allows you to concentrate on the logic of your prototype and test scripts.

Prototype Pages at Marvel (source marvelapp.com )

Creating interactive areas and links in Marvel (source marvelapp.com )

Animated prototypes

Movement is a way to breathe life into design! An animated prototype is the highest-level prototype. Some of them are able to almost completely simulate the operation of this application, and it is quite difficult to distinguish them from an innocent eye. The main advantage of creating an animated prototype is read from the title. At this stage, the designer thinks of a very important aspect in UX - the interaction of the application with the user, the visualization of which is created through animation.

Source principleformac.com

Animation is a way to communicate an application with a user. It allows the user to stay abreast of all events occurring in the application, and at times increases the usability of the interface. When the movements of elements in the application model natural physical processes, they are read by the brain at a subconscious level, and the user understands without thinking what happens. Thus, the movement makes the design more user friendly.

Source principleformac.com

We expect interface elements to respond to our actions, and get upset when this does not happen. We need to know that our actions do not disappear in vain. Imagine that you say something to a person, and he does not react to your words in any way. It can ruffle. Once they tested an application assistant shop assistant for a large retail chain stores. The application was in a rather raw state, but ready for testing a certain functionality. The animation of the elements at this stage was not thought out. Sellers were somewhat annoyed that the “Add to cart” button did not visually respond to a click. Despite the fact that the main function is performed - the goods fall into the basket - the user does not understand whether the target action occurred or not. This is unpleasant, agree?

Unresponsive button

Practical solutions:

Creating an animated prototype requires knowledge of special tools that work with animation. Most of these programs support layered imports from Sketch, which allows you to work not with the entire screen, but with individual elements. The prototype can be opened on a mobile device. Animated prototyping takes much more time - both on thinking through the details and on execution, but the result is justified.

Working with a prototype in ProtoPie (source protopie.io )

Such tools as Principle , Flinto , Proto.io , Origami , ProtoPie , Framer , etc. are suitable for creating animated prototypes. Some tools (for example, ProtoPie, Framer) support the work of the built-in sensors of mobile devices - accelerometer, gyroscope, microphone, camera, 3D Touch , which makes the prototype even more realistic. You can read about what sensors and sensors are at our disposal and how to work with them in ProtoPie here .

Step-by-step instruction on how to work in Principle.

Framer is focused on creating a prototype using code, so working with it is an order of magnitude more difficult. However, this method opens up additional possibilities. For example, a specially programmed prototype will be able to process the information entered in the field and produce the corresponding result.

When to make an animated prototype:

• If you want to think of the animation of controls in the application, except for the one they have by default
• Explain to the developers not only the interrelationship of the screens, but also the logic of the operation of individual elements and the reaction of these elements to user actions. This is very important, because in the end it is for them to implement your ideas.
• When you need high-level testing, whose goals are related to the degree of responsiveness of the application
• An animated prototype will only increase the effect when submitting an idea.

Thus, prototyping is multifaceted and combines freehand sketches at the very first stage of design generation, and interactive layouts as close as possible to a real application. Each type of prototype can serve different situations and goals. It is necessary to choose the most appropriate types of prototypes for solving actual problems for each stage of work on the application.