Dashboard Design Patterns

This article is part of a Dashboard Design Best-Practices blog series,
created to assist you in designing and building meaningful dashboards with SAP Analytics Cloud.
Click here to open the Dashboard Design Best-Practices blog series hub page in a new window

Focus in this blog:

Analytical Page TypesLayout PatternsSAP Fiori Horizon Color PalettesIBCS (International Business Communication Standard) Recommendations

 

1. Analytical Page Types

Monitoring Page (What´s happening right now?)
For users who want a quick overview of business performance, the Monitoring page is an interactive analytics page with a high visual appeal. Unlike other dashboards, the Monitoring page uses semantic colors, semantic patterns, and business insights to quickly visualize and understand the situation presented in charts.

Planning Page (What could the future look like?)
For users who want to create and maintain a business plan to improve the efficiency of business and management processes, the Planning page offers an interactive page that allows them to determine the 
future in various scenarios. It combines forecasting and simulation scenarios.

Reporting Page (What happened looking back?)
For users who want a comprehensive overview of business performance in a predefined, consistent formal structure, the report page is an analysis page with a relevant storyline, high information density, and a consistent business notation system (IBCS) that provides interpretations and summaries. Unlike other business reports, the report page should be well-structured to convey the underlying messages clearly to the viewers.

Exploration Page (What’s the cause?)
For users who want to explore data in an analytical view of a specific business situation, the Explore page is an interactive analytics page that helps them conduct active analyses and discover news. Instead of displaying predefined content, the Explore page allows users to easily modify measures and dimensions and select dedicated dimension members with facet filters to visualize business insights. A good example of this is the
Data Analyzer, integrated in SAP Analytics Cloud.

Please note that depending on the use case, the content and intentions of the different page types may overlap and should be viewed in a common context

 

2. Patterns

Patterns are predefined combinations of components that address specific analytical consumption requirements, such as info group, control group and logical group. They can consist of one or multiple components.

1. Layout Patterns:

Info Group (KPI Row)

Info group contains page-level statistical information that summarizes specific business scenario.

 It can be either presented at the top of the page or on the left of the page depending on the page structure.

It mainly contains KPIs and small charts such as simple bar charts and integrated variance charts. When business users launch the analytics page, they will gain an overview at first glance and then move to logical groups for more details.

 

Control Group (Page Filter)

The control group consists of various page-level input controls, such as filters and time sliders, that affect all analytical content across the entire page. It allows users to define complex conditions to specifically filter analytical content.

Logic Group

The purpose of a logic group is to visually group multiple widgets together to show relationships to a specific message from different perspectives. For this reason, a logic group consists of at least two communication objects.

 

2. Interaction Patterns:

Filter & Positioning

There are four types of filters including story filter, page filter, logical group filter and widget filter. Each has its specific scope in filtering contents to achieve better results.

Story filter and widget filter are native features directly supported by SAC.
Page filter and logical group filter are the input controls that you can build on the consumption pages.

1. Story Filter stays in the filter panel on the left. It impacts all the contents within the whole story.

 

2. Page Filter applies to all the widgets on the same page. It appears in the control group in collapsed mode.

The filters on the canvas are mirrored redundantly in the filter panel

 

 

3. Logical Group Filter applies to all the widgets within the logical group. It stays in collapsed mode at the top of the group or in expanded mode on the left of the group.

Place collapsed logical group filters at the top of the group.

 

Place expanded logical group filters on the left of the group.

 

4. The Widget filter can be set in the Builder panel by selecting the corresponding widget.

 

After definition, these are displayed in the filter panel.

 

Different Filters on a page working together

 

2. Linked Analysis

When you create filters or analyze hierarchical data in a chart with linked analysis, the same filters will be applied to other charts you want to include in the analysis. All widgets in linked analyses follow the order from left to right and top to bottom.

 

 

As a rule for Insight Apps, linked analyses can only be performed within the same logical group and cannot be applied across groups.

 

However, if a filter affects the entire page, this rule does not apply.

 

3. SAP Fiori Horizon Color Palettes

Insight App related:

When it comes to Insight Apps related content creation, the following 3 Color Palettes can be used:

IBCS Palette (International Business Communication Standard)Blue PaletteColorful Palette

All Color Palettes are already defined in the Theme

 

Which Palette should I choose?

