Justinmind

SUPPORT

Learn how to prototype web and mobile apps

Create a screen flow validation using variables in your mobile prototypes

Learn how to create and simulate a screen flow validation using drag and drop variables in your interactive mobile prototypes in this tutorial.

Screen flow validation is essential when you’re creating an input form with multiple screens. In our example, we create an input form in a mobile prototype with multiple screens and add variables and events to take the user from screen to screen, filling in their details as they go. In the last screen, the user will see a summary of all the details they have filled in.

You can download the below example here.

interactive-prototypes-screen-flow-validation

Create a screen flow validation in your mobile app prototype

1. Create a new iPhone 6 mobile app prototype. Add two additional screens in the Screens tab, so there are 3 in total.

2. From the iPhone iOS9 widget library, drag the Status bar widget to the top of Screen 1. Copy it to the other two screens.

3. Back in Screen 1, add a text box and button widget. In the text box, write a welcome message for the user and customize it as desired. In the button, write the Call To Action (CTA) that you wish the user to perform with this input form. Customize the rest of the screen as desired, e.g. add a background image or additional icons.

2-interactive-prototypes-screen-flow-validation.png

4. Go to Screen 2 and drag a dynamic panel to the canvas. Resize it to match our example (327 x 393 pixels) in the Properties tab. Add two additional panels to that there are 3 in total.

5. From the iPhone iOS9 widget library, drag the Arrow Right widget to Panel 1 and place it in the bottom right-hand corner. This will be what the user taps on to move to the next step in the form. Add a text box, place it in the center of the panel and write the instruction you wish the user to follow here. Then, add another text box and an input text field to the canvas, placing them below the first text box, and group them together. This text box refers to the question you wish the user to respond to and the input text field is where they will fill in their response. Write the question you wish the user to fill in in the text box. Copy and paste this group according to the number of questions you wish to ask the user in this screen.

6. Panels 2 and 3 are only needed if you wish to add additional questions. If so, from the iPhone iOS9 widget library, drag the Arrow Left widget to Panel 2 and place it in the top left-hand corner. This will be what the user taps on to go back in the form. Next, copy the Arrow Right widget, first text box and the group from Panel 1 to the same location in this panel. Again, copy and paste the group according to the number of questions you wish to ask the user in this screen. Change the instructions and questions as desired.

7. If you wish to add more questions, copy all elements from Panel 2 to Panel 3. Copy the Arrow Left and Right widgets, the text box and the group from Panel 2 to the same location in this panel. Again, copy and paste the group according to the number of questions you wish to ask the user in this screen. Change the instructions and questions as desired.

3-3-interactive-prototypes-screen-flow-validation.png

8. Now go to Screen 3. Drag a Arrow Left widget to screen and place it in the top left-hand corner. Add a text box and write a form completion confirmation message for the user. Add a text box for each question asked in Screen 2 and write the corresponding text in each text box (the text must match exactly to the questions). For each question, add an additional text box to the screen and place it under the initial text box. Change the settings of these additional text boxes as follows: erase the ‘Type something here…’ value, untick the autofit option and resize them to match our example (129 x 30 pixels).

4-interactive-prototypes-screen-flow-validation.png

9. Finally, go to the Variables tab and add a variable for each question asked. The Default value should be left blank.

5-interactive-prototypes-screen-flow-validation.png

Adding events to your input form

1. Go to Screen 1. Link the Button to Screen 2 by dragging it from the canvas to Screen 2 in the Screens tab.

2. Go to Panel 1 in Screen 2. Link the Arrow Right to Panel 2 by adding an “On Tap” + “Set Active Panel” event, selecting Panel 2 from the Outline tab and adding Slide left transition effect. Click OK.

3. Go to Panel 2 and link the Arrow Right to Panel 3 by adding an “On Tap” + “Set Active Panel” event, selecting Panel 3 from the Outline tab and adding Slide left transition effect. Click OK. Next, link the Arrow Left back to Panel 1 by adding an “On Tap” + “Set Active Panel” event, selecting Panel 1 from the Outline tab and adding Slide right transition effect. Click OK.

4. Go to Panel 3 and link the Arrow Left back to Panel 2 by adding an “On Tap” + “Set Active Panel” event, selecting Panel 2 from the Outline tab and adding Slide right transition effect. Click OK. Link the Arrow Right to Screen 3 by dragging it from the canvas to Screen 3 in the Screens tab.

5. Finally, we are going to link the responses in Screen 2 to the summary version in Screen 3, by dragging dropping the variables. Navigate to the Variables tab. On the canvas, go to Panel 1 of Screen 2 and select the input text field from the first group you created. Drag the input text field to the variable that it corresponds to in the Variable tab. Next, go to Screen 3. Drag the same variable to the empty text box that it corresponds to in this screen.

6-interactive-prototypes-screen-flow-validation-variables-workflow

Repeat Step 5 for all the questions you created.

And that’s it! Click ‘Simulate‘ to see and interact with your prototype. You’ll see that your answers appear in the summary on the last page.

 

Next tutorial > Create a countdown clock in your interactive prototypes