Learn how to prototype web and mobile apps

How to simulate Scenarios in your interactive prototypes

Visualize your user navigation flow in your interactive prototypes by simulating Scenarios. With this tutorial, you will learn to simulate the scenarios that you’ve designed as you would the full screens of your prototype.

You can download the below example here.




Simulating scenarios

1. Go to the User Interface tab and click ‘Simulate’ in the top right-hand corner.

2. In the Simulation window that appears, click on the hamburger menu in the top right-hand corner. A slide menu will appear with two tabs: ‘Screens’ and ‘Scenarios’.

screens-simulate-interactive prototyping

3. Go to the Scenarios tab and select the scenario that you wish to simulate. In our example, we only have one scenario, named ‘default’, so we will simulate this one.


4. In the simulation canvas, click on the component where your navigation flow begins. In the pop up that appears, choose ‘Start scenario’.


You can now simulate and interact with your scenario! And remember:

  1. You will only be able to interact with the pre-defined navigation in your selected scenario. If you want to simulate this particular screen without the scenario, choose the option ‘Go to screen’ and you will be taken to the screen without the corresponding scenario. 
  2. You can stop the simulation of the corresponding scenario by removing the filter in the top toolbar of the Simulation window, as you can see in the image below.


Reviewing scenarios

You can now add comments and replies to the Scenarios tab in Justinmind, and to prototypes in online simulation, as in the user interface. However, note that comments cannot be added to specific simulation components, only to the full scenario screen.



Next tutorial > How to define requirements in your interactive prototypes