Keyboard Shortcuts + Mouse & Trackpad Input

Keyboard Shortcut Notes
Keyboard Shortcut Notes

Research notes taken by

Brooks Solveig⁠

while developing a shortcut strategy for his startup’s product, a browser-based, collaborative circuit design tool called

Flux⁠

Raw 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,

design one in Figma⁠

⁠

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.

⁠

The alternative is boring.

⁠

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

⁠

Not every action needs a keyboard shortcut

⁠

This gal⁠

has a dope system for prioritizing and grouping shortcuts

This is my next step

Bibliography

⁠

https://blog.prototypr.io/keyboard-shortcuts-creation-d5ae2663fdea⁠

⁠

https://www.nngroup.com/articles/ui-copy/⁠

⁠

https://xd.adobe.com/ideas/principles/web-design/best-practices-for-prototyping-keyboard-accessibility/⁠

⁠

https://docs.microsoft.com/en-us/previous-versions/windows/desktop/dnacc/guidelines-for-keyboard-user-interface-design#example-of-linear-extended-selection⁠

⁠

https://sashika.medium.com/j-k-or-how-to-choose-keyboard-shortcuts-for-web-applications-a7c3b7b408ee⁠

⁠

https://developer.apple.com/design/human-interface-guidelines/macos/user-interaction/keyboard/⁠

⁠

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:

OS-level (Cmd + Tab)

Browser-level (Cmd + N)

Page-level (Cmd + C)

Strategies for binding

Discoverable

Memorable

Adjacent / Ergonomic

Conflict-free

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.

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.

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

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

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

https://keycombiner.com/collecting/collections/shared/a92979f6-b1bb-4fbf-b8a2-715fd7a17c56⁠

⁠

this is now out of date

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.

Keyboard Shortcut NotesKeyboard Shortcut Notes