New/Re-do Flyout window: Win 11 Start style, hotkeys, on/off

[Jay-o-Way]

Description of the new feature / enhancement

Looking at the flyout, there are a few thing I would like to improve.

• It has the same size, position and style as Windows 11 Start menu
• It can be opened via a click on the tray icon, and with a keyboard shortcut (think of combining with Shortcut Guide)
• It displays all modules
• All modules that can be activated directly, can be clicked on to open
• It shows the hotkeys next to the module names to provide a solution for countless requests as in #15405
• For e.g. Keyboard Manager, we can show the remaps in a drop-down area, just like Win 11 Start menu has
• It has buttons for:
  • Download Update (when available)
  • Open Settings window
  • Go to online documentation
  • Create a zip file / bug report
  • Open GitHub repo
  • Close (not ~quit~)

Quick concept

[Jay-o-Way]

@yuyoyuppe @stefansjfw @niels9001 I noticed this directory structure is inconsistent:

Should we use ... ?

📁 settings-ui \ 📁 Settings.UI

• Flyout
  • Viewmodel(s)
  • Views
• OOBE
  • Viemodel(s)
  • Views

or

📁 settings-ui \ 📁 Settings.UI

• Viewmodel(s)
  • Flyout
  • OOBE
• Views

[stefansjfw]

Both are OK, imho. Personally, I'd go with the first one

[niels9001]

@jay-o-way As mentioned before in the PR, the current UI has been implemented according to a design specification so it feels native to Windows (11). You are introducing major changes to layouts, spacing and overall look and feel without a specific reason?

- Using CommandBar: if icons are blurry, we need to check why this is. I expect it's because the FontIcons are using 14px, and would render sharp(er) with 16px. The Quick Actions flyout is using the same fontsizes, and I don't see any blurryness for that flyout or the PowerToys flyout (both 100% and 150% DPI). Could this be a WASDK-on-Windows-10 bug? I can circle back with the design folks to see what the best approach. Using CommandBar introduces a bunch of additional XAML in the visual tree, which might impact performance. So using that to fix blurry icons is overkill.

- Using spacing: that's fine, as long as it doesn't introduce any visual differences.

- Deprecated icon: good catch 🚀.

- Hotkey under the title: the UI becomes very cluttered now. We already have the hotkey listed in Settings and in the tooltip of the buttons. Maybe a better, and more scalable approach, would be to show the hotkey in the under the title in the app list (see orange line below)?

- Quit button: my worry with "close" is that users might think that it closes the flyout vs. shutting down PowerToys? "Quit PowerToys" as the tooltip is maybe better? But, we already have the right-click context menu to quit it.. so maybe we don't need this?

- Actions: we might want to update the labels in the right-click context menu as well? So they are the same as in the Flyout?

[Jay-o-Way]

• Icons: whatever the control(s) we end up with, I would recommend in general to not change properties (like font size and others) unless we absolutely need to. This specific case might be related to Win 10, or font hinting, or scaling (14/16px) or who knows what else. Fact is that I see something and I want to fix it :)

• Hotkeys: I've actually seen many comments from people who can't or don't want to remember all of the PowerToys shortcuts. Most of those (50+ and counting) request for Shortcut Guide. But this is also a simple solution. Honestly, "the UI becomes very cluttered now" sounds like a personal opinion. The more I look at it, the better it looks to me :) I would not place them in the AppList, because I find that ugly and it would mean double the distance to scroll.

• Quit: I do not share your concern. The Guidelines are pretty clear. Even if Microsoft itself is known for not always following their own...

• right-click context menu: If we have duplicate controls, we could consider dropping the "old" menu in the future. Like OneDrive has. Would solve issues like #12646

[niels9001]

• Icons: whatever the control(s) we end up with, I would recommend in general to not change properties (like font size and others) unless we absolutely need to. This specific case might be related to Win 10, or font hinting, or scaling (14/16px) or who knows what else. Fact is that I see something and I want to fix it :)

Could you try to change the fontsize to 16 (or remove it completely) on the main branch to see if that resolves the issue?

• Hotkeys: I've actually seen many comments from people who can't or don't want to remember all of the PowerToys shortcuts. Most of those (50+ and counting) request for Shortcut Guide. But this is also a simple solution. Honestly, "the UI becomes very cluttered now" sounds like a personal opinion. The more I look at it, the better it looks to me :)

I think the additional rows of text breaks visual hierarchy, and not something you want in a flyout that is there to quickly launch things (you want to literally scan and click). Showing shortcuts is a secondary functionality within this UI, that's why it ended up in the tooltip. So the question is.. is this the best place to educate users what shortcuts they can use (i.e. having it always visible)? I'm not sure.. There are maybe better ways to do this across settings or the app list?

I would not place them in the AppList, because I find that ugly and it would mean double the distance to scroll.

For inspiration, the Bluetooth flyout menu does this as well.. (i.e. the "Not connected" text would be our shortcut). And we could limit the amount of additional scrolling needed.

