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