Hello everybody. I’m new to the forum and Joplin, but would like to add some contribution. It looks like Laurent was looking to improve the design of the desktop app, so not sure if my efforts are wasted. Here it goes:
Left is current app, right is what I’m working on.
They’re all minimal changes in the css, mostly colors and font sizes.
What’s changed:
Smaller icons in header and sidebar to match font size.
Smaller font size for headers in sidebar.
Sidebar headers are a very light grey instead of white: almost unnoticeable, but improves readability.
Lighter grey (and slightly blueish) background color for selected note.
Removed gaps between the note list and editor and sidebar. (note: this is done by using negative left and right margins on the notes list panel, so it’s just css).
Synchronise icon remains while synchronizing with animated rotation (I’ll post a gif in a reply, I can only post one image).
Synchronize log goes above sync button. This prevents the button from moving, so makes the UI more consistent.
Toggle icon has animated rotation (I’ll post a gif in a reply, I can only post one image per post)
As a contribution, I thought it’d be better to do smaller UI improvements rather than take on a big redesign, but not sure if this would be ok or if Laurent is already working on something else. Could you please let me know if it’d be ok to create pull requests for these changes?
I had some other ideas, but this is my first time trying to collaborate in an opensource project, so I don’t want to be disruptive (I’ve been coding for a few years though). You guys are doing a great job.
Hi and welcome on board
I like the idea of displaying the status of the sync above the button instead of below, as we always scroll down to see the final results of that.
Otherwise, as I loose my sigth with the age I prefer bigger font size. On the other hand, once the brain is used to perceiving the place of the buttons, we don't think of them at all, I imagine.
I prefer the clearly distinctive differences in font sizes as well as in colours. They make it very obvious that there is a difference between the entry types.
Showing the sync status above the sync button is only useful if one just has a few notes as in the screenshot. However, it’s rather troublesome when the list becomes larger!
This wheel is round enough; no need to re-invent it just for the sake of an exercise!
This is an important thing though. If done correctly, the UI just disappears, at least in an app like Joplin where the focus of users is on the notes way more than on the tool bars, which is the base as to why I think icons and headers could be slightly smaller.
Personally, I'd be happy if at least the notes list gap and icon size (matching it with font size) can get into the code. Fonts and colors is probably always going to be controversial, because it has a lot to do with personal preference, therefore each user will have an opinion (also why having a theme engine would be awesome, but that's a subject for a different discussion).
Most of these changes look good to me, and small but well thought out design improvements like these are always welcome.
I only have a doubt about the removed white space next to the note list because that’s where the element to resize the column is, but if it’s just css change it might be fine.
Also I’d prefer to keep the selected note a bit darker, or maybe use some other styling like bold or a border, so that it stands out more.
But feel free to create the PR as it is, so that the changes can be more easily reviewed.
Another (what I believe would be a small change) would be that when a todo is marked as done it also adds a strike-through, through the text behind it. This would help seeing faster which tasks are done.
Please do not sacrifice usability for design. Smaller icons do not improve usability. It actually requires more of the user (better eyesight and more precise mouse movement) with no gain to compensate for the added effort.
But increased contrast by making the background lighter does actually improve usability.
One good way to test a user interface is to borrow a pair of eyeglasses that are one diopter less than your prescription (or use -1 glasses if you have 20/20 vision) This will show you what about 1/2 of the population sees.
I agree. Making key elements smaller will make them harder to read. Especially these days where people use 4k screens and/or use a very high resolution.
It's awesome to see you looking into things.
I caution against using colors that don't have proper contrast and other accessibility concerns. I can barely see the lighter gray, because of it's beautiful subtly.
Question: do you unchecked done items, and check not-done items?
It might depend on country, but I've usually seen check done items, uncheck not-done items.
Anyway, I don't think the app should auto-remove content from a list. However, the editor seems to support custom styles, so this won't delete any data, but it'll show it different in the preview panel. Try adding this at the end of your note:
The workflow I had in mind is to start with a note of all unchecked items. During time, items that are used and need to be bought are checked. When shopping time comes, I have a note with a lot of checked/unchecked items, of which only the checked items (that need be be bought) are relevant. So I would want to hide (not remove!) all unchecked items.
When in the shop, each time I put an item from the list in the basket, I uncheck this item and it disappears from the view. So I only see the items that still need to be bought. When finished, the note only has unchecked items. I unhide them and the process can be repeated.
Using CSS for this is theoretically possible, except that:
It requires stopping Joplin, modifying the css, and restarting. (Laurent has turned down my proposal for a --css command line option which could make this a bit easier.)
CSS is only supported on the desktop, not on mobile (and it is the mobile that goes shopping with me, not the desktop).
I assume if you think about it, you’ll find more uses for hiding/unhiding checked/unchecked list items.