Each palette is a valid choice. However, we recommend using the IBCS or Blue palette, as too many colors, such as those found in the Colorful palette, often make the content appear visually cluttered. If you want to ensure objective, fact-based communication, choose the IBCS palette.
Reducing the display to near-grayscale prevents visual overload and focuses attention on the actual data. If you prefer more vibrant colors, choose the Blue palette. However, there may be cases where the Colorful color palette is the right choice.

 

1. SAP IBCS Palette
The SAP IBCS palette is designed to enhance the clarity and readability of business communication, particularly for financial and performance reporting, where standardization and consistency are crucial.  The color palette supports quick data comprehension, reduces cognitive load, aids in data-driven decision-making, and minimizes errors in data representation.

 

2. Blue Palette
The SAP Blue palette is a monochromatic blue alternative inspired by the SAP Blue color value, integrating IBCS concepts with SAP’s Horizon theme. This palette strike a balance between standardization and flexibility, ensuring our products are visually appealing and consistent with the SAP Fiori Horizon look and feel.

 

3. Colorful Palette
SAP’s Colorful Palette contains SAP’s base chart colors that are intended to be used across all the SAP technologies. It has been designed to provide visual differentiation between data points by virtue of the fact that each color is visually distinct.

 

4. IBCS Recommendations

The same elements should look the same and have the same name.For time, remember that “yesterday is visually to the left of today”
-> the time-series are always on the x-axis.Green means “good” and red means “bad”.Tables should have bold sums at the bottom.Use fill patterns instead of colors: Actual values – solid Previous year/month – solid with reduced opacityForecasts – hatchedPlan values – outlined

 

IBCS Color Values

Unified Currencies

Use consistent currency abbreviations.Use three-letter acronyms such as EUR, CHF, USD, and GBP. 
The use of special currency symbols such as €, $, and ₤ is not recommended
if a report includes many different currencies. Use consistent metric prefixes (in lower case).
Example: “k” for thousand, “m” for million and “b” for billion.

Unified Numbers

Thousand delimiter: 1 234 (narrow blank space)Decimal sign: 1,23 or 1.23 (SI allows both versions)Negative values: – 123Positive values do not have a plus sign, unless they represent variances.

Titles and Subtitles for Widgets
IBCS proposes three lines in total:

First Llne: “Who” (example: ABC Corporation)Second line: “What”(example: Profit in mUSD, by products)Third line: “When” (example: 2024-Q1, Δ 2023-Q1)

For Insight Apps scenarios, two lines should be sufficient, because the “Who” is mainly described with the title of the logic group, page, or Insight App. 

Therefore, we recommend formatting widget headers like the following:

First line: “What” (example: Profit in mUSD, by products)Second line: “When” (example: 2024-Q1, Δ 2023-Q1)

Title for Logic Group
Beside the titles and subtitles for the widgets, logic groups also have a logic group title. Because the purpose of a logic group is to show information related to the same topic (such as “Profit”), name the group accordingly.

Date
Use: YYYY-MM-DD, such as “2024-05-14″

Terms and Abbreviations

TitelAbbreviationActual (year, month, quarter..)ACPrevious (year, month, quarter..)PYForecastFCPlanPLCurrent YearCYEnd of PeriodEOPFiscal YearFYJanuary, February…JAN, FEB, …Quarter 1, Quarter 2, …Q1, Q2, …Year over YearYoY(Monthly) Average from 2024Ø2024(Daily) Average from JanuaryØJanFrom 2020 to 20242020..2024Year to Date (Month)YTD (Month)

 

Stacked Bar Chart

Stacked bar charts are used to display the structure of data in a given time period or at a given point of time.They are most effective when there are no more than five or six data series used, and if 25 or fewer structure elements are presented.

 

Stacked bars/columns often require a legend.
As SAC offers the option of selecting the individual data points using the legend in the runtime, this should be displayed below the chart and center aligned.

 

If the relative deviation between the categories is important, set the chart as a 100% stack.

 

Variance Charts
One of the most important aspects of analytical applications is looking at the data with the question: “How does this compare to [x]?” (Example: This year compared to the previous year.)
IBCS recommends displaying this difference in variances. 

General rules when using variance charts:

Positive variances have a “+”Negative variances have a “-”Numbers in tables that represent variances are colored based on defined variance colors

Absolute Variances:

  

 

 

 

 

 

 

 

 

Relative Variances (in Percentage):

 

 

 

 

 

 

 

 

 

Variances as Data Label

        

 

 

 

 

 

 

 

Integrated Variances

 

 

 

 

 

 

 

Variance Waterfall Chart

 

 

 

 

 

 

