Hop, Skip, Jump: Prototyping Non-Linear Navigation for Cognitive Accessibility

Standard navigation assumes a user follows a linear path: page A to page B to completion. But many people with cognitive disabilities — including those with ADHD, autism, or executive function challenges — do not think or interact in straight lines. They may jump between tasks, revisit steps out of order, or abandon a flow midway and need to resume later without losing context. Designing for these patterns requires prototyping non-linear navigation structures that support hopping, skipping, and jumping through content. This guide explores how teams can prototype such systems effectively, with practical examples and honest trade-offs.

Why Non-Linear Navigation Matters Now

The web's dominant navigation model — sequential forms, wizards, and step-by-step checkout flows — assumes a user's attention and working memory are stable. For many neurodivergent users, that assumption breaks down. A person with ADHD might start a multi-step process, get interrupted, and return unable to remember where they left off. Someone on the autism spectrum may need to review a step they already completed to reduce anxiety. A user with a traumatic brain injury might struggle with the cognitive load of holding their place while processing new information.

Non-linear navigation addresses these needs by offering multiple entry points, flexible paths, and persistent context. It's not about removing structure but about providing structure that adapts to how people actually think. This approach aligns with Web Content Accessibility Guidelines (WCAG) 2.2 success criteria such as 2.4.5 (Multiple Ways) and 3.2.3 (Consistent Navigation), but it goes further by prototyping interactions that are rarely built into standard frameworks.

The timing is right because assistive technology users increasingly expect interfaces that match their cognitive styles, not just their sensory or motor needs. Tools like voice assistants and eye-gaze systems already allow non-linear input; the navigation layer should catch up.

Who Benefits Most

Primary beneficiaries include users with attention regulation differences, memory retrieval difficulties, and those who process information in non-sequential chunks. Secondary beneficiaries include all users who multitask or context-switch, which is most of us. Designing for cognitive edge cases improves the experience for everyone.

What Non-Linear Navigation Actually Means

Non-linear navigation is a system where users can move through content in any order, revisit completed steps, skip optional sections, and return to a flow without losing progress. It's not the same as a sitemap or a search bar — it's an intentional interaction pattern that preserves state across jumps.

Think of a recipe app that lets you start cooking, skip to the ingredient list halfway through, then jump back to the step you were on without scrolling. Or a tax filing tool that lets you complete deductions in any sequence and shows a progress indicator that updates regardless of order. The core idea is that the interface respects the user's mental model rather than forcing a pre-defined path.

Key Characteristics

• Parallel pathways: The user can choose among multiple routes to accomplish the same goal. No single path is mandatory.
• State persistence: The system remembers what the user has done, even if they leave and return later, across sessions.
• Undo and redo at scale: Users can reverse actions taken in any order, not just the most recent step.
• Contextual signposts: Clear indicators show where the user is, what they've completed, and what remains — without assuming a linear sequence.

Common Misconceptions

Some teams think non-linear navigation just means adding a 'back' button or a table of contents. But true non-linearity requires the system to handle branching and merging paths gracefully. It's not about removing guidance — it's about offering guidance that adjusts to the user's choices. Another misconception is that it's only for power users. In practice, cognitive accessibility often demands simpler, more forgiving navigation, not more complex.

How It Works Under the Hood

Prototyping non-linear navigation involves three technical layers: state management, interaction mapping, and feedback systems.

State Management

The system must track not just the current step but the entire history of visited steps and completed actions. A key-value store or a graph database can model this, with each node representing a screen or action. Edges represent transitions, but they are not directional — users can traverse them in any order. The state also includes metadata like timestamps and completion flags.

For prototypes, a simple JavaScript object with a visited array and a completed set suffices. The challenge is handling concurrent state changes — for example, if a user completes step C while step A is still pending, the system must update the progress model without breaking the flow. We recommend using a reducer pattern (like Redux or Zustand) to keep state predictable.

Interaction Mapping

Designers must map every possible user path through the content. This is often done with a directed graph where nodes are screens and edges are actions (click, swipe, voice command). Unlike a linear flow, the graph has many cycles — users can loop back to earlier nodes. The prototype needs to handle these cycles gracefully, preventing infinite loops and ensuring the user can always find their way to completion.

One technique is to use a 'breadcrumb' trail that shows not just the current position but all visited nodes, with the ability to jump to any of them. Another is a 'hub and spoke' model where a central dashboard lists all tasks, and each task can be worked on independently.

Feedback Systems

Users need to know where they are and what's next, even in a non-linear system. Visual indicators such as progress bars that fill based on completion (not sequence) work well. Animated transitions that show the user jumping between nodes can reduce disorientation. Audio cues can also help — a subtle tone when a step is completed, regardless of order.

Worked Example: A Task Management App for ADHD Users

Let's prototype a simple task management app designed for users with ADHD, who often struggle with linear to-do lists. The app has three core sections: 'Inbox' (capture new tasks), 'Focus' (work on a single task), and 'Review' (check completed and pending tasks).

In a linear design, the user would capture a task, then be forced to schedule it, then work on it, then mark it done. In our non-linear prototype, the user can jump between sections freely. They might capture a task, then immediately jump to Focus to work on it, then hop to Review to see progress, then return to Inbox to capture another. The state tracks that the first task is 'in progress' and the second is 'captured but unscheduled.'

We prototype this with a simple HTML/CSS/JS mockup. The navigation is a fixed sidebar with three buttons: Inbox, Focus, Review. Clicking any button loads that section's content, and the state updates. The Focus section shows the current task and a 'skip' button to defer it. The Review section shows a list of all tasks with status badges. A progress bar at the top shows overall completion across all tasks, not just the current flow.

