Glossary

How to Use This Guide / Glossary

Intro

Welcome to the UX glossary, your go-to resource for understanding the various concepts and terms used in the field of SAP User Experience. This glossary is a collection of UX related terms used throughout SAP. It has been compiled and set up by all LoBs in a common work-stream during 2022. It aims to explain and demystify some of the key terms used at UX at SAP, making it easier for both beginners and experienced professionals to navigate this complex landscape.

Accessibility

Usability of a product, service, environment or facility by people with the widest range of capabilities.

The concept of accessibility addresses the full range of user capabilities and is not limited to users who are formally recognised as having a disability.

The usability-orientated concept of accessibility aims to achieve levels of effectiveness, efficiency and satisfaction that are as high as possible considering the specified context of use, while paying particular attention to the full range of capabilities within the user population.
[From ISO9241-171]

Further context:
Providing accessible solutions is essential for SAP solutions, since many customers have policies in place which mandate that the software they give to employees is accessible. For this reason, SAP has a SAP Product Standard Accessibility. See the term “UX Product Standard” for more information.

Application Design Training Material

All the learning and training material made available to designers of applications, be they technology applications or business applications. Training material can come in many forms and sizes, from online courses, self-learning videos, tutorials, etc.

Application Development Training Material

All the learning and training material made available to developers of applications, be they technology applications or business applications. Training material can come in many forms and sizes, from online courses, self-learning videos, tutorials, etc.

Asset Library

A library of assets provided by designers for reuse by product developers.

Examples of assets in an asset library are icons, fonts, illustrations, sounds.

Brand DNA

Company-wide brand guidance on artistic and creative means for designing user experiences which reflect the company’s values and mission.

Component

A reusable building block, also known as a UI element, for creating a user interface.

Design defines what the component looks like and its interaction behavior, independent of the technology used to implement it. Designers can reuse components when designing patterns, floorplans and when designing applications.

Technology libraries and frameworks can provide developers with reusable implementations of components, examples being Web Components, or the component libraries provided with the SAP BTP SDK for iOS and for Android. Note that in technology, the term “component” is used more broadly, covering not only designed components but also patterns etc.
Examples: Button, Toggle and Text input field. A Card is not a component, but rather a pattern.

Component Library

A library of components for reuse.

Example for developers: UI5 web components, native mobile components provided by the SAP BTP SDK for iOS and the SAP BTP SDK for Android.

Further context: see the term “Library”

Consistency

Consistency describes the quality of the relationship between your user’s expectations – his or her mental model – and your product.

Presented information is consistent if items of information with similar intent are presented similarly and items of information with different intent are presented in different style and form within and across the interactive systems and the user’s environment. [From ISO 9241-112]

Consistency is achieved when elements of a UI with similar intent have a consistent look and feel and behave in a similar way. This means that users who are familiar with one application will find it easy to learn and use a new application if the UIs are consistent.

“Consistency is one of the most powerful usability principles: when things behave the same, users don’t have to worry about what will happen.” – Jacob Nielsen

A consistent user experience reduces learning efforts and eliminates confusion.

Examples: applications with the same color themes will appear consistent. Using the same typography (fonts and font usage guidelines), icons and terminology are important for providing consistency. Having a common header bar design at the top of the screen also provides a consistent experience. Also using similar components, patterns and floorplans helps consistency – for example using the same design pattern for a date picker.

Further context:
This series of blog posts explains consistency in more details, and starts with this one:

The Best User Experience Is Consistent – Part 1: About Consistency

See also the SAP Product Standard UX Consistency.

Design Guidelines

The design guidelines of the SAP design system provide information, guidance and recommendations on how to use the system design elements when designing applications. In particular, they cover usage guidelines for components, patterns and floorplans.

Design Language

Synonym: “Style”

Defines the style to be used, based on the Brand DNA guidance: colors, icon style, logos, illustration style, typography (font, e.g. “72”), grid / metrics, sound, motion, shadows, tone of voice, shapes (e.g. “roundness of corners”).

Example: We would have a “Horizon” design language, which covers multiple themes. This is a different design language from the “Quartz” design language.

Design Practices

Common design methods and processes that are applied across the design system.

