Justinmind

SUPPORT

Learn how to prototype web and mobile apps

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:

Define complex interactions in your prototypes with the help of conditions - 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

Define a condition for a specific interaction  in your UI prototypes

To define a condition for a specific interaction that has already been created follow the next steps:

  1. On the canvas, click on the widget that has the events defined. Its events will display in the Events panel.
  2. Click on the ‘Add condition’ link next to the action you want to make conditional. The Expression Builder dialog will appear.
  3. Build an expression with only a text string that will define the decision.
  4. 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

Define an automatic condition for a specific interaction in your UI prototypes

To that has already been created follow the next steps:

  1. Click on the widget that has the event defined on the canvas. Its events will display on the Events panel.
  2. Click on the ‘Add condition’ link above the actions you want to make conditional. The Expression Builder dialog will appear.
  3. Build a comparative expression using the prototype’s elements and functions (eg: Input_1 = “abc”).
  4. 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:

Next tutorial > Simulate log in forms in your interactive prototypes with the help of conditions