[Fluent UX] Shortcut Guide v2 #890

crutkas · 2019-12-06T22:26:37Z

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 · 2020-01-30T05:39:40Z

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 · 2020-01-31T00:45:53Z

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

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

hawkerm · 2020-01-31T06:22:45Z

@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 · 2020-02-09T13:28:37Z

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 · 2020-03-05T19:15:05Z

how to execute this with WinUI and xaml island

take screenshot of target desktop.
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 · 2020-03-05T19:40:07Z

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

crutkas · 2020-03-05T22:42:10Z

those ... should work.

crutkas · 2020-06-16T21:43:32Z

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

niels9001 · 2020-06-16T22:03:21Z

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 · 2020-06-16T23:04:16Z

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

AnuthaDev · 2020-06-17T15:48:39Z

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 · 2020-06-17T16:44:32Z

@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 · 2023-09-06T18:27:50Z

I like the idea of different files for the various programs from @BetterWorld-Liuser. An idea would be to create a repository like the winget manifest one with different files for different programs. PowerToys then could identify downloaded programs and install the needed files.

For example a manifest for notepad could look like this:

{
	"AppName": "notepad.exe",
	"Shortcuts": [
		{
			"SectionName": "Notepad",
			"Properties": [
				{"Name": "Show menu indicators", "Win": false, "Ctrl": false, "Shift": false, "Alt": true, "Keys": []},
				{"Name": "File menu", "Win": false, "Ctrl": false, "Shift": false, "Alt": true, "Keys": ["F"]},
				{"Name": "Edit menu", "Win": false, "Ctrl": false, "Shift": false, "Alt": true, "Keys": ["E"]},
				{"Name": "View menu", "Win": false, "Ctrl": false, "Shift": false, "Alt": true, "Keys": ["V"]},
				{"Name": "Open Notepad settings", "Win": false, "Ctrl": false, "Shift": false, "Alt": true, "Keys": ["S"]}
			]
		},
		{
			"SectionName": "File",
			"Properties": [
				{"Name": "New tab", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["N"]},
				{"Name": "New window", "Win": false, "Ctrl": true, "Shift": true, "Alt": false, "Keys": ["N"]},
				{"Name": "Open", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["O"]},
				{"Name": "Save", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["S"]},
				{"Name": "Save as", "Win": false, "Ctrl": true, "Shift": true, "Alt": false, "Keys": ["S"]},
				{"Name": "Save all", "Win": false, "Ctrl": true, "Shift": false, "Alt": true, "Keys": ["S"]},
				{"Name": "Print", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["P"]},
				{"Name": "Close tab", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["W"]},
				{"Name": "Close window", "Win": false, "Ctrl": true, "Shift": true, "Alt": false, "Keys": ["W"]}
			]
		},
		{
			"SectionName": "Edit",
			"Properties": [
				{"Name": "Undo", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["Z"]},
				{"Name": "Cut", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["X"]},
				{"Name": "Copy", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["C"]},
				{"Name": "Paste", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["V"]},
				{"Name": "Delete", "Win": false, "Ctrl": true, "Shift": true, "Alt": false, "Keys": ["DEL"]},
				{"Name": "Find", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["F"]},
				{"Name": "Find next", "Win": false, "Ctrl": false, "Shift": false, "Alt": false, "Keys": ["F3"]},
				{"Name": "Find previous", "Win": false, "Ctrl": false, "Shift": true, "Alt": false, "Keys": ["F3"]},
				{"Name": "Replace", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["H"]},
				{"Name": "Go to", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["G"]},
				{"Name": "Select all", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["A"]},
				{"Name": "Time/Date", "Win": false, "Ctrl": false, "Shift": false, "Alt": false, "Keys": ["F5"]}
			]
		},
		{
			"SectionName": "View",
			"Properties": [
				{"Name": "Zoom in", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["PLUS"]},
				{"Name": "Zoom out", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["MINUS"]},
				{"Name": "Restore default zoom", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["0"]}
			]
		}
	]
}

Or another example for Whatsapp:

{
	"AppName": "WhatsApp.exe",
	"Shortcuts": [
		{
			"SectionName": "WhatsApp",
			"Properties": [
				{"Name": "New chat", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["N"]},
				{"Name": "New group", "Win": false, "Ctrl": true, "Shift": true, "Alt": false, "Keys": ["N"]},
				{"Name": "Search", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["F"]},
				{"Name": "Profile", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["P"]},
				{"Name": "Decrease text size", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["-"]},
				{"Name": "Increase text size", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["+"]},
				{"Name": "Reset text size", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["0"]}
			]
		},
		{
			"SectionName": "Chat",
			"Properties": [
				{"Name": "Edit last message", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["UP"]},
				{"Name": "Emoji panel", "Win": false, "Ctrl": true, "Shift": true, "Alt": false, "Keys": ["E"]},
				{"Name": "GIF panel", "Win": false, "Ctrl": true, "Shift": true, "Alt": false, "Keys": ["G"]},
				{"Name": "Search in chat", "Win": false, "Ctrl": true, "Shift": true, "Alt": false, "Keys": ["F"]}
				
			]
		},
		{
			"SectionName": "Chat navigation",
			"Properties": [
				{"Name": "Toggle read", "Win": false, "Ctrl": true, "Shift": true, "Alt": false, "Keys": ["U"]},
				{"Name": "Mute chat", "Win": false, "Ctrl": true, "Shift": true, "Alt": false, "Keys": ["M"]},
				{"Name": "Close chat", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["W"]},
				{"Name": "Close chat", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["F4"]},
				{"Name": "Previous chat", "Win": false, "Ctrl": true, "Shift": true, "Alt": false, "Keys": ["TAB"]},
				{"Name": "Previous chat", "Win": false, "Ctrl": true, "Shift": true, "Alt": false, "Keys": ["["]},
				{"Name": "Next chat", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["Tab"]},
				{"Name": "Next chat", "Win": false, "Ctrl": true, "Shift": true, "Alt": false, "Keys": ["]"]},
				{"Name": "Open chat", "Win": false, "Ctrl": true, "Shift": false, "Alt": false, "Keys": ["1-9"]}
			]
		}
	]
}

Aaron-Junker · 2023-09-06T18:55:45Z

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 · 2023-11-27T16:41:47Z

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 · 2023-12-04T23:03:53Z

I wonder what the status of this is?

Do7and · 2024-09-04T15:37:31Z

@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 · 2024-09-04T15:40:06Z

@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 · 2024-09-04T15:56:22Z

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

crutkas mentioned this issue Dec 6, 2019

Modernizing Look / Feel across all PowerToys #891

Closed

9 tasks

crutkas added Product-Shortcut Guide Refers to the Shortcut Guide PowerToy Area-User Interface things that regard UX for PowerToys labels Dec 7, 2019

This was referenced Feb 10, 2020

[Shortcut Guide] Keyshortcut changes based on OS version, Narrator is incorrect on 19h1+ #1260

Open

Shortcut guide v2 - WinUI3 body #156

Closed

crutkas mentioned this issue Feb 20, 2020

Shortcut adjustments for fade effect and interaction model #853

Closed

5 tasks

crutkas added this to the Build 2020 milestone Mar 5, 2020

crutkas added the External Dependency-WinUI 3 Dependency on WinUI label Mar 12, 2020

crutkas modified the milestones: Build 2020, v1.0 Release May 19, 2020

crutkas pinned this issue Jun 16, 2020

crutkas added the Needs-Community Feedback We need additional help with how something should act / look label Jun 16, 2020

crutkas mentioned this issue Jun 16, 2020

[Shortcut Guide] Shortcuts list [tracker] #179

Open

This was referenced Jun 16, 2020

Screen preview in shortcut view only shows current display, black for all others #792

Closed

Allow for Configuration of what is displayed for Shortcut Guide #235

Closed

shortcut guide mini version - only Taskbar shortcuts numebrs #4345

Closed

JamesDBartlett3 mentioned this issue Jul 13, 2023

Shortcut Guide should let you add any custom shortcuts from any software #20940

Closed

crutkas mentioned this issue Jul 21, 2023

Language of the ShortcutGuide #23868

Closed

jpfeifer-web mentioned this issue Aug 23, 2023

Add More Shortcuts to System Tray #27085

Closed

davidegiacometti mentioned this issue Aug 24, 2023

Powertool's Shortcuts incuding the powertool shortcuts #28132

Closed

crutkas mentioned this issue Aug 25, 2023

PowerToys Shortcuts #28122

Closed

davidegiacometti mentioned this issue Oct 24, 2023

Shortcut Guide: Extensions for programs #29357

Closed

davidegiacometti mentioned this issue Nov 24, 2023

Custom shortcuts in shortcut guide #29996

Closed

ChadMcCaffery mentioned this issue Dec 5, 2023

Shortcut Guide: Display PowerToys shortcuts #30201

Closed

heerxingen mentioned this issue Jan 17, 2024

Windows key shortcut guide needs Chinese translation #30991

Closed

This was referenced Mar 7, 2024

翻译 #31661

Closed

please translate 'shortcut guide‘ to chinese #20741

Closed

Aaron-Junker mentioned this issue Mar 12, 2024

Shortcuts Board #31861

Closed

depascalis mentioned this issue Mar 24, 2024

Customize & Contextualize Shortcut Guide #28521

Closed

This was referenced Apr 11, 2024

Missing translation in Shortcut Guide #32392

Closed

Tastenkombinationsübersicht #32381

Closed

jaimecbernardo mentioned this issue Apr 23, 2024

[Power Toys-Shortcut Guide]: Narrator focus is not moving inside the guide pane in scan mode. #32269

Closed

cinnamon-msft mentioned this issue May 3, 2024

针对ShortcutGuide的功能 #20526

Closed

TinkerTob mentioned this issue May 17, 2024

PowerToys Shortcuts in Shortcut Guide #15405

Open

This was referenced Jun 26, 2024

In-Context Shortcut guide support for 3rd party software #25042

Closed

Shortcut guide localization #30438

Closed

crutkas mentioned this issue Aug 12, 2024

Shortcut Guide: Add shortcuts WIN+SHIFT+M and WIN+Z #30562

Closed

Aaron-Junker self-assigned this Oct 9, 2024

Aaron-Junker added the Status-In progress This issue or work-item is under development label Oct 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fluent UX] Shortcut Guide v2 #890

[Fluent UX] Shortcut Guide v2 #890

crutkas commented Dec 6, 2019 •

edited

Loading

hawkerm commented Jan 30, 2020

crutkas commented Jan 31, 2020

hawkerm commented Jan 31, 2020

niels9001 commented Feb 9, 2020

crutkas commented Mar 5, 2020 •

edited

Loading

niels9001 commented Mar 5, 2020

crutkas commented Mar 5, 2020

crutkas commented Jun 16, 2020

niels9001 commented Jun 16, 2020

crutkas commented Jun 16, 2020

AnuthaDev commented Jun 17, 2020 •

edited

Loading

crutkas commented Jun 17, 2020

Aaron-Junker commented Sep 6, 2023 •

edited

Loading

Aaron-Junker commented Sep 6, 2023

LucasOe commented Nov 27, 2023

aaronliu0130 commented Dec 4, 2023

Do7and commented Sep 4, 2024

Aaron-Junker commented Sep 4, 2024

sba923 commented Sep 4, 2024

[Fluent UX] Shortcut Guide v2 #890

[Fluent UX] Shortcut Guide v2 #890

Comments

crutkas commented Dec 6, 2019 • edited Loading

Current screen

Update: Possible Proposed adjustments

hawkerm commented Jan 30, 2020

crutkas commented Jan 31, 2020

hawkerm commented Jan 31, 2020

niels9001 commented Feb 9, 2020

crutkas commented Mar 5, 2020 • edited Loading

niels9001 commented Mar 5, 2020

crutkas commented Mar 5, 2020

crutkas commented Jun 16, 2020

niels9001 commented Jun 16, 2020

crutkas commented Jun 16, 2020

AnuthaDev commented Jun 17, 2020 • edited Loading

crutkas commented Jun 17, 2020

Aaron-Junker commented Sep 6, 2023 • edited Loading

Aaron-Junker commented Sep 6, 2023

LucasOe commented Nov 27, 2023

aaronliu0130 commented Dec 4, 2023

Do7and commented Sep 4, 2024

Aaron-Junker commented Sep 4, 2024

sba923 commented Sep 4, 2024

crutkas commented Dec 6, 2019 •

edited

Loading

crutkas commented Mar 5, 2020 •

edited

Loading

AnuthaDev commented Jun 17, 2020 •

edited

Loading

Aaron-Junker commented Sep 6, 2023 •

edited

Loading