[Fluent UX] Shortcut Guide v2

[crutkas]

PowerToys should do its best to look like a system level integration. Shortcut guide is a great example of where we can be but needs a little bit more polish.

• Screen preview in shortcut view only shows current display, black for all others #792 - Screen preview in shortcut view only shows current display
• [Shortcut Guide] Shortcuts list [tracker] #179 - shortcut list update
• Allow for Configuration of what is displayed for Shortcut Guide #235 - configurable list
• Shortcut adjustments for fade effect and interaction model #853 - adjustments in fade in effect and interaction model

Current screen

Update: Possible Proposed adjustments

Here is one idea we've been working with the shell team with. It would allow for contextual hooks for applications, popular items can be included in, teaching moments for 'popular' and

In context of full screen:

[hawkerm]

Would it be helpful to have a keyboard showing where these keys are?

This is a bit busy, but wondering if adding it as some sort of addition could be helpful:

[crutkas]

@hawkerm

Would it be helpful to have a keyboard showing where these keys are?

This is a bit busy, but wondering if adding it as some sort of addition could be helpful:

interesting idea few things come to mind.

1. the layout then is dependent on the keyboard itself. different countries have different keyboards.
2. a lot of info to put down in a small space so we have a info density issue

[hawkerm]

@crutkas yeah, not sure the best solution. First time using it I was like awesome, now I can remember all the shortcuts... Then I was like OMG wall of text... How do I find what I need...

Maybe this integrates somehow with the fancy search overlay mockup I saw elsewhere and you can search for keyboard shortcuts to learn about them???

[niels9001]

Here's a UX mock-up using WinUI 2.3.

A couple of things that are new:

• Shortcuts are now clickable, and would trigger the action (.
• Reveal effect to indicate that shortcuts can be clicked.
• App icons in the taskbar are color sampled. Using the dominating color as the background of the tooltip, so they are easier to distinguish and recognize.
• Composition animations for a more fluent look & feel.

(Source: https://github.com/niels9001/PowerToysUX)

[crutkas]

how to execute this with WinUI and xaml island

1. take screenshot of target desktop.
2. Island XAML will be the following

• root
• grid
• image (screenshot)
• grid w/ acrylic or transparent (setting for acrylic vs transparent)
• controls inside grid

we fade in the XAML island quickly (33ms?), then kick off the fade in animation for the control grid
when dismissed, we do a short fade out animation

Do work against WinUI 2.x and we'll migrate to WinUI 3 once we have a stable drop in a bit.

Dismiss action:

• If a user executes a keystroke
• if user lifts off Window Key

Why the smoke and mirror for the fade effect:
A user will only notice this if movement is happening in the background since this dialog is up for seconds, I believe this is acceptable. This is how we can get the WinUI controls due to ask for transparency to make this look like it is part of the shell for right now.

[niels9001]

Yeah let's try that out. For any animations, we can leverage the ImplicitAnimations in the Windows Community Toolkit?

[crutkas]

those ... should work.