{"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":"2025-04-13T17:24:00","modified_gmt":"2025-04-13T09:24:00","slug":"how-to-design-a-great-dashboard","status":"publish","type":"post","link":"https:\/\/www.finereport.com\/en\/data-visualization\/how-to-design-a-great-dashboard.html","title":{"rendered":"Dashboard Navigation: Design To Better User Experience"},"content":{"rendered":"\n<p>The current development trend of big data is becoming more and more prosperous, and more and more companies choose to embrace data science. Large-screen data visualization has become an interactive display method accepted by many people. So how to design a dashboard for decision-making?<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/Strategic-command.jpg\"><img loading=\"lazy\" width=\"1024\" height=\"412\" src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/Strategic-command-1024x412.jpg\" alt=\"\" class=\"wp-image-12926\" srcset=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/Strategic-command-1024x412.jpg 1024w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/Strategic-command-300x121.jpg 300w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/Strategic-command-768x309.jpg 768w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/Strategic-command-1536x618.jpg 1536w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/Strategic-command.jpg 750w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Strategic Dashboard (FineReport)<\/figcaption><\/figure>\n\n\n\n<p>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, how do we design dashboards on our own? This post will give you a definitive guide to creating a dashboard by yourself, which will be very helpful for every learner!<\/p>\n\n\n\n<br> <\/br>\n\n\n\n<div id=\"toc_container\" class=\"toc_transparent no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#How_to_do_Dashboard_Navigation\">How to do Dashboard Navigation<\/a><ul><li><a href=\"#1_Targeted_audience\">1. Targeted audience<\/a><\/li><li><a href=\"#2_Design_typesetting_or_layout_of_dashboard\">2. Design typesetting or layout of dashboard<\/a><\/li><li><a href=\"#3_Background\">3. Background<\/a><\/li><li><a href=\"#4_Set_a_dashboard_color_schemes\">4. Set a dashboard color schemes<\/a><\/li><li><a href=\"#5_Graphics\">5. Graphics<\/a><\/li><li><a href=\"#6_Dynamic_effects\">6. Dynamic effects<\/a><\/li><li><a href=\"#7_Add_details_to_the_dashboard\">7. Add details to the dashboard<\/a><\/li><\/ul><\/li><li><a href=\"#8_Production_and_debugging_of_dashboard_navigation_template\">8. Production and debugging of dashboard navigation template<\/a><\/li><li><a href=\"#Conclusion_of_Dashboard_Navigation\">Conclusion of Dashboard Navigation<\/a><\/li><\/ul><\/div>\n<h2><span id=\"How_to_do_Dashboard_Navigation\">How to do <strong>Dashboard Navigation<\/strong><\/span><\/h2>\n\n\n\n<p>There are a set of criteria to evaluate the effectiveness of the dashboard.  You need to keep these criteria in mind when you are creating a dashboard.<\/p>\n\n\n\n<ul><li>Is the information presented clearly and focused?<\/li><li>Is the choice of graphics appropriate?<\/li><li>Is the overall visual style of the dashboard consistent?<\/li><li>Is the information presented adequately?<\/li><li>Does it effectively show the relationship between the data? Such as trends, comparisons, etc.<\/li><li>Can the dashboard be fully displayed on one screen?<\/li><li>Can the dashboard adapt to scale of devices?<\/li><\/ul>\n\n\n\n<p>According to the above scoring criteria, we can find that the most important thing about the dashboard is to comprehensively display information with appropriate icons, and it has a clear organization and high readability.<\/p>\n\n\n\n<br> <\/br>\n\n\n\n<h3><span id=\"1_Targeted_audience\">1. Targeted audience<\/span><\/h3>\n\n\n\n<p>Knowing the user helps to master how to organize the displayed KPIs and data. In most cases, the dashboard is for the overall management, so it shows more indicators at the operational level or strategic level.<\/p>\n\n\n\n<br><\/br>\n\n\n\n<h3 id=\"id-190625-\u5b98\u7f51-HowtoDesignaGreatDashboard?-2.Layout\"><span id=\"2_Design_typesetting_or_layout_of_dashboard\">2. Design typesetting or layout of dashboard<\/span><\/h3>\n\n\n\n<p>People are used to reading from top to bottom, and the middle position is the most attractive, so important content, primary information, should be placed at the top or middle. As shown below, I share some popular typesetting. The overall 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<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/10\/layout-typesetting-FR.jpg\"><img loading=\"lazy\" width=\"1024\" height=\"655\" src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/10\/layout-typesetting-FR-1024x655.jpg\" alt=\"how to create a dashboard layout\" class=\"wp-image-12917\" srcset=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/10\/layout-typesetting-FR-1024x655.jpg 1024w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/10\/layout-typesetting-FR-300x192.jpg 300w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/10\/layout-typesetting-FR-768x492.jpg 768w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/10\/layout-typesetting-FR-1536x983.jpg 1536w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/10\/layout-typesetting-FR.jpg 750w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Typysetting &amp; Layout<\/figcaption><\/figure>\n\n\n\n<br> <\/br>\n\n\n\n<h3 id=\"id-190625-\u5b98\u7f51-HowtoDesignaGreatDashboard?-3.Background\"><span id=\"3_Background\">3. Background<\/span><\/h3>\n\n\n\n<p>If the background color is dark, the effect is better when the dashboard is placed on a 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<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2020\/08\/Income-analysis-dashboard.jpg\"><img loading=\"lazy\" width=\"1024\" height=\"545\" src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2020\/08\/Income-analysis-dashboard-1024x545.jpg\" alt=\"how to create a dashboard\" class=\"wp-image-12882\" srcset=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2020\/08\/Income-analysis-dashboard-1024x545.jpg 1024w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2020\/08\/Income-analysis-dashboard-300x160.jpg 300w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2020\/08\/Income-analysis-dashboard-768x409.jpg 768w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2020\/08\/Income-analysis-dashboard-1536x818.jpg 1536w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2020\/08\/Income-analysis-dashboard-2048x1090.jpg 2048w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2020\/08\/Income-analysis-dashboard.jpg 750w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Dark-background dashboard (FineReport)<\/figcaption><\/figure>\n\n\n\n<br> <\/br>\n\n\n\n<h3 id=\"id-190625-\u5b98\u7f51-HowtoDesignaGreatDashboard?-4.ColorSchemes\"><span id=\"4_Set_a_dashboard_color_schemes\">4. Set a dashboard color schemes<\/span><\/h3>\n\n\n\n<p>Many professional dashboard software will prepare some color schemes for users. For example, <a href=\"http:\/\/www.finereport.com\/en\/\">FineReport<\/a>&nbsp;has built-in many beautiful color schemes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/chart-FR.png\"><img loading=\"lazy\" width=\"750\" height=\"430\" src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/chart-FR.png\" alt=\"How to create a dashboard? Set up your style\" class=\"wp-image-12927\" srcset=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/chart-FR.png 750w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/chart-FR-300x172.png 300w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/chart-FR-768x440.png 768w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/a><figcaption>Use color scheme for dashboard design<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/chart-FR-2.png\"><img loading=\"lazy\" width=\"1024\" height=\"548\" src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/chart-FR-2-1024x548.png\" alt=\"How to create a dashboard? Set up your style\" class=\"wp-image-12928\" srcset=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/chart-FR-2-1024x548.png 1024w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/chart-FR-2-300x160.png 300w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/chart-FR-2-768x411.png 768w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/06\/chart-FR-2.png 750w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Use color scheme for dashboard design<\/figcaption><\/figure>\n\n\n\n<p>The specific RGB values can be obtained through the color-picking software. There are various resources on the Internet.<\/p>\n\n\n\n<br> <\/br>\n\n\n\n<h3 id=\"id-190625-\u5b98\u7f51-HowtoDesignaGreatDashboard?-5.Graphics\"><span id=\"5_Graphics\">5. Graphics<\/span><\/h3>\n\n\n\n<p class=\"has-text-align-left\">By using graphical techniques such as&nbsp;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<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Data relation<\/strong><\/td><td><strong>Example scenario<\/strong><\/td><td><strong>Applicable chart types<\/strong><\/td><\/tr><tr><td>Compare<\/td><td>Compare the sales of different products<\/td><td>Column chart\/bubble chart\/stacked area chart\/rectangular tree diagram\/radar chart\/word cloud<\/td><\/tr><tr><td>Distribution<\/td><td>Relationship between employee education and salary<\/td><td>Scatter plot\/distribution chart\/bubble chart<\/td><\/tr><tr><td>Map<\/td><td>Number of users in stores across the country<\/td><td>Heat Maps<\/td><\/tr><tr><td>Proportion<\/td><td>The proportion of a product in total sales<\/td><td>Doughnut chart\/pie chart\/stacked column chart\/rectangular tree diagram<\/td><\/tr><tr><td>Section<\/td><td>Target sales achievement<\/td><td>Meter diagram\/stacked area drawing<\/td><\/tr><tr><td>Time<\/td><td>Sales growth over time<\/td><td>Line chart\/spiral chart\/area chart<\/td><\/tr><\/tbody><\/table><figcaption>How to choose charts for dashboard?<\/figcaption><\/figure>\n\n\n\n<br> <\/br>\n\n\n\n<h3 id=\"id-190625-\u5b98\u7f51-HowtoDesignaGreatDashboard?-6.Dynamiceffects\"><span id=\"6_Dynamic_effects\">6. Dynamic effects<\/span><\/h3>\n\n\n\n<p>The perfect dashboard has the characteristic of user interaction, and what are effects that can reflect user interaction?<\/p>\n\n\n\n<p><strong>Scrolling<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/07\/dashboard-for_covid19.mp4\"><\/video><figcaption>Dashboard scrolling (FineReport)<\/figcaption><\/figure>\n\n\n\n<p><strong>Real-time display<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/08\/smart-city-operation-center.png\"><img loading=\"lazy\" width=\"1024\" height=\"470\" src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/08\/smart-city-operation-center-1024x470.png\" alt=\"\" class=\"wp-image-12499\" srcset=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/08\/smart-city-operation-center.png 1024w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/08\/smart-city-operation-center-300x138.png 300w, https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/08\/smart-city-operation-center-768x353.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption>Real time display dashboard (FineReport)<\/figcaption><\/figure>\n\n\n\n<p><strong>Linkage<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2019\/07\/smart_city_dashboard.mp4\"><\/video><figcaption>Dashboard Linkage (FineReport)<\/figcaption><\/figure>\n\n\n\n<p><strong>Drilling<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.finereport.com\/en\/wp-content\/uploads\/2021\/10\/dashboard-desing-previewinteract.mp4\"><\/video><figcaption>Dashboard drilling (FineReport)<\/figcaption><\/figure>\n\n\n\n<br> <\/br>\n\n\n\n<h3 id=\"id-190625-\u5b98\u7f51-HowtoDesignaGreatDashboard?-7.Details\"><span id=\"7_Add_details_to_the_dashboard\">7. Add details to the dashboard<\/span><\/h3>\n\n\n\n<h4 id=\"id-190625-\u5b98\u7f51-HowtoDesignaGreatDashboard?-7.1Icons\">7.1 Icons<\/h4>\n\n\n\n<p>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.&nbsp;<\/p>\n\n\n\n<h4 id=\"id-190625-\u5b98\u7f51-HowtoDesignaGreatDashboard?-7.2Borderlines\">7.2 Border lines<\/h4>\n\n\n\n<p>The borderlines make the blocks obviously separated and make the data clearly presented.<\/p>\n\n\n\n<h4 id=\"id-190625-\u5b98\u7f51-HowtoDesignaGreatDashboard?-7.3Title\">7.3 Title&nbsp;<\/h4>\n\n\n\n<p>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<p>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<br> <\/br>\n\n\n\n<h2><span id=\"8_Production_and_debugging_of_dashboard_navigation_template\">8. Production and debugging of<strong> dashboard navigation<\/strong> template<\/span><\/h2>\n\n\n\n<p>During the production process, you need to constantly preview the report and adjust the visual effects of the report, including key visual elements, font size, page dynamics, etc. It is necessary to check whether the graphs and charts are displayed as expected, whether they are distorted or misplaced, and if there are errors, they must be fixed in time.<\/p>\n\n\n\n<br> <\/br>\n\n\n\n<h2><span id=\"Conclusion_of_Dashboard_Navigation\">Conclusion of <strong>Dashboard Navigation<\/strong><\/span><\/h2>\n\n\n\n<p>The post introduces several keys to making dashboards. The software I use is FineReport. This software also has many built-in templates, which can be directly applied. Welcome to download the free version!<\/p>\n\n\n\n<p><a style=\"color: #fff; background-color: #2849f7; border: none; border-radius: 20px; width: 180px; height: 40px; font-size: 16px; line-height: 26px; display: inline-block; padding: 6px 12px; margin-bottom: 0; text-align: center;\" href=\"\/en\/activation\">Free Trial<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to create a dashboard? Click to get your ultimate guide on designing dashboards. Here are tips, templates, and software.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[854],"tags":[],"yst_prominent_words":[574,796,182,191,2429,185,805,678,209,964,798],"_links":{"self":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts\/5871"}],"collection":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/comments?post=5871"}],"version-history":[{"count":10,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts\/5871\/revisions"}],"predecessor-version":[{"id":19346,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/posts\/5871\/revisions\/19346"}],"wp:attachment":[{"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/media?parent=5871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/categories?post=5871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/tags?post=5871"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.finereport.com\/en\/wp-json\/wp\/v2\/yst_prominent_words?post=5871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}