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. – sbichenko Oct 28 '17 at 21:43
  • @sbichenko does that make the problem any less prolific? :) – Amit Kothari Oct 29 '17 at 22:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.