Interaction Design Foundations - Overview

Intro

The interaction design foundations define how the user interface should behave when users interact with it to complete specific tasks and achieve their goals. Interaction occurs through input devices such as a mouse, keyboard, gestures, or voice commands, and output devices like screens or screen readers.

These foundations are standardized across the SAP Design System and cannot be modified by individual teams. They should serve as a baseline when designing components, patterns, and floorplans, where applicable.

We will continue to build out the foundation guidelines on an ongoing basis.

Cursors

Cursors are graphical elements that show the current position in the software interface. The cursor’s visual representation changes, depending on where it is placed. This indicates which mouse interactions are available in the context.

For more information, see Cursors.

Drag and Drop

Drag and drop is an interaction that lets users reorder, resize, move elements, and transfer data with clear real-time feedback.

We categorize drag and drop into four main use cases:

• Reorder: Change the order of items within components, like list items.
• Resize: Adjust component sizes, such as dialog boxes or table columns.
• Move: Shift components to new positions, including dialogs or slider values.
• Data Transfer: Move data between components or applications, like dragging items between lists or uploading files.

For more information, see:

• Drag and Drop Overview
• Reorder
• Resize
• Move
• Data Transfer

Gestures

Gestures are touch-based interactions that use natural hand movements to let users navigate, manipulate, and engage with digital interfaces.

Each gesture – such as swipe, tap, double tap, long press, or rotate – expresses specific intentions. Gestures assist with navigation and tasks, or enable users to adjust the size, position, or orientation of elements on the screen.

For more information, see Gestures.

Motion Design

Motion design brings interfaces to life through the use of animated visual elements, helping users navigate SAP applications more intuitively and efficiently.

By providing clear feedback and highlighting changes with subtle animations, motion design enhances user focus, simplifies complex tasks, and creates a polished, modern experience that encourages user adoption.

For more information, see Motion Design.

[internal_only]

Screen Reader

Every application and UI component should be designed to enable blind and visually impaired users to access all relevant content through screen reader announcements. Ensuring accessibility requires attention to several key considerations when designing UI components for screen reader compatibility.

For more information, see Screen Reader.

[/internal_only]

States

States define the appearance and behavior of a UI element based on user interactions or system status. They influence aspects such as interactivity, visibility, and the semantic meaning of a component. Applying the correct state – or combination of states – helps users identify available options and understand where their input is needed.

UI elements can have different types of states, which may appear individually or combined:

• Component State
• Focus State
• Interaction State
• Selection State
• Value State

For more information, see States Overview and State Combinations.

Wrapping and Truncation

Wrapping and truncation determine how text behaves when its length exceeds the available space. This responsive behavior is consistent across all devices and form factors. Various controls utilize wrapping and/or truncation to manage text display.

For more information, see Wrapping and Truncation.