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

[crutkas]

Just added in the main body an update with possible layout adjustment to shortcut guide. We'd love your thoughts.

[niels9001]

Just added in the main body an update with possible layout adjustment to shortcut guide. We'd love your thoughts.

That looks amazing. So long-pressing the Windows key would bring out the app specific shortcuts for the active app, right?

[crutkas]

one idea was to see if we could do Win+? to work.

[AnuthaDev]

one idea was to see if we could do Win+? to work.

How feasible would it be to allow shortcuts to be double press instead of a key combo or long press? For e.g. double press shift to enable caps lock. And in this instance something like double press alt or any other key to bringup the guide...

[crutkas]

@AnuthaDev file a new issue for that. That would be an enhancement for Keyboard manager. (which would pipe into the functionality you're seeing)

[Aaron-Junker]

The JSON scheme for this would be:

{
  "$schema": "https://json-schema.org/draft-07/schema#",
  "title": "PowerToys Shortcut Guide shortcuts manifest",
  "type": "object",
  "properties": {
    "AppName": {
      "type": "string",
      "description": "Name of the app where these shortcuts are shown. Value always to always show the shortcuts.",
      "pattern": "^.*.exe$|^powertoys:windowsdefault$|^powertoys:always$",
      "required": true
    },
    "Shortcuts": {
      "type": "array",
      "description": "Array of sections containing shortcuts for the current app",
      "required": true,
      "items": {
        "type": "object",
        "properties": {
          "SectionName": {
            "type": "string",
            "description": "The title of the section.",
            "required": true
          },
          "Properties": {
            "type": "array",
            "description": "Array of shortcuts",
            "required": true,
            "items": {
              "type": "object",
              "properties": {
                "Name": {
                  "type": "string",
                  "description": "Identifier of the shortcut"
                },
                "Win": {
                  "type": "boolean"
                },
                "Ctrl": {
                  "type": "boolean"
                },
                "Shift": {
                  "type": "boolean"
                },
                "Alt": {
                  "type": "boolean"
                },
                "Keys": {
                  "type": "array",
                  "required": true,
                  "description": "Array of strings represnting keys. There are no restrctions, but some keys will get localised (like \"PAGE DOWN\" or \"DELETE\") or will get displayed with a special icon (for instance \"UP\").",
                  "items": {
                    "type": "string"
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

[LucasOe]

I'm not sure if it has already been mentioned, but the Shortcut Guide shouldn't show shortcuts that have been disabled in the keyboard manager.

[aaronliu0130]

I wonder what the status of this is?

[Do7and]

@Aaron-Junker How is DIY shortcuts guide now? Is the feature you mentioned now available? There are too many shortcuts， I truly need it.

[Aaron-Junker]

@Aaron-Junker How is DIY shortcuts guide now? Is the feature you mentioned now available? There are too many shortcuts， I truly need it.

@Do7and Sorry to disappoint you. This was just a concept. This is still in our backlog, but there was no progress on this.

[sba923]

@Aaron-Junker How is DIY shortcuts guide now? Is the feature you mentioned now available? There are too many shortcuts， I truly need it.

@Do7and Sorry to disappoint you. This was just a concept. This is still in our backlog, but there was no progress on this.

I understand there are other priorities.

TBH the current shortcut guide is pretty useless (to me, at least).