Special Characters in a Xcelsius Table View

by Ryan Goodman

When binding components to cells, specifically the table view component, it will inherit the cell formatting from Excel. This includes the font, color, borders, alignment, and values. Once those cells are bound there is no way to dynamically change that format during runtime. This is unfortunate, specifically for conditional color formatting and value format. In many cases users want to display some type of visual indication within a table view. There is however a way to inject special characters into a table view. If you tried this before you may know that those characters do not display by default. There is a modification to your XLF that will enable these characters to show up.

In Xcelsius, go to File>Font>and click Unicode Font Options. This will allow you to use device fonts instead of embedding the font in the SWF. By default, Xcelsius will actually embed the Verdana font in your SWF which adds about 60K to the SWF file size. By using device fonts, you will now have the opportunity to leverage special characters within a table view. You will also notice the fonts will look sharper since the Flash player will not have to render the anti-alias fonts. There is only 1 pitfall to using non-embedded fonts… an inability to render text vertically. This will affect the X axis in some of your charts when labels are long, or chart y-axis labels. Otherwise you can leverage characters like the arrows I demonstrate below.
Download Source Files

Flash Variables in Xcelsius

by Ryan Goodman

Within a Adobe Flash application, or in this case Xcelsius, you can bind variables that are utilized through out the application during runtime. The benefit of Flash variables within an Xcelsius generated SWF is an ability to push values into the model when embedded inside of a HTML page. In most use cases, you would want to use Flash Variables to push global session variables that you may want to consume and re-use. Examples include: Session tokens, user IDs, and parameters passed from other embedded scripts or controls.

First we will define a variable within Xcelsius.

1. Once Xcelsius is loaded, go to File>Export Settings.
2. Click on the “Define Variables” button. In this case, I named my value sessionID.
3. Define your variable name and bind it to a cell
4. Generate your SWF.
   Now your SWF file is configured to consume a Flash variable

There are two ways to push the variable into the SWF.

1. The Adobe Flash player enables a SWF to consume data directly from the HTML for which it is loaded. In a scenario where you are dynamically generating your HTML page, you can pass variables into the SWF on load. You can also use Javascript to dynamically change the variables during runtime, enabling other HTML embedded controls to pass data into the SWF without reloading the HTML page. An HTML nested flash variable would look something like this within an OBJECT tag:

2. The Adobe Flash player also enables a SWF to consume data directly from defined parameters within a browser or path for which it is loaded. This works great for passing parameters from one SWF to another if they are loaded on separate HTML pages.

You can try the example below by entering a value, then launching another HMTL page where we consume the variable. You will be launching a URL that looks something like this:
http://ryangoodman.net/blog/flashvar.swf?sessionID=test

Planning for a Successful Dashboard Project

Over the years I have seen a many dashboard projects succeed, but some have failed for many different reasons. We learn the most from things that do not succeed because it is only then that the appropriate time and energy is truly expended to understand what was accomplished and what went wrong.

Starting on the right foot
There is no perfect formula for an optimal design that will work 100% of the time for all cases because requirements are always a moving target that revolves around delivering and meeting expectations of users who may not know themselves exactly what they want to accomplish. With that said, there are a few commonalities for the user experience that have helped propel me down a successful path:

• Create a user interface paradigm that is easy to grasp
• Provide enough visual direction to how the end user will navigate the application:
  This is achieved through effective layout design and positioning of elements on the screen. If it is not evident how the application should be used by an end user, you need to re-evaluate your design.
• Present information in an order of magnitude creating an intuitive workflow
• Be prepared to be flexible and committed to evolving the application even after deployment
• Avoid scope creep by starting with a simple deliverable in a phased approac
• Use technology for the UI that lends itself to minimal screen refresh and loading time.

Measuring Success
The measurement of success can vary, but at the end of the day, it is user adoption that will drive other success measures like ROI. You can build the perfect dashboard or application, but if it is not adopted for what ever reason, your project is a failure. The user experience design itself is one of several elements that could impact the user adoption rate. There are other contributing factors to any dashboard application’s success that are just as important as the visual interface itself. The coolest and sexiest dashboard won’t save you if you have any major problems with the following.

• Communication breakdown between end user stakeholders, IT, and designer
• Data quality
• Query response time
• Stability
• Security

Securing the Necessary Skill Sets
There is several skill sets required to create a compelling, useful, and easy to use dashboard. At the end of the day, a dashboard should connect business information and present it in a medium that enables an end user to drive action. To date I have never worked on a dashboard project where less than 2 individuals were needed because of the business, technical, and design expertise required. A dashboard project should be a collaborative process combining business performance measurements, data access, and visual presentation. If you can’t assemble a group to collectively execute on of all of these points, or have a significant weakness in any area, you could be putting your project at risk. You will need to secure resources who:

• Understand the business process, strategy, problems, and end users needs
• Define and prioritize performance measures and metrics aligned to the business
• Know the IT infrastructure and location of required data to populate the dashboard
• Have technical competency to collect aggregate and provide data to data visualization
• Have experience in information design and visual design

Please feel free to share your experiences.

Xcelsius Formulas: Calculating Current Quarter

by Ryan Goodman

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.

Download Source Files

1. First you will declare the current date using the function: NOW().


2. Next you will pull the month and year from this date using the MONTH() and YEAR() functions.


3. Now is the trickiest part dictating the current quarter, which is not an available function. ROUNDUP(4*MONTH()/12,0)


4. 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.

Design Principle 5. Consistency

by Ryan Goodman

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.

Design Principle 4. Text

by Ryan Goodman

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.

Design Principle 3. Contrast

by Ryan Goodman

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.