Change editor view panel UI

[lentsius-bark]

I visit the IRC at times and the last time I was there I noticed an interesting discussion about the UI and UX, and how it's not always clear to the user that the extra icons are related to the tool. I was just working on a project and looked at the UI and thought "hm... let me give this a go."

I love UI and UX and so...

...you know this guy?

Nasty little fella right? I lived a year without ever noticing this button.

What if we made it longer?

awesome, collapsible and put all the options from the top panel there instead? Moved the view button next to the "distraction-free" toggle away from the top panel? Kinda makes sense to have the two buttons together.

But one panel's not enough, let's make it into two!

1. options that persist
2. tool related options (curve tools in the example below)

Properties of the panels

• panel one combines the view options with camera settings
• panel two makes tool options consistent with the style of panel one (great for making users understand how to use it)
• they are transparent (0.66?) and go full opacity on mouse over
• only visible in the view last visited by the mouse

The idea

Collapsed

Close up

The good stuff

• noticing tool related options becomes more intuitive
• more screen estate for the view
• can be collapsed(hidden)
• tool options get their own panel, that's awesome.

The not-so-good stuff

• Godot doesn't have anything of the sort at the moment
• If someone accidentally closes it, might not be instantly evident that the options were there
• changes a something that's been the same for a long time now.

Questions

Q: Doesn't it waste space and make the minimum width larger than before?
A: Actually this would mean that the two panels can be placed on top of each other, saving space instead:
notice how the the view options button is right next to distraction-free toggle

Q: Won't it be distracting to see it on all four views in splitview mode?
A: Not if we made it only visible in the view most recently 'mouse-overed'

Conclusion

You know this is not something I need for a project I'm working on, it would however feel like a great UX improvement. Especially the ability to hide it when not needed.

I wouldn't be able to make a pull-request nor code it myself. This is a proposal where I hope to discuss whether this would be a welcome change and if so hopefully someone capable picks it up.

Thanks for checking this out! Turned out longer than I had thought it would.

[mrwanashraf]

would be awesome to see that beautiful UI in godot! 👏 👏 👏

[Darkinggq]

it is very convenient it is necessary to improve the UI editor for 4.0 will be very beautiful, users will be very pleased 👍 @reduz

[nezvers]

It really looks slick! I'm for it.

[tomglenn]

I really like this proposal. Would love to see this in Godot.

[ultramarinebicycle]

Yeah and maybe double the size of each icon as well. They look pretty small imo.

[lentsius-bark]

@Altair1234 Defo! If any change is done to the panel it'll be the best time to double check everything is the right size. These were taken directly form a screenshot so they're the same size you are used when working with the editor. I did notice however that the "select mode" icon seems to be positioned differently from the rest of them.

@tomglenn @nezvers @ilyafuu @mrwanashraf glad to see you like it everyone!

[stolencatkarma]

This is that extra spark that is gonna make 4.0 really special. So slick and professional.

[girng]

That toolbar menu is in the same place when you are editing a 2d scene, so when switching between 3d and 2d (unless the 2d toolbar is updated for this suggestion as well), it will not look right. I like as much screen real estate I can get in my editor window. Just my 2 cents

[eon-s]

The main problem with this is that these tools are node-dependant and may be hard to keep track of them unless an universal floating bar is added.

[reduz]

This seems good in theory, and was discussed before, but the 3D editor can split the view into many viewports, and there would be no room to put this:

So, the top bar, being unique, continues making more sense. Any workaround (like displaying on the last view visited by mouse, as you mention) will only worsen usability, and will also reduce the space to put these tools.

[girng]

@reduz That's a good point, lol you'd have 4 of those menus!

[groud]

Despite being very nice looking, what is the most important here stays usability, and providing an efficient workflow. A few comments:

• Collapsing the bar is useless, tools should always be visible.
• The select, move, rotate, etc... tools and the object-specific tools should be mutually exclusive (it is not implemented yet, but both of those tools should not be pressed at the same time), so putting the object-specific tools in another toolbar might confuse users. Those tools should all stick together so that you understand those tools are "linked", as they cannot be used both at the same time.
• The problem pointed out by reduz is valid, but if the toolbar appears always on the top-left corner that might be ok. But in that case, the toolbar makes as much sense as this "floating" toolbar.

[Xenoamor]

In the office at the moment so can't check but I recall that Blender 2.8 does something very similar. It might be worth checking how they handle this across multiple viewports

[coppolaemilio]

@reduz we can make it like the floating bar when there is only one viewport and make it fixed when there are 4?

[reduz]

@coppolaemilio I think that would be very inconsistent, and so far the way it works now is not a problem.

[groud]

Blender does something like that, which kind of makes sense. We could likely got inspiration from this design I believe.

The good points there :

• Dividing tools and menus makes sense.
• The floating toolbar make it more obvious that new tools were added, since the content change of the toolbar is more significant than with the top toolbar.
• The vertical toolbar has more chances to overlap on the bottom part than an horizontal toolbar to overlap with the right part. So it makes it more obvious that the toolbar applies for all viewports.

[reduz]

@groud The per viewport options in Blender are viewport dependant, it's not our case.

I also really dislike icons, as they make usability worse (you just have no idea what they are, and discoverability is terrible).

We were coincidentially discussing this yesterday with @groud and the main problem we have is that new options added to the toolbar are confusing because it's not very clear that they are there.

What I suggested was to simply add a small highlight to the toolbar to show that a tool is node dependent.

As an example, something like this when you select a 2D polygon:

[VicentGJ]

I agree with this, the way blender does it seems like a good reference, looks very nice and its very usable. I will like to see this implemented.
Besides I have always seen that toolbar like one of the weakest points of the current UI

[groud]

I also really dislike icons, as they make usability worse (you just have no idea what they are, and discoverability is terrible).

I am not sure what you are talking about. I was talking about the vertical toolbar on the left. The icons we have could be kept the same.

@groud The per viewport options in Blender are viewport dependant, it's not our case.

Blender has global menus too on the top. That's where we could put our own menus (like snapping, view or transform). The vertical left toolbar could only be kept for editing tools, that must be used on the viewport.

[reduz]

@groud I agree that toolbar is confusing (too much stuff) but I am not super convinced about alternatives being better. I suppose we could try doing some mock-ups to see which ones may work best.

[groud]

I suppose we could try doing some mock-ups to see which ones may work best.

Yeah, I agree :)

[lentsius-bark]

Fantastic feedback! I was certain there were points I hadn't thought of or rather point I had thought of but didn't think them problematic enough to stop the idea from realizing.
Reading through these I am excited to see if I can come up with a different approach.
@reduz and @groud, thanks for taking time to respond to the proposal!

Also to people thinking there would be 4 of those menus, the idea was to only have it in one view at a time, for example the last window visited by the mouse, but as pointed out by Reduz this would mean that on a small screen with 4 views, this would likely provide too little space. :)

[VicentGJ]

@reduz is true usability is the most have, but that does not means fancy design does not contribute to the usability.
I think than if an UI manage to look good to the eye then it makes simpler to understand.
Blender 2.7 UI does not have usability problems, however, besides 2.8 UI relies more on icons it is more attractive for the beginner.

[reduz]

@VicentGJ Well, to be honest, Godot is a lot more praised than Blender in the discoverability/usability department, so trying to get influences from it is probably not a good idea. If anything, I think we should stay on our current path rather than trying to copy the fourth attempt (that was not proven yet) of an application that was always criticized to be very difficult for beginners.

I think we have a very specific problem here, which is that it's difficult for users to tell when a tool has added an item to a menu. As I mentioned before, the solution does not need to be that extreme.

I personally think our current approach is very difficult to improve, and putting transparent things and moving things all around the place is likely not going to do a lot for usability. But as always, if a good proposal comes up it can always be discussed, I just don't think this happened yet.

[groud]

I personally think our current approach is very difficult to improve, and putting transparent things and moving things all around the place is likely not going to do a lot for usability.

