The Best Way to Visualize “Out of Sync” Data in a Table

Question

Current Application

I have an application whose most basic elements are composed of two parts:

1. Planning: Several screens which users can manipulate several sets of numbers. These screens typically can display between 25-200 rows.

2. Reporting: Planning data is combined with other sources of data(secondary systems) and the resulting data is combined and compiled to produce reporting data.

The process of converting data from planning to reporting can take between 10-15 minutes. So the data that you see in the planning section can sometimes be a little different than the data that you see in the reporting section.

Currently my application does not visualize this difference, it looks something like this(Status column is not shown in the actual page):

States(Update)

@MichaelLai points out that I need to clarify my states, this was something I didn't provide a clear explanation of in my original question. There are basically three states, with the default one being the "In-Sync" state:

1. In-Sync, the data in the planning page matches the one in the reporting page. Typically represents > 80% of the data.

2. Out-of-Sync, the data in the planning page does not match what is in reporting(I have access to both numbers). Typically represents < 5% of the data, but in certain scenario's can be > 50% of the data.

3. Maybe Out-of-Sync, data originates from a secondary system(Read-only in planning) and the importation of that data occurs when reporting data is complied. Typically represents < 15% of the data.

Proposed Changes

This can cause a great deal of confusion to a user who has not been properly trained on the product, and even those who do understand it, don't have a good way to visualize these differences. So, I'm currently proposing a change to the product to improve its usability and solve these issues. I would like to represent this delay in the planning pages, as I have control over the format of these pages and this is where all changes will originate from. My proposed change is composed of two parts:

1. Display data from secondary systems in the planning pages(read only, maybe with a link to those systems)

2. Indicate when present, the differences between the two data sources.

One way to do this is to use italic's and color to indicate the differences(Status column is not shown in the actual page):

I can also shown the two different numbers in a tool-tip:

Question

Here's my question, is this the best way to visualize this data? It seems overly complicated... I would really like a system that wouldn't require so much training to understand.

How do you visualize a delay?

Answer 1

It is difficult to comment on the actual visual design aspects unless there are some clear requirements or constraints around the actual user interface itself. However, generally speaking, you can look at some decision points based on your own knowledge of the system and the users.

Definition of the states

It looks like there are at least three states that you want to represent to the users, and these only apply to the Planning dataset. So you need to consider whether it makes sense to define each of these states. For example, do you need to represent Not out of sync if this is the normal/default/most common state? Also, is your set of states likely to change or remain the same?

If the states are only used for the Planning dataset and not for the Reporting dataset, it makes the user interpret the data only from one perspective and not the other. In the Planning dataset they have to consider whether the data is accurate or not, but in the Reporting dataset the information doesn't change. That means in a way Planning and Reporting represent some state of the data as well, so to make things less confusing you could just have one dataset and make the transition from Planning to Reporting the 'final' state? This is a hunch but perhaps where the confusion lies for the users trying to understand the information.

Usage of the states

If you consider the normal occurrence and likelihood of each of the states, this gives you an idea of whether you should represent the Not out of sync/Normal state, as this will drown out the other states that you probably want the user to pay attention to more. Conversely, if the dataset is constantly been updated in the Planning phase, you may want to actually just highilght what is Not out of sync because it could be the reliable data the user should look at. Also consider the number of rows in a typical table and how easy it will be to spot the state information in different use scenarios. So you can see how usage of the states impact on your design rationale.

Degree of difference between the states

This is where you actually decide on how to implement the actual representation of the states, once you have worked out the WHAT and HOW you want to structure and design the different states. What you want to do is determine how each of the states different from each other, so you can translate it to a visual representation that reflects these differences. If there is no clearly defined differences, or it can be variable, make sure you don't try to associate some meaning to the visual indicators (e.g. use the same colour in different shades, or use symbols with elements that can be incremented like the battery or wi-fi signal strength icons).

I think once you have taken all these things into consideration, there will be a logical path to working out the best way to visualize the data.