The design put the menu bar on the left, which I think makes sense, as it’s consistent with the main screen UI. And I expect this bar will be the same colour as the main screen sidebar.
For checkboxes Serj used a toggle button, which actually makes it easier to align all the labels on the left (a checkbox with a label on the left looks strange) so I might go with it.
Otherwise the screens are relatively similar but tidier. If you have any suggestion on what could be changed, feel free to let me know.
Looks nice, really like the approach of keeping the nav on the left and using the main theme color palette.
Couple of thoughts on the UX side:
Might want to have subsection titles (i.e. whenever there is a grey line). This makes it easier to scan and find the setting you want. So in the example, the middle section would be titled “Nextcloud”
Toggles are good, but from a UX persepective I’ve noticed people tend to assume these mean “apply changes immediately”. You will then likely want a warning state if they try to navigate to another settings screen with unsaved changes. I’ve noticed this is an issue in the current app where I didn’t notice the “back” button has turned into a “cancel” button and accidentally cleared out all my changes. I also see in this mockup that there is a back and a cancel, seems like those would not appear at the same time?
I’ve had issues with right aligned labels, especially when you think about responsive design. Will the label and content stay in two columns or collapse into a single column? What happens if the label is long and needs to wrap to multiple lines?
It seems like the “!” mark would be easier to build and look nicer if it is aligned under the text box instead of aligned with the label.
There is an inconsistent placement of error messages. Are they always above? below?
So excited to see all these new designs coming together! Going to be a huge improvement.
Might want to have subsection titles (i.e. whenever there is a grey line). This makes it easier to scan and find the setting you want. So in the example, the middle section would be titled “Nextcloud”
Internally, there's not really any sub-sections, so I might actually remove the lines that Serj added. Maybe we'll have sub-sections at some point but for now I feel there aren't enough settings to justify it.
Toggles are good, but from a UX persepective I’ve noticed people tend to assume these mean “apply changes immediately”. You will then likely want a warning state if they try to navigate to another settings screen with unsaved changes.
Hmm, good point. Maybe it's a matter of auto-saving the settings whenever they are changed then. For most of them it would work just fine (that's how it used to work actually), but others like sync settings needs to be saved in a group. I'll see if there's some easy way to get that working.
I’ve had issues with right aligned labels, especially when you think about responsive design. Will the label and content stay in two columns or collapse into a single column? What happens if the label is long and needs to wrap to multiple lines?
Not sure but I expect I'll set a max width on the label and allow it to wrap beyond that? Hmm, I've just checked several other apps and I see none of them have left aligned labels like this, probably for a good reason. Maybe that's not the best way then, any suggestion on what could work well for Joplin's settings?
A suggestion: the “Markdown Only” and “Compatible with WYSIWYG” columns make me think very hard about how they relate. It would be easier to understand if the latter were named “Markdown & WYSIWYG”
Knowing how Joplin works I just knew what this meant but a newcomer may see this as exclusive to each editor type rather than the latter being common to both.
Cool, I prefer having settings save immediately when possible. Works nicely with a temp message that appears saying "setting saved" just for clarity.
When it is a set of things that needs to be saved together, I've seen the main page show a view only version of the current settings and then the user taps "edit" to either 1) go to a specific page to edit those settings 2) the view only section swaps out for an editable version with the save / cancel right by those settings you are working on. Example of version 2:
I prefer just keeping them left aligned, but still in two columns (like the example above) Then in smaller windows, collapsing so that the label is on top of the setting in one column. I.e.:
