Skip to content
Keyboard Shortcuts + Mouse & Trackpad Input
Flux's ShortcutsFlux's Camera ControlsKeyboard Shortcut NotesFigma's ShortcutsLinear's ShortcutsBrooks' Thoughts on Shortcuts
More
Share
Explore

Keyboard Shortcut Notes

Research notes taken by
⁠
while developing a shortcut strategy for his startup’s product, a browser-based, collaborative circuit design tool called
⁠
.
Research
Three categories of hotkeys to be careful of
OS-level hotkeys
Like CMD+Tab on Mac
Consider not overriding
Browser-level hotkeys
Like CMD+N on Chrome
Consider not overriding
Page-level hotkeys
Like CMD+C
Match expected functionality in Flux
Letters only shortcuts
Like c for comment
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
Quasimodes
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
Desktop text editors
Cmd+C/V/X/D - copy/paste/cut/duplicate
Cmd+Z - undo
Cmd+A - select all
Cmd+B, Cmd+I, Cmd+U - formatting
Google Docs
?
/ - set focus field
up/down arrow keys
left/right arrow keys - collapse/expand tree nodes
Tab/Shift+Tab - indent/outdent or focus form elements
Esc - close popup
Cmd+Enter - submit form
Other pro circuit tools
Will require more research...
Figma structures theirs like a pro tool, relying heavily on modifier keys
How to assign shortcuts
1. Mnemonics - O is open
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”
Will help regroup later
Pay maximum attention to discoverability
Provide a Cheat Sheet
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.
⁠
0_n5VDVDbbCbtai7na.png
⁠
⁠
The alternative is boring.
⁠
0_rWLUMsTC9U3G6_BS.png
⁠
⁠
Mention shortcuts in menus
In tooltips
Hints
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
⁠
1_reHyxQJ_3Mp4NkRdT8MRMQ.png
⁠
⁠
Not every action needs a keyboard shortcut
⁠
⁠
has a dope system for prioritizing and grouping shortcuts
This is my next step

Bibliography
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.