RFC: Design and UX ideas

[zadam]

Hi all,

First beta of 0.46 is nearing, and I'm starting to think about 0.47. One of the focus areas will be the look and feel of the app which is currently ... let's say less than ideal.

What I'd like to do:

• make the UI more visually attractive - nicer, sprinkle in some colors. This would mean a new default theme, probably with light and dark variants. Current theme could be preserved as "classic theme".
• make the app easier to use with the leverage of visual cues. Current theme is visually quite minimalistic, e.g. many widgets are not visually separated which might make the app more difficult to understand.
• create sort of visual language for common elements like primary buttons, help buttons etc.
• add new theme extension points (CSS variables) leveraging the more consistent visual language mentioned above. Currently theming is little more than a different color scheme and one must (ab)use unstable CSS classes to change the look more significantly. Of course the theming "API" will never be complete but we can do better than now.
• change app icon - current icon is too complex. Simpler design with some colors would look better. Decent inspiration can be found on google. Flower/leaf/plant based motif should remain ...

As part of this there might be some smaller functional/layout UI changes, but larger UI reorganization should remain out of scope.

Now all this is pretty difficult task for me - I'm not a designer and my abilities in this area are very limited so I thought I might ask here for input. Things I'm interested in:

• specific ideas - e.g. what you think might look better or might be easier to visually identify
• inspiration links and screenshots - do you particularly like some app and its design? Post here a screenshot and ideally comment on why you think it looks/works well. A cool example is e.g. Allure:

• are there perhaps designers working with open source projects. Some (limited) monetary compensation might be possible. (applies also for icon design)
• to people developing their own themes - what extension points would you like to be added into CSS variables?

[nil0x42]

Hi ! Trilium is an awesome tool but people decide to start testing a note taking app based on what they see.

I like the idea of removing the horizontal pane below tabs like in the screenshot :)

Being able to hide the left pane's actions menu is also something i would add as an option (keep it for newcommers, but after 1 week using trilium shortcuts are easily memorized, so this pane becomes distracting:

Another suggestion i have, is to have a clear distinction of current note in link map section. Current styling difference is not obvious enough.

[zadam]

Being able to hide the left pane's actions menu is also something i would add as an option (keep it for newcommers, but after 1 week using trilium shortcuts are easily memorized, so this pane becomes distracting:

This is already removed in master (0.46). Thanks for the other points!

[ghost]

I would love to see a new and refreshing skin for this app :) I'm currently using the Allure theme... I would be awesome to see this theme as the new "default" one!

Keep up the good work :)

[thefirebird00]

I would love to see the Allure theme as the new default :smiley: I use it myself and besides all the small bugs - it is super awesome.

Keep up the good work! :partying_face:

[davialexandre]

Hello! First of all, I wanted to say that I've been using Trilium daily for a few weeks and I love it! Thank you for this awesome application!

In terms of UX and Design, I'm a big fan of minimalist interfaces, so many of my suggestions are about hiding stuff. I'm also a big fan of the Notion interface, so some of the suggestions are inspired by it. Here they are:

• Make it possible to disable or hide the tabs. I use the web version and never used tabs, as I prefer to simply open a new tab/window on my browser
• Move the note paths widget from the sidebar to the top of the center pane (where applications usually place their breadcrumb component). This would make it possible so see the full to notes inside deep branches
• Remove the "buttons" bar (not sure what is the correct name for this). Maybe move the most useful ones (like search and new note) to the top right site, like the Allure theme does):
• Hide root from the tree view (I don't think it's possible to have more than one root, is it?)
• Add more white space between elements, to improve readability. For example, I have a custom css that:
  • Adds some left/right padding to the sidebar
  • Adds a lot of left and right padding to the note details container
  • Increases the default line-height of paragraphs and list items
• Differentiate the sidebar from the content:
  • Use a different background color for each (usually sidebars are darker than the content)
  • Use a smaller font-size for the elements in tree (right now the size is the same as the note content)
• Increase the font-size and font-weight of the title of the currently open note to make it really stand-out
• Make attributes first-class citizens. Basically, make something like this:

To look more like this (screenshot taken from Notion):

• Display the note icon next to the title of the currently open note (like Notion does):

• Make it easier to change the note icon. Perhaps by making the displaying a list of all the available icons when clicking on the icon (also like Notion does):

[egalanos]

This is quite a big topic! Some basic suggestions based on using the 0.45.10 desktop release below.

Are you going to experiment on master or plan on a new branch? It can be a bit difficult to know without being able to easily see and experiment as changes are made.

Top level

1. Menu cleanup
   • [ ] Remove word 'Menu' and downwards triangle
   • [ ] Move to the top right
     2. Lines separating sidebars and navigation section
   • [ ] Remove fading effect (It just confuses things)

Navigation section

1. 'Jump to note' removal
   • [ ] Add functionality as part of interactive search results
     2. 'Recent changes' removal
   • [ ] Add as a special dynamic note. This would be more usable than a pop-up.
     3. 'Enter protected session' cleanup
   • [ ] Change Protect icon from shield to Padlock icon as users already understand it.
   • [ ] Protected session status icon moved to top right just left of main menu icon.
   • [ ] Leave protected session icon could be then a combination of a padlock and hourglass perhaps?

Tree pane

Top action icons

1. Collapse note tree button removal
   • It doesn't seem important enough to need to be there?
     2. Scroll to active note removal?
   • It doesn't seem important enough to need to be there as you would only not see the active note if you manually collapsed a parent?
     3. Search move
        • [ ] Move to navigation section of UI. Perhaps above where note actions live

Active note branch path

1. Dropdown for note locations removal
   • [ ] This doesn't seem important enough to always be there. Information could be moved into note info section.

Tree pane

1. Root note icon cleanup
   • [ ] Remove >> as it does nothing and is confusing as it suggests show/hide like the sidebar show/hide icons
     2. Tree settings icon location
   • [ ] The options could probably be moved under the main menu options as the two things listed don't need to be frequently changed
     3. Text notes icon simplification
        • [ ] Perhaps a plain square with lines similar to the Google docs icon within Google drive would be an improvement?
     4. Tree expansion arrow improvement
        • [ ] A smaller version would look better as the current size is too prominent

Note view

1. Note name font sizing
   • [ ] Increase size to be a title size as it is currently smaller than Heading 2 size
     2. Attributes line cleanup
   • [ ] Should be made thicker for a more prominent separation between note title and rest of note
   • [ ] Hide attribute summary when there are 0 attributes
     3. Type dropdown auto hide
        • [ ] Should this be part of the info or action part of note once a note has content?
     4. Note actions dropdown
        • [ ] Rename to 'Actions'
        • [ ] Remove the word note from the actions (eg 'Note source' becomes 'Source')

Note info sidebar

1. Make it a per note button in top right to the right of actions (the Google drive information icon is a good example)

[QuentinLeCaignec]

All great suggestions, Personally I'd love for attributes to be a bit more controllable in their display :

As @davialexandre shows, attributes could be displayed in a more readable way, possibly to the right sidebar (in Note Info or maybe a separate category such as Note Attributes).

Note hover display could use some options, such a optionally showing only the note title (without the path), and optionally not display the note attributes.

The left sidebar might benefit from a tighter look (tons of notes in a lot of branches with long titles make it hard to navigate and require it to be wide) and being more readable, but I'm not sure what the best approach is here without potentially making it too cluttered or inversely too spread-out.

[oxdc]

Inspired by Allure and mochi:

It would be nice to export notes as a .zip file preserving all attributes for distributing and installing extensions or themes.

[zadam]

Hi, thanks for all the input! Although I can't react to all the comments I do read them and they provide a lot of food for thought. I've already incorporated some of that into 0.46 (currently in beta).

@oxdc 

It would be nice to export notes as a .zip file preserving all attributes for distributing and installing extensions or themes.

Export to ZIP does that. But when importing you must uncheck "safe import", otherwise some attributes are mangled for security reasons.

[thfrei]

Hi zadam. Thank you for your effort!