Examples: Conducting user research before designing; doing Design Thinking from start to finish; having Design-Gates / Design Reviews prior to releasing new applications or features; collecting user feedback directly from the system / telemetry; providing design guidelines and stencils; providing reference implementations of key design concepts.

Design Principles

Core guiding principles that apply to all UI design at SAP. They apply to the design system itself but also to all application designs.

Example: The SAP Fiori design principle “role-based” means that UIs should be designed to meet users’ needs and intentions, making their work easier (rather than providing a one-size fits all application for many different users with different roles).

Example: The SAP Fiori design principle “simple” means UIs and UI elements should be effortless and intuitive: eliminating overload, friction and surprises.

Example: The SAP Fiori design principle “coherent” means applications should be seamless and cohesive: delivering one fluid experience within and across SAP solutions.

Design rationale [of the design system]

The design rationale [of the design system] is the description of the reasons behind the decisions taken when designing the design system.

Design specification

Target design for a specific feature or set of features. The design specification contains all the information required for implementation.

Design System Elements

The elements which make up the design system, a kind of “bill of materials”, listing all the parts that a design system needs.

Examples: Colors, icons, components, patterns, design tokens, themes etc.).

Further context:
Some of these elements have theme variables (corresponding to “design tokens”) as part of the theming structure, to support theming.

Design System Elements

The elements which make up the design system, a kind of “bill of materials”, listing all the parts that a design system needs.

Examples: Colors, icons, components, patterns, design tokens, themes etc.).

Further context:
Some of these elements have theme variables (corresponding to “design tokens”) as part of the theming structure, to support theming.

Design Tokens

Design tokens are indivisible pieces of a design system such as colors, metrics, typography scale, font faces (light, black, etc.). They are used to specify the values for these individual pieces to be used in a theme for specific aspects of UI designs, ensuring consistency across multiple applications. Design tokens allow different themes to be defined by using different values for the individual tokens. Design tokens should be constant over time.

Example: specifying the exact style values to be used for “sapBrandColor”. The design style definition of “sapBrandColor” is known as the design token which would have a 1:1 match with the corresponding theming parameter (CSS variable) for the technology.

Design tokens can refer to other design tokens when specifying aspects.

Example: A design token for „sapButton_Emphasized_Background“ could get its value from the design token, “sapBrandColor”. The corresponding mapping of these styles matches also within the implementation.

Variations of a given theme can be made by changing only a small subset of design tokens.

Examples for variations of a theme could be a dark version and high-contrast versions of a light theme, such as Morning Horizon.

Further context: Design tokens are elements of the design system in the design domain. They can be mapped directly 1:1 to theme variables in the theme structure provided by a technical framework which supports theming. In other words, a design token for “sapBrandColor” should map to an equivalent theme variable.

Development Guidelines

The development guidelines relevant to the SAP design system provide information, guidance and recommendations on how to use the various UI technologies when developing applications. In particular, they cover usage guidelines for technology reuse libraries and UI frameworks.

Floorplans

A composition of smaller UI parts, such as patterns and components. A Floorplan describes a UI layout consisting of patterns and components which covers a frequently occurring use case. A Floorplan typically describes the content of a complete page or even spans several pages. Floorplans are meant to be reused by application designers.

Examples: a floorplan for displaying or editing a business entity such as a customer, product or employee, or for working with a list of entities, or for providing a wizard.

Foundations [of the design system]

Defines the underlying thinking behind the design system at a meta-level. The design language can be seen as covering the foundations of the visual design. However, the foundations overall also cover interaction design, tone of voice and all other aspects of the design system.

An understanding of the foundations is a prerequisite for designing new components, patterns or floorplans for the design system or for enhancing existing ones with new capabilities: it ensures that these new or enhanced entities can be seen as belonging to the design system. In other words, the foundations secure the quality of the design system, by ensuring that nothing is designed which doesn’t seem to fit with the rest of the design system.

Interaction Design [within Foundations]

Defines the foundations for how design system elements should behave when being used, i.e. the general interaction behavior. Just as the Design Language defines the visual style, Interaction Design Foundations defines the behavioral style.

