Keyboard Shortcuts + Mouse & Trackpad Input

Launching Shortcuts v2

Copy for Slack

What: We’ve changed our keyboard shortcuts

Why: We wanted to design a shortcut system from scratch so it could be more cohesive, extensible, and powerful. The previous shortcut system had grown organically from our early days and hadn’t been crafted as a cohesive system. Now is the right time, since we won’t be in Beta forever, and we’ll only get one shot at a re-write like this.

How: New mappings, which you can read about in the Keyboard Shortcut dialog in Flux by typing ⌘ / on Mac or Ctrl / on Windows. You may notice some details have shifted, so if you’re already an avid shortcut user, be sure to review the changes.

The new set should be better in these ways:

Mnemonic relationships are easier to learn and remember.

More consistent use of modifiers for predictable behavior. For example, Shift often reverses a base action.

Better at avoiding collisions with browsers and OSs.

Easier to extend as we grow.

Better consistency across platforms

Bonus: Coming in the next few weeks, we’ll ship an additional feature called “sequenced shortcuts”, which will open up a bunch of new possibilities. More on that soon!

Copy for Twitter Thread

We put a ton of care into redesigning our keyboard shortcuts, and at last today they launched!

Our existing shortcuts hadn’t been designed as a cohesive system - they grew organically from our early days. This made them hard for users to learn and hard for us to extend. Seeing this, and knowing we wouldn’t be in beta forever, I knew we had to act.

I set goals for the new system:

easy to learn and remember,

ergonomic to use,

predictable modifier keys,

avoid collisions with OS and browser,

consistent across platforms,

easy to extend as we grow.

1. In order to be memorable, I used mnemonics devices such as a letter from the action name, like type F to Flip; symbolic relationships, like [ or ] to Rotate Left or Right; and grouping related actions spatially on the keyboard.

I took this a step further by re-using keys like F in different but related contexts. In PCB mode, F flips a part; and while drawing connections, F flips the elbow of the line. (actually just noticed an issue with that so... wait a little before trying that example)

2. Ergonomics mostly means avoiding claw inducing combinations like ⌥+⇧+⌘+C (which I still had to use LOL, but it’s for a less commonly used command).

I explored setting commands on the left side of the keyboard so that ergonomically, you could use your mouse with one hand and key commands with the other. But this proved problematic: 10% of the population is left handed, and the compromises against mnemonics weren’t worth it.

3. Making modifier keys predictable was harder. Not sure I totally succeeded here with so many modifier+letter shortcuts taken by the browser or OS. The results are a mix, but turned out okay...

Single letter actions as the default, like C to Insert Comment.

⇧ reverses or modifies the action, like ⇧+C to Hide/Show Comments.

⌥ as the “primary” or “action oriented” modifier like ⌥+N for New Project.

⌘ where I must, like ⌘+C for Copy, and otherwise avoided it.

4. Avoiding collisions with the browser and OS required careful tracking, research, and trial and error. And it resulted in many compromises. For tracking, I used a spreadsheet in @Coda and then @KeyCombiner to mock up the system and catch early collisions.

You can see the Coda tracking spreadsheet here

https://coda.io/@brooks-solveig/keyboard-shortcuts⁠

⁠

The @KeyCombiner collection is here. It’s a little out of date since I only used it for early prototyping, not tracking.

https://keycombiner.com/collecting/collections/shared/28ed61ee-a995-4ff4-80c8-5d92bca784f3⁠

⁠

5. I wanted consistency across platforms. Any user that switches machines will get it right away - great! But it’s also for me - this thing has a ton of moving parts and constraints, so the consistency gave me one less thing to manage. What that boiled down to was this...

Match modifiers across platforms. ⌘ = Ctrl, ⌥ = Alt, ⇧ = Shift.

But that leaves ⌃ = Meta? No bueno. Meta is generally off limits to applications on Windows, which makes its corresponding key on Mac, the Control key, also off limits.

6. Lastly, the system needed to be easy to extend as we grew. All the goals I’ve discussed aid in this, but I also looked a bit into the future. For features we’d only vaguely discussed, how would this system work? Where am I boxing myself into a corner?

Extensibility lead me to sequenced shortcuts, which are a series of keys typed one after the other instead of all at once. This allows for way more mappings of actions, and it’s incredibly powerful for users. We have this but it isn’t ready for launch quite yet. Soon!

There are more details, like the correct order for modifier keys, which I’ve gathered in my notes here

https://coda.io/@brooks-solveig/keyboard-shortcuts/keyboard-shortcut-notes-1⁠

⁠

I hope this was helpful! You can try the shortcuts out for yourself on this @buildwithFlux project. Type ⌘+/ on Mac or Ctrl+/ on Windows to open the keyboard shortcuts dialog.

https://www.flux.ai/brooks/28-pins-project?editor=pcb_3d⁠

⁠

But designing keyboard shortcuts is tricky - there are conventions but no standards, many constraints set by browsers on top of OS’s, and their abstract nature requires different design methods. I had to do some research...

The conventions are too many to note here, but you can read about my research in this Coda.

https://coda.io/@brooks-solveig/keyboard-shortcuts/keyboard-shortcut-notes-1⁠

⁠

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.