Original link: http://vis.pku.edu.cn/blog/dashboard-design-patterns/
A dashboard is a visualization that uses multiple views to display data on the same topic. Since its inception, the dashboard has been used in a wide variety of applications such as business, hospital, and urban analytics. Existing work on dashboards focuses on high-level abstract guidelines. For example, try to avoid giving your audience too much information. However, it is difficult for creators to build dashboards using only these abstract guidelines because it lacks a detailed introduction to the visual components in the dashboard and how to combine them.
Collaborative research by the University of Edinburgh and other institutions analyzed more than 100 dashboards to summarize design patterns for dashboards to help explore and understand design choices, and to serve as a guide for rapid dashboard design.
Figure 1 The dashboard of the new crown epidemic in Spain
To obtain the design pattern of dashboards (Fig. 1), this work [1] collected 144 dashboards. 80 are from the work of Sarikaya et al. [2] and 64 are from news, personal websites, other applications (health, finance, etc.). The dashboards were then independently checked and coded by three authors. Finally, the code was perfected with the help of three other coders.
The resulting design patterns are divided into content (content) design patterns and composite (composition) design patterns, a total of 8 categories and 42 design patterns (Figure 2). Dashboards are made up of multiple visual components, the content schema refers to the data and visual form in each component, and the composition schema refers to how the components are combined.
Figure 2 Design patterns, including content design patterns and composite design patterns
Content design patterns include patterns for data, metadata, and visual representations.
Data patterns identify the type of information presented and the degree of data abstraction. Data can be presented in full detail, or it can be abstracted through aggregation, filtering, thresholding, and derivation (such as calculating trends). With minimal detail, only a single value of the data (such as the latest value of a time series) is displayed.
The meta data schema provides additional information for the user to understand the context, including data sources, disclaimers, data descriptions, when and how the dashboard was updated, and comments.
The visual representation mode can be divided by data details (Figure 3). The most detailed forms of presenting data are lists and tables, which can be combined with sparklines and color coding. The most common patterns are normal-sized visualizations that we often see and create. There are also visual forms with a high degree of data abstraction that display very little information. Gauge and progress bar display a single value. Trend arrows indicate the direction of change in data values, including increasing or decreasing. Pictograms are symbols that illustrate concepts and can encode numerical values. Another form is the number, which is often used on the instrument panel, usually large, and in a prominent position.
Figure 3 Visual representation
Composite design patterns include page layout, screen space, page structure, interaction, and color patterns.
A page layout describes how components are laid out and grouped (Figure 4). Can be placed without specific rules, i.e. open layout. More dashboards have regular layout components. A table layout groups components into rows and columns. Hierarchical layouts present components layer by layer, with information highlighted at the top. A grouped layout combines two or more components into a group with a common heading. The schematic layout places components according to the workflow.
Figure 4 Page layout
Screen space patterns describe how content fits into one or more pages. Filling the screen means everything fits on one page. Overflow allows viewing content by scrolling. On-demand details display additional information through tooltips and popups, which require interaction. Parameterization displays multiple datasets via toggle buttons. And sometimes the amount of information is so large that it is divided into several pages.
Page structure (structure) describes the relationship between pages. Parallel structure reuses layout and visual form across multiple pages, presenting multiple datasets. Hierarchies, on the other hand, allow users to drill down and gradually gain more detail. There are other structures, which are called open structures in the paper.
Interaction patterns can be divided into four categories. Explore helps to explore data items and relationships between data. For example, display data details through tooltips or popups, as well as brushes and links. Drill-down allows users to filter data and display only the data of interest using text fields, drop-down menus, radio buttons, and checkboxes. Navigation refers to navigating across multiple pages and screen spaces. It can be supported by scrolling, page tabs, hyperlinks. Customization allows users to add new visual forms or reorder the dashboard’s existing visual forms to meet specific tasks.
The color mode focuses on color usage schemes at the dashboard level. For multiple components, if data is shared, they can share the same color scheme for consistency. For the use of color in each component, color can encode data, or express certain semantics and emotions.
According to the above design patterns, it can be divided into six typical types of dashboards, including static dashboards, analytic dashboards, magazine dashboards, infographic dashboards, Repository dashboards and mini embedded dashboards.
Static dashboards only use multiple views to present data and do not support any interaction. Analytical dashboards enable in-depth analysis through various explorations and interactions, and are usually displayed on a single page. Magazine style dashboard integrated in news articles. Visualization and long text combined into one data story. Infographic dashboards are similar to infographics. It uses a lot of visual decoration. Repository dashboards provide many references. It is usually a long page or multiple pages with overflow. There are also mini-embedded dashboards embedded in web pages, such as news articles.
To improve and evaluate design patterns, the authors conduct an online design workshop. They invited 23 participants from various fields. They first introduce design patterns, then help participants design their own dashboards, and finally have them present the design and discuss it.
The findings are divided into two parts. Common issues reported by participants were: too much information in a dashboard, it was important what information was displayed; optimizing screen space and reducing page numbers was also important given the information; another issue was color consistency across multiple views.
The workshop also demonstrated the usefulness of these models. Participants reported:
“The patterns are used as a guide for design and checklists”
“These patterns limit design complexity from endless design options to 2-3 good candidates”
references:
[1] Benjamin Bach, Euan Freeman, Alfie Abdul-Rahman, Cagatay Turkay, Saiful Khan, Yulei Fan, and Min Chen. Dashboard Design Patterns. In Proceedings of IEEE VIS, 2022.
[2] Alper Sarikaya, Michael Correll, Lyn Bartram, Melanie Tory, and Danyel Fisher. What Do We Talk About When We Talk About Dashboards? IEEE Transactions on Visualization and Computer Graphics, 25(1): 682-692, 2019.
This article is reprinted from: http://vis.pku.edu.cn/blog/dashboard-design-patterns/
This site is for inclusion only, and the copyright belongs to the original author.