Media Picker / Browser click suggestions

[tbolon]

Hello all,

Here are some suggestions from a fresh user of umbraco, discovered with v14.3. Some are naive, certainly debatable. But even as a long time computer user, I struggled to understand how Umbraco works for some UX elements.

Currently, the media picker has the following behaviors when clicking, depending if you click on the "name/link" or the "icon" (when using grid view):

✅when clicking the "name" of a media when picking an item, it will "enter" it as if it is a folder (and the name of the media is shown in the bottom of the modal)
❓why not simply selecting the media?

✅ when clicking the "icon" of a folder, it will mark it as selected and allow you to "Select" it (button is enabled)
❓why not simply entering the folder? And when should folders be allowed as selected items? Even when accepted types is restricted to images?

✅the only difference between clicking the "name" portion and the "icon" is the underline on the name. But both actions are really different and results in totally different behavior (name will always "enter". icon will always "select").
❓how to make the difference more obvious between the "select" vs "click" action? Other UIs (such as OneDrive Web UI) show a rounded checkbox when hovering an item to allow (multi-)selection. Clicking will always select an image or enter a folder.

✅when selecting an image in a rich text box, it will always start from the root node.
❓why not opening the last folder used if any? It mimics most OS behaviors and minimize clicking when you organize your images in nested subfolders. If you are writing a long article and have uploaded a lot of images in a dedicated media folder, you will waste a lot of time browsing your media library.

And the media browser has the following behaviors:

✅when clicking the "name" of a folder in the center panel (not the section tree) it will open the right-side popup to browse the content
❓why not simply expanding the section tree node and switch to this folder? Selection of the folder will still be possible by clicking the folder icon.

And some generic behaviors:

✅when creating a folder "on the fly" using the bottom bar of the Media picker, you have to click anywhere outside the text input to validate the folder creation and browse to it
❓why not accepting the "return" key? Or adding an "create" button? It's really hard to understand how to validate the input.

PS: I have tried exploring the BackOffice project, but I lack a lot of expertise on the tech stack used, so I won't be able to suggest PR easily. :(

[iOvergaard]

Some really nice perspectives here to consider.

The media picker is not the most intuitive interface we have. All items are technically folders as they can contain nested items, although getting that set up requires deep system knowledge. We intend to add better UX to the media picker, which is tracked in this issue #16398.

I agree with the behavioral suggestions that the last folder should be reopened, and that folders and items should behave by their functions.

[tbolon]

Thank you for the mentioned issue, I missed it. I know that a lot of work has been done in the v14 of the backoffice.

As always, maintaining a good balance between adding and rewriting features and keeping a good UX experience is a hard job. But for a CMS which targets a really non-technical (and non developer) audience, UX must really be top-notch.

As of now, I must admit I am a bit anxious about launching the website for our editors (the website is targeted to be an internal knowledge base) because of the eventual feedbacks I will receive about the backoffice.

[enkelmedia]

Great topic and important points!

I just found this thread after posting a similar issue here #17558 with some ideas around this.