BI Trends

Visual Design in Business Intelligence - Proportion and Context

In fashion, proportion can make or break a look. While that may be a bit extreme in our world of designing for dashboards, it is still very important because this principle introduces Context as a central design tenet. Proportion is always a comparative relation between two parts. In fashion, it is with respect to the person’s height or weight or other physical characteristics. In other words, it is always in “context” of the person wearing it. Similarly, proportion can be used in various ways in a dashboard or report to highlight, accent, or draw attention to  a particular aspect, or provide context for the presented information.

Visual Design in Business Intelligence - Proportion and Context

In this series so far we have defined visual design, discussed how to design for the human eyes, and outlined the effective use of color. This brings use to the last foundational principle of design: context.

Principle 3: Proportion, proportion, proportion!

In fashion, proportion can make or break a look. While that may be a bit extreme in our world of designing for dashboards, it is still very important because this principle introduces Context as a central design tenet. Proportion is always a comparative relation between two parts. In fashion, it is with respect to the person’s height or weight or other physical characteristics. In other words, it is always in “context” of the person wearing it. Similarly, proportion can be used in various ways in a dashboard or report to highlight, accent, or draw attention to  a particular aspect, or provide context for the presented information.

The examples below can better illustrate this:

In the image below, which number do you see first?

Most people will notice the upper number, 22,550, first and then the 15% even though the number 15 is colored. It’s important to note that in spite of having an eye-catching color, we were better able to draw a user’s attention to the first number just by adjusting its proportional size.

In the example below, which image better helps to identify how large the orange is

Clearly, the image on the left provides more context for determining the size of the orange.

Context is a critical concept to remember when crafting visual communications. Presenting information without the necessary context reduces the effectiveness of visuals and may in turn prevent end users from receiving the intended message.

I keep the following rules in mind when incorporating Proportion and Context into dashboards:

  1. Just like colors, use different proportions (font sizes) to emphasize certain features over another.
  2. Context for numerical data can be effectively presented by:
    1. Using comparisons to the previous period
    2. Showing period over period performance
    3. Comparing values to other relevant metrics (example: Productivity = Sales/Labor)
    4. Displaying trends
    5. Presenting goals, forecasts, budgets, or otherwise planned numbers
    6. Providing historical averages or other effective statistics to help the user comprehend current performance
    7. Including relative Thresholds or Benchmarks àgood/bad/better/worse
    8. Comparing values to other business areas
  3. Advanced analytics can also be used to provide more context in certain cases. For example, if you are presenting the daily sales over a month-long period, then along with the trend of daily sales, if you use the predicted sales for the remaining month, that will help the user understand if they are projecting to meet, exceed, or fail the goal.

In the next blog we explore examples of dashboards that employ the principles we have reviewed so far in this series. Keep reading to see how these all come together to help you design impactful and visually stunning dashboards!

Comments Blog post currently doesn't have any comments.
[Error loading the WebPart 'SocialShare' of type 'MSSocialShare']