New Simple Joplin's UI and UX by giteshsharma

An impressive list of objections, but unfortunately it lacks a breakdown-list of feasable options according to the many app-screen-resolutions. (As he remarked on his 4K 1980 screen.)

No, just kidding.

I am not quite quite in line with DShirk.
With Joplin we have a very capable (up to minii-problem-sized) note-taking tool. It is then up to us (users) to find those feasable .css-solutions to those bugging milli-micro-nano-problems. And, are they that bugging ?

Without studying these in too much detail (quick first impression, that is), they look and feel very good to me. It definitely feels more polished and modern. I do notice one inconsistency. You have established a pattern with + New Notebook at the bottom under a horizontal rule and + New Note and + To Do at the bottom of Meetings under a horizontal rule. When you get to tags, however, you seem to switch the pattern and still have the big add button (plus sign) by the header, “Tags”. I’m just thinking of the classic usability law: “things the behave the same should look the same.”

Nice job for starters! Again, this is just a quick first-impression opinion. Mostly pertaining to “feel”. I did not study it and think hard.

1 Like

They look absolutely awesome! Make sure to provide a dark mode too though. Separate solarized light and dark modes would be highly desirable too.

1 Like

The new Aritim Dark theme with this would look gorgeous. If you need any help implementing this, do let me know. I’m always happy to help!

1 Like

Was my thoughts directly as well. :slight_smile: Already started to draw how I could get the theme to work if this design is implemented. :slight_smile:

2 Likes

First of all thanks everyone for appreciation and praising

I tried to include all the things that I previously missed and thanks everyone again for pointing out these things.

UPDATE 1

Few Small Features Ideas and Updates
fullscreen
layout

Hide Sidebars

This feature will perfectly work as sidebars are hidden but icon bars have less opacity,
whenever user move cursor on the right side of the screen icons will be more visible.

Properties

Instead of using two different button, we can show properties by single button


Search

@bedwardly-down I tried to improve the search bar and searching, I think you were suggesting the same thing, Isn't it?

I tried to improve this in new mockup, check them out


Updates for previous layouts

  1. Adding back/forward button
  1. Adding Tags

3. Managed Icons

Damn correct, I think these new layout will solve this problem and I also added classic Joplin design in mockup.

I had the same thoughts and tried both things (lines and different bg), but finally moves some buttons at bottom as you can see in the layouts and horizontal lines for buttons which have same functionalities.

Although I tried lots of other things and put them in google drive and you can view them by visiting the link at bottom of this post. And If you have other suggestions then please add as your suggestions are good

Brief is title and it will stay top of the screen

4. Plus sign in header to add new notebook/ new notes

Done






Classic Joplin Layout



I tried few more changes in classic joplin layout




Different Layout

I create another layout but does goes forward with it, what are your thoughts about this one.
In this layout I put tags below title.


EDITOR+VIEWER

I think markdowns are not that great in this mockup and will them for sure



Other Layouts

I tried lots of other things in icon-bar like diff bg color, border etc and these things are not included in this post. I choose the best one for the post but still If you can check them out and give feedback it will be really helpful. I uploaded them on google drive
Link
https://drive.google.com/open?id=1SN87Y5Lo6rmwYMdTI7PSzy_SFUWCuj8b

TODO Feature

This feature is not included right now in the above layouts because we wants global todo list and local todo list both. And I am note sure how to implement this.

I am thinking of creating a todo box in notes-list just like I created for tags in notebooks-list. And dividing global and local todos there

If you have any Idea please share.

Yeah It will be great if we add such an option for user

You are right, we will add an option to switch editor/viewer's position to left and right and this will solve this problem.

11 Likes

Sure I will, Thanks bro :slight_smile:

1 Like

Great new mockups. The only thing I do not like is that visited notes are shown differently in the list than unvisited notes. When is this reset? After every restart? As soon as you have created a note is it visited. This makes no sense to me.
There should be no distinction - or at least an option to turn this off. This would be a very annoying feature.

2 Likes

Visited notes in notes-list of search results are of diff color, so people can track which tabs they have checked and which are left.
And I think everytime they restart the app it will restart. Or we can restart it everytime user search something new

1 Like

Ah, ok. This makes more sense. Only a difference (visited/unvisited) for the search result list. It still would have to be defined when that is reset.

2 Likes

What do you think of scrapping the toolbar and just make it inline, like show the toolbar on selecting text, similar to the one in medium

5 Likes

The disadvantage of this kind of toolbar is that you need to select text to use it. While for Markdown, you might want to press a button even with nothing selected to get the format syntax, like in Discourse. For new user who don’t know the Markdown syntax it’s also a good way to learn.

2 Likes

Yaa I also agree keeping the toolbar as it is but we can still add toolbars in context menu without selecting text like Typora uses and it has other useful insert options also.

1 Like

To be honest, it’s not needed. We don’t have to repeat any functionality. Users have a habit of using Joplin with a toolbar and just adding too much in context menu is not a great UX. You can see that in some great and stable note taking apps like Bear, Notes(Mac), etc. Keeping the idea of functionality simple and usable is more of a focus here.

1 Like

I have one question regarding this,
How we will choose which design to implement from all the mockups?
Voting?

And @everyone Please share your opinions and Ideas about this and what else can be better.

For UI tree control(s), I would prefer use of filled triangle glyphs instead of the “>” and “V” used in your currently-proposed design. IMHO, filled triangles both look better and entail less cognitive dissonance.

1 Like

@chgraham, I don’t care so much about the exact geometry of the arrow glyphs. My main concern is that they don’t distract too much from the indention levels of the items. See this discussion.

@giteshsharma, The choices are a bit overwhelming. While digesting them, maybe you could tell me what those “CUSTOMER” and “NEW” buttons/boxes are, and where the note’s tags would be placed? Or are “CUSTOMER” and “NEW” those tags? BTW, double-clicking on a note’s tag and getting an appropriate context menu popped up would be nice.

Amen.

Toolbars waste space, and context menus are unwieldy. They’re helpful getting started, but
after you’re familiar, they’re just getting in the way.

I’m speaking as someone who uses the mouse as little as possible because of RSI: Why would you want to grab your mouse and highlight a word, move the mouse pointer over to click “B”, move the mouse pointer back to where you were, and then go back to the keyboard, when you could just do ctrl+b, type, ctrl+b again, and continue typing? Just preference here.

But layout wise, I’m really digging the looks presented here…

1 Like

If somehow we can place tags and previous/forward buttons somewhere else we can make more simple layouts just like previous layouts. If you have Idea regarding this then we can make design little simple.

Yes these are tags
And can you illustrate that popped up menu and what will be inside it?
Although I think that double clicking a tag should do the same action as clicking tag from tags-box

It would be also nice to have dashboard design.