App navigation is confusing

[skjnldsv]

Some issues:

1. I can't get nested categories here, it doesn't work on my note setup, how do you create them?
2. users does not know what ../ means, app navigation should not evolve regarding on what you click. This is not supposed to be a hierarchy browsing area.
3. There is a lot of spacing to me. Maybe that is inevitable though. Let's discuss this :)

@korelstar @jancborchardt

[skjnldsv]

• I can't get nested categories here, it doesn't work on my note setup, how do you create them?

Ok, so you cannot from the app.
But you can since if you move your folders around (in files) it will create categories for you.
This is confusing. I cannot get up a folder on the navigation, you need to go back to root and click the further documents.

And like said in 2: This is not supposed to be a hierarchy browsing area.

Now, let's find solutions.
In mail we have multiple nesting, we solved this by showing the first nesting of the folder, but appending all the folders path into one

So you have:

• xxxx/
• yyyy/
  • ccc/
  • ccc/xxx/
  • ccc/xxx/sss/

But to be fair it looks good on Mail but mail rarely have more than 2 depth nested folders. You on the other hand, allows unlimited ones. So I would say the whole ui is not clear. You're stating that folders are "categories", but it means you're only allowing one category? Are the parent folders supposed to be categories as well? How do you see your categories being different from tags for example?

I would like to understand how you see this? What is your vision :)
I must say I don't use the app so much on desktop. 🙈. So this is my raw input, but I might be missing your point or goal 🤗

[jancborchardt]

To be honest, I always preferred it to be a simple note list sorted by most recently edited and nothing more. ;)

But I have to say it’s not as confusing as you say:

• Looking at the screenshot it makes sense. Categories with notes below them.
• The whitespace is proper for spacing.
• the ../ could be seen like a left ellipsis, even tho it’s technical.
• Only confusion is why is there a line below "Kategorie 1"?

[marcoambrosini]

I'd suggest we adopt a similar layout to contacts and mail to solve this. Apple notes uses it and It's one of the best notes app I've ever used. Plus we already have the UI :)
Also we could make the sidebar hideable on desktop, even if there's space for it. That way, people that don't want to mess with categories or address books (i.e: they use just one) are not forced to see them all the time.

[marcelklehr]

I think the two-tier structure is a good idea! An issue is see with this, though, is nesting folders/categories in the sidebar. I went with a similar approach in the bookmarks app last year and it turned out to be a bad idea. (@skjnldsv already knew it back then; I've since seen the error of my ways 😄)

[skjnldsv]

For the appnavigation nesting, we could also try to improve there for the vue components and start increasing the width of it (allowing for more than one nested level)
I really like the separation of notes and folder with the navigation. It makes more sense to me 👍

[marcoambrosini]

An issue is see with this, though, is nesting folders/categories in the sidebar.

Do we need infinite category nesting in the notes app? Currently the navigation allows 2 levels (root level and children). Wouldn't that be enough?

[marcelklehr]

Do we need infinite category nesting in the notes app? Currently the navigation allows 2 levels (root level and children). Wouldn't that be enough?

For me personally, it would be enough. but the UI is based on the files folder structure, so we'd need to think about what happens when the file system folders are nested more deeply.

[jancborchardt]

So this 3-column view of course would work, but to be honest the initial intention of Notes was to be able to focus on Notes, and suddenly then it’s mostly organization.

That said, I mostly use the Android app these days and don’t use categorization anyway, so I’m fine with someone else taking over the design – like you @ma12-co :) As long as you use something like Apple Notes as design benchmark it should be good. 👍

[stefan-niedermann]

I also think that a three column based layout is a heavy overkill. the design gial of this app was always to be simple. For more organizational stuff a solution like nextnotes, onlyoffice or some other suite in combination with the normal files app might fit better.

just my 2 ct

[marcoambrosini]

I understand the concerns, however I'd like to stress that the layout would default as 2 column, one with just notes (no categories) and another with the note editor. The categories and settings column would be for more advanced users only and accessing it would require expanding the sidebar.
Note that the mobile apps are already organized like that, in the sense that categories are already in a separate column (the hamburger menu) from the notes (the home screen). You already have this sort of 3 columns flow.
The whole point here is to further simplify in my opinion, but it requires a petty significant design change, which is the hideable sidebar on wide desktops. Without that I wouldn't be in favor of a 3 column layout

[stefan-niedermann]

I am aware that the android app is already doing this. There is a flow from master to detail because there is only one screen displayed at a time. this is done to show as less information as possible at a time to give a user a quick overview.

on the desktop the scenario is different: if we use 3 columns here, very much information is displayed at the same time - all this has to be scanned by the user before he can start to actual edit.

[jancborchardt]

The whole point here is to further simplify in my opinion, but it requires a petty significant design change, which is the hideable sidebar on wide desktops. Without that I wouldn't be in favor of a 3 column layout

