Dashboard Design Guidelines

Build Better Dashboards within SAP Analytics Cloud

Introduction

With this Guideline, we want to help you to create dashboards that optimally meet the structural, visual and in terms of content the requirements of your end users.
Please note that the predominantly content applies to the creation of analytical content generally. But, if you are working on Intelligent Applications in the context of SAP Business Data Cloud, we recommend noting and getting familiar with the content to communicate uniform content and visual consistency with the finished apps to the outside world.

These Guidelines should be tool agnostic, but currently we are mainly focusing on building dashboards with SAP Analytics Cloud.

From the necessary collaboration with the right end user, the visual realization as a mock-up to SAC best practices in dealing with the provided template and theme. These Best Practices/Guidelines should help you to create analytical content that has real value for you and your end-user.

Build Better Dashboards - Process

(based on "Design-Led-Development" Business Strategy Process)

Learn More

This is a text in the first column.

This is an image in the first column

information
This is an information panel in the second column. To use this layout, you need to add a section metadata block with column styling.
style
column-section-1-1, no-footprint
style
column-section-1-1, no-footprint

Caption

Get Started

Kick off your journey with essential tools, videos, and tutorials.

SAP Web UI Kit

Simplify your design process with our SAP Web UI Kit.

Foundations

Explore the core of it all in our Foundation section.

Community

Join our vibrant Community and engage. Share, learn, and grow together.

Resources

Link to download the Intelligent Application Template, if needed. Please read the description first before download.
Choose the layout patterns that works best for your Intelligent App. A consistent structure helps to improves the user experience.
Gain an understanding of International Business Communication Standards (IBCS) guidelines.
Use the checklist to help guide you in creating an IBCS-based dashboard.
background-color
background-grey-1
You can specify the number of rating symbols (property: maxValue). We recommend using a maximum of 7 symbols, although 5 symbols are preferred.
Recommended 5 symbols and maximum 7 symbols

Area-Specific Guidelines

background-color
background-white
visibility
internal_only

Trusted by Our Customers

background-color
background-grey-1
visibility
external_only

<Navigation path> (e.g. UI Elements / Avatar Group)

Title Breadcrumbs

Best-Practices / Start

Description

<This is an easy-to-read description of your page or component, ideally no longer than 130 characters.>

visibility

internal_only
external_only

uiElementsTechnology

SAPUI5
SAP Web Components

designOwner

Peter Pan

elementType

Chart

Component

Subcomponent

Pattern

Layout

Floorplan

UiElementsCategory

(components and patterns only)

uiElementsStatus

Image

(components and patterns only)