[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 open anything in any panel.

Quickly show a second panel from anywhere

When there is a single panel visible, there is a button/shortcut to split the screen (open a panel on the left, open a panel on the right).

Going to the source of knowledge opens the left panel (ex. Block Source, to-one relation), digging deeper opens the right one (ex. to-many relation, Entity mention in text).

For example, here we have a feature in a single panel, but I clicked on a user story and it opens in the right→ panel:

References

Obsidian is a good one

Innos is cool as well

A small glimpse into our WIP (still Figma prototypes):

We’ll see if this approach survives in a live prototype on our (and later your) workspace.

3 Likes

Nice to see this! Not sure if feedback is welcome at this stage, and of course without using this I’m making some assumptions based on what I see. But for what it’s worth, I have two concerns based on this mockup (and apologies if I’m jumping the gun :grinning_face_with_smiling_eyes:).

First, it appears that non-Rich Text fields are all at the top of the layout in this view. This is Notion-like and sucks terribly. :laughing: If we can still rearrange stuff then it’s probably fine, but that raises the question of whether we have to then create layouts for each possible view of an entity. I realize that this is probably just 1 possible way of viewing entities, and maybe it’s just a matter of the mocked-up fields here happening to lead with State. But I’ll point out that in the default Entity views currently, the first field is Rich Text. And there is already an existing model for how to “collapse” that into a single column decently, which is the Sidebar view. I’m not saying it’s perfect, but it feels like a better approach than what I think I am seeing here.

Second, the “Show more fields” thing… I am hoping this is indicating a future function for selecting a subset of Fields to show by default and hiding the rest (i.e. lesser-used), in which case this is probably fine. But at the same time I’ve found it extremely frustrating to deal with default-collapsed fields, e.g. empty fields, in both ClickUp and Airtable recently. There is definitely a place for this kind of approach, but it needs a good amount of user control IMO. I do trust that Fibery team, with its approach thus far, will balance this better than ClickUp and Airtable, but I thought I’d mention that it did give me an initial “oh no!” reaction. :grinning_face_with_smiling_eyes:

2 Likes

I also advise you to see how a similar UX is implemented in Remnote. There, just like in Obsidian, you can open different combinations of panels.

For example, like this (screenshot). Here I generally have the same document open. The so-called “Zoom into” mode. In a separate panel, you “fall” inside a specific part of the document, where there is nothing but it.

This is very useful when working with long documents (entities). Or when you need to focus only on a block of text.

In the same way, for example, I organized for myself the “Cornell Outline Template”.

Multi-page documents (entities) are a thing that you have to deal with on a regular basis. For example, related to long-term product strategy or research materials.

We have to work with them in third-party programs, since it is much more convenient to focus and operate with information there (RoamResearch, RemNote, Logseq, etc).

2 Likes

In my opinion, “Sliding Panes (Andy Matuschak Mode)” should also be (as in your examples). It is convenient when working with small materials, when you are “walking” through connections.

And when working with large documents, it is better to have combinations from Panes. As I gave the example above.

These are very different modes of working with information.

7 posts were split to a new topic: Important fields concept (display important fields in panels and other places)

Thanks a lot for demoing Remnote! I haven’t seen “Zoom into” mode before.
While Andy Matuschak’s notes were an inspiration to us from the start, we’ve never dived deep into Remnote — will do now.

We’ll try our best to find the right balance between a supertool for the superfew and a generic software for everybody (and, thus, no one).

1 Like

Fair enough, I am curious to see how it goes. I just want to reiterate that the way Notion, ClickUp, Airtable, and many other tools work is for me less good than what Fibery already does. I want to see multi-pane nav very much, but I don’t want to lose what I already like about Fibery. So… find that balance. :smiley:

1 Like

By the way, you have a representative from the Remnote team in your community :grinning:

Karthikk Vijay, Head of Community Remnote. I immediately recognized him from the photo :0)

3 Likes

And as far as I know Remnote are Fibery users now too! I might have had something to do with nudging @karthikk_vijay in that direction. :wink:

1 Like

While we are waiting for you, we work like this. :joy:

split-windows

4 Likes

Some more interactive prototype

5 Likes

Development is finally started a week ago. Some progress:

2021-11-23 10.26.18

3 Likes

Looks really good so far! I like how you’d minimize the 3rd tab so you can quickly get back to it, instead of making it disappear, it really works well with the workflow

Some progress. That is how we will collapse right sidebar (so far).

2021-12-14 20.43.19

3 Likes

For super-early adopters, you may try new navigation by adding ?multi-panel-nav flag into fibery URL. Note that it is far from ready, but your early feedback will help us make it better (faster).

3 Likes

A post was merged into an existing topic: Navigation: Keep main View opened in a left panel when opening an entity

I agree with the feedback re: first-clicked entity not necessarily opening in “full view” at first. But it also raises the question of whether this new nav paradigm should completely replace the old, or if there should be an explicit way to enter one or the other mode, either on initial click (e.g. like current Alt-Click can get you into internal settings in certain places, vs. regular click for Open), or as an option after click, or an adjustable default (per-user probably). I can definitely imagine times when I want one or the other behavior, and personally my preference would be to be able to determine that dynamically at click time, i.e. when I decide to open an entity I can do so either in “full screen” or in “multi-panel” modes…

Also, a minor issue, the “expand” option for Rich Text fields doesn’t really make sense/do anything useful in the multi-pane nav anymore.

Just saw this demo of Craft Docs and how it handles multi-pane nav. Interesting inspiration/example:

It’s a bit of different approach, they are using native iOS split screen windows :frowning: