Collapse the top menus

[nunodonato]

Taking advantage of the current UI changes being done for 3.0, I was thinking that we could also improve the menu buttons on the top.

Currently, the top-left is occupied by

• Scene
• Tools
• Export

Tools only have one item, making it actually kind of like a button. Export is a button, not a menu.

On the top-right:

• volume bar?
• settings
• weird icons that nobody understands what they are for :p

I thought in 2 different proposals for a change:

1. Collapse the top-left buttons into just one, maybe call it "Project"?. This means the scene menu will have 2 more items, and we get rid of tools and export, which are seldom used anyway.

2. Since the space is not being used for anything else, make a more functional menu "bar", and split some items into different menus to make things easier to find. I'd also bring the Settings menu on the right, to join the left side. Project settings could be inside it, together with Editor Settings

WDYT? :)

[toger5]

Oh didn't think about play as restart... I guess you are right!

[novemberist]

Is the AssetLib really an important enough thing to deserve its own place in the top menu? i don't think it will be used/toggled nearly as frequently as any of the other things and could very well be moved elsewhere. (not a big fan of the "shopping bag" icon by the way)

[novemberist]

Nevermind my ugly mockup, but would it be (technically) possible to align the two menu sections vertically, like so. maybe this could solve some of the balancing issues:

[nunodonato]

either it would be hidden with the tabs on top(when you have lots of them open), or you would waste space with another vertical line

[Zireael07]

A thought from me: I find myself using undo/redo (esp. undo) a lot of times. Could they get moved out of scene menu and into the menu above the scene view, maybe afer the view submenu?

Mockup for clarity. You guys are making me relearn a ton of skills (first c++ and now image editing :P)

[stephdin]

Great ideas everyone, keep em coming :+1: I just want to add my 2 cents: Maybe moving "Viewport, Script etc. " above the tab next to the fullscreen button. Then we can keep the "Play Button" in the middle and "Help" to the right.

edit: This way, it would also be clearer, that these buttons affect the content of the tab

[nunodonato]

@stephdin I like this idea! the text could also be collapsible in case there are many tabs open at the same time. I also like Help in the top right :)

[novemberist]

@stephdin I like it visually, but it would probably also cause problems when there are too many open tabs as stated by @nunodonato

[toger5]

I actually really like @stephdin 's approach. this already was proposed somewhere else, concerns were, that the space is valuable for tabs. which is correct although it is not my work style so I can't really feel it...

• I also think this has the benefit, to be close to 2d/3d toggle which makes sense.
• it also feels right that changing the tab from script to 2d changes the setting on the right. (thats better than a change at the top)