General Design:

As a former long time OneNote user, I try to simulate its design. I used the melon theme and adapted it, so that the content is more prominent and all non content elements go in the background, by using darker colors. Also, the tree is more dense.

Usually I disable the right sidebar, since I do not need the details. In the theme it looks like this:

Workspaces and Outlook

I find the concept of workspaces great. For me the concept of having some "folders" and notes inside is simple. And the workspaces could "simulate" this.

Personally, I am most used to OneNote and still think, that it makes navigating really clear. The colors also help to distinguish. They are auto-generated, but changeable.

[thfrei]

One addition, what I also use a lot are labels for my journal:

I think it would be more tidy, if the labels were in a more grid-like view.

These labels I use for example in a sleep-diary:

[zhaiyujin]

I like trilium very much. I often use it to write text notes. Unfortunately, code notes can be highlighted, but text notes can't. If text notes can have a navigation directory, that would be perfect for me

[shubhxms]

Theme Idea The theme titled "Gruvbox Material Dark" (in VS-Code) is very beautiful. Would look better with a black background. If we could do something similar 😁 (attaching screenshot of one of my file below)

[derbirch]

I made a moderated version of icon face to fit in bigsur according to Apple's guidline original 👇

moderated 👇

And I upload the file if anyone wants to try. Icon.icns.zip

If you still need someone to help with the new icon, I am glad to make some sketches.😊

[zadam]

@derbirch 

If you still need someone to help with the new icon, I am glad to make some sketches.:blush:

Hi, that would be appreciated.

One thing which I don't like about the current icon is that it's too "complicated", too detailed. Something simpler would be preferred. It does not have to represent Trillium flower, but I'd like to keep nature motif, e.g. just a leaf. This time I'm not against color, but can be B&W too. So any sketches are welcome :)

[derbirch]

@derbirch 

If you still need someone to help with the new icon, I am glad to make some sketches.:blush:

Hi, that would be appreciated.

One thing which I don't like about the current icon is that it's too "complicated", too detailed. Something simpler would be preferred. It does not have to represent Trillium flower, but I'd like to keep nature motif, e.g. just a leaf. This time I'm not against color, but can be B&W too. So any sketches are welcome :)

Cool, I would post it here once I have any sketches 🙃

[JadeVane]

Hi there,

I'm the author of the Allure theme, and let me tell something about that.

About several months ago, I have been using tirlium for a month and always felt that the default interface of trilium is not good and clear enough. After searching for a whole, I found that there are only a few themes that can be used at the moment, and most of the themes have a great degree of improvement, so I decidde to spend some time making a theme by myself for a better experience.

When the Allure theme is about to be completed, I have asked some questions here to get help to finalize the theme. I think somebody might like the Allure theme because it has received praise from @zadam , so I decided to publish this topic to the github project.

But in fact, I did not receive any feedback, except for a few stars, after the release of the Allure theme. (maybe some colors are not used well, or there is a part that can be improved, but there is no way to get that.) So this makes me think that maybe nobody care much about its appearance like me, so there is no need to maintain the allure project.

I still spent some time improving the allure theme according to my own ideas, but it has not been released for the time being because I have no motivation to write related instructions, maybe you can take a look at some details of the latest development of the Allure theme

Or take a look at this more radical version, named Allure-clear.

But now the reply below this discussion makes me feel that it is necessary to continue to maintain this theme, and it make me feel happy that the Allure theme has generated such a big profit.

However, as I have mentioned, if we want to design a better theme for trilium, there are too many things that need to be improved. This involves a huge amount of work and time, but anyway, I will try to make some suggestions to make Trilium better:

• fix the position of the edit button
• put the quick search box at the top of the note list so that it can fit the width of the note list, and hide and display with the note list at the same time
• add a fixed class to the widget-title of the right pane
• add a fixed class for each displayed div for example, the child element div of #root-widget, instead of just using the .component class that most divs have

Maybe there are some problems that I encountered in the process of making themes, but I haven't remembered them for the time being. I will continue to add here when I remember them again.

[davialexandre]

