Representing hiding and showing for steps as opposed to conditional branching or jumps
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:
- What's your name? [Text box]
- Are you male or female? [Drop down]
- [HIDDEN BY DEFAULT] If [male in 2] then show this step.
- [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!