Then we have to think about how it is cross-application though, and about the default. Because people rarely change the default, and if the navigation is shown then it is very complex in this case. But not showing it for other apps like Files or Calendar would not be good since it displays essential data.

So basically, I think displaying non-essential (or secondary) data in an element that so far has always displayed essential data would lead to confusion and/or us messing with the design in a way that we can not really estimate the impact of.

With Nextcloud we aim to be really really simple and easy to use, and that’s why lots of people prefer using it. Compare e.g. to Simplenote which is a great example of simple but powerful note taking.

The 3-column layout is already a bit of an issue with Contacts and Mail, as it leaves little space for the content if you don’t have a huge screen (which many people don’t), and the reason is mostly that historically Mail apps have been this way, and because the sections in Mail are more important and distinct than just categories.

For Contacts and Notes e.g. what we could instead think about is putting the list of Notes / Contacts in the app-navigation, and then having an extra dropdown-like element on the top of the app-navigation which by default says "All groups" / "All categories" and you can filter or create groups/categories there.

And this would not add a whole nother column for a rather rarely used component, and would keep the core experience simple.

[korelstar]

Thank you all for sharing your thoughts and for a critical review on the notes app. I think this is a very good process in order to improve the usability of the app.

First of all I want to answer some questions:

@skjnldsv

I can't get nested categories here, it doesn't work on my note setup, how do you create them?

You have to open the sidebar by clicking the three-dot menu in the upper-right corner and chose "Details". There, you can change the category and use / as delimiter for sub-categories, as noted in the info button text.

@skjnldsv

users does not know what ../ means
@jancborchardt
the ../ could be seen like a left ellipsis, even tho it’s technical.

Indeed, this should be improved. .../ (it's three dots and not two!) was meant to be dots of an ellipsis that stand for the current selected category. In the screenshot this is "Kategorie 1", i.e. "... / Unterkategorie 1" means "Kategorie 1 / Unterkategorie 1".

@skjnldsv

You're stating that folders are "categories", but it means you're only allowing one category? Are the parent folders supposed to be categories as well? How do you see your categories being different from tags for example? I would like to understand how you see this? What is your vision :)

One goal of the app was to have all relevant data in the file system, so you can import/export all data in an easy way and even sync your notes with a system where you edit them with a generic text editor.

Due to this, we've chosen a folder-based category system. This means:

• every note belongs to exactly one category (root folder is shown as "Uncategorized")
• categories are hierarchical, i.e. you can have a category "Receipts" with some unsorted receipts and a sub-category "Receipts/Cakes" for your cake receipts
• since a full hierarchical browsing requires many clicks, the current UI uses another approach which was somewhat inspired by OneNote
  • in OneNote, you have sections in order to organize your notes; in each section you can organize your notes in a kind of hierarchical way by indentation
  • in the Notes app, the first-level of category represents those sections; in each section you can organize your notes in sub-categories
• therefore, the main category selector (please see these screenshots ) only contains the first level; after selecting a category, you'll see all notes in that category (including all notes in respective sub-categories)
• clicking on a sub-category (this shows notes in that sub-category only) is just an add-on; we can give up this, if you think it's unwanted ("This is not supposed to be a hierarchy browsing area")
• the difference to tags is that a note can have one category only
• regarding the vision, focus of the app should be 1.) on writing notes without distraction, 2.) on easy access to recent notes and 3.) simple organizing notes for more extensive notes usages. This means, that organizing should be optional and stay in the background by default.

@jancborchardt

Only confusion is why is there a line below "Kategorie 1"?

It's there to differ between category selector (above) and notes list (below). But we can remove it or visualize using other styles.

@ma12-co

Do we need infinite category nesting in the notes app? Currently the navigation allows 2 levels (root level and children). Wouldn't that be enough?

We can't prevent users from creating deep-level categories, so we need to handle such notes. But there is no need for a full hierarchical navigation through all levels. I think navigating through the first (or first two) level is sufficient. Deeper levels should be composited like it's already done:

• first 1
  • second 1
  • second 1 / third 1
  • second 1 / third 2

Ideas

Three-column view

@ma12-co proposes to separate notes and categories, which means that there will be three columns: categories list, notes list, note editor. I like this approach for it's clearness, but we didn't chose it because it's against the vision to focus on notes.
However, the idea to collapse the categories list (app-navigation) by default is interesting. Though, Nextcloud doesn't provide this design approach, yet. I don't know if it is favored. Anyway, the button for showing/hiding the app-navigation have to be clear; I don't think a hamburger icon is sufficient, here (it's to generic, nobody know that there is a category list).

Drop-down in app-navigation

@jancborchardt proposes to introduce an extra dropdown-like element on the top of the app-navigation. I like this very much, since it respects the app's vision in a good way.
However, I'm unsure if this approach differs to the current implementation. I think we have already this approach. We just lack an official Vue component for that. Did I get this correctly?

[skjnldsv]

