How to define complex interactions in your prototypes with conditions
Define complex interactions in your prototypes with the help of conditions.
Conditions or rules can be set up for any given event interaction in order to manage its actions’ execution.
By using conditions, one can split and organize the execution of an interaction into different ‘conditional blocks’ and decide when to perform one action or another.
An interaction split into ‘conditional blocks’ would look like the following example in the Events panel:
There are two different types of conditions that can be defined with Justinmind:
- User decision: The interaction of the user is needed when the event is triggered, in order to decide what actions to execute. This is to say, depending on the user event trigger, a different action will be executed.
- Automatic evaluated condition: The condition is an expression that can be evaluated automatically once the event is triggered.
Creating a user decision
To define a condition for a specific interaction that has already been created follow the next steps:
- On the canvas, click on the widget that has the events defined. Its events will display in the Events panel.
- Click on the ‘Add condition’ link next to the action you want to make conditional. The Expression Builder dialog will appear.
- Build an expression with only a text string that will define the decision.
- Click OK to confirm the expression or click Cancel to close the dialog without applying changes.
When simulating a user decision, a Yes/No decision box will appear. If the user selects “Yes”, the corresponding actions will be executed. If the user selects “No”, they will be ignored.
Creating an automatic condition
To that has already been created follow the next steps:
- Click on the widget that has the event defined on the canvas. Its events will display on the Events panel.
- Click on the ‘Add condition’ link above the actions you want to make conditional. The Expression Builder dialog will appear.
- Build a comparative expression using the prototype’s elements and functions (eg: Input_1 = “abc”).
- Click OK to create the condition. Select Cancel to close the dialog without applying changes.
One can also define a decision or condition for an action when defining the latter. To create it, click on the ‘Add condition‘ button in the Interactions dialog.
You can find some examples of the use of conditions in the tutorials below:
- How to simulate log in forms with conditions
- How to simulate a password strength meter with conditions
- How to build conditional drop-down select lists