So researching conventions across popular apps or products in your category can help ensure you’re following what users expect.
3 categories of conflicts to be aware of:
OS-level (Cmd + Tab)
Browser-level (Cmd + N)
Page-level (Cmd + C)
Strategies for binding
Adjacent / Ergonomic
Tactics for binding
Single letter: (R toactive the Rectangle drawing tool) Opens up a whole category of shortcuts. Only downside is that text fields would block their use, so make sure they’re bound to actions you want need in text fields.
Sequenced letters: (G then P to “go” to “profile”) Powerful and flexible, but less used conventionally. Opens up a ton of possibilities, assuming your users will learn them. I’ve not favored this tactic.
Modifier keys: (Shift + Cmd + P to convert an object to a part) Conventional and combinations allow for more actions. Only downside is conflicts with OS, Browser and Page.
When to use each
I roughly use single letter commands for canvas actions
Cmd/Ctrl is the primary modifier
Shift + Cmd usually alters whatever Cmd was doing
Option/Shift is roughly my tertiary modifier
From there, it’s anyone’s guess
Cross platform compatibility
I want our system to be as close as possible across platforms. This makes it easy for users to switch, but also easier for us to maintain. There are two tactics I’ve used here
Tracking conflicts: each browser and OS has some special shortcuts that differ. Luckily there aren’t too many
Aligning modifiers: this mostly means not using the Control key on Mac.
Cmd → Ctrl
Shift → Shift
Option → Alt
Ctrl on Mac would correlate to the Windows Key (“beta”), but that key is reserved for system actions exclusively, so we avoid it.
On Mac and Windows, the conventional order of modifiers is Control — Alt — Shift — Command
Mac seems to communicate shortcuts using symbols and no extra punctuation: ⇧⌘Z
Windows seems to communicate shortcuts using words and the + punctuation: Ctrl + Shift + Z
How to actually design the shortcuts
Log all the actions you might like to use in a spreadsheet
Group them by category
List out the keys you’d like to use for Windows and Mac
Upload a CSV to keycombiner.com to prototype
The best way I’ve found to track shortcuts
Virtual keyboard makes it easy to spot conflicts and feel out adjacency
Has limitations - a CSV is the easiest way to populate it, it’s optimized for practice rather than design, and it’s only possible to capture key commands in the product for a given platform when you’re on a given platform