Interaction Design is the description of the interactions needed to be performed and completed by the user to achieve his tasks and the corresponding goal.

Examples: Defining how scrolling should appear, common parts in keyboard behavior, using the right gestures, defining how drag & drop should be visualized.

Library

Provides a set of reusable parts (such as icons, fonts, components) for designers, available in design tools such as Figma.

Libraries also exist for developers, available in code frameworks such as UI5, React, Angular etc.

Pattern

A composition of components along with possible user interactions to cover specific, smaller common use cases. Patterns are meant to be reused by application designers.

Examples: exporting data to Excel or PDF, or a pattern for confirming or cancelling an action, or filtering a list (including actions for selecting filter parameters and saving selection variants). Also compositions of components such as a Date Picker or a Card are patterns.

Product Standards

SAP has a number of internal Product Standards, which are binding for all products. Product standards define aspects of SAP products which all products need to adhere to. Non-compliance could potentially have revenue and/or legal implications.

Examples:
Specifically for UX we have these product standards:

  • Accessibility
  • User Experience Consistency

The accessibility standard defines what products need to do to provide an accessible user interface compliant with accessibility regulations in our global markets.

The UX consistency standard defines which aspects of product designs need to be provided by all applications, in order to provide a certain amount of UX consistency for users who use more than one product.

Although not directly classified as a UX product standard, the standard “Performance” is also important for UX, since a good UI has fast response times. The standard “Functional Correctness” is also related to UX, since a buggy application provides a poor user experience. Other related product standards which are partly relevant for UX are “Globalization”, “Integration” and “User Assistance”.

Further context – Accessibility standard
SAP Product Standard Accessibility is based on external and globally acknowledged accessibility guidelines, that are frequently requested by our customers to be realized in our products.

The Standard is always applicable for all kind of products, if there is at least a single UI.

The 31 requirements of the SAP Product Standard Accessibility are clustered into six main topics:

  1. Information & Text
  2. Visual Perception
  3. Attributes and Identification of UI Elements
  4. Orientation and Navigation Within the Application
  5. User Interaction Within the Application
  6. User Interaction With Time-Dependent Content

When following the SAP Product Standard Accessibility, your product will be globally competitive and will comply with SAP’s Diversity & Inclusion strategy.

Further context – UX Consistency standard
SAP Product Standard UX Consistency defines consistency
requirements for:

  • Colors
  • Theming Concept
  • Typography
  • Iconography
  • Action Placement
  • Terminology
  • Shell bar
  • Settings

Prominent end user processes (formerly “Key end user processes”)

An end user process describes all the steps a user needs to do to get a particular business task done. A prominent end user process is one which appears in most companies, and which most business people can identify with.

Providing reference designs for prominent end user processes shows how the design system can be used to help a user get their job done easily and intuitively, and can provide guidance to product designers if they have similar use cases.

Example:
Potential such prominent end user processes are:

  • Buying some new office equipment, such as a new laptop;
  • Selling a product to a customers – starting with a quotation, then to a sales order, potentially also up-selling, providing information about availability and likely delivery dates, checking the credit limit.
  • Performing performance feedback for an employee
  • Approvals by a manager, e.g. for purchase orders, travel etc.

Release [of the Design System]

A release is a version label given to a set of entities which have been published for a specific purpose, such as when a specified planned scope has been completed. A release of the design system is a version label given to specific versions of the design system elements.

Further context: A release of the design system should be mappable to a version or release of the technology reuse layer and/or the UI framework which implements that particular release of the design system.
Releases can be relevant for the published design system documentation and design guidelines, if these are not updated with every single new version of a design system element

System Design Guidelines

Design specifications and information on how to design new system design elements, in particular components, patterns or floorplans, or how to adapt existing ones.

Technology reuse libraries

Libraries of common technical components and assets that can be used universally across different products, provided by technology component and asset libraries.

Example: UI5 web components, native mobile components provided by the SAP BTP SDK for iOS and the SAP BTP SDK for Android; fonts, icons, illustrations and sounds (audio).

Further context:
Note that this reuse layer is not the same as a UI framework, but it is intended to be used by UI frameworks.

Theme

