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.