Notes List/Grid - Layout and Spacing

[CurbedLarry]

Unfortunately the various elements of a note are not consistently spaced, with different gaps between title, reminder, date and content:

May I humbly suggest a redesign for list view mode:

For grid mode, something cleaner without date:

[Crustack]

Hi, I am personally also not satisfied with the spacings, so I am happy to receive proposals for redesigns.
But when talking about that we have to also take a look at the "worst" scenario, meaning: Date shown, Reminders, attached files, attached images, long tite and body:

Questions you have to ask:

• What happens if the Reminder does not fit to the right of the title? -> Move Reminder Chip below the title? Make the title multiline to keep enough space to the right of it for the reminderchip? Or wrap the title's text to one line like in the screenshot but keeping enough space for the reminderchip? Or compress the reminder chip to a mere Icon (as you proposed in the grid view)?
• I dont think everyone will be happy if you suddenly cant show the date in Grid mode at all, so the date should be displayed the same way as in list mode

[Iucky-Iuke]

Good suggestions. Reminders, dates, labels don't belong between title and content.

Reminder to top right in note is good.

Dates and labels can go to bottom. See how FairNote does it. FairNote has clean design for showing detailed information.

Reminder detail in grid is still useful. Especially in Reminders view which I think uses same as general. I don't like created, modified dates in grid so I have disabled. Unfortunately I lose it also in note but it's not possible to have only in note with my format. Anyway I think reminder is something special to see without going into note.

[Iucky-Iuke]

ColorNotes has reminder on top right in note:

Uses different icons in grid:

I prefer FairNote's design to have details in note at bottom. Title and content is key. Everything else is detail so don't want interrupting.

[CurbedLarry]

@Crustack Agree that was far from a fully fleshed out spec! Have spent more time on it to come up with version 2 below.

Users will have to compromise a little in grid view so I suggest reverting to short time since/until: 3m, 5h, 7d

Trying to keep it simple in terms of how it works dynamically:

• Optional elements shift the following items down
• Title and content can be expanded/limited vertically as per the user settings

Grid view:

List view:

[CurbedLarry]

Here's another variant of grid view that might work better:

[ramwipe]

#918 (comment) looks best so far initially but when using will feel too compact. #918 (comment) will be better long term shows information but not in your face.

[Crustack]

@CurbedLarry thanks for your effort 🙂
For List View I think this looks quite good:

One thing I completely forgot about in my screenshot was of course also labels which are currently displayed as chips below the note's content.

For GridView:
In general having shorter "summary" Icons is not a bad idea, but it feels a bit crowded having all those 3 icons in the same spot.

I kinda liked the idea of having the date very small below the note, and maybe having the labels to the left of it.

With that, we would only have the reminder and attached files icons remaining, which I think we should put next to each other rather than on top of each other.
Or at least if people still want to have the long date for the reminder, we have to put it below the title to have enough horizontal space.
Also if we simply use the file icon + number of attached files instead of showing file names, it should fit neatly to the right of the Reminder Chip.

But in the end we will always have to try out some design and see how it feels, and I am 100% sure that not every user will be completely satisfied with it, no matter how well we think it through

[missingphoto]

It starts to look very cramped at the top. If it was just the reminder bell maybe and the draft is not even showing labels. I have notes with multiple labels. I have them hidden because they take up too much space. Pushing these things as footnotes looks neat in @Iucky-Iuke 's first screenshot.

[barrakawins]

Footnote style is good for metadata and statistics. I imagine future requests and more dynamic display. For example in Excel we have the status bar where the user chooses which information is displayed. For example with NotallyX we can add to lists count of checked and unchecked items (like Excel status bar shows with filter). This is typical with activity tracker apps. It is just one example. As footnote there is more future flexibility.

[greenarro]

I only use Grid View.

I don't want anything between Title and Content. Summary icons should be small and at the bottom.

[Iucky-Iuke]

Do not make grid like list. ColorNote has more templates. Better to add new template than change dramatically.