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 shortcut | Common 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 |
| Esc | Most commonly used to trigger as close action, such as dismissing modals |
| g | Most 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/k | Most 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.