Overview

Keyboard interaction can benefit both users who use a keyboard as a primary method when navigating the product and users who use a keyboard to perform actions within the product.

These guidelines explain keyboard interaction, which includes keyboard navigation and keyboard shortcuts, and they apply either to the entire application or to specific components.

Scopes

Global Keyboard Interaction

Keyboard navigation and keyboard shortcuts that are related to the entire application fall into this scope. The actions that you can perform using keyboard navigation and shortcuts are not limited to a specific component in the page, but they are effective in the entire application.

For example in SAP Analytics Cloud, in the Story page saves the entire view in the active story.

Component-specific Keyboard Interaction

This scope covers any key combinations that trigger actions in a specific UI component. The user should be able to identify the focused component with a clear visual distinction.

A key combination in this scope is contextual to a component and overrides the same key combination defined for the global scope.

For example in SAP Analytics Cloud, executed in the Script Editor selects the whole content in the editor only.

Principles and Guidelines

Here are basic design principles and guidelines for keyboard interactions.

Keyboard interaction, especially keyboard navigation, affects the accessibility of the product. For this reason, always keep in mind to check if the interaction fulfills related standards in the list below.

Find more details for each standard here: Foundation – Accessibility

Define shortcuts that are easy to learn and remember.

Users like to use keyboard shortcuts to speed up their tasks. Make them straightforward and avoid complex key combinations that consist of more than three keys. Try to define a combination that users can easily connect with a target command.

Consider applying well-known key combinations for commonly used actions.

Shortcuts can be quickly picked up and understood by doing so. For example, use to copy a selected piece of content. Sharing the same shortcuts with similar products can also reduce user’s cognitive load. Find shortcuts of common actions here: Global Keyboard Interaction – Navigation

If you design a custom component for specific use cases and would like to define shortcuts for the component, please refer to the shortcuts that already exist for the Fiori components, that are used for similar purposes and/or that are designed in similar forms. Keeping consistency between custom components and standard components can improve learnability. Find shortcuts for the Fiori components here: Fiori Keyboard Interaction – UI Elements. Also, please refer to the shortcuts defined for common actions in HANA & Analytics products here: Component-specific Keyboard Interaction

Avoid key combinations reserved by Fiori and browsers.

They can interfere with user actions unless you’re using them for the exact same action. You can find the list here: Global Keyboard Interaction – Keyboard Shortcuts.

Minimize the number of modifier keys used in shortcuts for frequently-used actions.

Users can save key presses whenever performing an action. Also, this can improve the accessibility.

Users will not use keyboard shortcuts if they are not aware of them. In addition to describing them in the documentation, commonly-used shortcuts can be exposed in the UI for better visibility.

Spell out key names when shortcuts are displayed in the UI.

Users can easily and quickly pick up shortcuts even they don't remember all special symbols for keys. In addition to that, users won't be confused with symbols that look similar. For example, ⌃ (Control key) and ^ (symbol printed on the number 6 key) look similar and will be hard to recognize in a small size.

When you display shortcuts in the UI, follow the same format with a related Help documentation. Check the Documentation section for considerations. Also, keep in mind that the names of some keys can be translated.

Documentation

Communicate newly-defined shortcuts and additional navigation schemes to the development team and of course to the users.

In UX Specification

Use a set of graphical assets from the UX Specification Template to document keyboard interaction.

Keyboard Navigation

The SAPUI5 library provides default keyboard navigation. In case you want to apply additional navigation elements such as tab stops or explicitly specify regions for group skipping, please document these interactions in the UX specifications with other accessibility specifications.

Image

Keyboard Shortcuts

Document keyboard shortcuts in the UX specification with other accessibility specifications.

Image

In SAP Help Portal Documentation

All shortcuts defined for the product should be included on a related page of the SAP Help Portal to make users aware of the shortcuts.

Considerations

Example

<div> <div>Command</div> <div>Key Combination</div> <div>Description</div> </div> <div> <div>Bring selection backward</div> <div> <p>Ctrl + Down (Windows)</p> <p>Command + Down (Mac)</p> </div> <div></div> </div> <div> <div>Bring selection forward</div> <div> <p>Ctrl + Up (Windows)</p> <p>Command + Up (Mac)</p> </div> <div></div> </div> <div> <div>Save</div> <div> <p>Ctrl + S (Windows)</p> <p>Command + S (Mac)</p> </div> <div>Save a document.</div> </div>

Resources