Components

Keyboard Shortcut

Design
Code

Communicate how a key or keys can replace the mouse.

The keyboard shortcut exists only to show which key or combination of keys performs a given action. The action itself should be further explained in accompanying content.

Style

The keyboard shortcut and accompanying content should always appear as a table in-line, as a dialog or via icon label.

shift+h

Functions

If several shortcuts are available but real estate is limited, the shortcuts can be presented as a dialog triggered by the keyboard icon.

keyboardshortcuts
a
Backward 5 seconds
f
Forward 5 seconds
s
Back 1 frame
d
Forward 1 frame
space
Play/Pause

Content

Text options within the keyboard shortcut are limited. Case and punctuation depend entirely on what purpose the text serves.

Keys

All shortcuts should do their best to match what appears on the user’s keyboard.

  • All single letters A-Z are uppercase.
  • For non-letter keys such as enter, esc and shift, stick to lowercase.
  • Use the arrow symbol as opposed to spelling things out.
  • Same goes for numbers—numerals (1, 2, 3) are perfect.

Modifiers

The only punctuation you should need is the + to indicate a combination of keys will activate the shortcut.

shift+h

For a sequence of keys where one must follow the other, spell out then. Stick to lowercase to match the non-letter keys.

fthenw

If two different keys can execute the same action, or the shortcut itself may look different on the user’s keyboard, insert or.

altoroption

Results

The action performed by a keyboard shortcut should not come off as a complete sentence. Use sentence case, but don’t give it closing punctuation.

keyboardshortcut-result-dont

Don'tget too detailed with the result.

keyboardshortcut-result-do

Dostick to the verb phrase.

Usage

Unique Functions

Never use one key for multiple functions. Avoid the direction to “hold” a key for the sake of performing an action different than that of a tap.

Instead, give each action its own key or combination of keys. We never know how quickly or slowly a user may interact with their keyboard.

keyboardshortcut-function-dont

Don'tinclude any modifier not related to sequence.

keyboardshortcut-function-do

Doassign a unique function its own key.

Container

Always build the shortcut in a table or grid with everything (shortcut and result) left-aligned. For recommended margins within that grid, be sure to check our space guidelines.

keyboardshortcut-container-dont

Don'tcenter the shortcut, no matter how few there may be.

keyboardshortcut-container-do

Douse a grid to make spacing easier.

Icon Label

A keyboard shortcut displayed via icon label should always appear in parentheses.

Place it at the end of the label itself, following the action they’d perform. (The action is required. A shortcut should never appear on its own!)

keyboardshortcut-iconlabel-dont

Don'tprovide a shortcut with zero context.

keyboardshortcut-iconlabel-do

Dolist the icon’s purpose first.

Organization

Use logic to group related shortcuts. Anything related to playback should appear together, as should tags, highlights, page controls, etc.

keyboardshortcut-organization-dont

Don'tuse a random system to organize shortcuts.

keyboardshortcut-organization-do

Douse headings to make large tables easier to navigate.

Platforms

platformnotes
Web
  • Stick to the guidelines above.
Apple