Specifies the concrete color palette, icon library, illustration library, font usage (e.g. when to use bold), grid / metrics, interaction sounds, motion, shadows, focus visualization, tone of voice, and shapes e.g. “roundness of corners”) for UI components.

Example: the Horizon design language has four standard themes, “Morning Horizon”, “Evening Horizon” plus high-contrast black and white themes.

Further context: A single theme can be implemented by applications in many ways – via a UI framework which supports a theming structure, but it could also be hard-coded into a UI framework or even into individual applications. Note that applications with the theme hard coded typically do not support multiple themes, such as a standard theme and a high-contrast version, so we strive to avoid hard coded solutions going forward.

A theme can be specified in the design domain by specifying the values for all design tokens. A theme can be defined in technology by defining the values for all theme variables in the theming structure.

Theme Variable

A theme variable provided by the technology framework’s theming structure controls a specific aspect of the theme, and corresponds to a design token.

Theming

Creating a theme by specifying the values of all the theming variables provided by the theming structure is called “Theming”.

Theming Structure

The collection of design tokens and their relationships stored in a central repository. Design tokens serve as a base for creating theme variables. Ideally, each theme variable corresponds to a design token. The theming structure allows applications using this runtime technology to display variations of a theme by using different values for the individual variables. If possible, theme variables should be kept constant over time. Examples for resulting variations of a theme could be a light and a dark version and high-contrast versions delivered by SAP, but could also be custom-defined variants.

Further context:

UI technology frameworks which provide a theming structure enable switching between different themes. This way, the same application can look very different, depending on the user’s design preference or accessibility requirements. For example, such a framework would allow customers to switch between the four Horizon themes, e.g. Morning Horizon and Evening Horizon, or the two high-contrast Horizon themes.

For applications built using a UI technology framework which provides a theming structure, it is possible to create a new theme for all such applications without modifying the applications. If the UI technology framework gives customers access to the theming parameters, then they can define custom themes without modifying the applications, or choose to use other SAP delivered themes such as the Quartz themes and the Belize themes.

Tone of Voice

Tone of voice is the communication style that influences how users feel about what we are conveying. It is applied to UI content such as labels, menus, messages, illustrations, in-app help and digital assistant conversations.

Voice reflects our brand personality and its underlying values. The voice is always consistent and applies to all UX content.

Tone conveys the mood or feeling we present to the user. The tone can vary, depending on the situation or audience.

Examples for voice: “trusted”, “relatable”.

Examples for tone: “professional”, “business casual.” New end users like encouragement and the occasional “You did it! Good job.” Expert users, not so much. They prefer you’re more to the point. Similarly, the tone for messages around data protection and privacy, or legal aspects in general, are likely to be more serious than for other contexts.

Further context: SAP Brand tone of voice

UI Element

Entity of the user interface that is presented to the user by the software.

Example: The UI elements can be texts, graphics, component, patterns, floorplans but also sounds.

Further context:
UI elements are the subset of the Design System Elements which are actually presented to the user. Hence design tokens are not UI elements.

UI Framework

Runtime technology providing the code to allow developers to build application UIs out of reusable components and libraries from the technology reuse layer. Frameworks take care of allowing individual UI elements to interact with each other.

Example: SAPUI5 is a JavaScript / HTML5 based UI framework, which enables developers to reuse UI5 web components as well as other components, patterns and blueprints and libraries.

UI Kit

A library of reusable assets (fonts, icons, illustrations etc.), components, patterns and floorplans for designers. A UI Kit is made available to designers in a design tool, such as Figma.

Values

The set of guiding principles and fundamental beliefs that help a group of people function together as a team and work toward a common business goal.

SAP’s corporate values are:

  • Tell it like it is
  • Stay Curious
  • Embrace differences
  • Keep the promise
  • Build Bridges, not silos

For design, the value “Embrace differences” means that we are inclusive in everything we do, which leads directly to our valuing accessibility in our solutions.

Version

A new version of a design system element is created every time an author publishes a change to a design system element.

Since the design system consists of all design system elements, every new version of an element results in a new version of the overall design system

Further context: This does not mean that the overall design system has a single version counter; the version can be determined by specifying the version numbers of each design system element.