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.


enter image description here

  • What do your users actually need? Jul 17, 2019 at 11:21
  • To see where their products are. In which stage and how many.
    – LeGaulois
    Jul 17, 2019 at 11:27
  • Would you customers understand the acronyms used for each stage? Jul 17, 2019 at 11:35
  • Yes, but if not, I plan to add a small "?" somewhere on the page to make sure, they got the information properly
    – LeGaulois
    Jul 17, 2019 at 11:40

3 Answers 3


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

enter image description here


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

enter image description here


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%

enter image description here

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.

enter image description here

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.

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.