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
The figure below 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 below. 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.
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 below).
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 the figure below, 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).
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 the figure below).
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 the first figure on this page. 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 below.
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 the figure below.
Result in a Web App
The first gif below showcases the “upper flow” when the user answers “Agree” or “Strongly Agree” on the first question.
The second gif below showcases the “lower flow” when the user answers “Neither agree or disagree”, “Disagree” or “Strongly Disagree” on the first question.
