Simulate log in forms with conditions in your interactive prototypes
Learn how to simulate log in forms in your interactive prototypes with the help of conditions.
You can download the below example here.
This tutorial will show you how to design a log in form that allows access to the next screen only if the correct user and password are entered. An error message is displayed otherwise.
This is possible by adding conditions to the events, so that they only run at certain times of the prototype simulation.
Follow the next steps to reproduce the example:
- In a new prototype, draw the log in form on a screen, by dragging a text widget, input text field and button to the canvas. The text widget will be named ‘Username’, the input text field ‘Password’ and the button ‘Log in’.
- Name this screen ‘Log in’ and then create another screen and name it”Welcome screen”.
- Drag the Log in Button to the welcome screen. A ‘Link to’ event will be automatically created in the Events tab in the first screen.
- The ‘Add Condition’ option will appear next to the interaction in the Events tab. Click on it to open the condition builder.
Now you need to build a condition to verify that the user field is ‘admin‘, and that the password is ‘1234‘. In other words: “only let the user go to the next screen if they enter ‘admin’ as user name and ‘1234‘ as password”.
Follow the next steps to build the condition shown above:
- Drag the “&” function into the editing area: ___& ___
- In the first gap, drag the “=” function and do the same for the other gap: ___= ___& ___=___
- Drag the username field from the screen to the gap before the first “=” function and in the second, type “admin”: user=admin&___=___
- Drag the password field from the screen to the gap before the second “=” function and in the second gap enter “1234”: user=admin&password=1234
- Click OK. You will see the condition in the Events tab.
Note: it is easier to select items from the active screen if you zoom in. You can also drag elements from the outline tab to the expression.
When you have finished, the “Else” option appears in the Events tab, when you click on the button. Here you have to establish what your application must do if the condition is not met (in this example, it will show an error message):
- Drag a Text widget to the Log in screen and write an error message.
- Mark it as Hidden by default in the Properties tab.
- Select the Log in button and click on the “else” option in the Events tab.
- The events dialog will pop up. Add an ‘On click’ + ‘Show’ event, and select the error text.
- Click OK to close the events dialog.
You’re done! Click on the ‘Simulate’ button to verify that the simulation is correct.
With Justinmind you can create as many complex conditions as needed, and link them to all the applicable cases of “if A does B”. You can copy and paste them in other events and even in events of other components.