Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PowerRename] New Fluent UI is less screen space efficient #14164

Closed
dori4n opened this issue Oct 31, 2021 · 22 comments
Closed

[PowerRename] New Fluent UI is less screen space efficient #14164

dori4n opened this issue Oct 31, 2021 · 22 comments
Labels
Area-User Interface things that regard UX for PowerToys Idea-Enhancement New feature or request on an existing product Product-PowerRename Refers to the PowerRename PowerToy Resolution-Fix Committed Fix is checked in, but it might be 3-4 weeks until a release.

Comments

@dori4n
Copy link

dori4n commented Oct 31, 2021

I updated PowerToys from v0.48 to v0.49.1 yesterday after having been nagged about an update being available and noticed today, that upon starting PowerRename to rename 20 files at once, that the user interface window was extremely large, the spacing between individual lines in the list view much larger than the actual text lines themselves and that the overall layout of user elements had significantly changed in a manner that makes using the application much less practical. I have traced the change back to #13028 through a quick search, and from there was lead to #13678 and #888. While the update does include some minor quality of life improvements like RegEx auto-completion, dark-mode, and enhanced accessibility features are nice for those who need them, the overall result is worse, especially on small screens.

  • The input fields for search strings and replacement strings have been placed on the left of the list view, which means there is now less space to show the full file names and/or search/replacement strings, because both are now competing for horizontal screen space, and resizing the window has less effect, if any (in fact in my case of long file names from just now, I could not resize the window sufficiently on a 1080p 16:9 screen to show the full names of my files).
  • As already mentioned, the UI elements are larger than before, and include excessive margins and padding, meaning the window has to be larger to display the same information (this is without HiDPI scaling and the normal 96DPI UI control sizes, mind you, this may be different when comparing to v48.0 with HiDPI scaling on, but why waste precious screen real-estate like that, if you can see well and are close to the screen)
@ghost ghost added the Needs-Triage For issues raised to be triaged and prioritized by internal Microsoft teams label Oct 31, 2021
@Aaron-Junker Aaron-Junker added Product-PowerRename Refers to the PowerRename PowerToy Idea-Enhancement New feature or request on an existing product labels Oct 31, 2021
@Zenrin
Copy link

Zenrin commented Oct 31, 2021

I hate the new design. The old window was simple and easy to use. There should at least be a way to revert back as the original-update window on the right makes it look like it already happened.

@Aaron-Junker
Copy link
Collaborator

Cc: @niels9001

@niels9001
Copy link
Contributor

Thanks for the feedback!

WinUI
The new UI is build with WinUI. This a modern framework that aligns with the look and feel of Windows 11 and has many enhancements, such as theming support and support for pen and touch. That's one of the reasons why UI controls are larger. All of this helps accessibility, looks more modern and fits in better with the OS. I'm personally not in favor of making changes to the default controls and margins/paddings, as it's part of design guidelines and, as mentioned, fits in with the UI refresh of Windows.

Large default window size
This is actually a bug. And will be addressed soon - once we move out of XAML Islands to WinUI 3 we can auto-scale the window when launching.
In terms of actual size, when made smaller, this has only a 10/20% size increase vs. the old version, mostly due to the larger controls.

Datagrid and lack of column resizing
The current list of files is rendered in a custom control - this control is not capable of resizing its columns. It's something we hope to introduce in the future, but depends on the availability of these controls in e.g. WinUI.

All of this hopefully explains some of the decisions that were made in the development process. I think this feedback is very valuable to make sure we test it on different resolutions and setups. And also @Zenrin's feedback on the position of the Apply button.

In the past, I have made a quick mock-up of what a 'vertical' UI would look like. @dori4n @Zenrin any thoughts on that?

Current vs. vertical
Untitled-3

@niels9001 niels9001 added the Area-User Interface things that regard UX for PowerToys label Oct 31, 2021
@whawn1
Copy link

whawn1 commented Oct 31, 2021

So, neils9001, what you're saying is the the sucky over-large and visually wasteful UI is what we're stuck with, because MS says so. Wonderful. MS hasn't had decent ui design since Win7. The old renamer ui was by far superior to the current hot mess. An additional whine: Where is the count of selected/change files? Can't find it. Needs to be there.

@Karl255
Copy link

Karl255 commented Oct 31, 2021

I think a density setting with "compact" would be the best solution for this, which would decrease paddings, margins and other spacing. At least a compact mode for lists and such, those are long and being able to see a lot is very practical.

@Karl255
Copy link

Karl255 commented Oct 31, 2021

So, neils9001, what you're saying is the the sucky over-large and visually wasteful UI is what we're stuck with, because MS says so. Wonderful. MS hasn't had decent ui design since Win7. The old renamer ui was by far superior to the current hot mess. An additional whine: Where is the count of selected/change files? Can't find it. Needs to be there.