@JadeVane Just wanted to say I love the "more radical" version of the theme! It's exactly I have in mind and I think of something more minimalist

[blumpcus]

@JadeVane I just wanted to say that I also really like your theme and would be very happy to see it continue being developed. In fact, since @zadam mentioned that he liked it, it would be a beautiful default theme, or at least an option as one of the default themes. I'm not sure if you have any interest at all but I would love to see a night/dark version of the same theme. Thanks again for spending your time working on this theme, it's one of the most polished and mature themes that I've seen for Trilium.

[JadeVane]

@davialexandre : It's exactly I have in mind and I think of something more minimalist

Thanks for your appreciation. In fact, I removed the note tabs to make the interface more concise. I don’t know if this will cause performance problems if you open too many tabs because Allure-clear does not provide a button to close the tabs. So I cannot guarantee that this will not get error before Trilium provides a switch to disable the tabs.

@blumpcus : I would love to see a night/dark version of the same theme

Yeah, night mode may be a good suggestion, so what about this

Or maybe need to make the color of the entire interface darker? feel free to tell your feeling.

[oxdc]

Or maybe need to make the color of the entire interface darker?

It would be nice with higher contrast.

Or take a look at this more radical version, named Allure-clear.

I really hope Allure-clear could be the default theme. But the tabs are somewhat important !! The best option is to hide the tab bar by default, and show it when multiple tabs are opened.

[Mangiola]

So I cannot guarantee that this will not get error before Trilium provides a switch to disable the tabs.

Last time I tried making a theme with no tabs, there ended up being 10+ background notes open because I kept accidentally control-clicking notes in the tree without noticing. Definitely think there should be a way to disable tabs, or at least the creation of new ones.

I too really like the Allure-clear option. The complete lack of a horizontal menu at the top makes it so much easier to look at.

[blumpcus]

@JadeVane This looks stunning! I love it. I would say that it's definitely my favorite look in Trilium thus far. Thank you for such a quick reply, I'm very excited about this.

I hope that both your themes are developed (Allure & Allure-clear) as I see them both being very useful. Personally, I work a lot with tabs so I couldn't use Allure-clear without some sort of tab integration, but the main Allure theme (especially the dark one you just displayed) would be a delight.

Thanks again.

[zadam]

Hi, I'll mention again that I'm very impressed by your work @JadeVane, your designs are visually very attractive and already provide a lot of food for thought. I can see one of your designs become the default theme of Trilium, if license permits.

I have some concerns regarding usability - the designs look very minimalistic and clean, but OTOH I think there might be some usability problems regarding e.g. not easily detectable buttons (they often look as normal text) and missing borders marking different parts of UI. That's not necessarily a problem as long as we provide some alternative, more "usable" but perhaps less beautiful, theme(s).

Another thing I would mention is that I consider tab support in the built-in themes as must have since there isn't a way to disable tabs.

So far you provided several designs which have big differences in how elements are laid out, I assume you used some CSS positioning wizardry etc. to achieve such radical changes to the app layout. I believe that we should pick one such design and adjust the actual HTML layout to it so that such "hacks" are not necessary. In theory Trilium could provide several different looking layouts, but especially for the beginning let's pick one and focus on that one first.

I'm thinking also about backwards compatibility. If we redesign the layout then it will affect also other existing themes which might cause some issues for some users. This needs some thought.

In terms of work and planning - I did not actually start on this yet. I'm working currently on 0.47 which contains mostly smaller features and once that is done I'd like to start actively working on the redesign.

[JadeVane]

but OTOH I think there might be some usability problems regarding e.g. not easily detectable buttons (they often look as normal text) and missing borders marking different parts of UI.

In fact, I think the visual priority of the buttons in the current interface is high enough. This is what a button should be that you can easily find it when you need and won’t be attracted by the style of the button when you need to focus on the content.

such "hacks" are not necessary. In theory Trilium could provide several different looking layouts, but especially for the beginning let's pick one and focus on that one first.

It really took me too much time to solve some style problems by "hacks", maybe even more than half of the development time, It is indeed necessary to make some changes for this.

