Comfy-Org
[UI/UX]: New UI's unnecessary changes: new menus and rows
Prerequisites
- [x] I am running the latest version of ComfyUI
- [x] I have searched existing issues to make sure this isn't a duplicate
- [x] I have tested with all custom nodes disabled (see how)
What happened?
New UI has important features hidden in menus, for example:
On top of that, workflows tab is now always on a separate second row, which clutters the space on screen and reduces the amount of visible information (which is important for workflows).
Steps to Reproduce
Update to the latest ComfyUI.
How is this affecting you?
Visual/UI issue only
ComfyUI Frontend Version
1.25.9
Browser
Chrome/Chromium
Console Errors
Logs
Additional Context
No response
┆Issue is synchronized with this Notion page by Unito
Also, this new menu is very lackluster, it needs "Save" and "Save as" buttons, since you've hidden them:
I agree about Save and Save as being in the Workflow's dropdown menu.
I suggested a new Workflow options layout and a Comfy UI member, @PabloWiedemann, agreed with that ( https://github.com/Comfy-Org/ComfyUI_frontend/issues/4555#issuecomment-3129123232 )
So this may happen in the future.
About the double Topbar, we have to make a compromise, I guess.
A single Topbar it's not enough, if we want all the features: multiple workflow tabs; subgraph tree; queue menu in the Topbar; multiple extension buttons / displays ( e.g Crystools ).
And we already have a layout alternative with a single "full width" Topbar + Workflow tabs: Topbar (2nd-row)
A single Topbar it's not enough, if we want all the features: multiple workflow tabs; subgraph tree; queue menu in the Topbar; multiple extension buttons / displays ( e.g Crystools ).
All the features apart from workflow tabs can be put into the second row, but the tabs row is a primary feature and should not clutter the UI.
And we already have a layout alternative with a single "full width" Topbar + Workflow tabs:
Topbar (2nd-row)
This is a terrible alternative that obscures nodes partially:
I don't see any reason to break a well-established and widely used format as it was before.
Personally, I think the floating 2nd-row style fits better than having two full rows, but there are several issues with the current look. I agree that they cover up too much, and the tab background also has very low contrast with the default node color, so you can barely tell them apart where they overlap.
Also, I think the priorities here are just switched around. I'd wager a guess that most users will switch workflows often, but only rarely edit subgraphs. So IMO the workflow tabs should get their old place in the main bar back and the subgraph breadcrumbs should instead be in the second row (or provide an option for that).
Similar to how blender does it, and since it has a transparent background, it also covers up barely anything:
I saw in an older video clip recently that this is actually how it used to work when subgraphs were first introduced, but I guess this layout got ditched somewhere along the way? It would be great to have that option back.
Can you make the title a bit more constructive before I share the feedback with other team members?
Can you make the title a bit more constructive before I share the feedback with other team members?
I've changed the title, but my point stands: none of these changes to UI were necessary.
Personally, I think the floating 2nd-row style fits better than having two full rows
One row would be even better. For now it looks like a complication of a very straightforward function - navigating currently opened workflow tabs.
Also, I think the priorities here are just switched around. I'd wager a guess that most users will switch workflows often, but only rarely edit subgraphs. So IMO the workflow tabs should get their old place in the main bar back and the subgraph breadcrumbs should instead be in the second row (or provide an option for that).
I agree with this; if fact, it might be worth putting subgraphs in a collapsed menu.
I've changed the title, but my point stands: none of these changes to UI were necessary.
This isn't strictly a bug so that doesn't need to be in the title either. I would have titled it "Frustrations with new UI".
Unless they let you customize your own menu, they need to prioritize the options that people will use the most. They don't have statistics on which options get used most frequently so they aim for wide coverage and wait for feedback. I hope you understand that this process likely isn't going to change, and that your voice is powerful enough without adding invective.
MY OPINION:
Personally, I use 'Save As' the most so it does hurt me to have to dig for it. Theme I set it once and never touched it again Export I rarely use when I need to share workflows Open is functionally inferior to the saved workflows on the sidebar New is functionally inferior to the '+' button on the tab row Edit & View I literally don't even know what's inside these
I would have titled it "Frustrations with new UI".
That would sound less serious, undermining seriousness of the issue. I will remove bug marking, though.
Unless they let you customize your own menu, they need to prioritize the options that people will use the most.
...which is exactly why workflow tabs should remain unchanged since it's obviously one of the most used features. Just in the last few months we had multiple different models coming out, each requiring a different workflow. Even if users don't keep them all opened, current state of UI would create unnecessary cluttering even with a few workflows.
They don't have statistics on which options get used most frequently so they aim for wide coverage and wait for feedback.
There are assumptions to make in any UI/UX design, and, especially in opensource projects, it's useful to follow a simple principle: "don't break what works". I understand that ComfyUI team cannot estimate how often each feature is used, but common sense should be applied.
your voice is powerful enough without adding invective.
I don't believe my issue would be seen without it.
MY OPINION:
Personally, I use 'Save As' the most so it does hurt me to have to dig for it. Theme I set it once and never touched it again Export I rarely use when I need to share workflows Open is functionally inferior to the saved workflows on the sidebar New is functionally inferior to the '+' button on the tab row Edit & View I literally don't even know what's inside these
Oh wow, thanks for this list, I haven't even noticed some other changes, fixated on "Save As" and workflow tabs. You are right, and moreover:
- "Save As" needs to be easily accessible for cases when Ctrl+S doesn't work (it does happen sometimes out of blue, and often when there's floating Picture-in-Picture video on screen) for new/duplicated workflows.
- Theme used to be a small button on the bottom left:
not sure why it would be moved, for visibility?
- "Export" would look better in the drop-down menu for the workflow itself (in the tab menu).
I don't believe my issue would be seen without it.
All issues get seen, not all issues get read. I think it would have if you presented it as eloquently as you just did, presenting legitimate reasons why it should be a certain way. Going as far as taking screenshots shows people you care.
but common sense should be applied.
I don't believe in relying on common sense and generally follow the principle of "assume nothing". I do think we agree on the principle of not adding more clicks to achieve the same result though.
I don't believe in relying on common sense and generally follow the principle of "assume nothing".
I don't understand this; why relying on common sense is wrong when it helps avoiding obstacles? There is, and always will be, a difference in how a design is perceived by the designer and by the end user - and applying common sense helps putting yourself into the position of a user (even if an abstract one). Otherwise feature creeping will quickly become a much larger problem.
why relying on common sense is wrong
Common sense could be responsible for these UI changes. Their thought process potentially went something like this:
"ComfyUI already has customizable shortcuts and we want to de-clutter the UI to make room for new incoming features, so we should consolidate these basic options in a single menu just in case somebody still doesn't want to assign and use shortcuts".
Common sense only works up to a limit, anything more complex than that is going to need more data. They already used common sense to get the interface to this point (the menu used to take up space on the canvas). Now all that's left are harder problems.
"ComfyUI already has customizable shortcuts and we want to de-clutter the UI to make room for new incoming features, so we should consolidate these basic options in a single menu just in case somebody still doesn't want to assign and use shortcuts".
This thought process would've prevented doubled row for workflow tabs, not create it. Unfortunately, it seems like developers had completely different logic, which has created the issue.
Improve space utilization by using pure css to restore to a single line.
This requires a browser extension implementation.
#comfyui-body-top > div{
display: flex;
flex-flow: column;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
}
#comfyui-body-top > div > div.comfyui-menu.flex.items-center{
width: auto;
}
#comfyui-body-top > div > div.comfyui-menu.flex.items-center > div.subgraph-breadcrumb.w-auto{
max-width: 300px;
min-width: 30px;
background-color: #666;
}
div.comfyui-menu-right.flex-shrink-1.overflow-auto > div > div:nth-child(2) > button.comfyui-button.comfyui-menu-mobile-collapse.primary > span{
display: none;
}
div.comfyui-menu.flex.items-center > div.comfyui-menu-right.flex-shrink-1.overflow-auto > div > div:nth-child(2) > button:nth-child(2){
display: none;
}
div.comfyui-menu-right.flex-shrink-1.overflow-auto > div > div:nth-child(2) > button:nth-child(5){
display: none;
}
div.comfyui-logo-wrapper.p-1.flex.justify-center.items-center.cursor-pointer.rounded-md.mr-2 > i{
display: none;
}
.workflow-tabs-container{
background-color: #44444444 !important;
}
#comfyui-body-top > div > div.w-full.flex.content-end{
background: unset !important;
overflow-x: auto;
}
A small change makes the subgraph fully displayed
I would like the @pythongosssss to listen to us and return the one-line toolbar for the browser interface, as well as the "save" and "save as" menu items as they were before!
We hear you, thanks for the feedback. We're adding the Save and Save As to the new workflow dropdown menu. Plus the plan is to make the second toolbar row to be floating so it won’t permanently take up screen space. There are several reason for a dedicated row for tabs. Many users work with dozens of tabs, and a separate row makes navigation and discoverability much easier. UX-wise we want to avoid horizontal scrolls :) We’re also planning new functionality for both rows, and this layout is way more scalable and future proof
There are several reason for a dedicated row for tabs. Many users work with dozens of tabs, and a separate row makes navigation and discoverability much easier. UX-wise we want to avoid horizontal scrolls :) We’re also planning new functionality for both rows, and this layout is way more scalable and future proof
In that case make is possible to revert to the old UI, at the very least. Neither floating, nor a dedicated second row are optimal. It takes way too much space on screen.
Tbh, if you think about it properly, horizontal scrolls are much handier than any combination of two rows - simply because aspect ratios of modern screens are wide, not tall. Any additional horizontal elements take away much more space than vertical ones.
Many users work with dozens of tabs
Because I like to work in an all-in-one workflow, I never need to worry about how many tabs I have open. All the functions I need are contained in the same workflow and most of the tab row just takes up space on my screen. There is a separate argument about whether encapsulating workflows is better than combining them, but most people seem to like encapsulation. Although I agree with @MaggotHATE for my personal tastes, I can't deny the inexplicable popularity of opening a million tabs.
I can't deny the inexplicable popularity of opening a million tabs.
With many, many tabs opened, scrolling though them would occur anyway, because even hovered elements will not fit them all. It will always be preferable to have a single row to scroll through, as any other option doesn't have as much scalability. Hover elements will pollute the screen even more, second row will either have the same horizontal scrolling (which defies its purpose), or will grow vertically, occupying more and more space on screen.
Don't reinvent the wheel and get the single row of tabs back.
I drastically hate the new top floating toolbar.
Single toolbar was and still is preferable.
The double toolbar was annoying, but tolerable since I had my toolbars configured to the bottom of the window where they are not crowded.
The forced top only tab bar and flowing, unmovable, multiple toolbars makes me want to fork.
I have to use the new UI sometimes for newest things (like today's Flux .2 or previous Qwen Edit), and even with all the changes now it is still crap. The number of clicks I have to do to switch between tabs has doubled, the overall look is alogical and unnecessary.
What bothers me most is the "Cancel" button is now inside the new history menu so you need to click twice to use it and a third time to close the menu again. They went from 1 to 3 clicks there.