Suggestion to improve text folding UI

I think that the UI for expanding and collapsing text below headings is clumsy!

Expanding is clean, just click on the ‘three dots’ button, or use the keyboard toggle shortcut.

But collapsing means moving to a completely different location at the foot of the heading dropdown menu, or using the same keyboard shortcut.

If the user is about to use the keyboard for an edit, the keyboard shortcut works well enough.

However, a common use case might be where the user is browsing through a long body of text, using the mouse or trackpad, reviewing its content, by opening and closing successive collapsed sections to take a peek inside.

The present UI offers two awkward choices…

  1. Either
    alternating mouse/trackpad movements between different locations: for scrolling, the expand button, and the click-drag movement for the separate collapse dropdown,

  2. Or
    alternating between mouse/trackpad movements for scrolling, and switching your hand to the keyboard to toggle the shortcut for collapse/expand.

I think that a true ‘toggle button’ would be much better UI. Cleaner, less awkward, and immediately recognisable to all users.

My suggestion would be to change the existing ‘three dots’ button to a true toggle button:

  1. If the text below is hidden then the button to the right of the heading would be a ‘+’ in a circle, always visible

  2. When the button is clicked to expand, the text below is revealed, and the button changes to a ‘-’, but the button disappears as soon as the cursor is moved to another location.

  3. Whenever the cursor is clicked into anywhere in any other heading, its ‘-’ button re-appears.

  4. This means it would be possible to expand and immediately collapse the text below a heading, using a single toggle button, without having to move the cursor.

Hope this all makes sense!

It may be a matter of motor skills training but at this point I find myself doing a lot of screen searching to accomplish folding/unfolding. I think your idea is a good one and it would improve the use of the folding feature, particularly in longer docs (with a lot of folded) which might include cascading folds.

1 Like

Perhaps a disclosure triangle instead of + and -, pointing right when collapsed and down when expanded?

1 Like

Related folding UI suggestion: folding affordances for headings and list items are inconsistent. Tapping on a heading displays the folding button in the left margin but tapping on a list item does not, so the only way to fold list items (great to see list folding included, by the way) is via the other folding affordances (keyboard button, popup menu).

Any change as per original post above should be applied to headings and list items (and anything else that can fold)

I second this. Their implementation of folding is the strangest and most confusing implementation of this I have ever seen.

It’s confusing to know what goes underneath the fold. Once it’s unfolded it’s unclear how to close it back.

Just add the triangle like every other app. It’s universal, clear, and visually tells you when it’s folded and unfolded.

This is the one thing that is keeping me from using Bear. After Roam, I can’t write without a version of folding.

5 Likes

Hello,

I agree that the folding UI that we have is a bit different than other apps, that’s mostly because we don’t want additional UI inside the editor (the triangle you mentioned).

Most of the users don’t really care about folding, and having persistent icons that you don’t use near your text is only annoying and would limit the writing space in handheld devices.

This doesn’t mean that our current implementation is great, we know it’s limits and we’re still trying to find out a better UX/UI.

I hope that my explanation shed some light on our design decisions about folding :slight_smile:

1 Like

Thanks Matteo for explaining your design rationale.

I now completely understand why it’s important to keep icons out of the the text area!

However, as you’ve said, the folding UI remains clumsy, and I suspect that this could be a big reason why “…Most users don’t really care about folding”.

In fact, I think that if text folding truly toggled with repeated clicks on a single button, many more users would use this very useful function.

The only thing I can think of that might solve this UI problem is:

  • A conventional triangular ‘reveal button’.
  • This reveal button to be located in exactly the same position as the existing ‘headings menu’ button, to the left of every heading.
  • This reveal button would only be visible when the cursor is HOVERED OVER anywhere on the heading line, including the button’s position itself.
  • Each click on the reveal button would (instantly and intuitively) toggle the text folding below it.
  • Although the new reveal button is in the same position as the existing headings menu button, it should not interfere with it, as the headings menu button is only visible (and active) when the cursor is actually CLICKED INTO the heading line.

I have no idea how difficult this might be to code, but I do think it would be a fitting addition to your (otherwise) super-smooth Panda editor.

— Brian Liddell

1 Like

There seems to be two types of folding? One is Heading Folding: folds everything below a heading to the next equal or greater heading, and the other, a List Folding: folds subordinate list items below a superior list item to the next equal or greater list item. So for me the awkwardness is that the means to toggle (fold/unfold) these are different.

For me both initiating and operating would be better served using something like the header icon in the left margin for both types. Selecting the area to the left of a header or a list item, for example, could wake the icon that then gives the choice to create an initial folding relationship (as well as other actions such as change the header type or maybe tab) or to toggle an existing fold.

Hello @brianliddel. Since I was originally excited by folding (in others apps originally toggling) and then decided that I didn’t want to use that feature, I thought I’d share my thought here on folding.

