Project Manager & Project List UX improvements

[mgdawber]

I've noticed a few things which could be improved upon in the Project Manager & Project List, and I've given it a go with implementing them. Please let me know your thoughts!

Update: The design draft has changed quite a bit since the original comment. I've hidden it away within this details section.

First Draft

Main Changes

• 'Manage Tags' should have it's own icon - at the minute it's using the 'script' icon.
• Both the Tags & Icon buttons (Favorite/File Explorer) are not clear that they are clickable upon first glance, as they both use non-standard button styling. In this proposal, I've removed the custom styling, and moved the the tags closer to the project name and file path.
• Improve the hover aspect of the buttons so that it's less drastic when hovering over the icon buttons (It clashes with the project hover highlight) & some have inconsistent states.
• Reduce the font size of the main project title to be more consistent with the rest of the information displayed.
• Add a tag icon, and move the favorite icon so that it sits next to the project title, forming a vertical bar of buttons - it's easier to see that they're clickable.

Vanity Changes

These changes are definitely not needed and are a personal choice, but no harm in presenting them 😜.

• Change the Favorite Icon to a golden colour.
• Remove the Sort Label and give the sort option a minimum width to coincide with the project manager options. (This isn't great, I just like the way it lines up.)
• Remove the random colour attached to a tag. I really like the idea of this, but think it could be implemented in a manner where the user can assign colours to tags to add meaning. Give tags red for 'Abandoned', 'Needs Revision', or orange for 'Draft' etc.

Before & After:

Before & After (Hover States):

Screen.Recording.2024-02-18.at.10.29.17.mov

Screen.Recording.2024-02-18.at.10.34.52.mov

Latest version as of 20 Feb 2024

Latest versions as of 26 Feb 2024

Please let me know your thoughts, is there anything that you like/dislike? Thanks!

[Calinou]

While it looks good aesthetically, one issue I have with displaying tags below the project name and path is that it increases the height taken per project. People may have hundreds of projects in their list, so we need to fit a reasonable amount of projects per page even on small displays to avoid an excessive amount of scrolling.

There may be ways to optimize this (such as decreasing the spacing between name/path/tags or displaying tags with a smaller font size), but preserving screen real estate is important.

Remove the random colour attached to a tag. I really like the idea of this, but think it could be implemented in a manner where the user can assign colours to tags to add meaning. Give tags red for 'Abandoned', 'Needs Revision', or orange for 'Draft' etc.

The reason tags have randomly assigned colors based on their name is that it allows standardizing the colors across projects. Otherwise, users would have to manually define tag colors in the editor settings (as opposed to project settings), which would result in tag colors being inconsistent across users if they are editing the same project. Defining tag colors in project settings would be problematic, as it would allow using different colors for the same tag in different projects (therefore nullifying the usefulness of colors to ease visual grepping).

While this approach takes away control over controls from the user, it's more reliable and deterministic for all users.

[mgdawber]

ah thank you for the response, that makes a lot of sense now!

I've made another scenario with the adjustments in place, putting the tags back.

[passivestar]

Sorry for hijacking the discussion, but since it's about the project manager ui/ux in general I'll share some ideas here, maybe you'll find something useful:

1. Having a sidebar for operations is completely avoidable. Right now you need to click on the project and then click edit/run/rename/whatever, which is 2 clicks. You can put those into an ellipsis popup menu drawn on the right of each project entry and it will still be 2 clicks, but you'll be able to get rid of that sidebar. The popup menu can also be called via right click. Even better you can take the commonly used ones out of the popup menu (like remove) and make them icon-only buttons on entries, and leave rarely used (like rename) in the popup menu. That way removing becomes one-click and you can remove multiple projects quickly

2. The Edit button probably shouldn't exist when you can double click entries. If you remove the sidebar with its "click on entry then click on button" workflow you can even change it to a single click if you want

3. The folder icon is unnecessary when you can just make the path string itself clickable (it wasn't obvious to me that the folder icon is a button anyway, especially before this redesign)

4. Manage Tags popup probably shouldn't exist. When you hover over a tag it could show you a small cross icon in it to remove the tag. To the right of the list of tags there could be a small button with a "+" that lets you add a tag inline. Sort of what you'd usually see in web applications when editing content tags

5. The Filter Projects input field is too wide, there's no way you're typing that much in it. It should have a cap on max width. It's better to have whitespace, otherwise it won't look good on large monitors

6. The Create button is more important than all of the other buttons, it should look different, i.e use an accent color. It's the primary action you perform in that window unless you're opening an existing project

7. This is minor, but personally I'd change the Settings icons to a cog because it's more widely adopted for settings in other apps so it's easier to recognize

Some feedback on your redesign:

1. I like that you made the tags less contrasty, they are supposed to be metadata and they were drawing too much attention. I'm not sure how I feel about the original design with the stripe on the left though, I would have probably experimented with some other options (i.e stipe on the bottom/top, solid colored background, corner radii, etc) because I'm having trouble identifying what the stripe belongs to at a glance, but this might be subjective

2. I like the colored stars. Maybe could try keeping the disabled ones monochrome though

[passivestar]

if you take OS file explorer as an example, there isn't an "action bar" with all common actions you can do in bulk mode. You select the files and the right click on it to do your action

Yep, or a long press on a touch screen

It doesn't take much to make an app that's easy to use when there's already an established interaction language that all of software has been using for decades. If you use that, the UI gets out of the way and users can focus on making games, it's as simple as that

[KoBeWi]

Some notes from me:

• Personally I run the projects from project manager relatively often, when the project is an app and I want to start it, or when I want to test a project in another version of Godot without editing it. In contrast, I almost never delete projects. I think having Run button available on project entry would be useful, more than the Delete button.
• The main reason why tags use a dialog (other than it was easier to implement :P) is that the dialog shows all tags used by your project, so you can easily assign tags that you use in other projects. Will the inline adding support it?
• For the record, full color tags was their initial design, but it was changed to the current one after feedback (Add project tags godot#75047)

[passivestar]

The main reason why tags use a dialog (other than it was easier to implement :P) is that the dialog shows all tags used by your project, so you can easily assign tags that you use in other projects. Will the inline adding support it?

Inline editors usually use autocomplete to show all tags. They could also be sorted, most commonly used on top. Realistically if I was @mgdawber I would probably keep the Manage Tags thing in the right click / sandwich menu for now, and add the inline editing separately at a later point, because it will probably be a lot of work

[EmrysMyrddin]

@mgdawber Ah, this version of the bottom bar is really better :-) Perhaps we can make it appear only when at least 2 projects are selected ? Or just 1 if we really want to show that there is the possibility to have bulk actions. I've seen this pattern in multiple Apps :-)

I really think that what a new user would expect from this screen is double clicking on a line opens it in editor. So would probably ok to add a "run" button in place of the "remove" button that was present in previous mockups ?

[EmrysMyrddin]

As a note, I would probably not make the Run button the accentuated button. Edit is probably a better feat for it, since it's the main purpose of this software.

And perhaps the Delete button should show some danger, like with a red-ish color ?

[Ledracarnos]

I find it frustrating to add tags by opening an additional window, I have no idea what to do next, just a "+" button.

[atirut-w]

The + button could be moved to the right for a more consistent position

[Ledracarnos]

I don't know, I'll put the result here just in case.

[mgdawber]

Nice, definitely think it's something worth considering - I'm working on a branch to test the feasibility of the overall design and think this might be better to look at separately so I'll leave it out for now, but I had an explore of what it potentially could look like as a simple dropdown anyway!

The scale is a bit off, but the idea is there at least

[Ledracarnos]

I think the new design is better, with the star button more discreet. I think it's a good idea to hide the "remove" button.
However, I'm not convinced by the run button on the right, I feel like I'm listening to music on spootify.

What's more, I don't see the "edit" button. I think the user has the right to ignore the fact that he can double-click on the project.

If an execution button is to appear on the project, it must, in my opinion, stand out from the button with the three little dots.

Also, have you thought of making the edit/run button appear only when the mouse hovers over the project?

[mgdawber]

Hah, it does look like music tracks :p

My worry was that hiding the run button and only appearing on hover/selected would cause the tags to jump, unless we gave the run button static space, but that might look a little odd. Though now that you mention spotify and only showing play on hover.. could always do what they do.. 😆

[Ledracarnos]

I'm not convinced ^^'''
I think the contextual bottom bar is a very good idea, maybe even sufficient. But we need to gather more opinions.

edit: Looking at all the feedback, I think a bottom bar that's always visible is a very good idea.

[davthedev]

I think the icons-appearing-on-hover-or-select does not play well in a list of contents where you can select items, having the selection click not doing any actual action other than selecting the items.

This pattern is really a web thing, commonly associated with lists that have no concept of "selecting items". Only thing you can do is click on the individual actions proposed on each row.

Something also coming in mind: I get it that this is a mockup, but make sure to give a different look to buttons and text input fields at the end of the day. Those do not behave the same; thus those should not resembling each other with the same background and border style - different text styling is not enough because the text field can be empty, or hint text may be confused with a disabled button.

[mgdawber]

Here's a version which is a bit less minimal, akin more towards a file explorer.

I've tried to collect actions into groups:

• The top left bar is for adding projects.
• The top right of the bar is for project actions. The text is to give a visual cue that these can be batched.
• And the list container bar for sort/filter/list view.

I've resized the mockup to a more appropriate size (1280x823) so we can see what the padding looks like, and populated the list fully.

[passivestar]

this layout is interesting. are you sure the Run button is as important as the Edit button and needs color?

[Ledracarnos]

It's always a pleasure to see the evolution, it's really better, I don't know what to say.

Among the ideas proposed, this one was interesting, it makes it clear that the options are clickable.

Maybe these outlines could appear when the mouse suvoles them.

As for the run and edit buttons, I really like them, but it's true that they can be confusing. But is it the colors or the names?
Shouldn't the "run" button be called "play"?

Edit : Perhaps a clearer hierarchy is needed.

Sorry for the drafts ^^

[mgdawber]

Yeah it was probably a bit too much - I've updated and switched them round :)

[davthedev]

Nice demo for a compact mode! When having dozens of projects in the list, this can help finding our stuff quicker!

Perhaps make the selected item have a different color than the frame so that it is not fused with it, for example a shade of blue that stands out more. Or the first item may appear to be fused with the toolbar when selected.

Maybe these outlines could appear when the mouse suvoles them.

Yep, each actionable element should have immediate action feedback with hover and pressed / "button down" appearances. But, be it an outline, a bg color change, there are multiple creative possibilities to try out.

a more appropriate size (1280x823)

Keep in mind that the window should work well on small screens too, therefore any resolution should be appropriate in theory. Something too much overlooked in this era.