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):

Current System


@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):

enter image description here

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

enter image description here


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?

  • I'd simply mark the out of date data with an asterisk.
    – Peter
    Apr 9, 2017 at 19:09
  • @Peter Funny you mention that, I was already using the asterisk for something unrelated to state, after adding these changes it all seemed like to much to give to a user all at once. Apr 10, 2017 at 13:46
  • Can the value in the Planning and Reporting data be of the same value but not in sync?
    – Michael Lai
    Apr 11, 2017 at 10:18
  • That's another excellent question, the definition of out of sync is that the values are different between the two systems. Apr 11, 2017 at 13:41

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

  • Excellent, yes I think your answer brings up some good points, I definitely needed to clarify the states. So, I've modified my question to provide a more comprehensive explanation. What I'm currently struggling with is not so much the definitions of each type of data, but more how to communicate properties of said data in a more intuitive way. Icons seem too bulky, but maybe I'm wrong, I was hoping that my question would prompt some thinking. Colors, icons, font-style, indent, size, font-type, none of these seem to relay this information in a truly intuitive manner... Apr 10, 2017 at 14:19
  • @DavidRogers Since you don't need to highlight the In-sync values, I think you can probably use a border outline and a different background colour to indicate the out-of-sync and maybe-out-of-sync states respectively. Icons, fonts and indentation are not obvious enough. It is hard to say what would make the visual representation intuitive - that depends on the users.
    – Michael Lai
    Apr 11, 2017 at 10:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.