During user testing, we observed that participants used the skip button frequently — they would start a task, feel stuck, skip it, and later return to it from Review. The linear equivalent (forcing them to finish or delete) would have caused frustration and abandonment. The prototype validated that non-linear navigation reduced task-switching anxiety.

What We Learned

The biggest challenge was ensuring that skipped tasks didn't get lost. We added a 'stale' indicator that highlights tasks not touched in 48 hours. Another lesson was that users wanted to see the 'big picture' — a summary of all tasks, not just the current one. This led us to make the Review section the default landing page, not the Inbox.

Edge Cases and Exceptions

Non-linear navigation introduces edge cases that linear flows avoid. Here are the most common ones and how to handle them.

Infinite Loops

If a user can always go back to an earlier step, they might cycle indefinitely without completing a task. This is especially problematic for users with executive dysfunction who may get stuck in a loop of checking and re-checking. Solution: Implement a 'commit' action that marks a step as final, with an option to undo within a time window. Also, provide a 'suggested next step' based on the user's history, not just their current position.

Loss of Context

When users jump between sections, they may forget why they jumped. A common scenario: a user is in Focus, sees a related task in Review, clicks it, and then cannot remember what they were originally working on. Solution: Show a 'recent path' breadcrumb that lists the last 3–5 nodes visited, with timestamps. Also, allow the user to bookmark a 'current working set' — a temporary group of tasks they are actively juggling.

Data Inconsistency

If a user completes a step in one path that invalidates a step in another path, the system must handle the conflict. For example, in a multi-step form, changing an answer in an earlier step might make later answers invalid. In a linear flow, this is handled by restarting. In a non-linear flow, the system should flag the inconsistency and let the user decide how to resolve it, rather than forcing a reset. Prototyping this requires careful state validation.

Overwhelming Choices

Offering too many paths can increase cognitive load, especially for users with anxiety or autism. The solution is to provide a 'guided mode' that limits options to a few high-relevance paths, while an 'exploratory mode' opens all possibilities. The user can switch between modes. Our prototype included a toggle in the header.

Limitations of Non-Linear Navigation

Non-linear navigation is not a universal solution. It has real limitations that teams should consider before adopting it.

Increased Complexity

Building a non-linear system requires more sophisticated state management, testing, and user onboarding. For simple tasks (e.g., a single-form submission), linear is better. The overhead is only justified when the task involves multiple interdependent steps that users naturally want to reorder.

Learning Curve

Users accustomed to linear flows may initially find non-linear navigation confusing. They expect a 'next' button and may feel lost without it. Our prototype required a brief onboarding tutorial (two screens) to explain the concept of jumping between sections. Some users still preferred a linear mode, so we kept both.

Accessibility Conflicts

Screen reader users may struggle with dynamic content updates that happen without page reloads. ARIA live regions can announce changes, but they must be implemented carefully to avoid overwhelming the user. Also, keyboard navigation must support jumping between sections without a linear tab order. This is doable but adds development time.

Testing Burden

Testing non-linear flows requires covering many more paths than linear flows. Automated tests must simulate random jumps, and manual testing should include users with diverse cognitive profiles. This is resource-intensive and may not be feasible for small teams without dedicated UX researchers.

Given these limitations, we recommend non-linear navigation only for applications where user autonomy and flexibility are critical — such as productivity tools, learning platforms, and health management apps. For simple transactional flows, stick with linear.

Frequently Asked Questions

Q: Is non-linear navigation the same as a wizard with a progress bar?
A: No. A wizard with a progress bar is still linear; you move from step 1 to 2 to 3. Non-linear navigation allows you to skip steps, go back to any previous step, and complete steps in any order. The progress bar in a non-linear system updates based on completion, not sequence.

Q: How do I prototype non-linear navigation without code?
A: Use tools like Figma with interactive components. Create a state machine using Figma's variables and conditional logic. Alternatively, use paper prototyping with cards that users can physically rearrange. The key is to simulate state persistence across jumps.

Q: Does non-linear navigation violate WCAG 2.4.3 (Focus Order)?
A: Not if implemented correctly. WCAG 2.4.3 requires that focus order follows a logical sequence that preserves meaning. In a non-linear system, you can define the logical sequence as the order in which the user interacts, not a pre-set order. Use ARIA landmarks and skip links to help screen reader users navigate.

Q: What about users with severe memory impairments?
A: For some users, too much freedom can be overwhelming. Provide a 'simplified' mode that reduces options to a single recommended path, with the ability to jump only to clearly marked 'rest points'. Test with the target audience to find the right balance.

Q: Can non-linear navigation work on mobile?
A: Yes, but the interface must be adapted. Use a bottom tab bar for key sections and a 'recent' list for quick jumps. Avoid deep hierarchies. The state management is the same, but screen real estate is limited.

Practical Takeaways

Non-linear navigation is a powerful pattern for cognitive accessibility, but it requires deliberate design and testing. Here are three concrete steps you can take today:

1. Audit your current flows for forced linearity. Identify screens where users must complete steps in a fixed order but could logically reorder them. For each, sketch a non-linear alternative using a graph model.
2. Build a low-fidelity prototype with a state management library or a tool like Axure. Test with 3–5 users who have cognitive disabilities. Watch for signs of confusion or delight — both are useful data. Iterate on the state persistence and feedback mechanisms.
3. Implement a 'hub and spoke' navigation as a starting point. This pattern is easier to prototype than full graph navigation and still offers significant flexibility. The hub is a dashboard showing all tasks; each spoke is a focused work area. Ensure the hub updates in real time.

Non-linear navigation is not a panacea, but for the right use cases, it can transform the user experience from frustrating to empowering. Start small, test early, and always keep the user's cognitive model at the center.