Design of date captions in navigation

[marcoambrosini]

I find the captions with the dates in the notes list quite distracting. Could they be removed?

To me in screenshot number 2 the consistent rhythm makes things more readable

We could also go for a 2 lines tall navigation element similar to talk, contacts and mail

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[korelstar]

Hmm. That's part of the cooperate design of the notes app (it's also in the Android app, see nextcloud/notes-android#539 and #313). I like those section headers very much since they help me with keeping track of the list of notes: They split the (sometimes very long) list of notes into smaller sections which are easier to grasp than a long list without sections. In addition, I can see if a shared note was edited today (or yesterday). Furthermore, it is a non-distracting way to show that the list is sorted by date (and not alphabetical and not non-deterministically).

In summary, I see many advantages for these date-based sections. But I'm open for a discussion about this. Maybe @jancborchardt can also participate.

[jancborchardt]

Yeah, we're for sure not removing them as they are very useful for having a sense of time with your notes.

We could also go for a 2 lines tall navigation element similar to talk, contacts and mail

Yep, this would be a way to go.

[korelstar]

We could also go for a 2 lines tall navigation element similar to talk, contacts and mail

Yep, this would be a way to go.

I already planned to do a proof of concept for the three-column layout (1. categories using AppNavgiation, 2. notes using AppContentList, 3. editor; see #364 (comment) and #413 (comment)). However, I still assume that the list of notes will keep the date-based sections. But let's see, how this will look ...

[jancborchardt]

@korelstar the "2 lines tall navigation element" doesn’t mean 3-column layout, but:
The whitespace above the date divider should not be a half row, but a full row. That way the vertical rhythm of the text is kept.

Talk doesn’t have a 3-column-layout so I assume this is what @ma12-co also meant. :)

[marcoambrosini]

They split the (sometimes very long) list of notes into smaller sections which are easier to grasp than a long list without sections

I don't think that splitting into subsections is beneficial at all. Captions are almost as prominent as note titles and they clearly become a UX obstacle. There's no real need to separate a list of notes by date. We don't do that in talk conversations, emails, etc.

In addition, I can see if a shared note was edited today

If the note goes up in the list, you see it anyway. No captions needed :)
(also see last point)

Furthermore, it is a non-distracting way to show that the list is sorted by date

No need to show this that prominently, like conversations in messengers, people assume that the notes are sorted by last edited as well.

We could also go for a 2 lines tall navigation element similar to talk, contacts and mail

I should have specified more here: I meant this to show the date within the note item. Like many other notes apps do. (See the dates in the comments you linked @korelstar)

Edit: also see nc mail's envelope component for reference:

[marcoambrosini]

@korelstar the "2 lines tall navigation element" doesn’t mean 3-column layout

Yes that's another discussion but still I'd be very happy to see that happening :)

[marcoambrosini]

Also, @jancborchardt I think that your title rename is a bit misleading as this is very much a discussion about removing the captions. And I think it's one worth having

[jancborchardt]

I don’t quite understand – you first open an issue about removing the date captions, and then one of the proposals is to move to a design where every note has a date subline? That makes the dates even more present. And if we move to that design, what even put into the icon?

Captions are almost as prominent as note titles and they clearly become a UX obstacle.

Which is why the design spec for this was to make them not bold (unlike now) and var(--color-text-maxcontrast). Then it’s less prominent than the note titles always.

[marcoambrosini]

As said, the reference to the 2 lines element in the opening post was there to imply the fact that we could move the date there. I have a problem with the current captions and how they create a distracting/not-needed hierarchy in the notes list, not with the dates themselves.

Then it’s less prominent than the note titles always.

It's not only about the text styling, it's also rythm that's created with the spacing. I use this app a lot and I can guarantee you that those are obstacles when you're quickly scanning the list to find what you're looking for.

The icon is a different story. Even the current one line navigation item foresees an icon that is omitted in the case of notes and it's replaced with a white space. I agree with omitting the icon but probably but imo we should remove the white space and make the element span all the navigation width

[stefan-niedermann]

Actually it's not an obstacle for me but it enables me to quickly scan the list in the first place. I have something to "hold on", otherwise i would get lost in a list which looks exactly the same, no regard where i am scrolling... For me it's really helpful, so 👎. Maybe a matter of taste 🤷‍♂️

[marcoambrosini]

I really don't understand how the discussion is taking this direction. I know I didn't make my case super clear from the beginning but it's so obvious to me that the flow is interrupted with those huge white-spaces.

otherwise i would get lost in a list which looks exactly the same

@stefan-niedermann you have that same "list which looks exactly the same" in all your messaging and mailing apps. How come we don't feel the need to employ date captions there, where they'd be arguably more relevant than in a notetaking app?

Also, let's check out the competition to have a broader idea here of what a list of notes could potentially be (notice that nobody here brakes the list with a caption):

• Apple

• Evernote

• Bear

• Simplenote

Given it seems that we're going with the 2 lines navigation element, it makes even less sense to break the list in my opinion, as we have space to put the date in different areas of the element (bottom-left, top-right, bottom-right).

[stefan-niedermann]

How come we don't feel the need to employ date captions there, where they'd be arguably more relevant than in a notetaking app?

Good question, i guess because i can better orientate on user avatars, while notes are pretty much text 🤔

[stefan-niedermann]

Nice research by the way, thank you!

Most of them display the date/time directly on each note.

The benefit of our current way is that we don't need to put the exact date / time to each note (which might be distracting) but we still have an idea about when a note was edited thanks to the separators.

Going further into the past, it doesn't matter if a note has been taken on 12:00 or 13:00 o'clock if it's 3 years ago.

The sections allow us to give more exact timeslots for recently used notes but to hide this grade of detailled information for old notes.

I really don't understand how the discussion is taking this direction.

Well 😄 sorry for having a different opinion. You asked, i answered. And we actually did think about this and the reasons mentioned above made us to go this direction in the past. Maybe i just got used to it, but i think the way is reasonable and (personally) i like it.

But decisions from the past are not always perfect for the future, that's why we are discussing here 😉

[jancborchardt]

@ma12-co I'm not strictly against it. Just needs to be weighed with other stuff. In the case of the Notes Android app the date dividers work very well for getting a direct feeling for the not relevance.

Notice in your examples that images are possible and feature very prominently in these apps. They do help identify and separate, and are not possible in Notes right now.

---

I'd recommend we set this on ice for a bit to let everyone digest it and to not get got worked up over such a minute detail.
There's plenty of other things to work on here like category display and the sidebar. And e.g. as said, possibility to support images like the other examples.