Designing Executive Dashboards (Part 2)

Designing Executive Dashboards (Part 2)

By Thomas W. Gonzalez



(This is part two of a two-part series. Come Here to read part one.)


Introduction


In part one of this series we covered the basic requirements of a corporate dashboard solution and went on to discuss the first steps of the dashboard design process. The two main areas covered were determining the appropriate key performance indicators (KPIs) and how to design a dashboard with the five most common KPI visualizations: alert icons, traffic lights, trend icons, progress bars, and gauges. In this article we complete the design process and cover visualization of supporting analytics and the layout techniques used to create a visually efficient and compelling design.


Supporting Analytics:


Supporting analytics are additional data visualizations that a user can view to help diagnose the condition of a given KPI or set of KPI’s. In most business cases these supporting analytics take the form. of traditional charts and tables or lists. While the scope of this article is not intended to cover the myriad of best practices in designing traditional charting visualizations, we will discuss some of the basics as they relate to dashboard design.


When creating supporting analytics, it is paramount that you take into account the typical end user who will be viewing the dashboard. The more specialized and specific the dashboard will be the more complexity and detail you can have in your supporting analytics. Conversely, if you have a very high level dashboard your supporting analytics will generally represent higher level summary information with less complex detail.


Below we will discuss some of the most common visualizations used for designing supporting analytics.


Pie Charts: Pie charts are generally considered poor data visualization for any data set with more than half a dozen elements. The problem with pie charts is that it is very difficult to discern proportional differences with a radially divided circle, except in the case of a small data set that has large value differences within it. Pie charts also pose a problem for labeling, as they are either dependent on a color or pattern to describe the different data elements, or the labels need to be arranged around the perimeter of the pie, creating a visual distraction.


When to use: Pie charts should be used to represent very small data sets that are geared to high level relationships between data elements. Usually pie charts can work for summary level relationships but should not be used for detailed analysis.


Bar Charts: Bar charts are an ideal visualization for showing the relationship of data elements within a series or multiple series. Bar charts allow for easy comparison of values due to the fact that the “bars” of data share a common measure and can be easily visually compared to one another.


When to use: Bar charts are best suited for categorical analysis but can also be used for small time series analysis (e.g. the months of a year.) An example of categorical analysis would be examining sales of products broken down by product or product group, with sales in dollars being the measure and product or product group being the category. Be careful in using bar charts if you have a data set that can have one element with a large outlier value; this will render the visualization for the remaining data elements unusable. This is due to the fact that the chart scale is linear and will not clearly represent the relationships between the remaining data elements. An example is below.


bb 

* Notice that due to the fact widget2 has sales of $1.2MM you can not easily discern that widget3 has twice as many sales ($46,000) as widget1 ($23,000).


Line Charts: Line charts are ideal for time series analysis where you want to see the progress of one or more measures over time. Line charts also allow for comparative trend analysis as you can stack multiple series of data into one chart.


When to use: Use line charts when you would like to see trends over time in a measure versus a side by side detailed comparison of data points. Time series line charts are most commonly used with the time dimension along the X axis and the data being measured along the Y axis.


Area Charts: Area charts can be considered a subset of the line chart, where the area under or above the line is shaded or colored.


When to use: Area charts are good for simple comparisons with multiple series of data. By setting contrasting color hues you can easily compare the trends over time between two or more series.


Tables and Lists: Tables and lists are best used for information that either contains large lists of non numeric data, or data that has relationships not easily visualized.


When to use: You will want to use tables or lists when the information you need to present does not lend itself to easy numeric analysis. One example would be a financial KPI that measures a company’s current liquidity ratio. In this case, there can be a complex interrelationship of line items within the companies balance sheet where a simple table of balance sheet line items would provide a more comprehensive supporting analytic than a series of detailed charts and graphs.


A word about labeling your charts and graphs:


Chart labels are used to give the user context to the data they are looking at, both in terms of scale and content. The challenge with labeling is that the more labels you use and the more distinctive you make them, the more it will distract the user’s attention from the actual data being represented within the chart.


When using labels, there are some important considerations to take into account. Foremost of these is how often your user will be viewing these charts. For charts being viewed on a more frequent basis, the user will form. a memory of relevant labels and context. In these scenarios, you can be more conservative in your labeling by using smaller fonts and less color contrast. Conversely, if a user will only be seeing the chart occasionally you will want to make sure everything is labeled clearly so the user does not have to decipher the meaning of the chart.


Putting it all together; using size, contrast, and position:


The goal in laying out an effective dashboard is to have the most important business information be the first thing to grab your user’s visual attention. In your earlier design stages you already determined the important KPI’s and supporting analytics, so you can use this as your layout design guide. Size, contrast, and position all play a direct role in determining which visual elements will grab the user’s eye first.


Size: In most situations, the size of a visual element will play the largest role in how quickly the user will focus their attention upon it. In laying out your dashboard, figure out which element or group of elements will be the most important to the user and make their size proportionally larger than the rest of the elements on the dashboard. This principle holds true for single element or groups of common elements that have equal importance.


Contrast: After size, the color or shade contrast of a given element in relationship to its background will help determine the order in which the user focuses attention on that element. In some situations contrast alone will become the primary factor, even more so than size, as to where the user’s eye will gravitate. Contrast can be achieved by using different colors or saturation levels to distinguish a visual element from its background. A simple example of this can be seen in the screen below.


