In spite of the diverse background colors to indicate the levels in the hierarchy of notebooks, I have difficulty to see the right structure at a glance. There are too many types of signals calling for attention:
(modestly) different background colors
indention of titles
very prominent expand/collapse buttons
The buttons in particular are distracting. They suggest another tree structure. Even after a few months of use, I can’t help perceiving the subtree “Formele talen” in example A below each time as:
I would really welcome a more ergonomic design. At the moment, I can think of five ways to mitigate the contradictory signaling:
Give the leaves a greyed pseudo-button, so that the eye can follow the indention pattern of the buttons and pseudo-buttons. This is elaborated in example B.
Make the buttons less prominent, so that the eye can easily follow the indention pattern of the text. See example C. Arrows could be an alternative for the + / - buttons, as in example D. That’s more in line with the symbols used at the right side of “Notebooks” and “Tags”.
Make the levels more distinct by vertical lines, as in example E. (I don’t believe bigger contrast of the background colors would be an improvement.)
Shout the buttons down. Put an eye-catching icon before each (sub)notebook according to example F, and slightly dim the buttons. Takes up a bit more space. (Shouldn’t the “Notebooks” header get a bookshelf as an icon now?)
Put the expand/collapse buttons at the right side, like the ones for “Notebooks” and “Tags”.
I doubt if the current background-coloring scheme helps discerning the different notebook levels. Speaking for myself, I understand the intention, but undergo it chiefly as noise. So I also experimented with some monochrome alternatives:
Examples G and H are combinations of idea 1 and 2 (find the four differences between these two designs).
In example I the vertical lines have evolved to real graphical branches. Probably hard to build with the techniques used for Joplin.
These are just some ideas to start with. Not really inventive so far, and other people may have more exciting and more tasteful suggestions.
You could change this per “theme” I believe? I’m personally not a fan of adding symbols in-front like in the suggestions (though just my opinion), I think it is enough that they use a “tab”.
It has always been the issue for every user using the app at good scale, even i’ve faced it. I think it’s a good idea, but i agree with AtBios, it’s not a very good practice for adding symbols in-front of notebook names. But instead i liked the idea in the E and I picture. That could be an easy and minimal implementation to distinguish notes and notebooks even at a large scale, i believe.
I do like the idea of reducing complexity in the UI. For that reason I would prefer the design proposal C.
But before changing anything my two cents about what is the major goal:
For me there are two thinks I need help from the UI
I want to be able to see in which folder I am operating
I want help selecting the right folder
As in the mobile app 1 a slight color distinction could help. For 2 I thing if I do have un- button (or arrow) this helps me already, because I know where I want to go or? So the fokus should show me where I am and not in which layer I am moving because (in my setup) this is not important
@nr458h, hasn't the first wish already been implemented long ago?
I don't want to abolish the selection marker, and the striking blue color is perfect for me. The mobile interface is also okay in this respect (I can substantiate why light grey is a good choice in that design).
M = D (based on idea 2) with monochrome background.
I hadn't mentioned my own preferences yet. Time to do so. Idea 5 has won ⇒ J, K, L. These are the least crowded designs, and the controls simply don't stand in the way of the visual clues about the tree structure. I'm not sure about the background coloring. I prefer monochrome now, but maybe this type of level emphasizing should be made optional. L pleases my eye most, but it widens the sidebar a few pixels more (or when keeping the width of K: shows one or two letters less at long titles).
Expand/collapse symbols
I also did a quick survey of the button symbols, to see if some common standard emerges:
Option “M” is what looks most comfortable to me, as most of the software I use have tree structures like that. The slight color changes in “A” and “B” are a little distracting for me
From a CSS standpoint, because of the way the backgrounds are applied (directly to the element vs using a class), I haven’t figured out a way to remove them without also removing the selected state, so for now I ended up implementing something that looks ~version E. This is added to userchrome.css:
Thanks for looking into this issue @memophen. Perhaps we could have a non-binding vote to decide what to do about the sidebar design? One vote to decide “background colour vs no background colour”, and another vote to decide what expand/collapse symbol should be used.
Although for this maybe we could just pick from your survey of existing symbols (looks like arrow pointing right, and arrow pointing down should be the way to go).
Unfortunately the css modification for the notebook background has a drawback. If you change the background via css, the selected notebook does not have a blue background color, thus you don’t see in which notebook you are in. Otherwise I’d agree 100%.
When I look at other apps that have a hierarchy of folders (just checked Firefox, Chrome, Thunderbird and Sublime), I don’t see that any of them has the kind of colouring that we have. Personally I find it a bit distracting and I’m not convinced it helps navigating the tree of notebooks, so I’m in favour of removing this and go back to plain colours.
To improve the distinction between notebooks and sub-notebooks, I think we can increase the left margin increment (the app I’ve checked have more space, which makes it clearer), and use a right arrow/down arrow for collapsed/expanded state, which will be more discreet than the current +/- but still clear enough.
We could probably have a compromise, we could add css classes based on depth and one for the selected notebook. This gives even more power to the user CSS, the only drawback is that we would need some extra code.
+1 for I option, as this option is more user friendly and user will not get confuse which notebook he is in
and I think it will much better if you make the lines more light
Would love to see those all added.