Exercises: Adding conditions to interactions

Add conditions to interactions and build web and mobile experiences with Justinmind, such as conditional navigation and collapsible input forms.

Here are three examples of how to use them in your prototypes. We recommend that you try them out for yourself, following the steps below.

Exercise 1: Conditional navigation

Conditional navigation is used to direct a user to some particular content depending on their last interaction.

In this exercise, we’ll create a food delivery app prototype. From the homepage, the user can use a drop-down to choose whether they want to pick up their order or have it delivered.
conditional navigation

Follow the steps below to reproduce our example, using conditions:

  1. In a mobile prototype, create your app Home screen. For example, use Text and Paragraph widgets to give it a title and description. Then, add a Select List widget and a Button below the description.
    • select list button
  2. Select the Select List element and go to the Properties palette. Edit its values to contain only two: “Take Away” and “Home Delivery”.
  3. Create two additional screens (Click ‘+’ at the top of the Screens palette). Name the first screen “Take Away Screen”, which is where the user will be linked if they choose the “Take Away” option from the drop-down.

     
    Name the second screen “Home Delivery Screen”, which is where the user will be linked if they choose the “Home Delivery” option from the drop-down. Customize these screens as desired.

    • add screen
  4. Next, select the Button, and add an “On Tap” + “Link To” event. Select the “Take Away Screen” as the link’s target and click “OK”.
  5. Back in the Events palette, add a condition (click the “add condition” link). The Conditional Expression builder will appear.
    • events condition builder
  6. In the Conditional Expression builder, follow these steps to create the condition:
    • 1. From the Screens tab, drag the Select List widget the open space in the expression.
    • 2. Next, drag the Equals function next to the Select List in the expression
    • 3. A new open space will appear next to the Equals function. In this space, drag a Text constant, and write Take Away (double click on the open space to edit its content). Click “OK”.
    • Combined with the “On Tap” + “Link To” interaction you created earlier, this condition ensures that if the user chooses the take away option, they will be linked to the “Take Away Screen”.
  7. Repeat steps four through six for the home delivery option, changing the target of the “On Tap” + “Link To” event to the “Home Delivery Screen”, and entering “Home Delivery” in the Conditional expression instead of “Take Away”.
  • Your Events palette should include the following interactions:
  • events palette

Click “Simulate”, choose one of the two options from the Select List and click the Button to be taken to the relevant screen.

You can download our example here.

Exercise 2: Error messages in an input form

When a user is filling in a form, an error message can inform them that further input is needed in order to complete the form.

In this exercise, we’ll create a mobile app login form that displays error messages when the form is incomplete, and green ticks when the errors have been corrected. We’ll build this form using conditions.

error messages
Follow the steps below to reproduce our example:

  1. Create a new a mobile prototype (we use an iPhone prototype in our example, but you can also use Android). Drag four Text widgets, four Input Text Fields, and a Button to the Canvas.
  2. Position the Text widgets one under the other and rename them to match our example (“First name”, “Last name”, “Email” and “Phone number”).
  3. Place an Input Text Field on the right of each of them, and the Button below. Rename the Button “OK”.
    • input text field
  4. Then, drag two additional Text widgets to the Canvas and place them under the Input Text Fields that correspond to the First name and Email entries.
    • In each, write the error message text that appears in our example and change the color of the text to red in the Properties palette.
    • text widget error message
  5. Then, drag two tick icons from your mobile widget library (the “OK filled” iOS icon or the “Checkbox On” Android icon) to the Canvas and place them on the right of the error messages.
    • Customize them to match our example by changing their background color.
    • ok checkbox
  6. Mark the error messages and tick icons as “Hidden” in the Properties palette (tick the “Hide Component” option).
    • image-4
  7. Next, we will define the “OK” button events. Select the Button element and go to the Events palette.
    • Add an “On Tap” + “Show” event, selecting the “This field is mandatory” error message as the target to be shown, and click “OK”.
  8. Back in the Events palette, add a second action to the one you’ve just created by right clicking on it and selecting “Add action”.
    • Leave the event trigger as “On Tap” but change the resulting action to “Hide”, selecting the tick icon that corresponds to the “This field is mandatory” error message as the target to be hidden, and click “OK”.
  9. Looking again to the Events palette, click on the “add condition” link on the left of the interaction. The Conditional Expression builder will appear for you to define a condition. This condition will define what happens if the first Input Text Field is left blank.
    • events else
  10. Drag the first Input Text Field to the first term, followed by the “Equals” function and in the open space that appears, double click on the Text and leave it blank. Then, click “OK” to finish building the condition.
    • This condition ensures that an error message is displayed, and that the green ‘completed’ tick icon is hidden if the First Name Input Field is left blank.
  11. Back in the Events palette, click on the “Else” link on the right of the action. Here, you’ll define what happens if the user inputs some text into the First Name input field.
    • add event else
  12. In the Events dialog that appears, create an “On Tap” + “Hide” event, selecting the “This field is mandatory” error message as the target to be hidden, and click “OK”.
  13. Back in the Events palette, add another action to the one you’ve just created. Make it an “On Tap” + “Show” event, selecting same tick icon as before as the target to be shown, and click “OK”.
    • These actions ensure that the tick icon is displayed and the error message is hidden when the user inputs some text into the First Name Input Field.
  14. Back in the Events palette, click “Add Event” and create another “On Tap” + “Show” event, this time selecting the “Please enter a valid e-mail address” message as the target to be shown, and click “OK”.
  15. Add another action, leaving the trigger as “On Tap” and changing the action to “Hide”. Select the tick icon that corresponds to the “Please enter a valid e-mail address” error message as the target to be hidden and click “OK”.
  16. Back in the Events palette, click on the “add condition” link on the left of the interaction.
    • event add condition
  17. Drag the “NOT” function, followed by the “Regular Expression” function, the Email Input Text Field and “Email” constant. Click “OK” to finish building the condition.
  18. Back in the Events palette, click on the “Else” link on the right of the last action you created. Keep the trigger as “On Tap” and change the action to “Hide”, selecting the “Please enter a valid e-mail address” error message as the target to be hidden, and click “OK”.
  19. Finally, add another action and keep the “On Tap” trigger, but change the action to “Show”. Select the tick icon that corresponds to the “Please enter a valid e-mail address” as the target to be shown, and click “OK”.

