HOW TO USE VARIABLES TO DESIGN A NAVIGATION FLOWTutorial AdvancedUsing stored variables data helps you design the navigation flow of your web or mobile interactive wireframe. This tutorial will show you how to use stored variables to define what will be showed in the next screen based on the screen you visited previously. VariablesVariablesSelect an empty canvas for the device of your choice. In the 'screens' panel, rename the default screen 1 'Home'. Create and rename the 3 extra screens youll be working with: screen A, screen B and screen C.Click on the 'Variables' tab in the Outline panel and create a new variable (+), which well name 'Previous_screen'.01Setting up the screens in your wireframe12VariablesThe 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 label and two rectangles onto the screen. Edit their text as in the example.02Setting up the 'Home' screen03VariablesScreens 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 also contain a button with a link to screen C.Drag two rectangles onto the screen A, and insert the text as in the example.Do the same for screen B, changing the text accordingly.Setting up screens A and B04VariablesScreen C is the final screen of the prototype and it allows you to check which was the screen you previously visited. There is also a link to take you back to the Home screen and start over.To create screen C, drag a text label and three rectangles, and rename them as in the picture.Setting up screen C05VariablesThe 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' panelSetting up interactions in the Home screen06VariablesFor both screen A and screen B, you must define an 'on Page Load' event with a 'Set Value' action, where loading the page ('on Page Load') triggers the 'Set Value' action. In this case, the Set value action will be used to define the value of the variable Previous_screen.To set up these interactions, follow the steps in the next slide.Setting up interactions in screens A and BVariables2345Go to the 'Outline' panel and click on the corresponding screen element.1Go 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.Go to the Variables tab and select the 'Previous_screen' variable, and click OK.Set the value: select the 'Fixed' option and write 'A or B in the value field.Create a link event from the 'Go to Screen C rectangle to screen C.607VariablesScreen C makes use of conditions. In the properties panel of both screen As and screen Bs rectangle, check the 'Hide component' box. This way, rectangles will be hidden by default when simulating.Then, well create an event that, according to the value of the variable 'Previous_screen', will show either rectangle A or rectangle B.Setting up the interactions in screen C08VariablesSelect 'screen C' in the outline panel and open the events dialog. Create an 'On page load' event + a 'show/hide' action, with 'Screen A' as the component you want to show.Setting up the interactions in screen C09VariablesOpen the conditions dialog and add the following conditions:'When' [variable previous screen] equals 'A'. Press OK twice and the dialog will close.Click on the 'Else' option in the events tab to add the second part of the condition: 'When' [variable previous screen] equals 'B, and press OK .12Setting up the interactions in screen C10VariablesBefore closing the dialog, add the 'On page load' event combined with a 'show/hide' action as you did for 'screen A' (this time use screen B as the component to show).At the end, the events tab should look as in the image.2Setting up the interactions in screen CVariablesClick on the Simulate button and test your app or web wireframe!Justinmind Inc225 Bush St. Fl. 12San Francisco, CA 94104 jim.sales@justinmind.comwww.justinmind.comDOWNLOADNOW TRY IT NOW FOR FREE!Get the Justinmind editor and start prototyping