Content Density (Cozy and Compact)

Foundations / Visual / Content Density (Cozy and Compact)

Intro

SAP Fiori is responsive and works on all devices and form factors. You need to support all common interaction styles in the same way. This includes interaction with a mouse and keyboard as well as touch.

SAPUI5 provides a "content density" factor that lets you adjust the size of components based on the interaction style.

Cozy touch example

Compact non-touch example

The cozy factor displays components with dimensions large enough for users to interact using their fingertips. Use this factor for devices operated by touch. Note that components can appear smaller than the minimum touch area.

The compact factor reduces the size of components, so you can display more information on the UI. Use this factor for devices operated with a mouse and keyboard.

Metrics

SAP Fiori uses the “rem” unit, which stands for “root em.” One rem equals a base size of 16 pixels. The rem unit helps you keep sizing and zooming consistent and predictable in all browsers.

SAP Fiori UI components are built with a flexible grid system, so you can support both touch and non-touch content densities. The touchable area is usually larger than the UI element itself. Keep this in mind when designing web apps that work on both desktop and mobile devices.

In compact mode, the font size stays the same, but both the components and the spaces between them are smaller than in cozy mode. The default cozy touch area of 2.75 rem (44 px) is reduced in compact mode. Rows and toolbars can use sizes of 2 rem (32 px), and components are also visually smaller.

Implementation

All SAP Fiori components support both cozy and compact content density modes. Most components default to cozy. Set the content density based on the user’s device capabilities.

hint

You can detect this using the device helper method. If the device supports touch (sap.ui.Device.support.touch = “true”), apply the sapUiSizeCozy or sapUiSizeCompact content density class. For detailed instructions on setting these parameters, see the SAPUI5 Developer Guide article on content density.

Make sure you actively set the content density. Since different components might have different defaults, not setting the correct content density can cause inconsistent density factors on the screen.

Implementation in SAP Fiori Launchpad

App developers must specify which modes an app supports in the app descriptor. The SAP Fiori launchpad checks this information at start-up.

On hybrid devices – those that support both touch and mouse with keyboard – users get an extra setting in the SAP Fiori launchpad if the administrator has enabled it. With this option (under User Actions Menu → Settings → Appearance → Display Settings → Optimized for Touch Input), users can choose whether they want apps to run in cozy (default) or compact mode. This preference is saved for all hybrid devices. It doesn't affect the automatic detection for pure touch or pure mouse-and-keyboard devices.

For accessibility and usability, the SAP Fiori launchpad offers the following features:

On phones and tablets, the SAP Fiori launchpad always enforces cozy mode. It does this regardless of app support or user preferences.
The user preference setting is also available on desktop devices, not just on hybrid devices.

Implementation Details

The SAP Fiori launchpad determines content density based on the sap.ui.Device.system definition. The table below outlines the rules.

<div> <div>Device Type</div> <div>If app supports only cozy or only compact</div> <div>If app supports both cozy and compact (user preference available)</div> <div>If app supports both cozy and compact (no user preference)</div> </div> <div> <div>Phone/Tablet</div> <div>Cozy is enforced (app support and user preference are ignored)</div> <div>Cozy is enforced (app support and user preference are ignored)</div> <div>Cozy is enforced (app support is ignored)</div> </div> <div> <div>Hybrid (<code>Combi</code>)¹</div> <div>Use the supported mode</div> <div>Use user preference</div> <div>Use cozy</div> </div> <div> <div>Desktop</div> <div>Use the supported mode</div> <div>Use user preference</div> <div>Use compact</div> </div>

¹ Touch and keyboard/mouse input

Guidelines

For touch devices, set the content density to “cozy” for the entire app. Apply the sapUiSizeCozy class.

For devices operated by mouse and keyboard, set the content density to “compact” for the entire app. Apply the sapUiSizeCompact class.

For hybrid devices, give users both “cozy” and “compact” options for interacting with the app.

If your product requires a high information density on the screen, set the default to “compact.”
If your product benefits from a more spacious layout, set the default to “cozy.”

Users can override the default in the personalization settings of SAP Fiori Launchpad. The selected mode becomes their persistent preference.

Never combine “cozy” and “compact” modes within the same hierarchy or page. Always set the content density factor at the application level. This prevents users from seeing a mix of cozy and compact components on the same screen.

Services

The UI5 Developer Guide article on content density describes how to set the correct parameters based on the device capabilities.

Resources

Guidelines

Multi Device Support

Specifications

Content Density
(visual design)

Guidelines

Multi Device Support