Research notes taken by while developing a shortcut strategy for his startup’s product, a browser-based, collaborative circuit design tool called . Raw Research
Three categories of hotkeys to be careful of Match expected functionality in Flux Using these helps avoid collisions with existing hotkeys. This might be the move for a web app like ours. Some services, like Gmail, use 2 letter combinations in sequence, like g c. This seems not awesome imo. An example of a better way to sequence letter shortcuts is to have one key open a menu and then another select an item on that menu A kind of mode without a UI on or off switch where special actions are available. Eg: pan on the canvas when spacebar is pressed. There are no standards, but there are conventions Cmd+C/V/X/D - copy/paste/cut/duplicate Cmd+B, Cmd+I, Cmd+U - formatting left/right arrow keys - collapse/expand tree nodes Tab/Shift+Tab - indent/outdent or focus form elements Will require more research... Figma structures theirs like a pro tool, relying heavily on modifier keys 2. Speed - related actions are near each over, like Cmd+C and Cmd+V Keep the system consistent over time Have a cheat sheet in front of you. Better yet, Never let developers set shortcuts “because they like it in FooEditor” Pay maximum attention to discoverability What if the cheatsheet was an actual keyboard which displayed the functions on the keys? A short phrase could be shown on the key, but you could click it or type that key to view more info about it. This way you could also use combos like Shift+I to quickly see what it did. The alternative is boring. Mention shortcuts in menus Give access to primary navigation Give main navigation and key links shortcuts Four modes: Schematic, Code, BOM, PCB The three tabs in the drawer: Library, Objects, Rules Flux Menu, then up/down arrows to select, return to confirm Make shortcuts easy to learn and memorize Minimize use of modifier combinations This is perhaps less relevant to a pro app Track cross-platform differences to modifier keys Not every action needs a keyboard shortcut has a dope system for prioritizing and grouping shortcuts
Bibliography
Condensed Notes
There’re no standards, only conventions
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:
Strategies for binding
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
Cmd/Ctrl should be used when necessary and otherwise avoided Use single letter commands for canvas actions Shift alters or reverses the action Option is the “primary” or “action oriented” modifier Control should be avoided on Mac, Meta on Windows 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. Ctrl on Mac would correlate to the Windows Key (“beta”), but that key is reserved for system actions exclusively, so we avoid it. Syntax
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 List out the keys you’d like to use for Windows and Mac Upload a CSV to keycombiner.com to prototype Keycombiner
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 Here’s Flux’s collection on keycombiner
