UI/UX Improvement Suggestions

[candroid-man]

I am creating this issue as a master thread for what everyone thinks about the current UI, and how we can improve it, along with my thoughts, of course. I will continue editing this issue as I come up with new ideas. I am going to try to be as organized as possible, and will try to provide crude examples. Also, to clarify, I think the app looks fine as it is, but I also think we can make it look perfect and modern (which is vital to normies).

General UI

Important Stuff

• [x] Allow collapsing and resizing of both side panels #205

• [x] Replace the table editor bar that appears with a simple dropdown menu for both mobile and desktop (inspired by Cryptee)

• [x] Allow sorting of items by alphabetical order, rather than putting items in alphabetical subsections

• [ ] Allow users to manually sort Notes, Notebooks, and Favorites (suggested by Victor Kogan#1333)

• [x] Reduce the next line after pressing Enter to single-spaced rather than what it is currently, and allow users to customize the line spacing in the editor

• [ ] Add a proper search bar to the top of the panel, rather than the search icon next to the + button (only on desktop)

• [ ] Add more fonts, as we are unable to use fonts installed on our device due to it having to sync a display correctly on other devices:

  • Ubuntu
  • Nerd/Proggy fonts
  • Common Windows fonts such as Arial, and Times New Roman
  • Source Code Pro

• [ ] Create a pill/rounded square around tags displayed in note selection panel (suggestion from @gaganyadav80)

• [x] While in a note, the displayed tags below the Note title should link to the tag when you click them, and be able to remove them by clicking an X that appears while hovering over it

• [x] #437
• [x] #433
• [x] #413
• [x] #411
• [x] #443
• [x] Ability to create sub-checklists
• [x] Make Light Theme less blinding, you want to avoid damaging any retinas
• [x] Allow users to zoom in and out of images, and add simple playback controls on attached videos
• [x] Make the sidebar configurable to reduce clutter (suggested by @ammarahm-ed)
• [x] Create a list of headings within the editor to jump around large Notes (suggested by hifx#6524)
• [x] Enter selection mode after pressing and holding on a note/notebook/topic rather than displaying the quick select menu
• [x] Add loading screen before everything is synced, so it doesn't look like this when you first login:

Small Stuff

• [x] Make checkboxes thicker (inspired by Google Keep)
• [x] Increase spacing between items in a checklist (inspired from Google Keep)

• [ ] Allow users to hide/collapse the formatting bar above the keyboard on mobile (inspired from Samsung Notes)

• [x] #396

• [x] Fix horizontal alignment of headers and text

• [x] #392

• [x] Remove the Recent, Last Week, and Older subsections in all side menus to remove clutter

• [ ] Move hierarchy location from the top, to the bottom of each note

• [ ] #387 - I really like the idea of having thumbnails on the side personally
• [ ] Make tags and stuff like that pill shaped as opposed to the rounded square (inspired by Evernote)

• [ ] Allow the app font to be changed to the default font on the system (not the editor font, the font for everything else)

• [ ] Move/resize the add note + button on desktop (not sure how or where, but I believe you can do better)

• [ ] Allow text files to be opened, displayed, and collapsed within the note

• [x] Simple animation overhaul for the small stuff

• [ ] Add some spacing between the notes content and created date. Maybe add this spacing in expanded tiles view mentioned in other FR (suggestion from @gaganyadav80)

• [ ] Create dividers between each note as opposed to the seamless list (suggestion from @gaganyadav80), and or use rounded squares as the shape of each item

• [x] Allow users to rearrange Notebook shortcuts (suggestion from WantedMoose#2459)

• [x] Add compact view for Tags (suggested by grberk#8693)

• [x] Add setting to remove placeholder text in notes (#620)
• [ ] Add haptic feedback when appropriate
• [x] Add the number of notes in a given Topic (suggested by kingsman#6937)

Themes

Pre-Set Themes

I know user-made themes are on the roadmap, but until then, it would be nice to see some easy pre-set themes. Some good themes to add:

• Gray/white
• Black or dark gray/white
• Solarized
• Gruvbox (this is mainly for me because I have everything on my PC Gruvbox themed haha)
• Google Keep theme (and other app themes to make people switching feel at home)
• Material You

Custom Layouts

Also, adding multiple layouts for the app would be cool, or allowing custom themes to adjust the default layout. For instance, you could make an Evernote layout that is more Evernote-like.

New Menus

Home Screen

(Credit to Geniusak#7949)

I absolutely love this idea. This would be the first thing you see when you open the app, and would reduce the time spent in the sidebar, which is a huge plus. To add to this fantastic sketch, it would be cool if you could upload images to Notebooks, and they would be displayed there on the home screen. So for example, you could have a notebook for School, and upload an image related to school for the cover of the Notebook. As for the mobile home screen, you could kind of do what Evernote does but make it look better (which isn't really hard, Evernote sucks).

As suggested by @gaganyadav80, a scratch pad feature on the home screen would be very useful (inspired by Evernote), and all notes created in the scratch pad should be put into a specific Notebook, subsection or tag, making them easy to find all quick notes quickly (which should also apply to quick note widget).

Tasks Menu

(Credit to Rob1#7269)

This would be a convenient way of allowing users to make Tasks to be attached to specific Notes as well as being in one spot. I do think to add to this, that you shouldn't be forced to have Tasks associated with Notes, and users should be able to add Tasks from this menu without creating Tasks within a Note. I do believe that this is the best way of doing Tasks within Notesnook personally.

[gaganyadav80]

These are some really good pointers. Some of which I would also love to see in next release are:-

1. Allow sorting notes in alphabetical order without alphabetical subsections.

But there are some things I would disagree with which are as following :-

Edited: I think my choice of words were wrong. I apologise 😅.

1. [IMP] Please do not make the note in the list view rounded or add padding. Some might like it and some might not but personally that does not look good. If anything then make it optional, please. Or else you can add a line separator (see screenshot below) (evernote's note list view looks super aesthetic).

2. The custom layout is an overkill and bloated. A universal search bar (like joplin, obsidian, github[Ctrl+K] ) would be much better. But a scratch pad like Evernote would be great.

3. For tags show them as pill shaped or rounded rectangle on the notes item also (currently they are displayed as plain text as #tag). Something like this :-

The spacing between the notes content and created date will also be good to see in notesnook. Maybe add this spacing in expanded tiles view mentioned in other FR.

[candroid-man]

Allow sorting notes in alphabetical order without alphabetical subsections.

I was originally referring to how Notebooks in particular were sorted, but you should also be able to do this as well. I will add this to the post.

IMP] Please, for gods sake, Never ever make the note in the list view rounded or add padding. Some might like it and some might not but personally that looks insanely pathetic (sorry for harsh words 😅). If anything then make it optional, please. Or else You can add a line separator (see screenshot below) (evernote's note list view looks super aesthetic).

Pathetic is a strange choice of words, but I think I understand what you mean. I would like to see how it looks before implementation, but I think if they used the rounded square look on notes that it could look pretty good. If that doesn't work out, I would definitely love to see the line separators as opposed to what we currently have (I do like the colored line to the left of the selected note):

Edit: I decided to remove it, I think you were right. Maybe rounded squares, though? I think that would be cool looking personally.

The custom layout is an overkill and bloated.

Many apps have different layouts, and I believe it would be a good way to smoothen the transition of new users. I just had a new thought, however; maybe it would be possible to make layouts change the functionality of the app. For example, it would be cool to have a Simplified layout that would be more like Google Keep, where you can only create notes, and tag notes.

But a scratch pad like Evernote would be great. For tags show them as pill shaped or rounded rectangle on the notes item also (currently they are displayed as plain text as #tag).

Adding these to the post, great ideas!

The spacing between the notes content and created date will also be good to see in notesnook.

I would have to see what this looks like before implementation to form an opinion on this, but I'm going to add it to the post, and we'll see how it goes. My worry is that it will create unnecessary space taken.

[gaganyadav80]

Thank you @candroid-man for your review.

And I do regret for using such words. I should have shown more decency. I have edited my comment 😀.

[candroid-man]

@gaganyadav80 You are forgiven, friend! Thank you.

[gaganyadav80]

I have one more suggestion,

The logout and Danger Zone is kind of disruptive in the settings list. I think the logout and danger zone should be moved to another screen which can be accessed by tapping a tile under settings called "Accounts & Sessions". And the tile should be at the bottom of settings screen with some extra padding at top of it ( This tile could be in red color like the Logout tile ).

Current	Suggested

[gaganyadav80]

In the latest version (1.8.5) on both mobile and desktop/web, we are still not able to sort the notes and notebooks by alphabetical order and not group them. If we choose 'None' in group by then we can only sort the notes/notebooks by date created and edited.

[thecodrr]

In the latest version (1.8.5) on both mobile and desktop/web, we are still not able to sort the notes and notebooks by alphabetical order and not group them. If we choose 'None' in group by then we can only sort the notes/notebooks by date created and edited.

I'll enable sort by title (alphabetical sorting) in the next version.

[thecodrr]

@gaganyadav80

I think the logout and danger zone should be moved to another screen which can be accessed by tapping a tile under settings called "Accounts & Sessions".

This will be fixed when new settings are done.

[gammexane]

If it counts, i like the "Home screen (Credit to Geniusak#7949)" or the one we have today but with some sort of separation between notes. We also need an "archived" section.

[sebastienplat]

This thread is great! I would love to group notes by tag or possibly by notebook in the Notes screen instead of navigating to another screen. Not sure how to handle notes that have several tags: maybe find them in each tag group? EDIT - nvm hadn't realized you can specify the default screen to open on startup...

[umbellipher]

My end-of-2022 desiderata to make Notesnook a much better experience:

1) PC app and Android: re-enable spell checking. It is such a pain not to have it.

2) PC app: auto-lock option after a chosen number of seconds. If this can be done on Android, why not on the PC app?

[deusnovus]

Hello, my friends! I'm a new Notesnook user and while I really enjoy it so far, I would like to point out a few suggestions in regards to UI/UX, if that's okay.

1. Instead of a heavily themed app design right from the get-go, I would personally suggest a system-agnostic design, that follows system local stylesheets and fonts (like Cocoa on macOS and GTK on Linux). The built-in font feels somewhat old, do not translate really well in each system's design and thus, feels out of place. The icons are great though!

2. There are some general padding issues between text, icons and UI elements and feel too narrow. (tested on both macOS and Vanilla OS / GNOME)

• I expanded the margin between the left column and text, as well as aligned the Notes entries text with the top headline and got rid of the vertical light grey bar as it is stylistically redundant and feel very retro Android-ish.

This my own redesign, as a solution for some of the existing UI/UX issues present:

• I made the active entry into a rectangular bubble, as it feels a bit more visually modern.
• There's no reason for the note order option to take that much space in the form of a bar, in terms of UX. I made it into an icon instead and turned the bar into a search bar, which is more appropriate.
• I made the New Note icon smaller to align with the size of the headline and note order icon.

• Some similar issues on the main note window: the separators are too tall and don't align properly with the title bar and toolbar, so I shortened them and aligned this properly.

• I created another redesign for the settings buttons on the right, where I moved them to the top-center of the toolbar. (1. when clicking Properties, the right panel completely covers the the settings toolbar, which is not that good, design-speaking 2. I think it has more visual balance, especially when in Focus mode as seen on the last frame of the GIF where the settings and toolbar are in the very center of the window, perfectly aligned with the title bar)

3. Auto-URL formatting when pressing Enter.

4. The Settings menu could use some refinement, as options, their type and order are all over the place.

5. A bit of a minor nitpick, but maybe a catchier project name like noted, notary, notable or notaful (all lowercase) might garner more public attention.

I think that's all for now, I will keep using Notesnook for a while and hopefully report back with my findings, if any. Keep up the great work, guys!

[dhry]

Is it possible to make the editor the full width of the client app window on eg Windows? Right now the editor is a relatively narrow column and I'd like to use more real estate to left and right.

[vertigo220]

Wasn't sure whether to put these here or as their own issues, but they don't really fit well as feature requests or bugs and more just general feedback and are pretty minor for each having their own issue, so here goes:

• Some dropdowns ("More" formatting, numbered/bullet lists) don't auto-close when clicking away from them
• It's unclear what typing in the bar at the top (the one that shows task completion progress) does, if anything (and if nothing, why it's possible)
• It's unclear what monographs are for
• It's unclear why a password-encrypted vault is necessary if Notesnook is E2EE

The first issue is sort of a bug, but really more of just a minor UI issue. The others are all things I could probably figure out by searching, but the point is users shouldn't have to do that, and so they fall under UX areas that need improvement, i.e. in better explanations of some things. Specifically for the last point, I'm assuming (and please someone tell me if this is right or wrong) that this is for notes that you want to keep private from others, and so the entire account is accessible only to you and whomever else has your login credentials (and therefore not Notesnook), but if you share the account with someone else and want to have notes private to just you, that's where the vault comes in. If that's the case, then that should be made clear in the UI. If it's not the case, then whatever is the case should be made clear.

[dubs10]

Regarding iOS accessibility in the UI:

Could we please make the UI follow the setting for font-scaling? Currently it ignores it, meaning that my notesnook notes display much smaller than on Apple Notes. This is currently the largest barrier to my switching from Apple to Notesnook.

Also I would like it if it followed the setting for removing UI animations (or had its own setting for this). Having dialogues and pop-ups zoom and slide their way on and off screen can be nauseating for people sensitive to visual movement because of balance illnesses, and it introduces a delay into GUI response times that I personally find a little annoying.

Thank you!

[kmantel]

For table editor on desktop apps:

1. Currently, you can add a new row while typing by pressing Tab in the bottom-rightmost cell. I'd like it if you could add a column in a similar way.
2. I'd like it if you could add new rows or columns by keypress while working in the last last row or column, not just the bottom-rightmost cell
3. Hitting Delete on an empty cell moves the cursor to the next cell, this seems strange to me, though not a big deal

These may be bugs, and if there's interest in them I can try to give more details/better steps to replicate

1. odd resizing of columns while typing in cells (not simply expanding to fit the width, but expanding beyond the width)
2. inconsistent cursor behavior when deleting rows or columns

[edisondotme]

Regarding app animations, the smooth, sliding animations are fine for me, but the bouncing animation really annoys me and slows down my whole experience. Tapping the three dots on the top right while in a note brings the menu up, but there's a bouncing animation until it settles in place. It annoyed me enough to come here and search the github issues and leave a comment.

[dubs10]

Yes, agreed the animations are annoying. They could run quicker and not have the bounce. For Apple, the bouncing motif is often used to signify a limit you can't go past, which doesn't really apply here.

Also the edit toolbar is really difficult to horizontally scroll on an iPhone. It seems to look in place often and needs several tries before you can "pick it up".

On Fri, 28 Apr 2023 at 16:11, edisondotme @.***> wrote:

Regarding app animations, the smooth, sliding animations are fine for me, but the bouncing animation really annoys me and slows down my whole experience. Tapping the three dots on the top right while in a note brings the menu up, but there's a bouncing animation until it settles in place. It annoyed me enough to come here and search the github issues and leave a comment.

— Reply to this email directly, view it on GitHub https://github.com/streetwriters/notesnook/issues/412#issuecomment-1527715540, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABWMHWWOGMEMEF4O5TSLJ53XDPM3JANCNFSM5RDMBPTQ . You are receiving this because you commented.Message ID: @.***>

[incorvia]

A couple thoughts:

1. Would be nice if you could filter topics by tag. Would require some sort of filtering interface for selecting which tags you wanted present or clearing it to restore viewing all notes in that topic.
2. When viewing a color list, it presents the topic of the note in the index view, but it doesn't present what notebook it is part of.

[konradbartecki]

Added new suggestion #2949

[joewood9364]

4963

I've listed some issues with the Notebook section here.

[HubKing]

Window size, the positions of horizontal splitters are not remembered. It always starts with the default size/positions. Is this a bug?

Linux, Flatpak.

[raspin0]

I don't know if it's a bug, but middle click to close tab doesn't work on windows desktop client. Would appreciate this functionality very much

[PricacyPro0]

My biggest Issue with UI, is that you can't select the Navigation Bar when you want to scroll the open Tabs and select one. Instead if you try to select the Top Navigation Bar, because it's so small it always selects one of the Notes and then you can only move that Note to the right or to the left between your other tabs. But I don't want to move that note. I just want to use the Navigation Bar to look whats hidden on the right side, if you have a lot of tabs open.

Trying to select the Navigation Bar, to navigate to the right, to see the other tabs.

Instead it selects the Note Tab, because the Navigation bar is so small.

Solution: Making the Navigation Bar bigger, so you can actually click on it, without clicking somwhere else.

[thecodrr]

@PricacyPro0 this is by design. Use the scroll wheel or something else. We can't make it bigger as it'll take too much space.

[thecodrr]

Closing this issue as the everything that could be fixed/added in the above list has been added. If someone has a suggestion or an issue, feel free to create a new issue. It's easier to track it that way.