Multi-Directional Panel Navigation to Preserve Context, Enhanced Spatial Awareness and Efficiency

[Yuri_BC]

Tensions

1. Drawback of breadcrumb/timeline vs spacial relation navigation: The existing right-only panel navigation mimics a breadcrumb trail, confusing users’ spatial memory by not aligning with their intuitive sense of the horizontal order of relationships between entities.
   Example: When a task is viewed full-screen and the parent project link is clicked, the project currently opens to the right, disrupting the mental map of parent (should be on the left) to child (on the right).
2. Constraints on Contextual Layout: The current right-only panel system limits the ability to maintain a spatial layout that mimics how one might naturally arrange related items in physical space, like pages on a table or post-its on a wall.
   Example: With the current system, users cannot have a parent project open on the left, a task in the center, and related documents on the right, making it less intuitive to maintain context across related entities.

Example of three related entities or entity types

Example of four related entities or entity types

Proposed Solution

Enable multi-directional navigation where links can be opened in the current window, a right window, or a left window. This mimics the more natural and intuitive spatial relationship akin to laying pages on a table or post-its on a wall.

How It Resolves Tensions

1. Allowing for left-window navigation helps restore a more natural, horizontal spatial relationship, making it easier for users to intuitively understand parent-child or sibling entity relationships.
2. Multi-directional navigation would provide more flexibility in arranging related entities, enhancing the ability to work with multiple items while maintaining a clear and intuitive spatial context.

Examples of visually horizontal relations

1. Researchers Analyzing Data Sets:

• Researchers often work with multiple, related data sets.
• Spatial Context: Understanding the correlation between primary data (left), secondary data (center), and tertiary data or annotations (right) is crucial for analysis.
• Head/eye movement: Being able to easily “pan” from primary to secondary to tertiary data mimics how a researcher might physically move their head or eyes across a wide table filled with interrelated data sheets.

2. Product Developers Reviewing Project Milestones:

• Product developers need to keep track of past, current, and future milestones.
• Spatial Context: Having past milestones (left), current tasks (center), and future goals (right) helps to intuitively understand the product’s development timeline.
• Head/eye movement: Zooming or panning across these categories feels natural and is akin to looking at a physical timeline, where past, present, and future are laid out horizontally.

Vertical relations are also better supported by left&right opening panels

Not only horizontal but also vertical spatial relationships benefit from ‘left panel open’.
Our brains are always relating things in a consistent visual order. If it is a top-down hierarchy then our brain will accept that we just flip the structure to the side and navigate horizontally accordingly.
Examples:
Organizational Chart: Hierarchical structure of a company from the CEO at the top to entry-level employees at the bottom.
Product Features: Prioritized list of features for a new product, with must-haves at the top and nice-to-haves at the bottom.
Research Paper Outline: Major sections at the top, breaking down into subsections and individual points as you go down.
Website Sitemap: Homepage and main categories at the top, with subpages and links flowing downward.
Marketing Funnel: Stages of a consumer’s journey, from awareness at the top to purchase and loyalty at the bottom.
Software Architecture: High-level components or modules at the top, breaking down into sub-components and individual functions at the bottom.

These examples underline the importance of maintaining horizontal spatial relationships for different kinds of work, making the case for multi-directional navigation in Fibery.

[Chr1sG]

@Yuri_BC

the mental map of parent (should be on the left) to child (on the right).

I think this is a predicate assumption that does not hold true for all domains/cases.
Yes, in many cases, a users intuition is that a one-to-many relation implies a top-to-bottom or left-to-right hierarchy, but this is not always the case.

Fibery’s inherent flexibility means that users will often implement workspace structures that do not follow simple ‘nesting hierarchy’ and enforcing that paradigm will be unpleasant in such cases.
Of course, breadcrumb navigation may be sub-optimal for for some schemas, but it is naturally ‘agnostic’.

[Yuri_BC]

The left to right hierarchy ordering is just one common preference, but that is not the main argument for this case. This feature request is not meant to impose a left-to-right hierarchical paradigm but aims to offer an additional layer of navigational flexibility.

The essence of the suggestion is to allow the UI to more closely mimic how users naturally arrange and think about information in a spatial context, often on a two-dimensional plane. This is not just about traditional hierarchies but about facilitating intuitive navigation through complex relationships, whether they are hierarchical, sequential, or otherwise.

By offering options to open links in new panels to the left, right, or even in the current panel, we could align the tool more closely with users’ mental maps without constraining them to any single navigational paradigm.

[Chr1sG]

These statements

@Yuri_BC

how users naturally arrange and think about information in a spatial context, often on a two-dimensional plane…

…we could align the tool more closely with users’ mental maps

imply that all users have similar mental models.
I just don’t think this is necessarily true.

Currently, there are many places where a user may want to click on an entity to see it in more detail. Adding the ability for a user to choose where the entity should be opened (left, current or right panel) will increase complexity on the UI.
It is not guaranteed that adding functionality to the UI for the benefit of users who share your mental model is a net positive when weighed against any negative effects on users who do not need/want that function.

[Yuri_BC]

Thanks @Chr1sG for your reply and I understand your concern about potential UI complexity.
But this not just an extra bell or whistle, it’s a tension I (and potentially others, lets see who replies) have with Fibery: it’s hard to keep track of what I’m doing because of how the navigation works. I find that context is quickly lost, as I pointed out in the examples.

We may do this: Fibery already lets people choose how they want to navigate with personal setting like the ‘One-panel navigation’. I think it would make sense to add left-and-right panel navigation. If we make this a setting people can turn on or off, then everyone can pick what works best for them.

Also, with an eye on the future, the way we handle and think about information is changing. More and more, we’re moving away from simple lists and getting into webs and networks of info.

[Yuri_BC]

Related

[DONE] Multi-panel context-preserving navigation

Problem It’s very hard to work with data in Fibery, since you have only single open entity/view in the main area. It leads to the following problems: Loss of context when you open entities in collections or references. You have to remember where you’ve been. High cognitive load for all side-actions. Main flow is interrupted by some sudden sub-flow and it’s hard to go back easily. Solution We’ll experiment with making multi-panel navigation a major UX pattern in Fibery. It will be easy to op…

[Yuri_BC]

The search button already has this functionlity, to open a search in left, right or middel panel. Having similiar behavior for links to entities and views would be great.