@nunodonato yea the collapsing is a good idea. maybe it shows text when there are only a few tabs and it switches to just icons when there are more tabs. (it's only 4 icons so it only takes the space for one tab which is not an issue)

[toger5]

A different Approach:

what if there are just two default tabs for script + asset store. because they basically behave like one tab. all the scripts are ordered in the one script tab... and you also are at the same location in the asset store. Think of it like pinned browser tabs.

we have those two default tabs and as soon as you switch to a scene it (of course) shows the viewport.

[stephdin]

As mentioned by @nunodonato, the text could be collapsed, if too many tabs are opened. I don't know if scrolling could be implemented, like its done in Sublime Text or Atom

[eon-s]

With @stephdin style, AssetLib could be on the left of help too (top right), it will be used a few times per project.

[volzhs]

yeah. we can move assetlib to somewhere if assetlib is shown as popup window like project/editor settings.

[stephdin]

I quickly created some mockups for @toger5 s idea:

But i think i like it more as buttons on the right side. Moving the AssetLib next to the Help Button is great Idea imho

[toger5]

Here is a mock:

• moved script and asset lib to a tab on the right (because they are basically tabs, you can't have multiple script tabs)
• added fullscreenbutton inside the main view: fullscreen is specific to script, asset lib -> it makes sense to be in there
• help on top right is cool ;)

[toger5]

@stephdin lol Thank you! I also made mocks... moved the tabs to the right though.. so they are basically buttons... if asset lib is on the top right corner could work really well. It also has a other priority and use case than script and scenes. next to help Is great

[volzhs]

@toger5 nice mock, but we need to show which scene tab is active one. because "Scene" dock shows active scene.

[stephdin]

@toger5 Having these "fixed tabs" on the right like in your mockup looks way better :D

edit: "added fullscreenbutton inside the main view" -> Thats also a good idea

[eon-s]

Also, remember this option (show_script_in_scene_tabs):

Do not make script button redundant near the tabs.

[toger5]

@eon-s It would not really be redundant since the script button on the scene tab brings you to the attached script, the script button on the right to the current edited script or hep page. @volzhs good you mention this! we might want another style box draw_center = false

[volzhs]

@toger5 what about making assetlib as popup window and put it on top right corner (beside on help on your last mock), and just put 2d / 3d / script / full screen on top right corner of main(center) panel?

[toger5]

asset lib as popup is great I think. I think it makes more sense if the viewport changes automatically. I don't see a need for a 2d/3d button . There just needs to be a way to get to the script editor. (if assets are in the popup) thats it.

[stephdin]

okay, i think this is my favorite:

• AssetLib and Help on the top right
• AssetLib as new window
• "Viewport" instead of "2D/3D" (automatic, but with "2D/3D" button in the tab header)
• "Fullscreen" button in the tab
• Text collapse when to many tabs are opened
• Changes that were done to the menu (Scene, Project, Editor) are great!

[toger5]

@stephdin I like that too but when would u use the viewport button... If I'm in a scene I'm already seeing the viewport. If I'm in the script editor. I could switch to the last scene, but why not just press on the scene itself? the tab on the left. would free up space, and also makes more sense to me. There just needs to be an indication which tab is currently active. as volzhs mentioned it Is important for the scene dock.

[novemberist]

@toger5 I don't think pressing on the scene itself should automatically switch to the scene's viewport. sometimes you might want to keep the script editor open and switch scenes (e.g. to view the node tree), without returning to the viewport, so having a seperate viewport button makes sense, I think.

[toger5]

@novemberist Very good point. was not thinking about that. You guys definitely have the stronger points. than I'm all on @stephdin 's design

[reduz]

1) Sections need to be presented as text, icons are not clear. 2) Assetlib is a section, there is no reason to remove it 3) Again, look is less important than discoverability

You guys are trying to solve a visual problem related to look, while I'm interested in Godot UI being friendly to newcomers..

On May 23, 2017 7:26 PM, "novemberist" notifications@github.com wrote:

@toger5 https://github.com/toger5 I don't think pressing on the scene itself should automatically switch to the scene's viewport. sometimes you might want to keep the script editor open and switch scenes (e.g. to view the node tree), without returning to the viewport, so having a seperate viewport button makes sense, I think.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/godotengine/godot/issues/8865#issuecomment-303550418, or mute the thread https://github.com/notifications/unsubscribe-auth/AF-Z27_tsJaJ8njXaHuib0OmMnynjTMMks5r810PgaJpZM4NidqG .

[toger5]

Or we make that an advance option, alt press on scene just switches that to the active scene. (for node tree) click brings you to the viewport of that scene

[novemberist]

I think the latest concepts were using both icons and text, so things should be clear enough. tooltips could provide additional clarity. I think we're trying to find a good middleground between discoverability and visuals of the UI here, rather than favoring form over function. @reduz do you think the latest mockups would be less accessible for new users than the current UI?

[reduz]

Yes, they are. There needs to be a connection between sections and section buttons, which is why play buttons need to go to the right.

On May 23, 2017 7:43 PM, "novemberist" notifications@github.com wrote:

I think the latest concepts were using both icons and text, so things should be clear enough. tooltips could provide additional clarity. I think we're trying to find a good middleground between discoverability and visuals of the UI here, rather than favoring form over function. @reduz https://github.com/reduz do you think the latest mockups would be less accessable for new users than the current UI?

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/godotengine/godot/issues/8865#issuecomment-303553499, or mute the thread https://github.com/notifications/unsubscribe-auth/AF-Z2_Df8Q6LBHLvzOO3QqlaPoJ_0LSBks5r82D4gaJpZM4NidqG .

[Zireael07]

Yes, they are. There needs to be a connection between sections and section buttons, which is why play buttons need to go to the right.

@reduz Not sure what do you mean by sections here?

Either way I don't have a preference regarding the play buttons (but I still think Help in the right corner is a good idea, so the play buttons could go to its immediate left)

mockup:

[HummusSamurai]

