[IN DEV] 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

https://publish.obsidian.md/alexisrondeau/Your+amazing+YOUness

Innos is cool as well

https://innos.io/space/c1259ea0-2879-b587-916a-766a58fe9441?ps=c1259ea0-2879-b587-916a-766a58fe9441,e8b0d066-1b60-45fc-9339-d2c5427ecc02

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.

We’ll see how it goes on live data — so far it’s a radical experiment.

Correct, we imagine Creators marking some Fields as important which pins them throughout Fibery. This might include the creation screen as well, similar to Linear:

2 Likes

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

I completely disagree with this. Maybe it depends how everyone uses Fibery, but having the important fields shown on top it’s great, especially when doing 2 panel navigation. Notion, Coda etc uses this and for sure they have enough UX data to confirm it, otherwise they would at least try changing it.

2 panels will work really well when you have relationship and you want to check those items, or links to other entities in the rich text, it’s so much easier to open the entity in another panel and keep the view instead of having to go back each time.

I guess the important fields might be simple fields for some people, and rich-text fields for others :man_shrugging:

1 Like

Precisely! Which is why it should be customizable, as it already now is. And also why I’m confused by the proposed layout which changes the defaults and the way single column layout is handled. That, to me, seems like a separate thing to do, if at all. Is there complaint that the single column defaults are not good? Am I reading too much into the Figma mockup? :grinning_face_with_smiling_eyes:

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

When I really intend to use a view and not navigate much, I do miss being able to quickly click between items in the view. It seems the current multi-pane mode always opens the item in a more full page view. It seems like you could wait until you click on a reference to a secondary item in the current production sidebar view before you push the panel over.

How I’d rather view an entity directly in the current view

What it should look like only after clicking on a reference within that sidebar panel

What it currently looks like when clicking on an entity from the board view. This gets in the way of clicking between entities quickly.

3 Likes