Learn how to prototype web and mobile apps

How to design scenarios in your interactive wireframes

Validate your interactive wireframes and prototypes with Scenarios. Learn how to design them and define a navigation flow in this tutorial.

Justinmind offers a simple and efficient system that allows you to define User Scenarios and navigation flows.

You can work on them in the Scenarios tab, which you will find next to the User Interface tab.

UI prototype scenario's tab

The Scenarios Toolbar


UI prototype scenario's toolbar

a) Create a transition for your scenarios

Creating a new Scenario


To create a new Scenario, click the ‘+ button in the Scenarios tab. You will see a list of all the scenarios you’ve created. If you want to open a scenario, just double click on it.

Create a new scenario in your interactive prototype

The scenario interface is similar to the User Interface tab.

On the left-hand side, you will find the available components to create a scenario: Screens, Decisions, Actions and Image. You can also use the screens that you have created in the User Interface, as they listed under the Scenario components.

If you create the scenario before creating the wireframe, you’ll see that the screens matching the those of your scenarios will turn into icons of the wireframe screens.

UI prototype scenario's components

Once in the canvas, you can link the components to one another using the arrow component. Click on the arrow and the cursor will take the shape of an arrow. When you drag shapes on top of another using this tool, it creates an arrow linking the two, and draws a navigation flow between the two shapes.

You can start defining a wireframe by creating different scenarios, and then create a simulation in the User Interface that will adjust to them.

Interactive prototype scenario: contextual menu

Each time you create a screen in a scenario with the same name as a Screen in the user interface, a preview (thumbnail) of the screen is displayed, instead of an icon.

If you right-click on one of the scenario screens, you can create a new screen in your wireframe, and you can also copy/paste/duplicate the scenario.

Note that these navigation flows can be functional. When two screen thumbnails are linked by an arrow and both are real screens in the simulation, a warning symbol will appear. This indicates that there is no event in the first screen to cause the navigation described by the arrow. If you add one and return to the scenario, the warning symbol will disappear.

All information in the scenarios can be exported to a Word document with all the extra information relative to the scenarios.

You can also remove the device’s frame from view in the Scenarios tab to visualize the standalone design.

Next tutorial > How to simulate scenarios in your interactive prototypes