Tracking Shipment Progress

Question

I am currently in the process of designing an application where customers can log on and see a list of all of their existing orders and view where the current transit progress is. Just like FedEx or UPS except the orders can have as many as 12 stops.

The biggest problem I am having is the usability of displaying the current progress as a visual timeline. The functionality of transit progress is simple, if the the driver got to the location and they were late then the circle representing the stop turns red and if the driver was on time or early then the circle turns green. If the driver has not arrived to the stop yet then the line and the circle remain as a light grey.

My concern is whether or not this is clear enough to the user.

Answer 1

Possible redesign below:

Notes:

• Color should not be used as the only indicator to accommodate those with color blindness (Red-Green being very common). I've used different icons as well as different colors for indication.

• Red has a "finality" to it and might make the user think further action is required to solve the problem. I've made the icon yellow instead of red to indicate "late".

• The lines alone did not provide much of a "flow" from left to right. I've used arrows instead of lines to better emphasize the left to right flow.

• I did not understand the words you used under each of your cities. Some had "pickup" and some had "delivery" and I was not sure what that meant. I made the words in this design indicate the progress at each city.

• To better indicate the current step in the progression, I've made the circle container, icon, and font larger.

• I placed the status of "6 Hour Delay" directly under the current step. I'm not sure if this is technically possible with your system, but it provides much more detail than "late".

Answer 2

Like a train on a journey with a few stopovers. It is late at some point but maybe will catch up on time during his journey. And you'd like to show at which station the train was late during the entire journey.

This instantly reminded me of how the mobile app of the railway service here in Germany indicates if a train is on time or late.

screenshot http://i.computer-bild.de/imgs/4/8/7/8/0/6/0/Der-DB-Navigator-zeigt-die-aktuelle-Zugposition-640x480-52607de1dce62925.jpg

I have two suggestions on this when comparing your case to the app:

1. A classic wizard is not enough for this scenario. Because basically what you need are two conditions:

   • The driver is between two nodes: The one he just left and the one he is heading for. First either marked red or green, second marked gray.
   • The driver is at a node. Only then the color changes from grey to red/green (and stays in that state for the entire journey)
2. And since you want to display up to twelve stops I would recommend ordering them vertically (as does the app in my example). Now you have more space next to your nodes to display detailed information on scheduled arrival/departure times, comments, etc.

Unfortunately I can't draw this up for you since I'm new to ux.se I hope you got my point though ;-)

Answer 3

If this is a delivery over days I see no reason to show if it was late or not unless it un turn means the delivery will be late in the end.

If the goal is to simply show them the delivery made it to a certain checkpoint then the red is clutter.

UPS, FedEd, etc. can easily have late arrivals in route yet they have processes in place to make up for the end delivery in the second, third, etc. legs of the delivery. I would only want to know if it arrived, when it arrived and when it is supposed to be in my hands. The rest is extra information that delivers negativity to what can easily be a good end result.

If it is important to show if something is late or not during the process you might just have the free checkmarks say "Delivered On time!" and other say "Delivered Late". Make them have to read less in between the lines, make it obvious as to what the colors mean.

Answer 4

The app should be simple for the normal cases that can be reduces to a checkmark or a color.
But there are a number of opportunities for this to fail, like that there was nobody to pick up the package, or the guy refused to receive the package, or the bridge was closed, or the river flooded and the order of the tasks was altered (some cancelled), or the truck failed and another one came to the rescue.
The UI should accommodate all these extra cases.
Thus, each task should have a pending / done / late / failed / status indicator, and an explanation of why.