Forma 36 Logo

Keyboard Shortcuts

Why use keyboard shortcuts?

Keyboard shortcuts enable power users to boost their productivity by providing an efficient way to perform repetitive or common tasks.

Here are some guidelines to follow when implementing keyboard shortcuts for Contentful products.

Don't overload users with keyboard shortcuts

Keyboard shortcuts should be prioritised for frequent application tasks. Not every action needs a keyboard shortcut, and overloading the user with many keyboard shortcuts can harm the usefulness of them.

Suggestions

  • Only use shortcuts for most frequently performed tasks

Keep keyboard shortcuts learnable

Keyboard shortcuts should be learnable rather than unique. Use shortcut keys which use the first letter of the action being performed, for example, use r or d for removing/deleting, rather than q or another character). Make sure this shortcut key matches the name of the CTA used in the UI for performing the task

Suggestions

  • Use the first letter of the action being performed as the shortcut key
  • Make sure shortcut key matches the equivalent CTA in the UI

Avoid overriding application or operating system keyboard shortcuts

Web browsers, screen-readers, screen recording software, and operating systems all make use of keyboard shortcuts, some of which could be vital to the user's productivity or ability to use Contentful. We should not take these keyboard shortcuts away from our users.

Suggestions

  • Use single key keyboard shortcuts rather than ctrl/cmd + key combinations.
  • Allow users to disable shortcuts.

Use common conventions

There are some common conventions for keyboard shortcuts which are emerging in browser-based software. We should leverage these as they are conventions are users could already be aware of and would save us from having to reprogram muscle memory. Here are some examples of common conventions:

Keyboard shortcutCommon use
/Most commonly used for focusing a search bar or going to a global search feature
?Most commonly used for showing a help panel about shortcuts
EscMost commonly used to trigger as close action, such as dismissing modals
gMost commonly used to trigger goto/jump features, normally in combination with another key to represent the section being jumped to. For example g,i to go to an inbox, or g,s to go to settings.
j/kMost commonly used as previous/next keys when navigating items

Suggestions

  • Use common keyboard shortcut conventions

Provide a cheat sheet

To make keyboard shortcuts easier to learn, provide a cheat sheet showing all keyboard shortcuts which can be easily accessed by users for reference.

Suggestions

  • Provide a cheat sheet showing all global keyboard shortcuts, triggered by the ? key.

Make sure keyboard shortcuts are accessible when editing text

Editing text shouldn't block the user's ability to access shortcut commands.

Suggestions

  • Make sure the textfield with current focus can be unfocused with the esc key.