Conditional Interactions & Navigation

Contents

In this short tutorial we’ll show you how you can build conditional interaction flows in weave.ly.

Don’t feel like reading? Don’t worry we got you covered. Sit back, relax and let us run you through it in this video!

Example Setup

Figure 1 showcases the design we’ll be using as an example to explain conditional interactions. The example is a short survey, it starts with the leftmost screen and ends with either one of the rightmost screens. Whenever two screens are stacked on top of each other in the Figma canvas this means that the user we’ll either be presented with the top or bottom screen.

The way we’ll determine whether the top or bottom screen must be shown will be based on the user’s answer in the very first screen, which is shown in Figure 2. More precisely, if the user answers with “Agree” or “Strongly Agree” (i.e. a likert result > 3) we’ll only present them with the topmost screens in the subsequent questions. Otherwise the user will be presented with the bottom screens.

Figure 2: The first question, based on which we’ll determine the flow of the rest of the survey.

Although this tutorial uses a survey as example, we will only be focusing on the conditional flow aspects of our example. Other tutorials focus on single aspects of building a survey (e.g. building a radio button group or storing users’ responses).

Conditional Flows in the weave.ly Editor

There are three essential steps to implement conditional flows in weave.ly:

First, you’ll need a source of data based on which you’ll condition your flow. In our example this is the user’s answer to the first question, which is a Likert scale. The source is therefore a Selectable Number block in the editor (as shown in Figure 3).

Figure 3: The data source for our conditional interaction, namely the user’s response to this Likert scale.

Second, you’ll need to determine the condition itself. In other words, for what values of your data you want the flow to go one way or the other. To compare values you can use blocks like Text Comparison or Number Comparison. In our example, shown in Figure 4, we use the Number Comparison block and configure it to check whether the user’s response is > 3 (see the block’s configuration in the right panel).

Figure 4: Checking whether the user responded with a score higher than 3.

Third, comparison blocks always have two output ports, one which outputs a value if the comparison passes (i.e. the result is true) and the other when the comparison fails (i.e. the result is false). By linking these different ports to different navigation interactions you can complete your conditional interaction. In our example we respectively link the true and false output port to navigate to the upper or lower screens in the next part of the survey (see Figure 5).

Figure 5: Navigating to different pages based on our user’s answer.

Building More Complex Conditions

Typically a conditional interaction will be needed more than once in your prototype. For example, based on some initial interaction done by the user you might need to trigger multiple different conditional flows later on. This case is typically implemented using variables.

So far we’ve built the first conditional interaction of the example shown in Figure 1. However, depending on the user’s first answer we also want to showcase a different ending screen in our survey. To do so we’ll store the response of the user in a variable (called ease), as shown in Figure 6.

Figure 6: Storing the source of our conditional interaction in a variable.

Before navigating to our final screens we’ll first get the value stored in this variable and compare it again (i.e. > 3) to determine whether we want to show one or the other end screen to the user. This is shown in Figure 7.