UI controls are large so that you can use them with a touch screen.

@niels9001
Copy link
Contributor

@whawm1 Let's keep the feedback constructive, please.

There were a lot of accessibility issues flagged with the old UI, and there was no dark/light mode support or support for touch + pen. Additionally, it looked kind of dated. More info here: #888

One of the goals of these UI changes for PowerToys is that these utilities 'should do its best to look like a system level integration' (see #891). Since PowerToys only runs on recent version of Windows 10 and 11, it makes sense to revamp the UI to reflect the changes Microsoft introduced for Windows.

Agree on the selected/change files - I'd suggest to file a new issue so it can be tracked.

@dori4n
Copy link
Author

dori4n commented Nov 1, 2021

WinUI The new UI is build with WinUI. This a modern framework that aligns with the look and feel of Windows 11 [...]. All of this [...] looks more modern and fits in better with the OS. I'm personally not in favor of making changes to the default controls and margins/paddings, as it's part of design guidelines and, as mentioned, fits in with the UI refresh of Windows.

That's generally not a good argument to make for changing things. Change for the sake of change, or, secondarily for visual appeal, where it impacts the usefulness of a tool, is not good change.

[WinUI 3.0] is a modern framework that aligns with the look and feel of Windows 11 and has many enhancements, such as theming support and support for pen and touch. That's one of the reasons why UI controls are larger. All of this helps accessibility.

Theming and touch controls are also supported by the native Win32 controls, but unlike the new WinUI controls that evolved from the "Metro UI" controls for Windows Phone 7.x+, "modern apps" and the Universal Windows Platform, they're not huge and unwieldy unless the user's system is configured for such a thing.
Of note, theming support for the native window controls has been present since Windows 1.0, and though the relevant user interface elements, which reached their highest form of evolution with Windows Vista, have been removed from the legacy control panel with version 8.0 and never made a reappearance since, they do still work and can be managed through their designated parameters in the registry at HKEY_CURRENT_USER\Control Panel\Colors and HKEY_CURRENT_USER\Control Panel\Desktop\Colors or tools like this. Of course any "modern" WinUI and UWP apps don't support using these settings.
And as far as accessibility goes, the legacy Win32 controls also fare much better there. Tools like screen readers (and that includes the default Narrator application that ships with Windows) can't even read the control names or the contents of the custom controls or read something else like the class name of the control instead, which makes them useless to people who depend on them. And because they rely on the same mechanisms, the same is true for workflow automation software.
Edit, since it just occurred to me for unknown reasons as I was waking up: The same applies to theming the application from external tools, including Windows' own UX Theme libraries (introduced with Windows XP) which you can still use for High Contrast mode or with custom themes via UX Theme Patcher or third-party tools like StarDock's Window Blinds which can't apply visual styles to the application, if you build it with custom themed UI controls like this. If instead Windows 11 would apply the new interface style to Win32 controls and theme the interface like Windows XP did, not only would all these things remain compatible, but Windows 11 could get its UI design applied consistently to all apps, including ones that were built back in the day for Windows 95, just like in Windows XP. And as a bonus, users could turn it off and use the old visual style if they like, and easily, as I might add, without developers having to do anything special about it.

Large default window size This is actually a bug. And will be addressed soon - once we move out of XAML Islands to WinUI 3 we can auto-scale the window when launching. In terms of actual size, when made smaller, this has only a 10/20% size increase vs. the old version, mostly due to the larger controls.

That was the most striking first impression of the change, everything was huge. The 10-20% size difference may apply to the font sizes, but when you also account for the padding and margins, it's more like 50-60%. That's like turning the DPI scaling factor to 150%+ from the control panel.

Datagrid and lack of column resizing The current list of files is rendered in a custom control - this control is not capable of resizing its columns. It's something we hope to introduce in the future, but depends on the availability of these controls in e.g. WinUI.

I have since noticed that. And that's a breaking change for me. I need the ability to resize the window and the preview columns when I am renaming files with very long names. I would even argue, that dealing with very long file names is a key feature of a tool like this, and where this software should shine and excel but now no longer can.

In the past, I have made a quick mock-up of what a 'vertical' UI would look like. @dori4n @Zenrin any thoughts on that?

Current vs. vertical Untitled-3

The layout shown on the right is definitely much better, since there is more space to show a long search and/or replacement string now. But if the columns for the match/result preview cannot be resized with the window, it doesn't help all that much.

@alinsavix
Copy link

Based on the various conversations I've read, I'm certain nobody at Microsoft cares, but -- yeah, this new PowerRename UI is basically unusable. Even if you discount the massively less efficient use of screen space (which shouldn't be discounted, but...), it's SLOW with any significant number of files, it's much harder to figure out what's going on, the scrollbar is tiny to the point of unusability (I should not need to spend multiple seconds of precision mousing just to be able to grab it!), and the lack of resizable columns -- regardless of the cause, even if it's a problem "upstream" -- utterly break's the tool's primary purpose for existing in many situations.

I get the idea of wanting to standardize on the new user interface (really, I do, even if I personally don't generally like the new UI), but holy cow you should not be sacrificing this much usability so that you can check off the checkbox that says "uses new UI". This is not far from sealing a server in concrete and throwing it in the ocean in the name of "security" -- sure, you get to check off that checkbox, but that stops mattering if the cost is "most of the usable functionality".

The purpose of software is to serve the user, not to serve UIs or software libraries. When a change makes usability suffer this much, to the point that a bunch of users are rolling back to previous versions just so they can use the tool (and I'm going to be one of them here in a few minutes), it's the wrong change to make, even if it does make the UI "more standard". None of the touted benefits ("more standard", "better for touch users", etc) offsets the reality that the tool is now far less able to do its job.

Please don't prioritize UI dogma over the actual functionality of the software, at least to this extreme. You can always switch back to the new UI in the future, when the building blocks for it are less fundamentally broken.

@niels9001
Copy link
Contributor

@alinsavix Thanks for the extensive feedback. I think these are valid concerns.

Performance: this is something that should (hopefully) be resolved with moving to WinUI 3 (instead of XAML Islands like we currently do).

Draggable columns: this is bit of a blocker for now since this control is not part of WinUI. However, with #14164 (comment) we can be a bit more flexible and maybe add an additional scroll viewer to make horizontal scrolling better.

Layout and spacing: I think #14164 (comment) might be an upgrade and might take some of these pain points away. Additionally, some of the margins / paddings can be finetuned there as well. Do you agree?

@Zenrin
Copy link

Zenrin commented Nov 7, 2021

@niels9001 @dori4n I like the new mockups much better as it helps provide a better flow to the window like it did before. Much likely having to do with where the apply button resides underneath the original/renamed list.

@niels9001
Copy link
Contributor

@dedavis6797 @crutkas Do you agree moving to the UI proposal on the right (see image below)? I can take this up since it's an easy change. This might help simplifying the XAML for the pseudo-datagrid as well which will help performance

image

@dedavis6797
Copy link
Contributor

I think switching to the proposed UI makes sense, and perf improvements for renaming many files are in the works. We've identified the potential bottleneck and are working on a solution.

@crutkas
Copy link
Member

crutkas commented Nov 8, 2021

I'd want remind people here, we say, "Little by Little" a lot with PowerToys. We tend to ship Minimal lovable products and adjust based on feedback. We can improve the UX. Lets be very crisp and help us understand what issues you are having.

  1. The perf issues are due to XAML virtualization, not the island to the best of my knowledge. @stefansjfw was made aware of possible fix last week and what the root cause. This will be resolved.
  2. UX layout: I feel like this is preference of visualization. Every time we also add a new option or filter on the vertical style, we take vertical space versus just add an item in the left panel.
    a. The new UX actually is a massive improvement. Not having 9 check boxes that look all independent when some actually were and acted like radio buttons. This is actually a big improvement for usability of the actual app.
  3. UX Data density, The old UX and even a vertical style has issues. It inhibits the amount of items you are being shown. most screens are wider than taller, why not use that to our advantage. This is no different than using a NavView. The leads back to point 2.
    a. @dori4n can you do a screenshot to help us better understand what your file name issues are? Understanding how stuff is getting cut off / what your average lengths are can help inform us on a better ux.
  4. I think there are some critical improvements we do need to do such as banding of the list. That will actually help visually map items left to right.
  5. New UX framework provides heavy accessibility fixes which weren't really possible or would require massive effort to execute. You may not directly be impacted by non-accessible UX but there are a lot of users that this will really help out.

For reference, here is the older UX from older issue:
image

@crutkas
Copy link
Member

crutkas commented Nov 8, 2021

Also to boil the root of the issue is this, correct? @dori4n

I'm running PowerRename on 1080p screen and the old UX allowed me to read file names versus the new one won't

@niels9001
Copy link
Contributor

@stefansjfw and I have worked on updating the UI and making it more performant. Due to virtualization issues the current version was having major performance issues. That is now resolved luckily.

On the UI front, I have been looking at the proposed vertical layout. However, in testing, the visual hierarchy of the layout was pretty poor. And as @crutkas pointed out, it would limited logical screen real estate for any future new features to be added into the UI. Lastly, putting in some of the horizontal checkboxes gave us major issues with localization (e.g. Dutch or German text labels can be quite extensive. Therefore, the proposal is to stick with the current layout.

However, the margins, paddings and font-sizes have been tweaked based on the feedback of you all. As you can see we can fit in more items by default in the grid. Things that have changed:

  • Reduced fontsizes & margins
  • Added the number of items selected (next to the 'Original' header) and items to be renamed (next to the 'Renamed' header)
  • Added gridlines to improve readability.

Here's a visual comparison between v1 and v2.

DensePowerRename

@crutkas crutkas added Status-In progress This issue or work-item is under development and removed Needs-Triage For issues raised to be triaged and prioritized by internal Microsoft teams labels Nov 10, 2021
@PaulCoddington
Copy link

For several versions since the new UI was introduced, some of the controls come up as white squares only.

For example, in the new Power Rename (0.49.1), there is a row of blank white squares called "Text Formatting", where the icons do not appear until they are clicked and you have to use hover text to identify them. But when they are clicked, the Apply button goes blank white. This problem happens throughout the application for some but not all controls.

[Power Rename also has an excessively huge default window size on an HD display (which I see above is being addressed) and does not remember being resized for next time. Also, in this version it has developed a bug where a random couple of files in the list ignore the selection box and get renamed even though they are not selected.
screen
]

@tjdennis
Copy link

Reducing all that whitespace between lines is important. I didn't buy a 4K 43" monitor to see less text on the screen. I like seeing 150 lines fit at once. People who don't can adjust their DPI scaling. But having the PowerRename window open to 80% the size of my 43" monitor every time is inexcusable. At least have it remember the size/position that I leave it in for the next time it opens.

@niels9001
Copy link
Contributor

@tjdennis Yes, the default width/height should be smaller in the upcoming update. Once we move to WinUI3 we can hopefully enable auto-resizing (based on content) and remember window position by default.

@PaulCoddington Hmm strange - seems to go something wrong since in your screenshot Windows uses the dark theme and PowerRename uses the light theme? Does switching themes in Windows settings resolve the issue?

@PaulCoddington
Copy link

@PaulCoddington Hmm strange - seems to go something wrong since in your screenshot Windows uses the dark theme and PowerRename uses the light theme? Does switching themes in Windows settings resolve the issue?

Formatting buttons are displayed in Dark Mode, but not in Light Mode or Custom (dark desktop with light apps). Action buttons seem broken in all modes.

Just noticed the new Windows Store has a similar problem. The Update apps button is a blank white square, and a large space at the top of every page is "blank" (white text on near white background).

Perhaps there is a problem with WinUI 3 apps in general on Windows 10 21H1/H2?

I routinely run in Custom mode (classic Win10 theme) with dark desktop and light apps, because black text on white page is better for my eyes when coding (dark mode text "glows" like a lightbulb on a calibrated monitor) and I need a dark neutral background for graphics work and photo editing. But, there is no theme mode which works, even though some problems may resolve with theme settings they do not resolve 100%.

@niels9001
Copy link
Contributor

@PaulCoddington Hmm strange - seems to go something wrong since in your screenshot Windows uses the dark theme and PowerRename uses the light theme? Does switching themes in Windows settings resolve the issue?

Formatting buttons are displayed in Dark Mode, but not in Light Mode or Custom (dark desktop with light apps). Action buttons seem broken in all modes.

Just noticed the new Windows Store has a similar problem. The Update apps button is a blank white square, and a large space at the top of every page is "blank" (white text on near white background).

Perhaps there is a problem with WinUI 3 apps in general on Windows 10 21H1/H2?

I routinely run in Custom mode (classic Win10 theme) with dark desktop and light apps, because black text on white page is better for my eyes when coding (dark mode text "glows" like a lightbulb on a calibrated monitor) and I need a dark neutral background for graphics work and photo editing. But, there is no theme mode which works, even though some problems may resolve with theme settings they do not resolve 100%.

Thanks, Paul for the detailed description. Yeah, it seems to be a Windows and/or WinUI issue.

Over at the WinUI repo a similiar issue has emerged, I think it's pretty similiar? Link:
microsoft/microsoft-ui-xaml#6344

@niels9001 niels9001 added Resolution-Fix Committed Fix is checked in, but it might be 3-4 weeks until a release. and removed Status-In progress This issue or work-item is under development labels Nov 30, 2021
@crutkas
Copy link
Member

crutkas commented Nov 30, 2021

This is fixed in 0.51. Please head over to our releases and get the update! https://aka.ms/installpowertoys

@crutkas crutkas closed this as completed Nov 30, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area-User Interface things that regard UX for PowerToys Idea-Enhancement New feature or request on an existing product Product-PowerRename Refers to the PowerRename PowerToy Resolution-Fix Committed Fix is checked in, but it might be 3-4 weeks until a release.
Projects
None yet
Development

No branches or pull requests