godotengine / godot-proposals

Godot Improvement Proposals (GIPs)
MIT License
1.12k stars 69 forks source link

Replace contextual toolbars with contextual drawers #3550

Open YuriSizov opened 2 years ago

YuriSizov commented 2 years ago

Describe the project you are working on

Godot editor

Describe the problem or limitation you are having in your project

It's been a long standing issue that the toolbar row on top of the editor viewports is very crowded when it comes to contextual tools. Not only does it create a lot of clutter for users to untangle reducing productivity, but it also prevents us from comfortably supporting PCs and laptops with smaller displays. This segment of users is very important for us, as a lot of Godot users work from smaller laptops with limited screen space.

But even for people with huge monitors (like myself) the amount of icons on the toolbar can become overwhelming depending on context of selected nodes. While we do some work to move tools away from that panel (https://github.com/godotengine/godot/pull/54342), we also introduce new tools that are important to people who work visually (https://github.com/godotengine/godot/pull/54372). There is also an argument to be made that the toolbar row loses its purpose when we start adding more and more functionality to it, sometimes not even strictly "tool" functionality.

For a better perspective on what areas of the engine it affects see multiple linked issues in https://github.com/godotengine/godot/issues/31133.

Describe the feature / enhancement and how it helps to overcome the problem or limitation

One of the proposed solutions was to create an overflow for the toolbar and automatically hide excessive elements there. But this doesn't really solve the problem with over-crowdedness and only partially improves usability on smaller screens as users are unable to pick the tools that would go off-screen.

My idea would be to use the space inside of the viewport, and give users a chance to pick. Enter "tool drawers". The concept is similar to Blender's tool panels to the left and right of the viewport. They are hidden, but can slide over the viewport area and provide additional tools, including contextually relevant tools, without a strict limitation for the horizontal space. This allows to better explain what the tools do with labels and titles instead of relying exclusively on pictograms and tooltips.

The ability to select specific sections of the drawers gives users a way to only see the instruments they currently need, while still having access to the tools they may use another time. And while space over the viewport is not exactly free real estate, it can be a decent compromise when the need to use a contextual tool arises.

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

I have a basic prototype done, and moved a couple of control-related contextual toolbars to the drawers. Here's how it works:

https://user-images.githubusercontent.com/11782833/141829169-ed66309c-987b-4808-8da3-ce6561817b33.mp4

Also look at how tiny and cute the editor can go!

godot windows tools 64_2021-11-15_20-49-58

If this enhancement will not be used often, can it be worked around with a few lines of script?

This is about the editor usability.

Is there a reason why this should be core and not an add-on in the asset library?

See above.

YuriSizov commented 2 years ago

Hmm, I'm not sure there were a lot of complaints about drawers taking too much space. Most complaints are that they require additional clicks to interact with (toolbars were always visible), that buttons can be too cryptic and require learning what they mean, and that they aren't as flexible as one would hope.

Drawers are opt-in, you have to click the corresponding button for them to show up, so they only take as much space as you need. A shortcut to toggle all of the available drawers on or off at once can be added for convenience, of course. But I'm not sure there was criticism regarding them taking space, so that would solve a different problem.

What does take a lot of space is the toolbars that we have now. That was one of the established problems that this proposal is trying to address.

winston-yallow commented 2 years ago

I think that they do not take too much place. In any way, I would suggest first going with this. Implementing a way to completely hide drawer icons temporarily can always be done later if this really becomes an issue.

In that case I would even suggest that the toggle isn't "hide all drawer" but instead "hide all viewport overlays" which includes the axis orientation thing and the "Perspective" menu and so on... But as I said, something like this can always be added later when it really becomes a problem. Also, there already is the option to enter distraction free mode (Ctrl Shift F11) in order to have a bigger viewport if needed temporarily.

golddotasksquestions commented 2 years ago

@gaudecker

Assuming with "keybindings" you mean "keyboard shortcuts":

These are never a substitute for good UI. They are a vital extension for power users of a particular feature, but not the sole solution to any problem. If your UX depends on keyboard shortcut to be usable or fluid, it sucks big time (yes you Blender).

  1. Discoverability is close to 0 if the UX depends on keybindings.
  2. Keybindings are impossible to remember for irregular users.
  3. It restricts the workflow to a single bottleneck and counter intuitively makes your software hard to configure to user needs (undefined ergonomic keyboard shortcuts is a very sparse resource)
winston-yallow commented 2 years ago

@golddotasksquestions I don't think the suggestion was to make it exclusively possible to only use the key-binding. I think the suggestion was more general to make it possible to hide the drawers completely. The keybinding is more an implementation detail. I agree that only the keybinding would be bad, but usually you would not do that exclusively but instead additionally to a graphical way. In which case keyboard shortcuts are actually good UX and can improve accessibility as not everyone can comfortably use a mouse.

That being said, as I already commented before, I think this could be done at a different time as this is nothing that is necessary for the drawers to work. Especially when one can simply enter the distraction free mode to have more space in the viewport when needed.

timothyqiu commented 2 years ago

I like the Text Properties drawer because it is a dedicated place to inspect & operate things text related.

But I think the Anchors drawer is just a fancy way of providing a bunch of buttons. It constantly takes a lot of screen (although the user can close it manually) and does not provide information. For the anchors preset, I think #3559 is more effective.

YuriSizov commented 2 years ago

does not provide information

It can provide information regarding current settings of the selected node, but this won't work when you select multiple nodes (same limitations apply to the text properties). Container panel is a bit more informative, as it updates depending on what options are available for your current selection.

For the anchors preset, I think https://github.com/godotengine/godot-proposals/issues/3559 is more effective.

You mean the fact that it's one click less to open, change, and close?

Edit: Note, that the specific functionality for the drawers hasn't been changed much, other than use the available space more efficiently. We definitely don't want to have them in the toolbar, but the functionality of the tools themselves is not the core of this proposal.

timothyqiu commented 2 years ago

It can provide information regarding current settings of the selected node

I know that the similar buttons in the Container Layout drawer can be used to display current selected mode because these are states. The 4x4 array of anchor preset buttons are commands like the current preset popup menu. I don't think it's always doable to deduce preset from the current anchor settings.

You mean the fact that it's one click less to open, change, and close?

A popup closes immediately.

For me, building a UI scene works like: Add a Control, set the preset, tweak a bunch of properties; Add another, set the preset, tweak a bunch of properties... So basically either it stays open during the whole process, or I have to close it manually everytime a preset is chosen. The former makes the drawer take up quite a lot of space when it's not needed, while the latter will quickly get annoying.

Maybe it's just me that need to adapt to a new workflow :) I'm not against the drawer proposal.

YuriSizov commented 2 years ago

I don't think it's always doable to deduce preset from the current anchor settings.

Well, we already do it in the new inspector layout section 🙂 It can, of course, not match any preset as well.

A popup closes immediately.

Yeah, that's what I meant. I can see how this can be annoying with the flow that you describe. I think an adjustment period is always required when the UI/UX changes in any application. It's often hard to tell if the current flow is what is most comfortable and what should be supported, or if it's just how we adapt and adjust to the thing and make the best of it. On the flip side, toolbars can still exist if we find that they serve some purpose better. And nothing about drawers is set in stone, on the contrary, I want to get it in alphas as soon as possible to see how users find them.