# Shortcut

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FglEwKTA6RkOT6UuZFzBL%2FFrame%2045.png?alt=media&#x26;token=3a715a14-c2de-43fb-8ff3-55ee5502194d" alt=""><figcaption></figcaption></figure>

## Overview

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

{% embed url="<https://www.figma.com/design/4NwKhd4dwRhRF5Zpiooi69/Components?node-id=2-242274&t=0Thv0LIO2gFzE3eo-4>" %}

## When to use

* In applications with many features, shortcuts reduce the cognitive load and the need to navigate complex menus.&#x20;
* Shortcuts are ideal for tasks users frequently perform, like copying, pasting, or saving, helping them complete these actions quickly.&#x20;
* Use shortcuts in environments where users need to act fast, such as gaming interfaces or complex software where efficiency is key.&#x20;
* 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.&#x20;
* Shortcuts may not be practical on touch-based interfaces, as users rely on taps and swipes rather than keyboard input.&#x20;
* Users with cognitive impairments or visual challenges may struggle with remembering or recognizing shortcuts.

## Types

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FaZpomKVbdyEOv5Y0LpWg%2FVariants.png?alt=media&#x26;token=a6e61d41-a447-42bf-8f21-6717c4da613b" alt=""><figcaption></figcaption></figure>

## Anatomy

1. **Key:** Visual representation of a keyboard key.&#x20;
2. **Shortcut Action:** Text indicating the result of pressing the shortcut.&#x20;
3. **Divider:** Visual element that differentiates between multiple shortcuts.&#x20;
4. **Key Letter:** Letter or number representing the specific key to press.

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FOaqEXfLblUFW82w7WzO1%2Fanatomy.png?alt=media&#x26;token=d84fcbc3-723e-428f-8d8d-b62422af11e6" alt=""><figcaption></figcaption></figure>

## Size

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FygKKWqBFqoGhjMzNYU8X%2Fsize1.png?alt=media&#x26;token=4509628e-30e4-47cb-b859-e87169583347" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2Fjs5vdfWREMDinHbIQIsH%2Fsize2.png?alt=media&#x26;token=bc50a41f-ffe4-4afd-a959-fa11ca3bbf23" alt=""><figcaption></figcaption></figure>

| 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.&#x20;
* **Avoid Overwhelming Users with Too Many Shortcuts:** Limit the number of shortcuts to essential functions to prevent users from feeling overwhelmed or confused.&#x20;
* **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.&#x20;
* **Design Tools:** Keyboard shortcuts for frequently used actions like zooming in/out, undoing, and saving in design software.&#x20;
* **Web-Based Tools:** Shortcuts for navigating between sections or tabs in complex web applications like dashboards.&#x20;
* **Gaming Interfaces:** Key combinations that allow gamers to switch between weapons or perform quick in-game actions.&#x20;
* **Productivity Suites:** Shortcuts for formatting text, inserting elements, or switching between documents in applications like Microsoft Office or Google Docs.
