Adding conditions to interactions

You can add conditions in your prototypes to define when an event should or shouldn’t trigger. You can use them to build hi-fi user experiences, including:

  • Form validation
  • Conditional screen navigation
  • Combination lock screens
  • Animations
  • …And much more.

In this tutorial, you’ll learn the basics of the Conditional Expression builder, which you’ll use to build conditions.

Build an event

Before you can add a condition, you’ll need to create an event in your prototype. For example, imagine you’re creating a form to sign up for a newsletter with an Input Text Field F and a Button B. When you submit the form, you’d like to link to another screen.
Nothing is entered in the input text field and the event isn't triggered. Enter in an email and it will link to the next screen.
To create this event:

  1. Select the button, go to the Events palette and click ‘Add event’.Click the 'add event' button in the events palette
  2. Create an On Click + Navigate To event and select a different screen to link to.On Click Navigate To event, linking to Screen 2
    Note: for mobile and tablet prototypes, On Click will be On Tap.

You’ll see the event you just created in the Events palette, where you’ll now see a text link labeled ‘add condition’.

Define a condition

You don’t want to be able to submit the newsletter sign-up form if you haven’t entered any information in the form, so you’ll want to add a condition to this event.

Click the ‘add condition’ text above the event you created in the Events palette. You’ll see the Conditional Expression builder. Here’s how it looks:

    Conditional expression builder defined

  1. The expression – you’ll drag components here to build the condition.
  2. Functions – this tab contains options for defining logic and other comparisons between elements.
  3. Constants – find fixed values, like the prototype’s screen width or height, your computer’s time, or regular expression formulas here.
  4. Canvas preview – drag elements on the screen to the expression. You’ll only be able to use elements on the current screen.
  5. Variables – view and use the Variables in your prototype in the expression.
  6. Data Masters – find your Data Masters and their fields here to use in an expression.

To build a condition, you can drag and drop any of those elements, constants, and logic functions to the expression. For example, to create the condition that checks to see if the sign-up form is empty:

  1. Look to the Canvas preview. Select the input text field and drag it to the open space in the expression that reads “click to edit or drag & drop a component”.
  2. In the Functions tab, scroll down to the ‘Logic’ section. Drag a Not Equals (≠) function next to the input text field in the expression.
  3. You’ll see a new open space appear in the expression. Double click on this space, but leave it blank.
  4. Click ‘OK’ to finish building the expression.

The expression you just created will check to see if the input text field is not empty. If it isn’t, you’ll go to the next screen. If it is empty, the event won’t trigger.

Continue on to the next tutorial and learn how to build other conditions in your prototypes.