This blog is my personal space for technologies and techniques for presenting information in the form of visual analytics and interactive dashboard applications. I consider myself an Xcelsius evangelist, but most importantly an advocate of enabling technologies that make data visualization applications easy to produce. Much of the information posted on this blog will feature Xcelsius tricks and best practices based on my technical expertise. This is mirrored from http://ryangoodman.net/blog
Many times, you want your dashboard to query data based on the current quarter, month, day or year. Within Xcelsius you can easily calculate these values. The trickiest part is calculating the quarter since that is not a natively supported function.
First you will declare the current date using the function: NOW().
Next you will pull the month and year from this date using the MONTH() and YEAR() functions.
Now is the trickiest part dictating the current quarter, which is not an available function. ROUNDUP(4*MONTH()/12,0)
With the current quarter, you can now decide if you want to populate other quarters. In my case I want to populate a selector with the current quarter, last quarter, and the three previous quarters. In my example you can see how I took this idea a few steps further.
5. Consistency: Consistency encapsulates all of the previous 4 principles into a single concept of creating uniformity and coherence across the entire dashboard implementation. Consistency is applicable in many forms not only in the dashboard aesthetics, but through information design itself.
Information design- The measure names, titles, and analysis is should be aligned with the business process and intended dashboard purpose. In many organizations, there are standard tools used for communicating and presenting quantitative information. Upon implementing a new dashboard project, you will obviously want to improve the medium for information delivery, but also use consistent charting, tabular views, and methodologies.
Navigation- In an interactive dashboard, you will need to use consistent navigation paradigms and controls for user familiarity and ease of use.
Layout- A large scale dashboard project should incorporate a standard layout, which consists of the placement and proximity of elements to enable user familiarity and adoption.
Color- The consistency of color is apparent not only for general aesthetic purposes, but more importantly for designating rules for color. For example, if you designate a tan color to represent regional (let’s say Asia) data within a bar chart, all other graphics representations of Asia should utilize the same tan color.
Text- Just like the navigation controls and graphs used to present data, text properties must also remain consistent throughout the design. You should always use the same typeface and style throughout your design.
4. Text: The application of correct text usage will provide a dashboard user experience where quantitative and qualitative information are easily consumable. There are several considerations when inserting text within your dashboard design.
Text Aliasing- When applying text to interactive dashboard applications you may have the choice to use Anti-Aliased text with Flash based applications like Xcelsius. Anti-aliasing is applied to larger fonts, provides smoothly rendered curves and angles . When using small typefaces you always want to use device fonts, which will render the text as Aliased. As you will see in the example below, the aliased text is much easier to read with a smaller font size.
Typeface (Serif vs San-Serif)- In choosing typefaces for dashboards, you will always want to use San-Serif fonts, that is fonts without the serif accents. Arial and Verdana are san-serif fonts, and enable an end user to read text on the computer screen much easier than serif fonts (example: times roman). Serif fonts are best applied in large bodies of printed text for readability. There is no value in using multiple fonts in a dashboard, so pick 1 san-serif font that works well for you.
Font Styles (bold, italics, underline, color)- Font styles provide a means to highlight titles or values that require specific attention. That said, you want to avoid using underlined or italicized fonts as a method to stylize your dashboard. For interactive dashboards, underlined text would represent a URL hyperlink, which has become the standard for web design. If you underline values, the end user will precieve it as clickable. Bold typeface can be used to highlight values but should not be applied to large bodies of text.
Though we have thoroughly covered color as an element of contrast, you will need to choose font colors that provide easy readability. Though black is a popular choice by many dashboard designers, it may eliminate an ability to use black as a highlight color. Assuming the background is light enough, you may want to try using darker shades of gray, and see how much easier it is on the eyes. For large bodies of text in tables or paragraphs, you want to use light background with darker text for easier readability. Using a dark background with light text makes the information a bit harder to visually digest and puts a strain on the end user’s eyes.
3. Contrast - Contrast is the difference between visual elements in a dashboard to make them distinguishable from others. In your previous or current dashboard projects you are automatically generating visual contrast and may not realize it. This is based on decisions that you make in component positioning, color, size, and sometimes motion. The key is to understand the basics so you make correct decisions.
Position The best way to avoid chaos or confusion for your end user, you should position elements on the stage based on the best practices I explained with placement and proximity. In most cases, you do not want to rotate or position elements out of place just to fill white space.
Color Color is extremely important to dashboard design. Though we are used to highly stylized graphics in media, there is some careful planning that must be exhibited when choosing colors. Many firms incorporate their corporate/brand identity in their dashboards, which is fine, unless it interferes with the analysis. Let’s look at a few methods for creating contrast with color…
Alerts- Alerts are a great method for creating contrast using color, to identify measures that fall above or below a determined tolerance levels. While the traffic sign (red, yellow, green) methodology has transposed itself into the scorecard/dashboard arena, there are two issues that can arise.
Confusion of color context: The use of alert colors in charts can sometimes cause confusion because an end user may not know if the red bar chart is referencing a target threshold (threshold) or just red because the designer liked the color red. That said, if you absolutely must use saturated (red, yellow, green) colors in your dashboard, do not do so within your graphical controls (graphs, gauge needles, buttons). Though they may convey your brand identity color scheme, they may lead to incorrect perception of the information presentation.
Alerts for Color Blind: While alert colors do a great job for conveying information, you must always consider your audience and their needs. Using color alerts can be a problem for individuals that are color blind because they are not able to interpret red, yellow, and green as incremental alert colors. A way to work, around this to please all end users is to pick out a single color and use lightness to communicate visual alerts through color. You are basically creating a 2 or 3 color gradient which is just as effective for red, yellow, and green.
Lightness, Saturation, Readability: Though I will not break down lightness, saturation, and readability in great detail, (this could be an entire article itself), I did want to touch on these elements of color management within your dashboard project. The goal is to have enough color contrast between layered components on the screen so that the content is easily readable. You can adjust lightness, contrast, or select complimentary hues (color) to create contrast on the screen. There are a few guidelines that always try to follow in a dashboard project..
Use light backgrounds and dark text for larger bodies of text. • Use muted colors (shown in alerts graphic) through-out your dashboard design • Do not use fully saturated colors for graphs or accents (scroll bars, buttons, etc). • Before deploying a dashboard, test it on multiple monitors to ensure readability (LCD, CRT) because people use different hardware and monitor configurations
Size Changing the size of an element to consume a greater percentage of limited screen estate is a commonly is a common use for creating contrast. This method is also commonly misused, and usually attributed to a designer’s choice to size components to fill whitespace. Having a few large graphs on a page is not a problem, but having components that are sized inconsistently just to fill whitespace can cause a dashboard to look un-proportionate. Though the art within a gauge is sleek looking, does not mean it will bring incremental value by consuming a lot of screen real estate. At some point I will elaborate on gauges in another article.
Motion I have touched on motion in previous article, but it is certainly a medium for contrast introduced with computer graphics/UI design. Motion is an interesting and captivating method for creating contrast, but does not truly bring incremental value unless you are visualizing real time trending or change. The best application of motion is watching a trend change over time, but qualitative information is always required to support a robust visualization solution like this.
Container An easy method for creating visual contrast on your dashboard is to enclose elements in their own visual container. Many applications support some type of container to create visual break in content. The best way to achieve this is through the use of shapes. Containers are really a combination of the methods described before, but are extremely relevant in dashboard design.
