Home / GitHub Page

Improved UI for Joplin

Hey everyone,
I would like to know your reviews on the Joplin’s UI that I created. This is just basic illustration of my Idea

Red color border toolbar has useful buttons but I want to remove the bar and rearrange buttons
Blue color border bar I want to rearrange the alignment and places of these bars

Changes/Improvements

  1. ToolTip
    LAYOUT1 - Copy

  2. Multiple Tabs

  3. Split Screen

  4. Modified Sidebar
    new sidebar

  5. Modified Toolbar
    icon bar

Final Layout

With many shortcut keys it will be very easy to switching, navigating and using the app
I would love to hear reviews and suggestions.

6 Likes

Hi @giteshsharma,

These are interesting ideas. It’s hard to judge, an image of a UI is not a UX. Therefore just a few general remarks and questions from my side.

  1. Not only the UI is different, but seemingly also the data structure. Can a note have subnotes, and can a subnote have subsubnotes, like ‘pages’ in OneNote? How deep can you go?
  2. I like the idea of moving the horizontal button bars to vertical ones. But should they all go to the left side? It could be more practical and/or intuitive to have the navigational and viewing functions left, and the editing functions right.
  3. The sidebar and note list share the same column; you can toggle which one is visible. It can be practical in some circumstances, but I don’t want to give up the option to see them both together, as in the current interface.
  4. What would the AllNotebooks view look like? Would expansion of a (sub * n)notebook also show the notes on that level? For me that would be too much, but some people like it. (An interesting question about the organization of a notebook collection: should you allow yourself to store any notes in a notebook that also contain subnotebooks?)
  5. Is every tab a dual-pane frame (editor / viewer / editor+viewer / wysiwyg)?

Actually it would be nice to play with a mock-up of alternative designs.

1 Like

Hey @memophen,
Thanks for sharing your opinion bruh

Yeah bro I agree with you, even there will be lot of changes in UI and UX on final version.
I can’t judge the UX until demo will be live, I think you will agree on this too. For a good UI and UX, I have to create other illustration as you said in the last line.

I think on this one only end user will able to give advice/opinion about which is more better option according to him

Although this is my opinion

  1. UX will help - This will increase user’s workflow
  • Tooltips will be useful at this time, tooltips will show shortcuts of buttons(when user hover them), this will help user to remember the shortcuts and increase their workflow.
  • Everytime any option is active, I will change their style (Example: blue background/border)
  1. I was thinking about editing buttons to the right side of sidebar, so they will be more easy to reach.

  2. Sidebar at right side of the screen will break the user’s flow (I think so)

Hmm, ohk, may be others want that too. So I will create a way to view both as well

In split view size of the screen will decrease, so it will be good for (editor / viewer / wysiwyg) but not for (editor+viewer)
If you have an Idea for this situation then plz share it, I would love to know.

Yeah I think so, in Joplin I can currently do that right? If not then please give an example to explain more what you were asking.

Just like Joplin’s default Notebooks sidebar

One more thing to mention that I checked your post Cleaner design of the sidebar? and I go for last design with lines, it is more better otherwise user get confuse sometime and have to check which subnote he is on.A little opinion, If lines will be more light/lessvisible then will be great. I voted for it I option on it.

I would say: simply support all combinations that are available now, and leave it to the user to choose which display he prefers in which circumstances. I can imagine I have a Split Screen #1 open for just reading (⇒ viewer pane) a note, and Split Screen #2 for editing (⇒ editor + viewer pane) another note. Maybe another nice feature would be a control to minimize/restore/maximize each individual Split Screen component.

Notes cannot be nested in the current version, AFAIK. But I can tell something about the Page object in OneNote. A OneNote Page is more or less the logical equivalent of a Note in Joplin. It is possible to organize pages as Main Page, SubPage or Subsubpage. I drew them as a Page specialization in the UML class diagram below, but that may be slightly incorrect. In fact these ‘specializations’ are just roles that a page can play in its relations with other pages within a Section, and you can easily change these roles by promoting, downgrading or moving a page to another position in the section list of pages. A page hierarchy has a maximum of three levels.

1 Like

There’s been a lot of discussion about staying close to Joplin’s core functionality and structure, so I won’t get into that.

Moving the top bar to the left is definitely a very interesting idea. My concern is that the formatting icons don’t really fit there. Contextually, they belong inside the editor. Even more in a split screen scenario like this one, since you might be editing text in any one of those sections. I would keep the toolbar inside each one.

That said, I’m not sure how or when I would use the split screens. They make sense in a code editor where you might be working on multiple documents in a single context. For a note-taking app, it feels overkill.

Finally, I believe you mean notebooks and sub-notebooks in the sidebar, not documents and sub-documents.

2 Likes