It feels rude to post my opinion since you guys are all doing the (awesome) hard work, but I still prefer the one @reduz suggested earlier, with Section buttons in the middle and Play buttons on the right:

Shoving the Viewport & Script buttons to a corner doesn't seem like a wise idea, and putting AssetLib & Help on the right with the Play buttons seems neither visually appealing nor logistically sound:

[toger5]

I definitely can life with all of them. And having the top center for the different modes might be good. since reduz sees that as the easiest structure for beginners to navigate. (might be right...)

[nunodonato]

these are my changes so far (real stuff, no mockup :)

[novemberist]

I know this is not really up for debate and I don't know a lot abot UI design, but from a personal user experience, I find the play buttons on the right rather off-putting and disconnected. That said, I can' really see how this would improve discoverability. Also, if I'm not mistaken, pretty much every other engine around has the "play,pause,stop" buttons centered - so people coming from e.g. unity will feel instantly at home whenever they see them there and might be confused otherwise. As to the importance of the so-called "sections" - I don't really get why they are considered so important, they have to be cramped together in the center. Aren't they just different "view-modes" and/or editors after all? I think people will easily figure out where to find those (plus there are often multiple ways to access them anyways) and don't see how a more modern approach of placing GUI elements in contextually sensible places instead of throwing them right in your face, degrades the user experience in any way. I would argue that this is especially true for the "fullscreen"-button, that doesn't really get you to a new section at all and really should be places elsewhere.

[reduz]

@novemberist no, only Unity does:

Everything else is a mess, Godot is much cleaner in comparison. I'm pretty sure you will get used to it eventually..

[reduz]

@nunodonato I really like it myself, feel free to do a PR if you want. I still am not sure what to do about the remote menu, should it become a regular menu on the left? because I think most people totally skips it..

[akien-mga]

Man, Godot 3.0 really has the slickest theme of all game engines on the market :D And I'd say 2.1 already had the best looks, it's just getting better. Years ahead of the competition :P

[nunodonato]

@akien-mga agreed :)

@reduz moving the remote stuff to a menu makes a lot of sense too, instead of the button. Will give it more visibility too and we have menu-space to spare :)

[toger5]

yea other engines look soo shit... no idea why ppl use them ;)

[novemberist]

I hope placing the 2d/3d viewport switch elsewhere and going with a single "viewport" button in the top menu isn't completely off the the table too, though. i really kinda liked this. though it might lead to the confusion that 2d-nodes can be also viewed in 3d and vice versa...

[stephdin]

Just a quick idea, "play edited scene" and "play custom scene" could be put in a dropdown, like in IntelliJ And maybe change the debug icon to something more familiar, or in a extra menu =)

[reduz]

Problem is, it's not a debug icon, it's a remote icon.. nothing there is really related to debug. Debug panel is where debug stuff is

[nunodonato]

@reduz moving the debug button was a great idea :) We just need to find a better name for it

[reduz]

Definitely think "Debug" is misleading, I would rename to "Run"

On Wed, May 24, 2017 at 10:08 AM, Nuno Donato notifications@github.com wrote:

@reduz https://github.com/reduz moving the debug button was a great idea :) We just need to find a better name for it

[image: screenshot from 2017-05-24 15-07-43] https://cloud.githubusercontent.com/assets/1642015/26404595/706f0328-408a-11e7-9f73-73f7513b8880.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/godotengine/godot/issues/8865#issuecomment-303718385, or mute the thread https://github.com/notifications/unsubscribe-auth/AF-Z2wod6j5pU9okMXcmsDXC4NQtkVi0ks5r9CvkgaJpZM4NidqG .

[vnen]

I think "Run" is even more misleading. Users will think there will be buttons to run the game. Maybe "Run Options" could work. The current tooltip for it "Debug options", which could also be used as the menu name.

[volzhs]

"Play with..." maybe?

[nunodonato]

@vnen I left it as debug for now. But I agree that Run is very misleading too. The problem with 2 worded menus is that the 2nd word can be mistaken for another separate menu item. perhaps that spacing could be improved?

[stephdin]

"Configuration(s)" ?

[nunodonato]

ok, moved the distraction-free button to the tabs bar

this was my last change to my PR. Messing with the 2d/3d buttons is beyond my understanding right now, so if someone else wants to handle it... :)