Status Bar with several Stage

Question

I would like to have some opinion on the design, I made to represent the product process QTY. At each stage, i should show to the user, how many of his requested product has been proceed. If there are other proposal, or way to improve current design.

1. First choice i made, is to represent the QTY in percentage to avoid having huge QTY number (such as 100 000 000 PCS)
2. I rather not using a mouse-hover to provide more details. Even i have a design with.
3. Size (Height/Wide) of the status bar is not changeable.

Thanks

Answer 1

I personally prefer the visual progress bar than the percentage number info. This is an example design combining both possibilities in the same space:

Answer 2

I find the percentage very confusing. It is the percentage of the pieces processed in each delivery state. It might not be clear to the user what these percentages actually mean (well, I don't know your user and there actual needs).

A progress bar always shows a percentage of something. Which means, that the users will have this information in a visual way and it would add some value to know the actual pieces as well. In order to show very large numbers of pieces you could use short numbers like 1k for 1000 pieces etc.)

My thinking goes in a way, that all pieces together are 100% of the order. A given number of these pieces is in a certain state. This means, that you would have something like this:

Of the 100 ordered pieces there are 10 ordered, 80 in log.center, 5 shipped, 3 in transport and 2 delivered.

If I look at this this way I would come up with a visual representation with something like this: (Colors are random, it's not about the visual design more about the information you would provide.)

Answer 3

I think the simplest design is the best for presenting complex data, and in your case trying to combine five different stages along with the percentage completion of the stage in one status bar might not be as elegant as showing five different bar charts in a consistent manner.

I understand the need to focus on a particular stage (i.e. Delivered) because that's probably what the customer is most interested in, so you might choose to highlight it in a slightly different way while still maintaining consistency with the other stages.

I simulated two ways to implement this design concept, the top section shows the percentage complete based on the number of items that have been processed at each stage (independent of the overall quantity). This way of showing the information allows you to focus on which stage is processing items quicker, which means that some stages can be 100% complete based on the number of items currently in that stage.

The bottom section is a representation of a 'funnel', in which the percentage processed is based on the overall quantity, so that the process is complete only when all of the bars reach 100%

And then based on the bottom concept, which I found a little bit more interesting to play with, I used uniform blocks for each stage and added a colour based weighting to represent the values. I simulated the result and it actually looks like a natural progress bar but with an unevenly distributed gradient.

I hope this gives you an idea of what the status bar can look like when filled with actual data, and how the design strategy and focus can influence what the best way to visualize the information might be.