UI Concept for Project Manager

[mindinsomnia]

Hey there,

Just to generate discussion and to experiment, I've made up a proposal for a potential new design for the Project Manager.

I'm not demanding for this to be implemented, I'm just offering it to spark ideas and show potential ways the project manager could be visually laid out differently. My C++ skills are probably not up to scratch to implement this myself and I am not familiar with the Godot codebase to just jump in and try it, so it's up to contributors to decide if they like this or not. You're welcome to take any part of this UI design and use any of it you like and ignore the stuff you don't.

There are a few issues I thought could be addressed with the current UI.

• The 'Godot Engine - Project Manager' label at the top left seems redundant, when that label is already present in the title bar of the window.
• The language dropdown only shows the two letter abbreviation of a language, I felt visually it looked more pleasant to just show the whole word.
• There is a lot of wasted space at the top between the labels, tabs, version label and language dropdown.
• The exit button at the bottom feels redundant when you can just close the window with the X.
• The label 'Project List' in my opinion could be simply 'Projects', it's shorter and cleaner, and visually match the tab next to it which is 'Templates' and not 'Template List'.
• The button labelled 'New Project' similarly could be reduced to 'New', to keep that button similar in style to the previous buttons. The 'Edit' and 'Run' buttons for example don't say 'Edit Project', 'Run Project', so it seems out of place to say 'New Project'.
• Generally speaking it's a rule of UI design to keep context sensitive UI elements close to the things that they are context sensitive to. So on those grounds, I moved the Edit/Run/Rename/Remove buttons onto the list of projects itself, and they appear for each project when the mouse hovers over the top of a row. I also moved the favourite button over to join them.
• I condensed the sort and search by field options into a menu that can appear via a button next to the search box.
• I reduced the contrast of the version number string since I felt that is not a significant focus of the UI, it only needs to be readable for those searching for it, not visually stand out.
• The right column of buttons felt visually unpleasant and asymmetrical, so I turned it into a horizontal toolbar above the list of projects.
• I adjusted the visual alignment of some elements for more consistency.

Overall my redesign frees up space and allows for an additional row even to be visible.

Here is the current project manager:

Here is my redesign:

Redesign v2:

What's everyone's thoughts on this? Is this an improvement or worse?

[fire]

I believe the exit button being touch tapable is a good reason for existing.

How are you able to easily see you can sort the list by name / date etc?

[fire]

There is a lot of space in the middle bar for "new", "import", "scan", "remove missing" to write the entire text rather than remove words. For example there's enough space for "New Project".

Perhaps we can add buttons to the area right of the search for a-z and date sorting.

[mindinsomnia]

Good suggestions fire, I'll adjust the design and do a fresh one.

For the words of the buttons, does that mean the labels would be:
"New Project" "Import Project" "Scan for Projects" "Remove Missing Projects"?

[mindinsomnia]

Based on Fire's ideas I created an alternate version that shows longer labels for each of the buttons and also shows a sort icon and dropdown.

I did experiment with using a similar dropdown visual style to the language selector but I felt the dropdown 'disappeared' when I did that, visually it was harder to see, and a box better highlights the area that's clickable.

Here for comparison is the current, redesign and redesign v2 designs:

Current:

Redesign:

Redesign v2:

(edit: for big images see main post)

[mindinsomnia]

I'll leave it to others to decide when this issue should be closed. 👍

[starry-abyss]

I really like that project-retaled buttons and global ones are separated. I'd prefer "Edit" being the first action in the list though, as it's more important (basically the only button I click in the project manager).

There is also a poor man's way to implement the separation: #25305

[fire]

Maybe rearrange the edit button so it's big, and fav, run, rename, delete afterwards and in smaller sizes.

[volzhs]

isn't "Open" better than "Edit"?

[toger5]

Could the rename icon be directly next to the name label? and only shown on highlight/hover?
Imo the open/edit icon should be alway be visible and more present than the others.

[Anutrix]

Will this be implemented by 4.0?

[mindinsomnia]

@Anutrix Parts of it have already been here: #31356 😄

[mindinsomnia]

@volzhs I agree! In fact I almost made exactly that change, I did have it in the design at one point but reverted it, only because I was trying to avoid changing too much all in one hit. But you're right, I agree, Open would be a better label.

[Anutrix]

@mindinsomnia I know. I have been keeping watch there too. I wanted to know about the rest of the changes in here.

[aaronfranke]

Are there any further improvements you'd suggest now that #31356 has been merged?

[mindinsomnia]

Nothing that hasn't already been said Aaron, I'd still love to see someone have a crack at those context buttons for the project list to eliminate the sidebar but I will leave it to others to decide if they want that or not. =)

[starry-abyss]

I believe if we just move several buttons from right to top, it would be already a big improvement (even without converting the vertical button list to a horizontal one).

