Improve "new library" file browser UX.

[jimmycuadra]

When I first tried Dim, I had a hard time figuring out how to add media, because the check boxes that you need to click to select a folder in the file browser don't appear until you hover over them, so I didn't realize there even were check boxes. I kept clicking on folder names, which just shows their contents. I saw a comment on reddit from a user who had the same confusion I had. This PR rearranges the UI of the "new library" file browser to improve the user experience here.

Here are some screen shots comparing the before and after with some notes about what's changed.

Before

Initial state

• The prompt "select folders containing media" is combined with the number of folders that are selected, with no explanation of what the number in parentheses means.
• The check boxes are not visible.
• The current path is not shown.
• The back button is hard to notice at the bottom.

Within a subfolder with a folder checked

• Only after hovering over a check box and clicking it does it stay visible.
• The check boxes are aligned to the right and it can be a little difficult to see which row each check box corresponds to.

After

Initial state

• Help text is added to explain the function of clicking a check box vs. clicking a folder name.
• The back button doesn't appear, because you can't go back from the root.
• The current path is shown and the label clarifies that the directories shown are being viewed but are not selected.
• All the unchecked check boxes are visible and aligned to the left where it's easy to see which row each one corresponds to.
• The number of folders currently selected has a dedicated label explaining what the number means.
• The number of folders selected and the toggle actions are moved below the browser.

Within a subfolder with a folder checked

• The back button appears at the top, where a user is likely to expect it based on its default position in web browsers and operating system file browsers.
• The checked and unchecked check boxes and their corresponding items are clearly distinguishable.

[vgarleanu]

Im not a fan of the new label. Its way too long and its just a chore to read, it kinda also disrupts the layout of the modal. We should change it, or revert it to the previous label. I also dont think the "Currently Viewing" label is necessary.

[eraychumak]

@jimmycuadra, you state valid points regarding the accessiblility of the modal for creating new library. When I was implementing it, I had the same issues with trying to figure out how to make it obvious with what is what, thank you for approaching this issue as it is important to make sure everyone understands easily how to use it.

I like your idea to move the folder selection checkbox to the left and keep it visible. It makes sense and I should not have hidden it like that for the sake of a clean visual appeal. I think we should keep it that way so no changes there. In addition to that, I like the 'Folders selected' part as well, it is much better and explicit along with the 'Currently viewing' part.

As much as I like the textual solution, I do agree with @vgarleanu that it adds too much reading and visual clutter, especially when taking into consideration pro-users or users who already know the gist.

To get this PR merged:

• I do want to see if you can use less wording, especially with the two sentences.
• You have separated the actions onto both the top and bottom of the folder selection view, which could resort in un-necessary mouse travel, try keep the actions all together.
• I think we should add a 'Go back' label to the back button.
• Also, I am not a fan of how there is white space when the back button is not visible.
• Let's add a 'right arrow' to the end of each folder, it will appear when hovered implying that the user may click to dive deeper.

[jimmycuadra]

Thanks for the feedback! I like your ideas. I'll take another pass at this soon.

[jimmycuadra]

Okay, revised! How does this look?

Initial state

• Back button now labeled with "Back" text.
• Back button is visible even at the root path but disabled, like before.
• "Currently viewing" label removed from current directory path.
• Toggle actions moved to the top right, same row as the back button.

Within a subfolder with a folder checked and another folder hovered

• Hovering over a folder ("Music" in the screenshot) causes a right arrow to appear to the right of the hovered folder name.

[eraychumak]

Okay taking inspiration from your layout:

• It makes sense for the navigation buttons to be on the top left, almost all file explorers have it top left so its expected naturally and avoids users re-learning new locations. However, thinking more about importance, I changed their color to a neutral gray instead and it looks much better and less on the eye.
• I liked how you had the Currently viewing label in previous designs, should've kept it! I think it's a nice touch and it just assures the user what the path is for. I changed it to Currently in just to reduce text a bit and also adjusted colors to distinguish the label and the value.
• The folders selected label is useful and more obvious, I kept that too and in the same location, again with some color alterations to distinguish the label and value.

One problem that I mainly addressed is that now there is a lot of visual clutter next to the folder names: checkbox, folder icon and now also an angle-right icon. There is one part you're missing in your designs which is the label that shows how many folders are selected inside an unselected folder (see my design to know what I am talking about); it will clutter everything even more. The folder name label is the most important visual element so the user can quickly read and find the folder they need. I moved the icon to the right and also added a label for clarity with a condensed.

Here's what I suggest:

If @vgarleanu approves and you wish to implement it then we can get this merged as soon as its done 👍:

• The (X folders selected inside) label only shows when the folder itself is not selected but contains folders that are selected. This helps the user quickly find any folders they selected whilst navigating to other folders.
• The ENTER FOLDER > only appears on hover.
• Also, I found out that making the folder icon the same color as the folder name makes it much easier on the eyes, otherwise it was trying to battle and steal for attention; now it rests quietly in the peripheral vision.

The design is mainly illustration purposes hence only three folders, the navigator should still show minimum 7 per scroll cycle.

[vgarleanu]

@eraychumak design looks good, although I would omit the ENTER FOLDER label, I think the angled arrow is a good enough hint that the folder can be clicked on to explore it, my only concern is if users will notice it when hovering since it is hidden by default. Although perhaps the backwards and forwards buttons are a good enough hint that tell the user that this is a file browser with folder selection ability. We can trial it and see how users react.

[eraychumak]

@eraychumak design looks good, although I would omit the ENTER FOLDER label, I think the angled arrow is a good enough hint that the folder can be clicked on to explore it, my only concern is if users will notice it when hovering since it is hidden by default. Although perhaps the backwards and forwards buttons are a good enough hint that tell the user that this is a file browser with folder selection ability. We can trial it and see how users react.

True, other-wise we're back to square one with the inital issue that @jimmycuadra opened 🤣 Let's remove the ENTER FOLDER part and keep it just the right arrow. Also, let's keep them visible by default as well I guess.

@jimmycuadra I'll let you choose what looks best and is best both for visuals and for accessibility.

[jimmycuadra]

Agreed that the "enter folder" text is a bit too much. I'll try it without. Did you mean to move the toggle actions back below the browser in your screenshot? In the last commit I moved them from below to above based on your previous feedback.

[eraychumak]

Agreed that the "enter folder" text is a bit too much. I'll try it without. Did you mean to move the toggle actions back below the browser in your screenshot? In the last commit I moved them from below to above based on your previous feedback.

Yeah I noticed it'll clash too much with the path value as they can get long pretty quickly so it's a little comprimise. At-least this way each 'corner' has some options 🤣

[jimmycuadra]

I tried to get it to look like the latest mock up, but I've reached the limit of my CSS capabilities and I don't want to spend any more time fighting it. I'm gonna close this, but if someone wants to use what I started with as the basis for getting it done, feel free.