Improve layout and UX of the project manager - #87443
Conversation
|
If quick settings are added, |
|
Oh wow, I actually really like this idea! The only thing that doesn't convince me fully is, as you expected, the writing on the top left. I feel like the logo is too detailed for the size and the discoverability got worse, like, you can't really know at a glance that clicking it will bring the about screen. Looks-wise, I think that only the text might be less "dense", although I'm not sure how to fix the discoverability point. Otherwise, amazing job! |
|
I like it, the only thing that feels off is that on the right panel all options are about editing one of the projects except for "remove missing", feels like it doesnt belong there |
|
I'd suggest separating the "remove missing" button by putting it at the bottom instead |
I think there was a discussion about it recently. It belongs to the top button row semantically, but it's also a feature that is not needed often. So I think someone mentioned putting it in some three-dot menu in the top row. Or we could do as @AThousandShips suggests. |
|
I like it, though I'm not sure I about the first popup dialog box immediately prompting the user to make a choice about going online or cnaceling out of something. Feels a little pushy to begin a first, fresh startup. |
Yeah, I thought about replacing the dialog with a similar UI placed on top of an empty project list. That could be nice! |
|
Got an idea, so here's pretty hasty mockup (also I'm not a pro UI designer so don't judge).
Always found it sort of weird how opening in file explorer and favoriting are on the projects themselves, At first i thought the folder icon wasn't a button and was just a fancy icon for the file path. Doubt you'll go with this but I hope it at least gives some inspiration. |
|
Icons on the entries themselves has been discussed in the past but this removes a lot of information, the icons aren't always obvious (and tooltips should not contain fundamental information, only additional information), I also find this much busier and less easy to navigate The project manager is the first thing you encounter, including if you've been away from using the editor for a long time, so it should be as clear and obvious as possible, arguably to the point where it gets excessively so, space isn't really at a premium here and we can afford buttons that are very obvious (For one, if I saw the icons and has to guess without accessing the tooltip I'd assume the buttons did: "edit the project" and "rename the project" and not "run the project" and "edit the project") |
|
I agree with your points, though the main things I like from it is it feeling more "balanced" in a way, due to the tabs being centered now, and the simplified tag management (would need a better icon for adding tags when there are none though). |
|
Both Unreal and Unity display a tooltip when you right click on the project entry or on the "settings" icon in the project entry. I don't find it intuitive to have to select the project entry in one panel and have to switch to another unrelated panel to perform actions on the project. Another reason is that this design is very cumbersome to use on a smartphone where you expect to hold down on the project entry or click on some extra icon on the entry itself. Maybe I'm wrong but I feel like 99% of the time you are opening a project or searching for one, not removing/adding/modifying anything about it in the project manager. I want to see more projects and less buttons that i don't touch most of the time. In fact, I would move everything (other than new/add/search) to a side panel. That way you have a LOT more vertical space to show what matters: your projects. And if you make it hideable you'd have a ui that works well on both desktop and mobile. |
You won't see more projects without the sidebar than otherwise, and on smartphones not relying on tooltips is even more important |
|
Every mobile application allows you to hold (or swipe) an entry to display options specific to that entry. None works the way godot works. And yes, removing the entire top of the UI in a left side panel will effectively show more projects. Edit: some typos. |
|
Less than the space for one project is taken up by the top, and just by making it wider we won't have more lines, that would just make things more crowded, most projects don't have names that are long enough to matter that there's a sidebar of not Again, the project manager is the absolutely first thing anyone sees, and that needs to be very clear, I really like how obvious and non-confusing the project manager is, nothing is hidden behind a menu, everything is clearly spelled out, no risk of someone getting confused about what something does or what to do |
|
I don't have a goal to make the editor more usable on a smartphone with this PR. For a decent user experience in such a constrained environment we need to design a bespoke interface. So let's forgo this part of the discission for this time. |
|
I have few questions/issues related to existing and updated design; It will be great if these changes can be taken up too.
In my view, the project manager looks crowded with functionality. I am not sure how many functionalities are really used that regularly. A gut check (or poll) of the usage has to be done and adjust the UI accordingly. |
|
Based on feedback from @theMotionblur and @hmans adjusted the message that appears when the project list is empty. Instead of being put into a popup, it is now always visible in the body of the empty list. You now have two clear actions, one to create a new project, and one to go to the asset library. The note about online connections only appears if you are in the offline mode. I also renamed the "New" button to "Create" to give it a bit more significance, visually. And moved the "Remove Missing" lower in the sidebar, as suggested by @AThousandShips.
PS. I've pushed it as a new commit. Once we are done with iterations, I will clean up commits into one or several but isolated commits, depending on how the discussion goes. |
Yep, this was noted in other feedback and I made some changes, see above. I agree it can be "New Project" or "Create Project" too, if we prefer.
Are you talking about Godot logo, or about project icons? Project icons seem to fit the needed height right now, but I don't particularly have an opinion about the changes that you suggest. This can be done separately though.
As discussed above there are some options here. For now I've moved it lower in the sidebar as suggested in other comments.
I don't see much point in this distinction. It's just a handpicked subset of settings, and it can be changed in future to include other options, not just what I've initially decided to include. I'd argue that the network mode is already falling out of the "Customize" grouping. I also entertained the idea of not having any text in the top-right corner at all. Just a button with an icon. This may make the UI less busy.
I don't have an opinion about that, and it's outside of the scope for this PR.
Sure, but this may make it harder to find in the task bar/manager. This can also be done separately anyway, it's a minor change. |
|
I think this is some excellent work! Had to open the 4.2 Project Manager to check the differences, the new UI feels like how it was always meant to be! I shared this on Twitter but I figured I'd use the proper channel as well. I have a small revision for the blank/no projects UI. I think button contrast and information hierarchization can be improved, and I'd personally add the option to open a project, which I think deserves the same attention as creating a new one.
|
|
@YuriSizov , thanks for the detailed reply.
I don't mind either way, my suggestion was to improve the prominence of the button as it is a primary action. It should stand out from the other array of actions as a UX designer would say.
yes, talking about the project Icons and not the Godot Logo(which in my opinion is awesome ❤️) . Just give a try to reduce the icons size to 2/3 or 1/2 but centered vertically. if it does not feel good, ignore this comment.
Technically you are right. but, I looked into other editors like android studio, and VS code, they have customize. Moreover, if you add the word customize, the debate over what settings to be added in project manager is out. Talking about network mode: honestly, it is not necessary, as when you switch to asset library or news, it should automatically turn on or if you insist, follow the @JoNax97 approach above, although buttons should be link buttons
👍 . I like the gear(⚙️) icon if settings, palette(🎨) icon if customize Anyway, it is awesome work. Keep it up. |
The point is that it won't automatically turn on. Not unless you actively choose to go online as a user. In the current implementation if you click the "Open Asset Library" button from the empty list suggestion, it will auto-enable the online mode (which is why in the older iteration it spelled "Go Online and ..."). It should be acceptable because we have a note right next to it, explaining this. But when simply switching to the asset library tab it won't go online by itself. If it would, there would be no point in the feature to limit online connectivity. |
6f2e12e to
099e467
Compare
|
Adjusted formatting of the empty message a bit and added the import button too. I think it should be good enough for the purposes of this PR.
|
|
Addressed feedback.
|
|
I think the note about Asset Library is not necessary since the button says "Go Online and Open Asset Library". It could be shown on the Asset Library page when in offline mode. The description text also feels unnecessary, it's just combing the three buttons' text into a sentence :P The three buttons feels floating now (don't belong to the list area) compared to those shown in #87443 (comment).
|
There was a problem hiding this comment.
Is the notify_changes() necessary? We use it only in the settings dialog (and there are more places where settings are changed).
There was a problem hiding this comment.
I think without that the notification isn't sent, and I rely on it elsewhere.
There was a problem hiding this comment.
I remember simply modifying the settings would cause propagation and saving automatically, but maybe it has changed.
There was a problem hiding this comment.
Supposedly doing set/set_setting should emit a signal which the editor settings dialog connects to and triggers the notification and then save on 1.5 second delay. I'll double check.
There was a problem hiding this comment.
Okay, so it works. But the delay makes it awkward. You click the button, and for a couple of seconds nothing happens. So I'll keep it for the buttons that are supposed to force the setting immediately.
|
I'd suggest removing the "Note:" from the asset library comment, it makes it look like a dev/code comment. |
This turns custom font theme properties into a proper variation, which makes applying it simpler.
This PR also adds default font styles for RichTextLabels in the editor, and improves the introduction dialog when you don't have any local projects available. The offline mode is implemented in the asset library plugin, alongside some code improvements.
Currently it allows to adjust language, theme preset, UI scaling, and network mode. Project manager has been updated to support dynamic theme updates.
9b5487c to
f923b58
Compare
|
Seems like we're in a state where we can consider merging this. I updated commit messages to signify that. We agreed with the production team that the overall separation of commits makes sense. I removed the "News" tab to avoid giving false hope to people until we actually decide to add that. It was a teaser after all :) I also made some changes suggested by KoBeWi above while rebasing. Overall impressions seems to be that the change is for the better, but some details may need further discussion. Opinions about the logo are divided. Some love it, some don't really like it; some find it out of place, especially when the window itself has an icon and a title. Let's see what early testers think. The rudimentary offline mode seems like a welcomed addition (which needs to be extended to other parts of the editor), however it is not a replacement for a proper sandbox. In a future PR I will also add API for plugin makers to fetch the current mode and request a popup to ask the user to go online to enable their plugin's features, if required. |
|
Thanks! Great rework both design and feature wise 🥇 Let's see how the community likes it :) |
|
I generally like the redesign (although the logo feels tacked on somehow), but I think it's crazy to set defaults that are useful to only a tiny fraction of users. Seriously, how many people actually care about the privacy implications of a program checking for updates or downloading the latest news posts? It has to be in the 0.01% range at most, surely. Why wouldn't you make it a CLI option for those people and leave sensible defaults for the rest of us? Think about it this way. If checking for updates automatically is a problem for your privacy, you're already well and truly screwed by a thousand other pieces of software. You couldn't use the internet at all. |
|
So your logic is "you've already got tons of software tracking you, what's one more?" How is that helpful? Also plenty of people care, despite it not being something you can fathom, and it's not like it's this huge thing to have to enable something once... |
|
No, my logic is "Godot isn't tracking you so why would we make offline mode the default when 99.99% of people will want online mode?" Browsers and websites are the real privacy issue. Setting Godot (of all things) to offline mode by default literally solves nothing. I get caring about privacy, but this isn't about privacy, this is about setting defaults that apply to only the smallest number of users. There's no way to justify that that I can see. You say it's not a hard thing to enable once? True! Why don't we just disable mouse input by default and give keyboard-only users the default they've always wanted? You only have to enable the setting once, right, so who cares that the default is only useful to a tiny fraction of users? (And yes, this is a massive exaggeration, but you get where I'm coming from, right? It just seems crazy to me.) Truly caring about privacy is a huge amount of work that very, very few people are willing to put in. People just want convenience... even game devs using open source engines. (This rant is courtesy of a long-time desire to see Linux become mainstream combined with frustration at Linux devs for their total and complete lack of understanding of and focus on what normal people actually want.) Edit: I guess really my point is that being online isn't automatically a breach of privacy, so what's the reasoning for being offline by default? |
|
You do understand that there's more reasons for not automatically going online right? Like not doing random downloads on a slow or metered connection... But since you're making complete strawmen like:
I'll bid you a good day... |
More than most, yes! I've had slow, metered connections for many years and experienced the frustration of not being able to disable automatic updates. However, even on my most limited internet I never thought a program should start in some fully offline mode, only that it should have the option of limiting how much it downloads (mostly, I cared about not auto-updating). But that's entirely beside the point! Godot isn't wanting to do automatic updates, only automatic checking for updates. Godot will never automatically update because it can't; it's a game engine and upgrading your project is often a major undertaking. And yet again, as I've said multiple times now, I'm not suggesting we should remove the offline mode, only that it shouldn't be the default.
That's not a strawman. That's just getting across how ridiculous the choice seems to me. If you want to ignore my real arguments, that's cool with me. I've said my piece and I'm happy to leave it at that. |
|
Remember that Godot is backed by a foundation based in the EU, so we have to be GDPR-compliant at the end of the day. One of the points of GDPR is that you need to ask for explicit consent to do anything that deals with personal data somewhere in the pipeline. Checking for updates requires sending a HTTP request which exposes your IP address to an host, so that's why you need to opt in. |
|
I'm not trying to be contrary, but that's a stretch. While IP addresses are typically considered PII, sending your IP address to a host without explicit consent is not automatically a breach of GDPR, especially if the IP isn't logged. You don't need user consent so long as you have a "legitimate interest". Even if you're logging IPs, it probably counts as "legitimate interest" so long as you're doing it for a good reason (and if you're not logging anything it definitely counts). IANAL but see article 6.1.f. Either way, a Network Mode switch doesn't constitute user consent to processing of PII, so if that's your concern, this is not an appropriate way to resolve it. |
|
This change is only in part about privacy, and more about security. For privacy, we probably want to link/display the privacy policy before going online (so this PR is at least a step in the correct direction). The security concern is about how certain functionalities of the asset library (and soon Editor Help - WIP in #69751), depends on content hosted on third party websites, over which we have no control. In general, the Godot Asset Library does not store any content, which is instead hosted on github, gitlab, or other third party site. This means we have no control over e.g. the images that are used as icons, or screenshots when displaying the asset list in the editor. Since there have been in the past multiple remote code execution vulnerabilities in image handling libraries, we believe it's safer to not force the risk on the user immediately after selecting the "Asset Library" tab (which can still be used to install local assets). |
…r-cousin Improve layout and UX of the project manager
…r-cousin Improve layout and UX of the project manager
20 participants
Introduction
For a few months now I have been thinking about how the project manager feels unpolished and is not a very good representation of Godot's editor UI. I considered that we already have established a nice basic layout with the editor itself, and it's would fit very well into the project manager. I also considered that this would be the least controversial way to update the project manager right now, since such a change would make it resemble the editor more, rather than try to push for something completely new.
With a redesign it's important to keep in mind not only what we want to provide right now, but also what we want to achieve in the future. There has long been talks about such features as an update checker or a news feed from the official website. At the same time, we wanted to improve the way how we handle privacy within the editor and its online features. These two goals are naturally at odds with each other, so it was also my task here to address them together and provide you with a full picture.
And finally, the project manager is currently lacking in the configuration department. You can only change a language, but not other settings which may be important when you first launch Godot. Such settings can be the editor UI theme and the display scale. These not being configurable from the getgo negatively affect user experience. I wanted to address this as well.
So I started with some rework weeks ago, and was able to finally finish it now.
Features
A refreshed look based on the "main view" design of the Godot editor itself.
The tab container has been replaced with the familiar view switches, which grab your attention much better. This should help highlight the asset library much better than before, where a tab for it would be smooshed and lost. Not much is different about the layout itself within each tab, since recent additions (as of 4.2) already make it more organized.
We currently have some issues with keyboard navigation, which this PR doesn't fix. But it's something that we should definitely look into later.
The top bar is split into three parts, which tie the overall look together. In the middle you have the tabs to switch between the project list, the asset library, and potentially more views. As a bait I've added a yet disabled "News" tab to give you all a better idea of how it might fit in. I am fully committed to implement it, if we agree on having it. Or it can be done by someone else too. Not in this PR, but as a follow-up, and, again, only if we agree. I can remove it from the final version of this PR if we don't agree or if we decide that leaving it disabled like that is not a good idea.
On the left I've added a Godot logo, just as a stylistic choice. I think it adds some character to the overall look, but I'm open to change it to something else. We can switch to a different logo (say, only text without the cute robot), or remove it too. But I'd like to insist on keeping it, or at least coming up with an alternative filler for this space. The logo acts as a replacement for the old "About" button.
On the right the old language selector is gone in favor of the new Quick Settings dialog button. More about it below.
The version string is now at the bottom. @KoBeWi's update checker (#75916) can be moved there as well, to alert users in a non-intrusive way. The new footer bar does take away from the vertical space, but in a recent PR I have actually fixed the size application in the project manager. So in the 4.3 branch it actually has more vertical space to work with by default than in 4.2 and before. That was actually a bug I discovered while working on this, and I think that combined these two changes result in plenty of space left for the project list.
Finally, I'm also trying something with the welcome dialog that you see if you have no projects. I think it's a good direction, but I'm not sure if I like the result insofar. But we can always improve on it later.
A new Quick Settings dialog to adjust more than just the language.
While there is a PR (#82212) to bring the entire editor settings dialog into the project manager, I find this solution to be overwhelming for the majority of use cases where you need to configure something before launching the editor.
Instead I propose that we provide a small and local dialog which allows customizing only some of the settings which may be immediately useful, especially when you start Godot for the first time. I've decided to stop at the language, scale, theme, and network mode (more about that one below). It's a bit of a custom UI, but it's easily to implement and maintain, and it allows users to quickly edit the most useful visual settings which directly affect their experience with the project manager.
If we still want to provide the full editor settings dialog in the project manager, I think it can be added on top of this Quick Settings dialog. We can add a button to the Quick Settings dialog which would bring the full dialog up, and I think that would be sufficient compromise for those who need to tinker with some deeper laid settings.
There is, of course, an argument for having a "basic" toggle in the editor settings. But from my experience with the project settings dialog this toggle doesn't significantly help with the user experience. We reduce the number of settings (while also hiding some useful ones, arbitrarily), but the navigation still sucks. It's not a tailored menu, it's still a verbose list, which is not too clear to navigate. So my proposal is to add a tailored menu first, and then maybe add a shortcut for the full menu on top of it.
The network mode setting to bring the editor offline.
With this PR we will start in the offline mode by default. This means that the asset library won't be making any web requests, not until you let the editor go online. The same will apply to future possible features like the update checker and the news section. The same should probably apply to the dialog which allows you to download export templates, and other editor tools with online activity, but pardon me, I haven't implemented it in this PR for simplicity's sake.
The idea is that we don't want to break privacy for users who are concerned about it. And we also want this to be as small of an obstacle as possible for the rest. So besides a new editor settings all UIs which need online activity should offer a way to switch to the online mode with one click.
Added to the "Network" group of settings "Network Mode" currently has two options, "Offline" and "Online". I consciously made it an option list because I can imagine there being a need for a less binary configuration, with some partial mode to allow some connectivity (e.g. only from the Godot-hosted sources).
This feature should make it less controversial to add the update checker and the news tab, or other such features, in the future. It should also replace the adhoc flag from the update checker PR (#75916), as it provides a more universal solution for the editor to go completely offline.
I've kept commits separate as I fully expect some bikeshedding to happen, some rejections to occur, and some ideas to be cut or to be asked to be split out. Each commit is self sufficient and should make it easier to review, but what I should do with them next is up to the consensus of you all.
To close things off, here's a short demo of how the first time experience might look like now.
godot-pm-demo.cut.mp4