Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to design a navigation flow with variables in your prototypes

Design the navigation flow of your interactive prototypes with the help of stored variables.

This tutorial will show you how to use variables to define what will be shown in the next screen based on the screen you visited previously.

To do this, we will use variables and conditions, which are some of the features available in Justinmind.

You can download an example here.

1. Setting up the screens in your wireframe

Let’s start by selecting an empty canvas for the device of your choice. In the ‘screens’ panel, rename the default screen 1 ‘Home’. Then, create and rename the 3 extra screens you’ll be working on: Screen A, Screen B and Screen C.

Finally, find the ‘outline’ panel and click on the ‘Variables’ tab. Click on the “+” icon and create a new variable, which we’ll name ‘Previous_screen’.

Check_previous_screens

Screen setup for your wireframe

 

check-previous-variable

Variable that stores the previous screen

 

Once you have set up the different screens for your interactive wireframe, you can continue setting up the interactions for each screen.

Setting up the ‘Home’ Screen

The home Screen will act as a simple introduction page, in which the user will be able to choose whether to go to Screen B or Screen C.

To set both options, go to the ‘widgets’ panel and drag a text and two rectangles onto the screen. Select the text box and edit its text. In our example, we called it ‘Choose the screen you want to go to’. Then, insert the texts ‘Screen A’ and ‘Screen B’ in each rectangle correspondingly.

Check-previous-homescreen

This is how the home screen should look

 

Setting up Screens A and B

Screens A and B are informative and define the value of the visited screen, which will be stored and remembered later in Screen C. The two screens (A & B) also contain a button with a link to Screen C.

Screen A: Drag two rectangles onto the screen. In the first rectangle, write the text ‘You are on Screen A’. In the second one, write ‘Go to Screen C’.

Screen B: Do the same as Screen A, and replace A with B in the first rectangle’s text.

 

Check-revious-screenB

This is how screen B should look

 

Setting up Screen C

Screen C is the final screen of the prototype. This screen allows you to check which screen you previously visited (in this case it could be either Screen A or B). There is also a link to take you back to the Home Screen and start over.

To create Screen C, first drag a text widget and rename it ‘The previously visited screen was’. Next, drag two rectangles, and write ‘Screen A’ and ‘Screen B’ in each rectangle correspondingly, and finally add a third rectangle and write ‘Start over!’ in it.

Check-previous-screenC

This is how Screen C should look

2. Adding interactions to your wireframe

Setting up the interactions in the Home Screen

The home Screen includes the following link events:

  • From the ‘Screen A’ rectangle to Screen A in the ‘Screens’ panel
  • From the ‘Screen B’ rectangle to Screen B in the ‘Screens’ panel

navigation-flow-interactive-prototype

Setting up the interactions in Screens A and B

For the Screens A and B, add an ‘on Page Load’ event with a ‘Set Value’ action, where loading the page (‘on Page Load’) triggers the ‘Set Value’ action. These actions are used to store the value of an element. In this case, the “Set value” action will be used to define the value of the variable ‘Previous_screen’.

You can set up the above interaction following these simple steps for each screen:

  1. In screen A, go to the ‘Outline’ panel and click on the corresponding screen ‘Screen_A’ element.
  2. Go to the ‘Events’ panel and click on the Add event icon (+) to open the events dialog.
  3. Choose ‘on Page Load’ from the interactions dropdown menu and then select a ‘Set value’ action.
  4. Set the value for your element: select the ‘Fixed’ option and write ‘A’ in the value field.
  5. Go to the Variables tab and select the ‘Previous_screen’ variable, and click OK.
  6. Lastly, create a link event from the ‘Go to Screen C’ rectangle to screen C.

 

navigation-flow-interactive-prototype-set-value

Follow the same steps with Screen B and replace the fixed value with ‘B’.

In this way, when Screen A or B are loaded, the variable will store the letter that identifies the loaded screen (A or B).

Setting up the conditions in Screen C

Screen C makes use of conditions. Let’s start by finding ‘Screen C’ in the outline panel. In the properties panel of both the Screen A and Screen B rectangles, check the ‘Hide component’ box. In this way, rectangles will be hidden by default when simulating.

Next, we’ll create an event that, according to the value of the variable ‘Previous_screen’, will show either rectangle A (if the variable value is A) or rectangle B (if the variable value is B).

Creating this event requires the following steps:

  1. Select ‘Screen C’ in the outline panel and open the events dialog to create an ‘On page load’ event combined with a ‘show’ or ‘hide’ action, with ‘Screen A’ as the component you want to show or hide (depending on what you wish to do). Click OK.
  2. Add the following conditions by clicking ‘Add condition’:

In the Variables tab, add the elements for the following condition: ‘When’ [variable ‘previous screen’] equals ‘A’. Click OK and the dialog will close.

In this way, if the variable is equal to A, the ‘on Page Load’ event will show rectangle A.

conditions-navigation-flow-interactive-prototype

The second part of the condition should imply the opposite: When the variable value is B, show rectangle B.

To add this condition, you will find an ‘Else’ option in the events tab in your editor. Click on it, and create an ‘On page load’ event combined with a ‘show’ or ‘hide’ action, with ‘Screen B’ as the component you want to show. Click OK. Add an ‘Else add condition’ and add the second part of the condition: ‘When’ [variable ‘previous screen’] equals ‘B’ and click OK .

 

Check-previous-condition

Events tab with conditions and events

 

To finish, link the ‘Start over’ rectangle to the Home Screen to start again.

And, you’re done! Now, you can simulate your interactive wireframe on your browser or directly in your device, and see it work in real time!

Next tutorial > Design a password strength meter in your interactive prototypes with the help of conditions