Looking at your GIF, extending the height can cause weird side effects (see the wide vertical gap). Again, this is the reason why we followed the Start menu design here and only allow showing 2 lines of text (see Windows 11 Start). These are not opiniated or self-invented decisions but following (existing) design specifications :).

• Quit: I do not share your concern. The Guidelines are pretty clear. Even if Microsoft itself is known for not always following their own...

• right-click context menu: If we have duplicate controls, we could consider dropping the "old" menu in the future. Like OneDrive has. Would solve issues like [Runner] Update tray menu to WinUI 2.6 style #12646

The reason why the right-click context menu was kept was two-fold: it's pretty common to quit apps this way (see Teams, Discord, Outlook - and yes, this is not always consistent across apps) and it's a fallback whenever the flyout would misbehave and wouldn't launch, see https://github.com/microsoft/PowerToys/pull/22408#issuecomment-1401869404.

[Jay-o-Way]

Could you try to change the fontsize to 16 (or remove it completely) on the main branch to see if that resolves the issue?

@niels9001 FontSize = sizes in pixels. Therefore we should always use multiples of 4. Or better yet, stick to StaticResources. Latest concept is in main comment as well as in the PR. (icons are sharp now)

[Jay-o-Way]

Hell, why don't we merge the two pages into one page with one Grid showing everything at once? Less clicking ftw!

[xiaolangGT]

Will too many buttons cause user confusion? I think the set of buttons is too much, we need extra steps to find the desired button, it is better to give users in the first page to choose which interface they want to put on it, just like the win11 network notification

[niels9001]

The content of the dashboard page in #29023 looks ideal to use as in my idea. @niels9001 do you see what I mean?

The dashboard tiles, you mean? If you have a sketch/mockup of your idea in mind would be helpful

[Jay-o-Way]

@niels9001 I updated the first comment to my recent ideas. 🔝 Also curious what the others think. BCC @crutkas @jaimecbernardo @yuyoyuppe @stefansjfw @gokcekantarci @donlaci

[TheJoeFin]

Looking at the concept as of October 26th, In my opinion there is too much going on for a quick tray flyout. The new homepage experience will provide users with an overall view of their enabled utilities along with shortcuts.

[Jay-o-Way]

@TheJoeFin one of the many things people ask for is super fast access. People want a shortcut, just like Shortcut Guide has.

[TheJoeFin]

I don't want to XY this problem. We should add PowerToys shortcuts to the Shortcut Guide. However it seems like that product has not received much attention lately.

[xiaolangGT]

我们应该讨论的是：“有哪些组件可以出现在快捷方式，哪些是我们需要利用组件和按钮来提高我们的使用效率去节约我们切换组件时间和效率”

[TheJoeFin]

[translated] What we should be discussing is: "What components can appear in the shortcut, and which components and buttons we need to use to improve our efficiency and save us time and efficiency in switching components"

The Shortcut Guide PowerToy should be the place for shortcuts. I'd guess that means the utility being rearchitected to display more applications and be more dynamic to which are turned on or off.

As for making utilities more efficient, everything should be done to make those improvements. I can say from experience, it is usually not quick or easy to make meaningful gains in performance.

[zero-one-startgame]

Description of the new feature / enhancement

Looking at the flyout, there are a few thing I would like to improve.

• It has the same size, position and style as Windows 11 Start menu
• It can be opened via a click on the tray icon, and with a keyboard shortcut (think of combining with Shortcut Guide)
• It displays all modules
• All modules that can be activated directly, can be clicked on to open
• It shows the hotkeys next to the module names to provide a solution for countless requests as in PowerToys Shortcuts in Shortcut Guide #15405
• For e.g. Keyboard Manager, we can show the remaps in a drop-down area, just like Win 11 Start menu has

• It has buttons for:

  • Download Update (when available)
  • Open Settings window
  • Go to online documentation
  • Create a zip file / bug report
  • Open GitHub repo
  • Close (not ~quit~)

Quick concept

I'd really appreciate it if "the idea/flyout" could show hotkeys – at least when hovering over it. Actually, you only need this until you know your favorite tools and hotkeys by heart, so pointing to them with a cursor would be enough.

Disadvantage: It would take a little longer to reach the desired hotkey.

Advantages: The learning effect may be slightly higher, but above all it prevents you from slipping in the line when reading the hotkey.

But! In fact, most people who start using PowerToys are sure to be overwhelmed very quickly by the amount of tools available and when you have such a person, that person is immediately out when they not only have to remember what tools are available, but also have to remember the hotkeys.

[Jay-o-Way]

if "the idea/flyout" could show hotkeys – at least when hovering over it.

Actually, at the moment, that's already the case :)

[zero-one-startgame]

if "the idea/flyout" could show hotkeys – at least when hovering over it.

Actually, at the moment, that's already the case :)

Yes, you're right, but my problem is still that not all tools are presented that way😅

[CrazyBobcatStudios]

we need this