Summary is a pattern for displaying summary metrics and trends within reports or products.
Use it to:
- Display key metrics of the report.
- Showcase primary metric(s) for data within widgets, tables, or other formats.
Basic principles of using Summary
- Ensure the metric's meaning is evident from its title and/or nearby supplementary information. Whenever possible, provide details about the metric's calculation method.
- Limit the display to 5-6 metrics per report or widget to prevent overwhelming users' cognitive capacity.
The pattern includes the following components:
- Metric's title
- Additional information such as date, period, location, or database of the data
- Metric value
- Supplementary information linked to the metric (for example, value differences over a specific period, trends, optional content)
Styles, margins and paddings
Margins and paddings
The recommended styles for the summary pattern:
For metrics composed of multiple values, use these margins:
|Title||Text size: 14px (|
|Date/period/location/database||Text size: 12px (|
|Metric||Text size: 24px (|
|Metric's additional information||Text size: 12px (|
|Other information||Text size: 12px (|
Separate metrics with 24px spacing and Divider. The last metric (
last-child element) should not have a divider.
Dividers between one-group metrics
When metrics need to be grouped, avoid using dividers to separate metrics belonging to the same group.
Horizontal & vertical layout
Main report/widget metrics can be arranged either horizontally or vertically, depending on the layout requirement. The vertical layout is more space-efficient and compact.
|Case||Layout type||Appearance example|
|If there are more than 3 metrics in the interface -->||use horizontal layout|
|If there are 3 or less metrics in the frontend -->||vertical layout|
|If there is one metric in the interface, than -->||show the values of which this metric consists|
Metrics can be placed not only within separate widgets but also within table cells and other components. As such, metric alignment and its supplementary information can be either left or right-aligned.
- For cases where there's an abundance of metrics causing them to exceed page width, truncate their titles with an
- Show the complete metric title by hovering over the title, revealing it in a tooltip. Alternatively, include the title within the
Infoicon tooltip (see Informer).
- Avoid displaying the metric's title in the tooltip, as it's already present in the summary.
- Upon hovering over the difference value, present a tooltip showcasing the previous and current values adjacent to the metric. Avoid abbreviating values in the tooltip.
- If necessary, include both absolute and relative values within the tooltip.
Summary with minitrends
Minitrends serve as simplified chart versions for displaying trends or comparing metrics across different days.
|Metrics exceed maximum page width --> arrange in columns.|
|Metrics with the same minitrend type --> ensure equal width.|
When required, show tooltips displaying values while hovering over minitrends.
Make minitrends clickable to provide the detailed information (for example, complete widget with a full chart). This approach is useful when users don't need simultaneous chart analysis and the user flow doesn't involve frequent chart scrutiny.
- Ensure the default minitrend period aligns with the detailed chart.
- Visual changes in the chart period won't affect the minitrend within the metric.
- Clickable minitrend charts are initially visible upon opening the report.
- Expanding the detailed chart occurs in an accordion-like manner, shifting page content.
- Upon expanding the Accordion, selecting another minitrend replaces its content with the chosen value.
|Display Skeleton on initial load.|
|Show Spin post data reload or filtering.|
|Indicate missing data with "n/a" message.|
|In case of metric display error, show |
The Summary widget can have maximum and minimum widths at various resolutions.
- The maximum width depends on the widget's content.
- Avoid stretching the metrics widget to the full page width.