I was recently tasked with managing a project to create new and updated reports for the SAS Visual Analytics Try Before You Buy webpage. We had a phenomenal group of talented individuals who contributed to the report design and build. After we finished building the reports we decided to go one step further and consult with some SAS UI experts. We meet with Britt Gillis and Micheal Sies to give us some feedback. The suggestions below came from our discussions with these experts.
If you are going to use red to represent “bad” and green to represent “good” you shouldn’t use them in other charts on the same section to represent a category or measure value. It’s very confusing when a user see’s those colors being used to draw attention to a problem on one chart and then sees the same color on another chart representing a category. For example, the before image below uses red in the heat map to draw attention to a problem area. However, notice how red is also being used in the other charts to represent the 3G handsets. In the after image, we’ve changed the pie and bar charts so that red is no longer being displayed. This makes it much easier for the user to quickly identify issues.
Within a particular section of the report you should try to stick to similar color families. For example, use cool colors such as blue, green and grey on one screen versus using every color.
Use the same colors throughout the report for the same category values:
When possible you should use the same colors to represent the same category values throughout the report. In the example below you can see that in both of the sections displayed, lime green is used to represent LTE MB, light blue 4G MB and orange 3G MB. This makes it much easier for the user to quickly identify what type of network is being displayed no matter where they are in the report.
It is now the trend to use the flat or none style for your charts instead of the gradient look produced with the matte or gloss style. In the example below, you can see that the gauges and bar charts styles have been changed to the none style. This example also shows how we now only use red to highlight problem areas.
For chart and graph titles it is important to make them obvious and distinct from axis titles. They should be bold and have a larger font than the chart axis titles.
When possible, use dark colored text on a light background or vice versa. It is really hard to read light colored text when it is on a light colored background.
It’s important to remember that when a user first glances at your report they may not have the background knowledge about the data that you have. Does the report draw the user’s eye to potential issues? Is it easy for a new user to understand what the data is showing or do they need to spend time studying the charts before they can comprehend the information?
If you have charts that pertain to the same or similar element they should be grouped together for easy reading. In the example below, notice how the green and red gauge and their corresponding bar/line chart are not aligned. In the after diagram the charts are aligned and there is now a box around the charts that compare across the store banners. This makes it much easier for the viewer to quickly understand which charts are related.
If you have too many charts in one page it takes much longer for the user to grasp where one piece of information ends and another begins. You need to leave some breathing room for the user’s eye. In the example above we have many charts on the page. However, by using the outlined box we quickly illustrate that the charts within that box are related and separate from the information in the charts above the box.
Recently I attended a TDWI conference where I took a course on Visualization Best Practices and Design Standards taught by Wayne Eckerson of the Eckerson Group. This next section will highlight some of the key points from the session (images used below are from Wayne Eckerson’s slide deck).
When developing a report you should understand the company’s culture. Some of the older companies like more conservative reports without a lot of images. However, the more hip and younger companies seem to like the use of images. You also need to understand who will be utilizing the reports. The more mature user likes a dense report where they can see many pieces of information on one screen. However, the less mature user needs a sparse display (with more clicks for drill through) so that they can quickly understand the issues and be guided to the details faster.
Understanding your data and the information you want to portray is very important.
According to Wikipedia “Pre-attentive processing is the subconscious accumulation of information from the environment. All available information is pre-attentively processed. Then, the brain filters and processes what is important.”
Here are some ways you can create pre-attentive processing.
Refer to the image below for examples.
Where possible, link directly to the source detail.
As was mentioned previously, every pixel should help tell the story. Your goal should be to convey the most amount of information in the least amount of space with the least amount of ink.
The images on the left show how decoration can overwhelm the data. The image on the right shows how you can show lots of data with minimal amounts of distraction quickly drawing the user’s attention to issues.
Creating and designing reports can take so much time that we often ignore the importance of the report’s visuals. I hope the information presented above provides some quick checks for you to use when finalizing your reports.
Senior Solutions Architect