let's pick one and focus on that one first.

Allure-clear (Allure-night of course) is the focus of my current work, I also prefer this more "clear" version.

the tabs are somewhat important

Definitely think there should be a way to disable tabs, or at least the creation of new ones.

I work a lot with tabs so I couldn't use Allure-clear without some sort of tab integration

Another thing I would mention is that I consider tab support in the built-in themes as must have since there isn't a way to disable tabs.

I think you all misunderstood me on this point that tabs do not conflict with the "clear" of Allure-clear, as I said before, "according to my own ideas", I remove the tabs because it is not necessary for me, I streamlined everything that can be streamlined according to my own standards, so it is feasible to use tabs on Allure-clear, just learn more below

It would be nice with higher contrast.

You're right, higher contrast makes it better.

I really hope Allure-clear could be the default theme.

I can see one of your designs become the default theme of Trilium, if license permits.

My pleasure. :smile:

[chee]

@JadeVane allure-clear is looking so lovely

[zadam]

@JadeVane do you have the CSS for allure-clear and would you share it (ideally both dark and light variants)? Or are these mockups only?

[JadeVane]

@zadam Yes, css are already in use, not just mockups. Recently I was thinking about pushing the update to github, but I was so busy that I forgot to do this, so sorry about that.

But in fact, I didn’t push the update immediately because I encountered some problems. I hope to solve these problems when the new version of trilium is updated, instead of letting everyone use a bug version. I originally planned to have more discussions with you to solve these problems, but I forgot to do that.

I made a GIF to let you know more about the bug I said:

These bugs include:

• The search bar cannot be collapsed
• The position of the tab will block other content
• Some of the content is difficult to capture to adapt to these styles (I am not very familiar with programming css)

In addition, there are some problems that are not bugs but look bad:

• Edit button position is too obtrusive
• The attr information can actually be placed in the information bar on the right, so that you can read the content more attentively

Will there be any changes in the latest version of trilium that can help us solve these problems?

@chee thanks a lot for your donation, and this really motivates me!

[chee]

@chee thanks a lot for your donation, and this really motivates me!

no problem! i'm really looking forward to trying out allure-clear !! :purple_heart:

[zadam]

Will there be any changes in the latest version of trilium that can help us solve these problems?

My plan is to essentially rebuild the structure and potentially also some features around the allure-clear in Trilium 0.48. This is not simple though and will take time (probably a few months until stable release). As a result the theme CSS will be probably radically simplified.

[JadeVane]

Anyway, the latest version of the Allure-clear theme (and Allure-night ) has been updated, there may still be some minor issues, but Allure-clear is worth a try. but there is one thing you need to pay attention to when using the allure-clear theme,

Do NOT keep more than one version of css style to trilium, or the styles of several css theme will affect each other and cause unexpected errors.

Hope it can be solved in the next version of trilium.

[chee]

Do NOT keep more than one version of css style to trilium, or the styles of several css theme will affect each other and cause unexpected errors.

Hope it can be solved in the next version of trilium.

yes, trilium should probably only load in the stylesheet of the active #appTheme note

[oxdc]

Another suggestion: CSS styles of addons, such as similar notes panel, are hard coded in JS or DOM. It would be more flexiable if they were separated as editable files.

[zadam]

Do NOT keep more than one version of css style to trilium, or the styles of several css theme will affect each other and cause unexpected errors.

This is not really technically solvable. CSS stylesheets are global and mix to each other.

The way this should be approached is that every theme should use a prefix selector body.theme-MY_THEME - when this pattern is used then the different themes don't interact with each other.

[chee]

This is not really technically solvable.

Sure it is. Only inject a <link> into the dom for the user's current theme. When the theme changes, remove that theme's <link> from the dom and inject the new one.

Alternately: set a media attribute on the <link> tags for inactive themes to something that will never match, such as disabled. When the theme changes, remove the media attribute from the selected theme and set it on the others.

[chee]

I have some thoughts here:

• I think it's good if the tabs are only in the center pane (where the viewed note is), rather than being over the whole app. That's the place the tabs have an effect.
• I like moving the toolbar over to the left hand rail, before #left-pane, and using the text of the buttons as title instead.
• The tabs showing note icons is also good.

[zadam]

I think it's good if the tabs are only in the center pane (where the viewed note is), rather than being over the whole app. That's the place the tabs have an effect.

That's actually incorrect, tab switch (can) influence the whole screen. It's just that the left pane typically does not change much (but can e.g. with per-tab hoisting). Right pane changes per-tab too.

But I think this is rather a design question.

I like moving the toolbar over to the left hand rail, before #left-pane, and using the text of the buttons as title instead.

Yes, I agree. Same as in Allure or e.g. in VS Code.

The tabs showing note icons is also good.

Possibly. Currently tabs show icon when hoisted into workspaces, but not otherwise (to make workspaced tabs more prominent)

[chee]

That's actually incorrect, tab switch (can) influence the whole screen. It's just that the left pane typically does not change much (but can e.g. with per-tab hoisting). Right pane changes per-tab too.

oh yeah! that's true. in that case: I don't know why it feels right this way, but it sure does (to me)

[chee]

That's actually incorrect, tab switch (can) influence the whole screen. It's just that the left pane typically does not change much (but can e.g. with per-tab hoisting). Right pane changes per-tab too.

oh yeah! that's true. in that case: I don't know why it feels right this way, but it sure does (to me)

i think it's because: the tabs, and both sidepanes. they feel like things that annotate and operate on the note view. they are each independent views and controls on the note pane. you know what i mean? like, conceptually, the tabs aren't changing the side bars. the tabs are changing the active note, and the sidebars change because they are views on the active note.

[derbirch]

Here I am again, sorry for my late update, kind of busy recently. And I made a version below.

[zadam]

@derbirch not bad! Thanks!

[derbirch]

@derbirch not bad! Thanks!

Cool, glad to help

[JadeVane]

I’m trying something new recently, and I think most of them worth considering although some of the changes may be radical.

This does not mean that tabs should be removed, but it is necessary for considering moving more buttons and functions to the left or right pane so that we can focus more on reading and editing.

[zadam]

I can report first progress with the re-design:

So far I've been working mostly on the layout changes:

• the top button row was moved to the left button column, saving vertical space
• the whole right pane with widgets was removed. I was never able to make it fully useful and in most cases it just took place. Custom widgets should still be able to position themselves on the right.
• instead of the right pane it's now possible to open 2 (or more) notes side by side
• I'd like to make the functionality from right side widgets available in the form of buttons under/next to the note title

Keep in mind this is pretty early result and more changes will follow.

[blumpcus]

@zadam I love the direction this is going in. Thanks for the thoughtful choices thus far.

[raphwriter]

Having notes side by side is a great feature, awesome! :) Maybe there could even be a shortcut analog to "open in new tab" such as "open left/right"?

Also, I have a suggestion/idea for a new logo: The idea is that the leaves resemble the letter "T" (for trilium)

[zadam]

@raphwriter that's actually pretty awesome! Is that your work?

[raphwriter]

Thanks I am glad you like it! Yes it's my work! I haven't checked yet if there are similar logos out there (definitely possible since it is a relatively common shape, I guess). I'd be happy to keep working on it some more. For instance I realised that there maybe should be a variant including the Trilium lettering ;)

zadam @.***> schrieb am Di., 1. Juni 2021, 20:44:

@raphwriter https://github.com/raphwriter that's actually pretty awesome! Is that your work?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/zadam/trilium/issues/1614#issuecomment-852360090, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG23VY2JPAFSOJXYB2KAIV3TQUS7DANCNFSM4XGENBWA .

[zadam]

Great, I like even this original variant, but seeing more would be of curse great :-)

Perhaps one small suggestion would be to try out also some different shades of green... For example, I like the coloring in these icons https://github.com/zadam/trilium/issues/1614#issuecomment-832996869

[zadam]

Some progress on the dark theme:

Most of the widgets from the right sidebar are now consolidated into the button bar under the title.