{"id":5871,"date":"2019-06-25T14:19:57","date_gmt":"2019-06-25T06:19:57","guid":{"rendered":"http:\/\/www.finereport.com\/en\/?p=5871"},"modified":"2020-03-16T14:58:51","modified_gmt":"2020-03-16T06:58:51","slug":"how-to-design-a-great-dashboard","status":"publish","type":"post","link":"https:\/\/frg.fineres.com\/en\/2019\/06\/25\/how-to-design-a-great-dashboard\/","title":{"rendered":"How to Design a Great Dashboard?"},"content":{"rendered":"\n

In the current trend of big data, the data visualization on large screen has become an interactive display mode that everyone admires. If we can understand and master this technology earlier, I believe it will be very helpful for our future! We know that using the reporting tool can achieve large-screen display. We can do this through a dashboard layout of a single report or multiple reports, or a page layout of multiple reports. So how can we design a good dashboard?<\/p>\n\n\n\n

The picture below shows the characteristics of the excellent dashboard that Stephen Few listed in the Dashboard Graphic Design Competition in 2012.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

According to the above scoring criteria, how many points can you achieve in your large-screen data visualization?<\/p>\n\n\n\n

For the dashboard, if you want a perfect presentation, you need the technicians, UI designers, and business people to coordinate the work. But for newbies to data analysis, how do we make cool dashboards on our own?<\/p>\n\n\n\n

The above criteria are more general. Here are some of the specific factors I consider when using the reporting tool FineReport<\/a> to do the dashboard. If you master the skills of FineReport<\/a> to create a dashboard, you basically master the skills of making cool data visualizations.<\/p>\n\n\n\n

1. Users<\/strong> <\/h2>\n\n\n\n

Understanding users helps to grasp the logical decomposition of the KPI to be displayed and the data. In most cases, the dashboard is for the leadership management, so it shows more operational indicators at the operational level.<\/p>\n\n\n\n

2. Layout<\/strong><\/h2>\n\n\n\n

People are used to reading from top to bottom, and the middle position is the most attractive, so important content should be placed at the top or middle. As shown below, we can directly display important indicator information at the top of this page. This layout is the most popular structure of many reporting systems for operators. The overall digital indicators are clear at a glance, allowing readers to grasp the general data in a matter of seconds. It is a way of reading reports with a high input-to-output ratio of time.<\/p>\n\n\n\n

\"\"\/
From FineReport<\/em><\/figcaption><\/figure>\n\n\n\n

3. Background<\/strong><\/h2>\n\n\n\n

In different scenes, if the background color is dark (blue, blue-green, black), the effect is better when the dashboard is placed on the large screen. At the same time, in order to display the content more clearly, the color contrast between the text and the background should be large, which means the text color is mostly light.<\/p>\n\n\n\n

\"\"
From FineReport<\/em><\/figcaption><\/figure>\n\n\n\n

In addition to using the background color, you can also use the background image. For example, a dark-toned picture like the two images below is full of technological sense.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

4. Color Schemes<\/strong><\/h2>\n\n\n\n

The following are the common color schemes collected from the Internet.<\/p>\n\n\n\n

\"\"
From <\/em>Google<\/em>\ufeff<\/a><\/figcaption><\/figure>\n\n\n\n

FineReport<\/a> has built in many beautiful color schemes.<\/p>\n\n\n\n

\"\"\/
From FineReport<\/em><\/figcaption><\/figure>\n\n\n\n

The specific RGB values can be obtained through the color picking software. There are various resources on the Internet.<\/p>\n\n\n\n

5. Graphics<\/strong><\/h2>\n\n\n\n

By using graphical techniques such as ECharts, D3.js, and Highcharts,it is possible to make the original static charts like histograms and line charts to more clearly display the data in front of the user.<\/p>\n\n\n\n

6. Dynamic effects<\/strong><\/h2>\n\n\n\n

The perfect dashboard has the characteristic of user interaction, and what are the effects can reflect user interaction?<\/p>\n\n\n\n

Scrolling<\/strong><\/p>\n\n\n\n

\"\"\/
From FineReport<\/em><\/figcaption><\/figure>\n\n\n\n
\"\"
From FineReport<\/em><\/figcaption><\/figure>\n\n\n\n

Real-time display<\/strong><\/p>\n\n\n\n

\"\"\/
From FineReport<\/em><\/figcaption><\/figure>\n\n\n\n

Linkage<\/strong><\/p>\n\n\n\n

\"\"\/
From FineReport<\/em><\/figcaption><\/figure>\n\n\n\n

Drilling<\/strong><\/p>\n\n\n\n

\"\"\/
From FineReport<\/em><\/figcaption><\/figure>\n\n\n\n

7. Details<\/strong><\/h2>\n\n\n\n

7.1 Icons<\/strong><\/h3>\n\n\n\n

Adding icons to the title, list and chart not only visually reflects the theme of a certain block, but also has a good decorative effect. <\/p>\n\n\n\n

7.2 Border lines<\/strong><\/h3>\n\n\n\n

The border lines make the blocks obviously separated and make the data clearly presented.<\/p>\n\n\n\n

\"\"
From FineReport<\/em><\/figcaption><\/figure>\n\n\n\n

7.3 Title <\/strong><\/h3>\n\n\n\n

The title makes the theme clear. Even if the blocks are clearly separated and there are many dynamic charts in a page, without the title, it will not be a successful dashboard, because the lack of title will reduce the readability.<\/p>\n\n\n\n

I hope that the above summary can help you in layout, color matching, interaction, etc., so that you can make a relatively high-quality dashboard that can surprise your leaders. Besides, you can also refer to the dashboard pictures on the Internet, starting with imitation. I think that design is to constantly accumulate and slowly find your own way.<\/p>\n\n\n\n

Try FineReport<\/a> to make a really cool dashboard and it\u2019s free for personal use!<\/p>\n\n\n\n

Follow FineReport Reporting Software<\/a> on Facebook for more information.<\/em><\/p>\n\n\n\n

Related Articles<\/strong><\/h2>\n\n\n\n

How Can Beginners Design Cool Data Visualizations?<\/a><\/p>\n\n\n\n

25 Chart Effects That Make Your Data Visualization Advanced<\/a><\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

In the current trend of big data, the data visualization on large screen has become an interactive display mode that everyone admires. This article will teach you how to design a great dashboard on your own.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[854],"tags":[156,118],"_links":{"self":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts\/5871"}],"collection":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/comments?post=5871"}],"version-history":[{"count":5,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts\/5871\/revisions"}],"predecessor-version":[{"id":5876,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/posts\/5871\/revisions\/5876"}],"wp:attachment":[{"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/media?parent=5871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/categories?post=5871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frg.fineres.com\/en\/wp-json\/wp\/v2\/tags?post=5871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}