[aaronfranke]

I don't see why moving the buttons to the top is an improvement at all. We are not particularly lacking in horizontal space, yet if we have lots of projects we need the vertical space.

[starry-abyss]

It's not about space, currently right column is a mess of everything.
Some of those buttons are global logically, and some are per project.
Good luck figuring out if you're not already a Godot user.

Also as per original post the buttons are to go into the menu row, not to have an additional row for them.

[MarcusElg]

The version 2 looks much cleaner than the current project manager in my opinion

[mindinsomnia]

Hey everyone! Just thought I'd share some thoughts on this and explain some of the design decisions in the mockup, particularly the movement of the buttons from the right to along the top.

Disclaimer: These are just opinions!

The first reason is that I feel there should be a vertical sidebar OR a horizontal toolbar, but not both at the same time. There is clearly a need to present UI elements visually next to the main body of content in the project list, and both a vertical sidebar and horizontal toolbar can achieve that layout requirement, so it is unnecessary to have both.

I also feel that there is more consistent eyeflow to have only a horizontal toolbar or vertical sidebar, not both, as it allows the eyes to flow either vertically down the UI, or horizontally across the UI, whereas the eyeflow of having both sidebar and toolbar is less consistent. I picked the horizontal toolbar instead of the sidebar, because it matches the existing vertical eyeflow of the rest of the UI, including the tabs at the top of the window.

I strived for a visual consistency of eyeflow. The window titlebar and buttons are above the window. The tabs to change from Projects to Templates is above the tab view. The elements to manage and search projects are above the project list. Everything goes from 'top to bottom'.

The next reason is 'visual context', it's always best to have UI elements that are 'logically' grouped together to be 'visually' grouped together as well, and separated cleanly from other groups that are unrelated. You can see that even with Github's comment box UI, with the gaps between buttons that perform similar functions, and they are positioned directly above the textbox to which they are relevant to:

So by that logic, I moved the buttons that manage the global list of projects, close to the 'Projects' UI label at the top, keeping those buttons close to 'Projects' creates a visual connection to enhance the logical connection that the two are related, simply switching the buttons down to the bottom even would break that visual link.

Moving the buttons away from the context sensitive buttons to edit/delete/rename each project also clearly separates two logically distinct groups of buttons.

I then moved those per project buttons onto the project list (Edit, Rename, Delete) to appear contextually over each project, because of again the desire to have the UI elements as visually grouped together as tightly as possible, so their logical connection is very visible.

Visual consistency from a graphic design point of view also motivated several decisions, including the top to bottom flow of the UI, and the heavy focus on left alignment of elements. Consistent flow and alignment of elements is a well established rule of good graphic design and visually pleasing. However it's not possible to completely left align the entire UI, as the window is resizable, to have an entirely left aligned UI there would need to be wasted space on the right, and a visually 'unbalanced' layout. So I used right alignment sparingly to fill empty space on the right with less important UI elements that don't need to be part of the regular reading flow of the eyes (version info, language, search).

I'm not saying the decisions I made are 'correct' and that anything else is 'wrong', or that the current or old design is 'bad'. I believe in graphic design and UI design there is no 'right' and 'wrong', just designs and opinions on what subjectively looks good and what doesn't. I'm just explaining the logic I used for my mockup, hopefully to promote a constructive UI design discussion. 😄

[coppolaemilio]

I love the redesign v2. I would swap the fire icon with a broom since it is usually the icon for "cleaning up" or "removing unused" things.

[MarcusElg]

Hopefully someone can implement this soon... but @mindinsomnia you should probably move this to godot-proposals :D

[Calinou]

Note: When opening a proposal, it should only reference the parts of this issue not yet implemented in Godot 3.2.2.

---

Feature and improvement proposals for the Godot Engine are now being discussed and reviewed in a dedicated Godot Improvement Proposals (GIP) (godotengine/godot-proposals) issue tracker. The GIP tracker has a detailed issue template designed so that proposals include all the relevant information to start a productive discussion and help the community assess the validity of the proposal for the engine.

The main (godotengine/godot) tracker is now solely dedicated to bug reports and Pull Requests, enabling contributors to have a better focus on bug fixing work. Therefore, we are now closing all older feature proposals on the main issue tracker.

If you are interested in this feature proposal, please open a new proposal on the GIP tracker following the given issue template (after checking that it doesn't exist already). Be sure to reference this closed issue if it includes any relevant discussion (which you are also encouraged to summarize in the new proposal). Thanks in advance!

[mindinsomnia]

@MCrafterzz That is my plan, I'm actually working on a much larger proposal for a UI concept and the project manager will be part of it. Will hopefully be finished soon, been working on it for a few weeks now. Will put it up on the godot-proposals repo when it's ready. =)