Thanks for taking the time to help us understand! 🤗
I actually liked a lot your original screenshots. But there was not a trace of those ... or multiple categories stacked above each others 😁
Which I think is the only confusing thing here! 😉

So what do we decide?

• Better tree display on the navigation?
• Removal of the ... ?
• Increase number of allowed nesting and make the navigation dynamic width instead of fixed?
• Do like mail and merge levels over 2 into direct entries like second 1/third 2/etc/etc ?

[marcoambrosini]

@korelstar

We can't prevent users from creating deep-level categories, so we need to handle such notes.

Why not? I think that we can and should determine how much nesting we want allow here. The concept itself of category nesting is confusing and certainly doesn't help if the goal is to make this app simple and straightforward. Most 'simple' note apps don't have subcategories.

We can't prevent users from creating deep-level categories, so we need to handle such notes.

I just don't get why we should feel the responsibility to display in the notes app a text file that is very deeply nested in the filesystem.

One goal of the app was to have all relevant data in the file system, so you can import/export all data in an easy way and even sync your notes with a system where you edit them with a generic text editor.

I get this, and I think it's very nice to have it. But in my opinion we should introduce some rules about what you can do in files if you want things to be displayed in notes. In this sense there are already some boundaries in place in the current app, for example you cannot place a .docx or a .pdf file in the notes folder (in files) and hope that the notes app will display it, right?

We could go a bit beyond that and say something like: if you want your folder names to be displayed as category names, you have to create these folder at root level in the notes folder
This would mean only one level of categories and no more nesting. I'd understand if we'd have 2 levels of nesting, but I don't see the purpose of going beyond that for an app like this.

Hope I made my point clear :)

[skjnldsv]

Why not? I think that we can and should determine how much nesting we want allow here. The concept itself f category nesting is confusing and certainly doesn't help if the goal is to make this app simple and straightforward. Most 'simple' note apps don't have subcategories.

Because it's using the folder where the user put the notes, we can't forbid the user to create subfolders :)

[marcoambrosini]

Because it's using the folder where the user put the notes, we can't forbid the user to create subfolders :)

We can't forbid it but we sure can ignore them in the notes app! Maybe I didn't do the best editing on my previous post. The reasoning behind what I'm saying is towards the end of it. Only advanced users will modify the folder structure and edit these files with something other than the web and mobile notes apps. So since they're advanced we can ask them to comply with a couple of simple rules if they want their changes to be displayed in the notes app.

[korelstar]

• Removal of the ... ?

Yes, let's do it. This is better! 👍

• Do like mail and merge levels over 2 into direct entries like second 1/third 2/etc/etc ?

I'm not sure if I understand this correctly, but we are already merging levels greater than 2 (see screenshots: Receipts/Lunch/Soups is not handled as Receipts -> Lunch -> Soups but as Receipts -> Lunch / Soups).

---

I just don't get why we should feel the responsibility to display in the notes app a text file that is very deeply nested in the filesystem.

Because we are nice guys 😄
Anyway, I think introducing an artificial limit of nesting would be very hard to understand by users ("why is it two levels and not three?" / "why is it three levels and not four?").
And honestly, I still can't see the problem, here. People who aren't using categories have no issue. People who are using only first-level categories (this will be most of the users) have no issue. Only people who use sub-categories will see this "confusing thing". But those are advanced users who will be thankful that they can organize their notes in a more flexible way.

---

Here is an update of the situation with some more realistic notes:

[handkerchief333]

It is a mystery to me why it should be completely sufficient to make the app really navigable in the UI with only 2 nested folders. For me, the app is unfortunately not really usable. I have to switch to Joplin, which offers the perfect UI several levels deep. That is a pity. For shopping list, todos, etc. completely sufficient, I agree with you. But I use md-files as a kind of wiki and knowledge base for my business. And there are many different categories that can not be limited to 2 levels, otherwise it is too confusing. Other wiki solutions are too bulky, Nextcloud Notes would be sufficient, only the display from the 2nd level is too confusing for me with my large number of folders and subfolders. That's just my opinion on the subject. Nevertheless, thank you for your work. I know it's not easy to do justice to everyone, it's even impossible.

[jancborchardt]

@handkerchief333 if the indentation is really the only issue, then we could also indent it for deeper levels. A lot of things changed since the issue was opened, the nav width is adjustable etc.

How many levels do you use?

And @korelstar what do you think?

[handkerchief333]

@jancborchardt Thank you very much for your message. Yes, it's indeed the only issue. I have checked it, I use maximum 4 levels. But depending on the need, it could probably be 5, but no more than that. That would be really great, then I could do without joplin and use nextcloud notes directly instead of doing the same thing in a roundabout way.

[handkerchief333]

@jancborchardt Are there any news? It would be a pity that nothing works now because someone has not answered for a long time, possibly months. If I can be of any help, please let me know. And thanks again for your fast and optimistic answer.