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

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

Open
Jay-o-Way opened this issue Mar 17, 2023 · 20 comments
Open

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

Jay-o-Way opened this issue Mar 17, 2023 · 20 comments
Assignees
Labels
Area-Flyout Issues refering to the PowerToys flyout launched from the tray area Area-User Interface things that regard UX for PowerToys Idea-Enhancement New feature or request on an existing product Needs-Community Feedback We need additional help with how something should act / look

Comments

@Jay-o-Way
Copy link
Collaborator

Jay-o-Way commented Mar 17, 2023

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

New FlyOut (a la Win 11 Start) v2

@Jay-o-Way Jay-o-Way added Idea-Enhancement New feature or request on an existing product Area-User Interface things that regard UX for PowerToys Area-Flyout Issues refering to the PowerToys flyout launched from the tray area labels Mar 17, 2023
@microsoft-github-policy-service microsoft-github-policy-service bot added the Needs-Triage For issues raised to be triaged and prioritized by internal Microsoft teams label Mar 17, 2023
@Jay-o-Way Jay-o-Way mentioned this issue Mar 17, 2023
11 tasks
@Jay-o-Way Jay-o-Way removed the Needs-Triage For issues raised to be triaged and prioritized by internal Microsoft teams label Mar 17, 2023
@Jay-o-Way Jay-o-Way moved this to In Progress ⚒️ in Test for PowerToys Mar 19, 2023
@Jay-o-Way Jay-o-Way self-assigned this Mar 19, 2023
@Jay-o-Way

This comment was marked as off-topic.

@stefansjfw
Copy link
Collaborator

stefansjfw commented Mar 21, 2023

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

@niels9001
Copy link
Contributor

niels9001 commented Mar 21, 2023

@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)?

image

- 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
Copy link
Collaborator Author

  • 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 [Runner] Update tray menu to WinUI 2.6 style #12646

@niels9001
Copy link
Contributor

niels9001 commented Mar 21, 2023

  • 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.
image

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 :).

image

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

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 #22408 (comment).

@Aaron-Junker Aaron-Junker added Status-In progress This issue or work-item is under development and removed In progress labels Mar 25, 2023
@Jay-o-Way

This comment was marked as off-topic.

@Jay-o-Way Jay-o-Way changed the title Systray icon Flyout: polish up code and UI Systray icon Flyout Mar 29, 2023
@Jay-o-Way
Copy link
Collaborator Author

Jay-o-Way commented Mar 30, 2023

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

@xiaolangGT
Copy link

image
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
image

@Jay-o-Way Jay-o-Way changed the title Systray icon Flyout Re-do Systray icon Flyout Jul 8, 2023
@niels9001
Copy link
Contributor

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
Copy link
Collaborator Author

Jay-o-Way commented Oct 19, 2023

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

@Jay-o-Way Jay-o-Way changed the title Re-do Systray icon Flyout Re-do Flyout window: Win 11 Start style, hotkeys, on/off Oct 19, 2023
@Jay-o-Way Jay-o-Way added the Needs-Community Feedback We need additional help with how something should act / look label Oct 26, 2023
@TheJoeFin
Copy link
Collaborator

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
Copy link
Collaborator Author

Jay-o-Way commented Oct 27, 2023

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

@TheJoeFin
Copy link
Collaborator

TheJoeFin commented Nov 8, 2023

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
Copy link

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

@TheJoeFin
Copy link
Collaborator

[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.

@Jay-o-Way Jay-o-Way changed the title Re-do Flyout window: Win 11 Start style, hotkeys, on/off New/Re-do Flyout window: Win 11 Start style, hotkeys, on/off Dec 28, 2023
@zero-one-startgame
Copy link

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

New FlyOut (a la Win 11 Start) v2

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
Copy link
Collaborator Author

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
Copy link

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
Copy link

we need this

@Korb
Copy link

Korb commented Oct 31, 2024

I agree that shortcuts from the Dashboard window should at least be copied to the Quick access window. That is, it should be possible to both see all possible actions of all enabled modules in one list, and activate any of these actions using the mouse. Because at present the Quick access window contains an incomplete list of actions available to the user.

I have a bad memory, and for rarely used functions I have to open the Dashboard, find the necessary key combination, close the window, press the necessary shortcut. While I could simply open the PowerToys Quick access window, and activate what I need, regardless of whether there are hot keys for activating this function or not.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area-Flyout Issues refering to the PowerToys flyout launched from the tray area Area-User Interface things that regard UX for PowerToys Idea-Enhancement New feature or request on an existing product Needs-Community Feedback We need additional help with how something should act / look
Projects
Status: Stale 💤
Development

Successfully merging a pull request may close this issue.

9 participants