I'll try to start with some context. We run a workflow app called Tallyfy which is designed for people to build and run repeatable processes in a business, such as client onboarding, employee orientation, etc.

As part of building such processes, we want to enable steps in a process to have rules in the format "if this then that" which will turn a step on/off if a condition is met.

Let's say you have 10 steps of which the first 4 look like this:

  1. What's your name? [Text box]
  2. Are you male or female? [Drop down]
  3. [HIDDEN BY DEFAULT] If [male in 2] then show this step.
  4. [HIDDEN BY DEFAULT] If [female in 2] then show this step.

The issue seems to present itself as the following problems:

  • First - we have to represent steps that are hidden by default.
  • Second - we need to show how a default step is affected in terms of its' visibility by other steps. In the example above, picking an item on the dropdown in (2) would trigger either 3 or 4.
  • Third - if no nesting (sub-steps) are assumed, then secondary conditions also have to be shown up AFTER a trigger condition takes effect e.g. "You picked male in (2) - which reveals (3) but then the flow carries on as normal from step (5) all the way through to (8) when some other condition interrupts."

What is the best UX/UI to represent "if this then that" conditions without a flowchart? Since such processes can be arbitrarily complex and large, flowcharts would be very difficult to scale - especially on a mobile device.

As context that this is how Typeform implement conditional jumps, which are not precisely the same thing - but they're related. I often find the dual jumps like 7 jumps to 8 and/(or?) 10 (in the screenshot below) a little confusing.

Any thoughts appreciated!

Conditional jumps UI in Typeform

  • "Are you male or female? [Drop down]" — Oh boy. Commented Oct 28, 2017 at 21:43
  • @sbichenko does that make the problem any less prolific? :) Commented Oct 29, 2017 at 22:03

1 Answer 1


I assume that without a flowchart means no overall visual reference of the steps using boxes and arrows to indicate the paths that a person will traverse in the process?

You can see that in Typeform that steps are also labelled, and you can use a combination of numbers and letters to indicate steps and sub steps, such that you alternate between numbers and letters each time you create a branch. This way you can keep a consistent level or hierarchy without creating a complicated system.

For example, start with a linear or minimum path from 1->2->3, and a branch can be indicated on step one by 1A/1B->2->3. If in 1A there are two branches, then you can designate them as 1A.1 and 1A.2, and continue if you have more levels of hierarchy.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.