Here’s a quick preview of a new take on the mobile UI for Joplin. The attempt was to keep feature-parity for the most part, but try and modernize the UI and also bring it closer to the new desktop UI that was teased a couple months ago.
We have two options with different approaches to how the notebooks list, notes list and note are structured. They’re mostly representative at the moment - not a lot of depth in terms of interactions and functionality.
What do you guys think?
I prefer Option 1. Option 2, while it has slick and fun animated overlaying for switching views, using screen space for static content besides the hamburger menu is a huge waste of very precious space.
Option 1 Constructive Criticism:
While I like the expanding animations, I wonder if the SDKs make these transitions available or the developers would have to code these from scratch.
Prefer Option 1. Good work
Option 1.
Option 1
Thanks for the UI mockups @abogawat, they look pretty good. I like how you made the notes overlap the header in Option 1. However I’m wondering how would it look when it scrolls? It feels like the notes would scroll over the header, which wouldn’t be right, or do you have any idea in mind?
@laurent That's a good point. My assumption was that we shrink the header on scroll, but need to mock that up to make it clearer.
Option 1
Option 2, without a question. The increased real estate in the menu would be a huge improvement in landscape mode, which on my device is currently restricted to a mere 3 lines of text. This makes scrolling through the notebook and tags list very difficult. In addition to only seeing 3 lines, the area to perform the swipe action in is simply too tiny. When a sync or decrypt operation is in progress this ‘window’ gets reduced to just 2 or even 1 line, and in extreme cases completely vanishes. I can only get this space back by performing another sync straight after as this clears the results of the previous operation. A genuine UX issue stemming from a UI flaw.
I appreciate this is not the place to complain about the current UI. I merely mention it to highlight the fact that Option 1 would not remedy this problem. If a UI refresh is indeed on the cards, now is a good time to take alternative modes into consideration too. Not all users are portrait users, whether they use a niche device like my Planet Computers Gemini and Cosmo, or an ordinary phone in landscape mode + Bluetooth keyboard (like I used to do before getting the Gemini). I come from a Psion 5/5MX background, and using portrait mode does not come natural to me for certain tasks.
Option 1 is little more than a visual refresh of the current design, with TAGS, CONFIGURATION, and SYNCHRONIZE taking up far too much room. I’d much rather have that extra space available for the notebook and/or tags list, even in portrait mode.
To be completely honest though, I prefer the design ideas proposed by @giteshsharma . I’ve posted screenshots of my landscape UI issues in his thread, but I can repost them here if desired.
Also, why not add New Notebook to the + button?
Wow, really like the design. Like others, I prefer option 1. But… both are really nice !
@laurent Here's a quick demo of how the scrolling might work.
Option 1 is so f*cking good!
Here's v2 of the Option 1 design with some tweaks to the sidebar and the config screen added.
I can't seem to figure out a way to edit the main post to add this, so posting it here. Can someone help with that? Thanks!
This is so so good! I could love to see this ui in Joplin! (Option 1)
I prefer dark mode on pretty much everything now. so i would prefer option 2 to be considered for further iteration. There are few situations where i prefer light mode, for example, when i need to read a cooking recipe perhaps.
edit: besides color preference. i think the overall look and feel of options 1 looks more complete. maybe implement a power-user gesture on the new note button, when double tapping it creates a new note and slide out for the note list when single tapping. (or reverse, single tap for a new note, double tap for a note list, without having to deal with a slide out animation at all)
@abogawat are you still working on this project?
Wow, that's an impressive layout. Choice 1 is the best, in my opinion. The thing is, though, they're both quite attractive.
