playcanvas / editor

Issue tracker for the PlayCanvas Editor
https://playcanvas.com/
161 stars 28 forks source link

Uploading FBX (Folder) - intrusive selection. #725

Open Maksims opened 2 years ago

Maksims commented 2 years ago

A new feature that creates a folder for FBX is great, but it has some UX discomforts:

  1. When uploading FBX, it selects a folder.
  2. After the folder is created it navigates to that folder.

This is inconsistent with any other upload mechanics and leads to unintended "magical" behavior, which does not originate from direct user input.

Also, this breaks all apart when uploading multiple FBX files, and the worst-case scenario: uploading dozens or more of assets, basically forces you to wait till it jumps between folders and does select things, blocking users from working.

Issue:

Intrusive "magical" behavior with force selections that fall out from existing UX.

Solution:

  1. Do not force select things when uploading files.
  2. Do not force navigate to folders when uploading files.
yaustar commented 2 years ago

Also, this breaks all apart when uploading multiple FBX files, and the worst-case scenario: uploading dozens or more of assets, basically forces you to wait till it jumps between folders and does select things, blocking users from working.

You are referring to when you uploading one FBX by one in sequence here right? Yeah that makes sense. @jiajasper?

Sidenote: When uploading multiple FBXs at once, the Editor doesn't jump into the folders.

willeastcott commented 2 years ago

@jiajasper should probably weigh in here. 😄

Maksims commented 2 years ago

Also, this breaks all apart when uploading multiple FBX files, and the worst-case scenario: uploading dozens or more of assets, basically forces you to wait till it jumps between folders and does select things, blocking users from working.

You are referring to when you uploading one FBX by one in sequence here right? Yeah that makes sense. @jiajasper?

Sidenote: When uploading multiple FBXs at once, the Editor doesn't jump into the folders.

Both: one after the other or select multiple FBX files and upload by single drag.

yaustar commented 2 years ago

Uploading by single drag shouldn't jump between folders. If it does, that's definitely a bug 🤔

yaustar commented 2 years ago

The counterpoint to this would be, how would we show (new users especially) the files they should use to add to the scene. Users would see the folder being created but we don't have anything here yet about the render/template/glb/textures being inside. How do we communicate that?

jiajasper commented 2 years ago

The counterpoint to this would be, how would we show (new users especially) the files they should use to add to the scene. Users would see the folder being created but we don't have anything here yet about the render/template/glb/textures being inside. How do we communicate that?

I completely agree! I think the problem lies within how we communicate the files after import - I am working on the design for this! Will update the ticket soon!

Maksims commented 2 years ago

The counterpoint to this would be, how would we show (new users especially) the files they should use to add to the scene. Users would see the folder being created but we don't have anything here yet about the render/template/glb/textures being inside. How do we communicate that?

That is a valid task and requires a very specific solution, definitely not force-selecting folders. One of the options is to have a subtle "notification" icon over a folder, which indicates a number of yet not seen and updated assets inside. This although should be approached with caution, as this might have not intended consequences in a real-time context, unsuspecting other users and users that wait for it. It should be subtle, so who will look - will see, but who don't care, shouldn't get obstructions.

Also, communicating processes and teaching mechanics - should not come at a cost of the comfort of power users.

image

jiajasper commented 2 years ago

Hi, after reviewing this ticket and investigating into this issue, I completely agree with @Maksims in terms of removing the force-selecting folders (and also like the idea of having a notification UX in place to draw attention to files that need user's inspection) and also agree with @yaustar that we are not doing a great job at communicating what interaction can be performed on each asset type.

Below is a quick summary of the underlying UX issues discovered from this ticket:

The reason why we would want to force select a folder once a model is imported is to:

  1. Inform what have been added to the asset panel
  2. Enable users to drag and drop the asset into the scene very quickly.

However, our current UX is not achieving such goal because we do not have enough visual cues to indicate which file can be dragged into the scene.

Based on a quick user research testing around the office, 8/10 participants dragged the render file, 1/10 dragged the material files and 1/10 dragged the template file. The insights from this testing session are:

Thumbnail is important: files with thumbnail are more visually inviting to users to perform an action. Hierarchy matters: the order we lay our files out would also be a factor when user decides which files to drag.

With these insights in mind, below are my design suggestions:

Quick: Remove force selecting + Dot colour as indicator of what's been newly imported + Cursor as indicators of what can be dragged onto the scene + Enable dragging folder into the scene (we will add all applicable assets onto the scene from the folder)

image image

Medium: Everything in Quick + Enable Adding Render into the Scene Straightaway

image

yaustar commented 2 years ago

How would we solve the current issue of the folder being created for a FBX import but not showing them what's inside/that there are files inside it that are created from the import of the FBX?

jiajasper commented 2 years ago

@yaustar We would keep the current approach to generate a folder, but instead of opening the folder right after, we simply use the yellow dot to indicate new imports (or we could even explore making a "new" indicator UI).

We then pair it up with the ability to drag and drop folders to the scene and also other UX fixes to communicate what can be dragged into the scene and what can't.

There are some other designs i'm working on to improve the asset panel but they require more work and discussion, hence, I posted some quicker fixes with existing UI components