Tables
General rules for designing tables:

Numbers and column headings are right-alignedCalculation results are boldCalculation results are at the bottomGaps instead of vertical lines 

​ This article is part of a Dashboard Design Best-Practices blog series,created to assist you in designing and building meaningful dashboards with SAP Analytics Cloud.Click here to open the Dashboard Design Best-Practices blog series hub page in a new windowFocus in this blog:Analytical Page TypesLayout PatternsSAP Fiori Horizon Color PalettesIBCS (International Business Communication Standard) Recommendations 1. Analytical Page TypesMonitoring Page (What´s happening right now?)For users who want a quick overview of business performance, the Monitoring page is an interactive analytics page with a high visual appeal. Unlike other dashboards, the Monitoring page uses semantic colors, semantic patterns, and business insights to quickly visualize and understand the situation presented in charts.Planning Page (What could the future look like?)For users who want to create and maintain a business plan to improve the efficiency of business and management processes, the Planning page offers an interactive page that allows them to determine the future in various scenarios. It combines forecasting and simulation scenarios.Reporting Page (What happened looking back?)For users who want a comprehensive overview of business performance in a predefined, consistent formal structure, the report page is an analysis page with a relevant storyline, high information density, and a consistent business notation system (IBCS) that provides interpretations and summaries. Unlike other business reports, the report page should be well-structured to convey the underlying messages clearly to the viewers.Exploration Page (What’s the cause?)For users who want to explore data in an analytical view of a specific business situation, the Explore page is an interactive analytics page that helps them conduct active analyses and discover news. Instead of displaying predefined content, the Explore page allows users to easily modify measures and dimensions and select dedicated dimension members with facet filters to visualize business insights. A good example of this is theData Analyzer, integrated in SAP Analytics Cloud.Please note that depending on the use case, the content and intentions of the different page types may overlap and should be viewed in a common context 2. PatternsPatterns are predefined combinations of components that address specific analytical consumption requirements, such as info group, control group and logical group. They can consist of one or multiple components.1. Layout Patterns:Info Group (KPI Row)Info group contains page-level statistical information that summarizes specific business scenario. It can be either presented at the top of the page or on the left of the page depending on the page structure.It mainly contains KPIs and small charts such as simple bar charts and integrated variance charts. When business users launch the analytics page, they will gain an overview at first glance and then move to logical groups for more details. Control Group (Page Filter)The control group consists of various page-level input controls, such as filters and time sliders, that affect all analytical content across the entire page. It allows users to define complex conditions to specifically filter analytical content.Logic GroupThe purpose of a logic group is to visually group multiple widgets together to show relationships to a specific message from different perspectives. For this reason, a logic group consists of at least two communication objects. 2. Interaction Patterns:Filter & PositioningThere are four types of filters including story filter, page filter, logical group filter and widget filter. Each has its specific scope in filtering contents to achieve better results.Story filter and widget filter are native features directly supported by SAC.Page filter and logical group filter are the input controls that you can build on the consumption pages.1. Story Filter stays in the filter panel on the left. It impacts all the contents within the whole story. 2. Page Filter applies to all the widgets on the same page. It appears in the control group in collapsed mode.The filters on the canvas are mirrored redundantly in the filter panel  3. Logical Group Filter applies to all the widgets within the logical group. It stays in collapsed mode at the top of the group or in expanded mode on the left of the group.Place collapsed logical group filters at the top of the group. Place expanded logical group filters on the left of the group. 4. The Widget filter can be set in the Builder panel by selecting the corresponding widget. After definition, these are displayed in the filter panel. Different Filters on a page working together 2. Linked AnalysisWhen you create filters or analyze hierarchical data in a chart with linked analysis, the same filters will be applied to other charts you want to include in the analysis. All widgets in linked analyses follow the order from left to right and top to bottom.  As a rule for Insight Apps, linked analyses can only be performed within the same logical group and cannot be applied across groups. However, if a filter affects the entire page, this rule does not apply. 3. SAP Fiori Horizon Color PalettesInsight App related:When it comes to Insight Apps related content creation, the following 3 Color Palettes can be used:IBCS Palette (International Business Communication Standard)Blue PaletteColorful PaletteAll Color Palettes are already defined in the Theme Which Palette should I choose?Each palette is a valid choice. However, we recommend using the IBCS or Blue palette, as too many colors, such as those found in the Colorful palette, often make the content appear visually cluttered. If you want to ensure objective, fact-based communication, choose the IBCS palette.Reducing the display to near-grayscale prevents visual overload and focuses attention on the actual data. If you prefer more vibrant colors, choose the Blue palette. However, there may be cases where the Colorful color palette is the right choice. 1. SAP IBCS PaletteThe SAP IBCS palette is designed to enhance the clarity and readability of business communication, particularly for financial and performance reporting, where standardization and consistency are crucial.  The color palette supports quick data comprehension, reduces cognitive load, aids in data-driven decision-making, and minimizes errors in data representation. 2. Blue PaletteThe SAP Blue palette is a monochromatic blue alternative inspired by the SAP Blue color value, integrating IBCS concepts with SAP’s Horizon theme. This palette strike a balance between standardization and flexibility, ensuring our products are visually appealing and consistent with the SAP Fiori Horizon look and feel. 3. Colorful PaletteSAP’s Colorful Palette contains SAP’s base chart colors that are intended to be used across all the SAP technologies. It has been designed to provide visual differentiation between data points by virtue of the fact that each color is visually distinct. 4. IBCS RecommendationsThe same elements should look the same and have the same name.For time, remember that “yesterday is visually to the left of today”-> the time-series are always on the x-axis.Green means “good” and red means “bad”.Tables should have bold sums at the bottom.Use fill patterns instead of colors: Actual values – solid Previous year/month – solid with reduced opacityForecasts – hatchedPlan values – outlined IBCS Color ValuesUnified CurrenciesUse consistent currency abbreviations.Use three-letter acronyms such as EUR, CHF, USD, and GBP. The use of special currency symbols such as €, $, and ₤ is not recommendedif a report includes many different currencies. Use consistent metric prefixes (in lower case).Example: “k” for thousand, “m” for million and “b” for billion.Unified NumbersThousand delimiter: 1 234 (narrow blank space)Decimal sign: 1,23 or 1.23 (SI allows both versions)Negative values: – 123Positive values do not have a plus sign, unless they represent variances.Titles and Subtitles for WidgetsIBCS proposes three lines in total:First Llne: “Who” (example: ABC Corporation)Second line: “What”(example: Profit in mUSD, by products)Third line: “When” (example: 2024-Q1, Δ 2023-Q1)For Insight Apps scenarios, two lines should be sufficient, because the “Who” is mainly described with the title of the logic group, page, or Insight App. Therefore, we recommend formatting widget headers like the following:First line: “What” (example: Profit in mUSD, by products)Second line: “When” (example: 2024-Q1, Δ 2023-Q1)Title for Logic GroupBeside the titles and subtitles for the widgets, logic groups also have a logic group title. Because the purpose of a logic group is to show information related to the same topic (such as “Profit”), name the group accordingly.DateUse: YYYY-MM-DD, such as “2024-05-14″Terms and AbbreviationsTitelAbbreviationActual (year, month, quarter..)ACPrevious (year, month, quarter..)PYForecastFCPlanPLCurrent YearCYEnd of PeriodEOPFiscal YearFYJanuary, February…JAN, FEB, …Quarter 1, Quarter 2, …Q1, Q2, …Year over YearYoY(Monthly) Average from 2024Ø2024(Daily) Average from JanuaryØJanFrom 2020 to 20242020..2024Year to Date (Month)YTD (Month) Stacked Bar ChartStacked bar charts are used to display the structure of data in a given time period or at a given point of time.They are most effective when there are no more than five or six data series used, and if 25 or fewer structure elements are presented. Stacked bars/columns often require a legend.As SAC offers the option of selecting the individual data points using the legend in the runtime, this should be displayed below the chart and center aligned. If the relative deviation between the categories is important, set the chart as a 100% stack. Variance ChartsOne of the most important aspects of analytical applications is looking at the data with the question: “How does this compare to [x]?” (Example: This year compared to the previous year.)IBCS recommends displaying this difference in variances. General rules when using variance charts:Positive variances have a “+”Negative variances have a “-”Numbers in tables that represent variances are colored based on defined variance colorsAbsolute Variances:          Relative Variances (in Percentage):         Variances as Data Label               Integrated Variances       Variance Waterfall Chart      Chart LegendOnly use the legend if it offers additional value. Legend should be below the visualization and center alignedTablesGeneral rules for designing tables:Numbers and column headings are right-alignedCalculation results are boldCalculation results are at the bottomGaps instead of vertical lines   Read More Technology Blogs by SAP articles 

#SAP

#SAPTechnologyblog