Briefly, folding hides content from the note and creates a layer of hierarchy in the note between the visible and hidden. So for me, I’ve decided not to use hiding in my note workflow (this is currently the case with other apps I use and play around with including Notion, Obsidian, Roam, Craft, to name a few) because I want information accessible at all times. I have outlines, that if printed would be 20-30 pages, and I still prefer to see everything since trying to remember what I’ve hidden ends up being the issue. I’ve mentioned elsewhere that Bear’s upcoming TOC will fix many of the “access” issues in long notes.

Not advocating for anything here, just thought I’d share my journey through content folding. :+1::+1:

I take your point, and it is good that those such as yourself will presumably have the option not to use folding/toggling. For me though, the idea of using notes (rather than say one continuous document), and wiki links to other notes and documents, is a means of focusing on what is currently relevant. So temporarily hiding or folding is a further extension toward that focus.

A related question may be, and I think this goes for the addition of any new feature, is whether or not it’s presence will hinder use of Bear for those choosing not to employ it.

A very good question indeed. I think that is what the Bear team is grappling with asking: “How does a new feature hinder, or maybe even present itself visually, in relationship to those who choose not to employ a certain function.” That’s a great observation!

1 Like

Yes, yes, yes. This is one of those cases where industry standard is better.

1 Like

I wonder if something like double clicking the header icon would be able to invoke folding.

Nice idea. That said, if I were trying to improve on the usual rotating carat (“^”) signs what I would like would be the ability to export a document while hiding toggled-to-invisible items. I make my living as a writer and the ability to add a quick thought to a toggle list and make it disappear in the final product would be awesome.

I understand that, but when nearly EVERY other app that has folding uses one particular way and then you try and do the same thing but using a different UI, you are adding friction and complications to the app. And you now have to train people to use your UI when they already know the other way.

I never used folding until I used Roam. And now, I can’t use an app that doesn’t have folding. I’d say if you want to implement it, do it well and make it the same as the universal way that everyone already knows. If you don’t want to add it, which it doesn’t sound like you do, then just don’t. Stick to your guns. But don’t add it in some halfhearted “people don’t actually care about folding” way. It doesn’t look great for the brand.

I’m inclined to agree that the benefits of folded text are only realised when fully implemented. But, I think this would require:

  1. A single ‘reveal triangle’ toggle button, that provides instant collapse and expansion of the text immediately below it — as described above.

    But also a couple of other controls…

  2. Another button and/or keyboard shortcut that toggles the collapsing of text below ALL THE HEADINGS on the page. There is a well-established Mac convention for this, by holding the ‘Option’ key whilst clicking on any reveal triangle.

  3. The ability to ‘grab’ a heading, together with ALL THE TEXT IMMEDIATELY BELOW IT, by holding on its reveal triangle, to enable ‘drag and drop’ reordering of text on the page.

These three controls date back to the earliest days of the Mac, and Dave Winer’s original Outliner concept.

I doubt that Bear’s developers currently intend a full outliner implementation at this document level.

But it would be a major feature if this could be added in the longer term.

Hi All, I am quite new to Bear and am currently looking for a powerful editor for doing research and book/article writing. I have tried several options from Ulysses, to Scrivener and IA Writer and I am using Roam Research as one of my key research tools. What I especially like with Bear/Panda is the really nice and user friendly writing experience (design is really outstanding compared other tools!).

To come back to the topic about folding: For me folding is a key feature and indispensable for long-text writing and is a structural feature that BEAR definitely lacks in comparison to Ulysses, IA Writer and surely in comparison to Scrivener. A folding text feature would provide BEAR an option to make it more convenient for long-text writing especially in combination with nested tags, footnotes and powerful extraction options.

To implement a solution that is compatible to BEAR’s wonderful design, I tend to agree with the development team to provide a minimalistic solution not disturbing the UX. For me a keyboard shortcut is fully well covering my needs. As second option a mouse-over feature or a double-klick as proposed above could also be nice. But in any case, there should definitely be a structure supporting option like folding in BEAR.

4 Likes

I second everything said here, in spades.!!! As a professional writer and translator, it is the writing experience above all that brings me back to Bear. Easy to use folding is by far the biggest priority on my wish list.

As a writer, easy–to-use folding is something I value.

It’s good that Panda seeks to find alternatives to extra characters in the text (disclosure triangle).

Not good that the folding and unfolding are so clunky at present.

I like things to fold or unfold with a couple of taps — not too much complication because I also use notes for speaking so every action must be easy to do with one hand.

I’m not a UI designer so I don’t presume to offer the perfect solution, but I applaud ‘going outside the box’ to find one.

It’s just too clunky and complicated to use at present

That seems to be a good solution