I have a web-UI where certain things should happen at scheduled times. Think like a limo service, where the driver should be at the pickup location 15 minutes before the scheduled pickup time, then needs to be somewhere else by another time.

So my points might be:

| Event | Scheduled | Occurred |
| Stop1 |     16:48 |    16:44 |
| Stop2 |     17:02 |    17:03 |
| Stop3 |     17:32 |    17:35 |
| Stop4 |     17:45 |          |

I don't have enough width in my UI to show both scheduled and occurred (though I can slow more info, like "Was 3 minutes late" when hovering over Stop3). Normally I have just the room for an icon (like a font-awesome clock) and a timestamp (HH:ii:ss).

I'm already using the clock icon if an event has happened, colored to: <10 min late = green, <30 min late = yellow, >=30 min late = red. If the scheduled event never happened (in the case of Stop4, above) it simply says "Never" instead of "HH:ii:ss". Ideally I'd prefer show the scheduled time here... but how do I make it... not confusing?

  • 1
    Be careful using color as the only indicator. Some folks are colorblind, and the most common colorblindness is red/green. Commented Mar 7, 2017 at 14:25

3 Answers 3


The Dutch Railways does this pretty effectively by showing the scheduled date, and any changes as +(number). They don't do minus because it would mess with the schedule further down the road. If this is not a factor for you, you can effectively communicate change using + and -. This provides a point of reference for the original time and a quick way to see if performance was faster or slower.



Just show Scheduled time like you want to and include the Occurred time as an offset from the actual time, like this:

| Event | Time      |
| Stop1 | 16:48 -04 |
| Stop2 | 17:02 +01 |
| Stop3 | 17:32 +03 |
| Stop4 | 17:45     |

Then you'd be showing all of the information in both columns, and it's easy for the driver to determine the "Occurred" time by just adding or subtracting the number of minutes. You could even provide that bit in the tooltip you mentioned. This would also give the driver a better sense of his performance.

If you need to get rid of the clock to make the space it would be fine because now all of the information is present. You can even color code the actual text if you still feel like you need to categorize the offsets that way.


You could separate them out into two separate lists, an "Occured" and "Due", and they transition from one to the other when occurred. Only problem would be displaying the missed times under the due section - maybe use something like a strikethrough?

Some thoughts (arrow boxes = hover over/click popup):

enter image description here

I'm not sure you need the "green" clock for icon then for a successful event - it just makes things busier - hence why I removed it in version 2.

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.