UX Framework

The Linear Flow System

Interaction Pattern

Overview

The Linear Flow System is a user interface pattern designed to manage complex, multi-stage procedures (such as initial calibration or authentication) by rendering them as a strict, sequential timeline. Crucially, it visually presents the entire process sequence to provide continuous context regarding the total sequence length, while restricting interactive access to subsequent steps until the current one is validated. This mitigates cognitive load and prevents unrecoverable error states by clearly indicating the user's current position within the complete flow.


Implementation Specification

To successfully execute The Linear Flow System, the application architecture must enforce strict state gating whilst providing a deterministic visual roadmap of the entire process.

  1. Global Sequence Visualisation: The system must render a persistent visual roadmap of the entire multi-stage process (e.g., a node map or segmented timeline). The entire sequence remains visible at all times to provide the user with clear expectations regarding the task's duration and scope.
  2. Interactive State Gating: While the global sequence is visible, interaction with the detailed content of future steps (index $N+1$) must be strictly blocked at the logic level until the specific input criteria of the currently active step (index $N$) are mathematically evaluated as true.
  3. Active Context Rendering: The detailed user interface elements (controls, text prompts, interactive objects) of the currently active step must be prominently rendered. The specific content of locked future steps should remain hidden or disabled to prevent cognitive overload, even though their corresponding nodes on the timeline are visible.
  4. Controlled Regression: The system must permit unrestricted backward navigation to previously completed states, allowing users to amend prior inputs without resetting the entire sequence or losing overall progress.
  5. Explicit State Advancement: The transition between steps must be driven by an explicit, user-initiated confirmation action (e.g., triggering a "Next" button) rather than executing automatically upon validation, ensuring the user remains in control of the pacing.
The Linear Flow System UI Pattern


Reference Pattern

// Pseudo-code for Linear Flow System Implementation
// Tone: Technical Implementation Guide

Class LinearFlowManager : MonoBehaviour {

    // Configuration
    List<FlowStepData> flowSteps;     // Data arrays defining the entire sequence
    Int currentStepIndex = 0;

    // User Interface References
    GameObject sequenceRoadmapCanvas; // The persistent visual timeline
    List<NodeUI> sequenceNodes;       // Visual indicator icons for the complete sequence
    Transform activeContentContainer; // Container for rendering the current step's interactive UI
    Button nextButton;
    Button previousButton;

    // Initialisation
    Function Start() {
        // Render the global map and load the first step
        sequenceRoadmapCanvas.SetActive(true);
        ActivateStep(currentStepIndex);
    }

    // Core Logic: Context Rendering and Node Updates
    Function ActivateStep(Int index) {
        // 1. Update the visual states of the entire sequence map
        UpdateNodeVisualStates(index);

        // 2. Load and render strictly the interactive content for the active index
        currentStepIndex = index;
        activeContentContainer.LoadContent(flowSteps[currentStepIndex].UIContent);

        // 3. Evaluate navigation permissions
        EvaluateValidationState();
    }

    Function UpdateNodeVisualStates(Int activeIndex) {
        // Iterate through the full sequence to update visual indicators
        For (Int i = 0; i < sequenceNodes.Count; i++) {
            If (i < activeIndex) {
                sequenceNodes[i].SetState("Completed");
            } Else If (i == activeIndex) {
                sequenceNodes[i].SetState("Active");
            } Else {
                sequenceNodes[i].SetState("Locked");
            }
        }
    }

    // State Gating Logic
    Function EvaluateValidationState() {
        // Query the active step's internal logic to determine if criteria are met
        Boolean isValid = flowSteps[currentStepIndex].ValidateInput();

        // Strictly gate forward progression based on the validation boolean
        nextButton.interactable = isValid;

        // Regression is permitted as long as the user is not at the origin
        previousButton.interactable = (currentStepIndex > 0);
    }

    // Execution: Forward Navigation (Bound to "Next" UI Event)
    Function AdvanceFlow() {
        If (flowSteps[currentStepIndex].ValidateInput() AND currentStepIndex < flowSteps.Count - 1) {
            ActivateStep(currentStepIndex + 1);
        }
    }

    // Execution: Backward Navigation (Bound to "Previous" UI Event)
    Function RegressFlow() {
        If (currentStepIndex > 0) {
            ActivateStep(currentStepIndex - 1);
        }
    }
}

Dependencies

Linear Task Segmentation Behaviour: Essential to break the process into manageable chunks.

State-Based Persistence Behaviour: Ensures the user is not forced to remember or is rushed through instructions.

Enhancements

Shallow Navigation Behaviour is recommended to keep the total number of steps to a minimum.

Adaptive Scaffolding Behaviour is recommended to allow users to bypass known instructional segments.

Previous
Global Visual Intensity Control