Your Events palette should include the following interactions:

event palette interaction
Click “Simulate” to see your error message in real time

You can download our example here.

Exercise 3: Dynamic select list

Select lists in navigation allow the user to choose an item from a range of items in a drop-down.

dynamic select list

Follow the steps below to create two Select Lists: one that displays the option that the user selects, and another that filters the range of options related to the first option (Countries and their cities in our example):

  1. In a new mobile prototype (iPhone or Android), create your app Home screen. For instance, use Text and Paragraph widgets to give it a title and description.
    • Then, drag two Select List widgets to the Canvas, below the description. Place one above the other.
      select widget list
  2. Select the first Select List and go to the Properties palette (or right-click on it). Click the “Edit values” options to edit its values.
    • Replace the default values with three country names (in our example we’ve used USA, Brazil and Japan). Click “OK”.
    • fixed values
  3. In the second Select List, edit the default values so that you have nine in total. Write the names of three cities for each of the countries you’ve chosen.
    • fixed values cities
  4. Now we are going to create an event which will load one of the country’s cities by default when the user loads the page during simulation. In our example, we’ll load the US cities.
    • Select the first Select List, go to the Events palette and add an “On Page Load” + “Set Value” event.
    • Select the second Select List and enter the names of USA cities as fixed values below (enter the names in the input field with the “Type something here…” label). Click “OK”.
    • Note: the names of the cities you write in this event must correspond and be written exactly as they are in the second Select List element.
  5. Back in the events palette, click “add Condition” on the left of the action. The Condition Builder will appear.
    • Drag the first Select List to the term in the Conditional expression, followed by the “Equals” function, and finally, write ‘USA’ (or the name of your default country selection) in the term that remains. Click “OK”.
  6. Next, we’re going to create the interactions that allow the user to filter cities by country.
    • Back in the Events palette click on the gear icon on the right of the “On Page Load” event trigger. Select the option “Copy event to” and choose the “On Change” option.
    • events palette on change
  7. This interaction will filter the US cities when the user selects “USA” from the first drop down. Your Events palette should looks like this:
    • events palette filter
  8. To allow the user to filter cities for the remaining countries, you’ll need to add additional interactions using the “Else” option.
    • For instance, to filter Japan’s cities, click on the “Else” option on the right of the previous action. Select the second Select List and below, write the names of the Japanese cities. Click “OK”.
  9. Then, create a condition (click the “add condition” link on the left of this action). The Condition Builder will appear.
    • Drag the first Select List to the term in the Conditional expression, followed by the “Equals” function, and finally, write ‘Japan’ (or the name of your second country) in the term that remains. Click “OK”.

Repeat steps eight and nine for the remaining countries, changing the names of the cities in each action and condition.
 
Click “Simulate”. Your default country should appear in the first list when the page loads. If you click on the second list, only that country’s cities should appear. Make a selection from the first list to see the relevant cities appear in the second list.

You can download our example here.