Shortcut

Shortcut components display keyboard shortcuts, providing users with quick access to actions and commands. They enhance efficiency by allowing users to perform tasks faster.

Overview

Shortcuts help users accomplish repetitive tasks more efficiently by providing direct access to commands using predefined key combinations.

When to use

• In applications with many features, shortcuts reduce the cognitive load and the need to navigate complex menus.

• Shortcuts are ideal for tasks users frequently perform, like copying, pasting, or saving, helping them complete these actions quickly.

• Use shortcuts in environments where users need to act fast, such as gaming interfaces or complex software where efficiency is key.

• Shortcuts are particularly useful for experienced users who prefer keyboard-based interactions to speed up their workflows.

When not to use

• Avoid using shortcuts as the primary method of interaction for users who are unfamiliar with the interface or keyboard commands.

• Shortcuts may not be practical on touch-based interfaces, as users rely on taps and swipes rather than keyboard input.

• Users with cognitive impairments or visual challenges may struggle with remembering or recognizing shortcuts.

Types

Anatomy

1. Key: Visual representation of a keyboard key.

2. Shortcut Action: Text indicating the result of pressing the shortcut.

3. Divider: Visual element that differentiates between multiple shortcuts.

4. Key Letter: Letter or number representing the specific key to press.

Size

Size	Text (px)	Icon (px)
Small	14	14
Medium	16	16
Large	20	20

Size	Text (px)	Icon (px)
Medium	14	16
Large	16	20

Accessibility

• Ensure Discoverability: Include visible hints or tooltips showing shortcuts next to buttons to help users learn and remember them.

• Avoid Overwhelming Users with Too Many Shortcuts: Limit the number of shortcuts to essential functions to prevent users from feeling overwhelmed or confused.

• Provide Clear Labels for Shortcuts: Ensure that all shortcuts have clear, descriptive labels to help screen readers and users with cognitive impairments understand their function.

Example

• Text Editing Applications: Shortcuts for cut, copy, and paste, allowing users to manipulate text quickly.

• Design Tools: Keyboard shortcuts for frequently used actions like zooming in/out, undoing, and saving in design software.

• Web-Based Tools: Shortcuts for navigating between sections or tabs in complex web applications like dashboards.

• Gaming Interfaces: Key combinations that allow gamers to switch between weapons or perform quick in-game actions.

• Productivity Suites: Shortcuts for formatting text, inserting elements, or switching between documents in applications like Microsoft Office or Google Docs.