bb 

As you can see, the black circle instantly grabs the user’s attention due to the sharp contrast against the white background. In this example, the contrast even overrides the size of the larger circle in its ability to focus the user’s visual awareness.


Position: Visual position also plays a role in where a user will focus their attention. All other factors being equal, the top right hand side of a rectangular area will be the user’s first focal point, as seen in the picture below. The next area a user will focus is the top left hand side, followed by the bottom right and finally the bottom left. Therefore if you need to put an element on the dashboard that you don’t want the user to have to hunt around for, the top right hand quadrant is generally the best place for it.


bb 

Position is also important when you want to create an association between visual elements. By placing elements in visual proximity to each other, and grouping them by color or lines, you can give an implied context and relationship between those elements. This is important in instances when you want to associate a given supporting analytic with a KPI or group together related supporting analytics.


Validating your design:


You will want to make sure that your incorporation of the above design techniques achieves the desired affect of focusing the user’s attention on the most important business information, and in the proper order. One way to see if you have achieved this successfully is to view your dashboard with an out of focus perspective. This can be done by stepping back from your dashboard and relaxing your focus until the dashboard becomes blurry and you can no longer read words or distinguish finer details. Your visual cortex will still recognize the overall visual patterns and you will easily see the most attention grabbing elements of your design. You want to validate that the elements attracting the most visual attention correspond with the KPI’s and supporting analytics that you had previously identified as being most critical to the business purpose of your dashboard.


Please bear in mind, the design guidelines presented in this article should be used as general rules of thumb, but it is important to note that these are not hard and fast rules that must be followed in every instance. Every dashboard has its own unique requirements, and in certain cases you will want to deviate from these guidelines and even contradict them to accomplish a specific visual effect or purpose.


References:


Tractinsky, Noam “Aesthetics and Apparent Usability: Empirically Assessing Cultural and Methodological Issues” Association for Computing Machinery, Inc., 1997


Tufte, Edward “Envisioning Information” Graphics Press, 1990


Fitts, P.M. (1954). “The information capacity of the human motor system in controlling the amplitude of movement.” Journal of Experimental Psychology, 47, 381-391


Copyright © 2005, BrightPoint Consulting, Inc.


Mr. Gonzalez is the founder and Managing Director of BrightPoint Consulting, Inc. BrightPoint Consulting, Inc is a next generation business intelligence services firm that delivers corporate dashboard and advanced information visualization solutions to organizations across the world. BrightPoint Consulting leverages best of breed technologies in data visualization, business intelligence and application integration to deliver powerful dashboard and business performance solutions that allow executives and managers to monitor and manage their business with precision and agility. For further company information, visit BrightPoint’s Web site at www.brightpointinc.com. To contact Mr. Gonzalez email him at tgonzalez@brightpointinc.com

fj.png768773_201003121027121.jpg

fj.png768773_201003121027431.jpg

fj.png768773_201003121027581.jpg

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/768773/viewspace-629306/,如需转载,请注明出处,否则将追究法律责任。

转载于:http://blog.itpub.net/768773/viewspace-629306/

技术选型 【后端】:Java 【框架】:springboot 【前端】:vue 【JDK版本】:JDK1.8 【服务器】:tomcat7+ 【数据库】:mysql 5.7+ 项目包含前后台完整源码。 项目都经过严格调试,确保可以运行! 具体项目介绍可查看博主文章或私聊获取 助力学习实践,提升编程技能,快来获取这份宝贵的资源吧! 在当今快速发展的信息技术领域,技术选型是决定一个项目成功与否的重要因素之一。基于以下的技术栈,我们为您带来了一份完善且经过实践验证的项目资源,让您在学习和提升编程技能的道路上事半功倍。以下是该项目的技术选型和其组件的详细介绍。 在后端技术方面,我们选择了Java作为编程语言。Java以其稳健性、跨平台性和丰富的库支持,在企业级应用中处于领导地位。项目采用了流行的Spring Boot框架,这个框架以简化Java企业级开发而闻名。Spring Boot提供了简洁的配置方式、内置的嵌入式服务器支持以及强大的生态系统,使开发者能够更高效地构建和部署应用。 前端技术方面,我们使用了Vue.js,这是一个用于构建用户界面的渐进式JavaScript框架。Vue以其易上手、灵活和性能出色而受到开发者的青睐,它的组件化开发思想也有助于提高代码的复用性和可维护性。 项目的编译和运行环境选择了JDK 1.8。尽管Java已经推出了更新的版本,但JDK 1.8依旧是一种成熟且稳定的选择,广泛应用于各类项目中,确保了兼容性和稳定性。 在服务器方面,本项目部署在Tomcat 7+之上。Tomcat是Apache软件基金会下的一个开源Servlet容器,也是应用最为广泛的Java Web服务器之一。其稳定性和可靠的性能表现为Java Web应用提供了坚实的支持。 数据库方面,我们采用了MySQL 5.7+。MySQL是一种高效、可靠且使用广泛的关系型数据库管理系统,5.7版本在性能和功能上都有显著的提升。 值得一提的是,该项目包含了前后台的完整源码,并经过严格调试,确保可以顺利运行。通过项目的学习和实践,您将能更好地掌握从后端到前端的完整开发流程,提升自己的编程技能。欢迎参考博主的详细文章或私信获取更多信息,利用这一宝贵资源来推进您的技术成长之路!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值