Ah yeah, I agree on that. For me, the transparency hurt the readability, and moving things around is useless and confusing. So indeed, I don't think this should used.

[TheFlamyy]

One issue I have with the current UI is that it's not possible to multiple "main views" (2D, 3D, Script, AssetLib) open at the same time.
In some cases it would be beneficial to have the 2D and 3D viewport open simultaneously (when editing viewport textures) - or 2D viewport and script editor for changing custom tool nodes.

Another possible change would be to make - all - dockers floating/detachable (like Gimp). You could move your docks around however it pleases you. Currently they are - a bit - limited by eight possible.

[reduz]

@TheFlanny this is planned for 4.0 already.

[Two-Tone]

@reduz Which part? The floating docks, the ability to have multiple main views open at the same time, or both?

@groud The transparency really isn't an issue if the design because it's not essential to it. It can be adjusted for readability and even have it go fully opaque when hovered over.

I feel like there is a solution that would solve the multi view port issue. Maybe have it float over the view ports? That might hurt readability or look bad. Could make it scrollable like what Blender does, but it can't stand that.

[Xenoamor]

I'd just like to add that in Blender 2.8 you have the option for icons or text by dragging out the toolbox:

There's nothing to stop us allowing users to drag it up to just get text as well

[Calinou]

@alvarlagerlof The screenshots you posted seem to be from Godot 3.0.x, judging by the checkbox icon appearance. Many of the issues you've mentioned were fixed in 3.1 and in the master branch (which will become 3.2 in the future).

[MarcusElg]

Even if the toolbar isn't changed to the suggested look at least make tool icons right aligned. This way they are clearly separated from the general icons.

[kkmzero]

The UI makes me feel claustrophobic every time I use Godot, which is quite often. It would need complete overhaul. I think we can learn something from Blender 2.8. Unfortunately, I'm not UI designer, so I can't point on exact issues and tell you "yes, this is what's wrong with Godot's UI" but I'm sure there are talented people who can make game development in Godot feel less like being locked in tiny box.

Plus, the viewport is completely unintuitive. It's very hard to navigate in your own scene and precisely put objects where they should be unless you manually enter coordinates to object's properties, which is also a horrible task since Inspector window is so cluttered.

[realkotob]

@kkmzero I usually use the editor on a 23" screen and it's fine but when I switch to the 15" laptop it's impossible to use, so I can see how it can be quite bad.

[kkmzero]

@kkmzero I usually use the editor on a 23" screen and it's fine but when I switch to the 15" laptop it's impossible to use, so I can see how it can be quite bad.

I can't imagine working in Godot on 15" screen but this shouldn't be issue on 17"+ screens. In other words, "buy a huge screen" is not an argument for me since UI definitely can be improved. I changed font size settings to smaller values and it immediately felt better but still it's far from optimal. Here is example:

I would love to see numbers with at least 1 decimal place, which is not possible if your value is negative. And I don't really want to resize windows every time I want to change some value, and then again, change them back if I want to work in viewport or write a script. I know it sounds kind of nitpicky but I see it as obstacle in my workflow and this is just one issue from the list. And to be honest, I'd be more than happy to hear what other Godot users think. It's always better to have more views on some problem.

[seppoday]

I like the idea, but I think it's better to think about the whole UI redesign. If we will jump from one spot to another it will be mess.

[YuriSizov]

I think it's better to think about the whole UI redesign

@seppoday It is much more practical to reduce big tasks to smaller, more maintainable tasks. For example, imagine if we changed the whole editor UI. It would be impossible to agree on it as a whole, everyone would like some parts and hate other parts. The discussion would be cluttered and all over the place. But smaller changes can be discussed in detail instead, each change and idea given its time to be polished and appreciated.

[silverkorn]

@seppoday , https://github.com/Calinou/godot/commits/improve-editor-theme ?
It's an "official-ish" WIP that had not been updated since around a month and a half.

[lentsius-bark]

@pycbouh considering your latest work i think we can close this issue as it supersedes this idea and implements the same and extended functionality in a "godot" way.

[Calinou]

Superseded by #3550.