I have the following way of representing a long-running operation, it is detailed in the sense that every sub-operation progress is shown:

enter image description here

(it's currently shown in a text mode application but final form will be in a desktop application, i.e. if implemented in graphical mode it would be just a little more eye candy but would still take as much screen space as in this text mode representation)


While this is a very detailed view of the current progress, it's not really compact. Generally, the representation of some progress is supposed to be compact, like this:

enter image description here

But in my case it takes a non neglible portion of the screen.

This is for a video game where loading times are pretty long and I would like to give a few information about what is being loaded, e.g. graphics, sounds, etc


I have been thinking about a better way and had the following idea, use a circular progress bar like the following:

enter image description here

It's definitely more compact but there are few issues with this approach:

  • I can't display tasks that are on the same hierarchy level
  • I'll have to sacrifice deeply nested operations, though it's acceptable for me

Is this the right approach or is there an even better approach ?

  • what is the larger ux context here? what is the domain, and what are the users trying to accomplish? What problem is your product trying to solve?
    – Mike M
    Aug 11, 2019 at 17:46
  • I have added many details and some more screens, I hope that's better now!
    – aybe
    Aug 11, 2019 at 18:06

4 Answers 4


If users really want (and need) the loading details of child elements, show them when they ask for it.

If users aren't getting value out of more data in the majority of use cases, why not give them details on demand.

enter image description here

If there's no debugging needed to be done (which would be the case if a child component fails), let them click for more if they ask for it.

Here you can quickly distinguish between installed (completed) components, and those still loading:

enter image description here

  • simpler is better !
    – aybe
    Aug 13, 2019 at 3:14

Can hierarchies be grouped graphically?

It's necessary to show always the hierarchy tasks or can be hidden when they are complete?

enter image description here

  • 1
    Interesting, we definitely gain some space, going to dig into this approach !
    – aybe
    Aug 11, 2019 at 19:59
  • How does this work when there are many child elements that you need to display?
    – Michael Lai
    Aug 13, 2019 at 2:06
  • well i don't know, I should craft some UI code first!
    – aybe
    Aug 13, 2019 at 3:15
  • 1
    It's certainly attractive, and looks functional.
    – Baldrickk
    Aug 20, 2019 at 10:42

Is there a case where users need to know exactly the percentage for what's being loaded? I'd show just one progress bar indicator for the overall loading process and you could have a list of what's currently being loaded.

                Child 1, Child 2 
[======================42%-------------------------] 1 MINUTE LEFT
  • The problem with this approach as I've already tried it is concurrency. The message shown is incredibly confusing, each contributor updates it making it un-intelligible.
    – aybe
    Aug 11, 2019 at 19:56
  • I'd like to understand the context a bit more. What is the user doing with this information? What are the loading details enabling them to do? Aug 11, 2019 at 20:32
  • Beside the fact to know what's happening, not much. It's rather to make it perceptual shorter :-)
    – aybe
    Aug 11, 2019 at 21:34
  • My concern is that if one part of the loading process gets stuck, the user might also not know whether to leave, restart, troubleshoot, as other parts will show as complete, when in fact they cannot really do anything unless all is 100% completed. I feel this creates complex error scenarios so I'd reconsider the approach and figure out ways to provide enough feedback so that they feel less anxious while waiting. Aug 11, 2019 at 21:49
  • You made a point here, that's right!
    – aybe
    Aug 12, 2019 at 8:30

What you described looks like a nested tree structure that you can probably display using a similar strategy to file explorers where you expand and collapse nodes to show or hide more details.

In this case, your nodes are not individual entities/items but progress indicators, which the node representing the overall progress of the individual child elements.

If you don't like the more classic approach, you can probably also use other visualization techniques like a treemap/heatmap chart where individual blocks (which you can encode using colours) represent nodes or categories, and the intensity of the colour (which you can encode using opacity or intensity of the colour or other visual stylign) represents the percentage completion.

  • i think you're definitely right, it's just that it might be too much for a progress bar :)
    – aybe
    Aug 13, 2019 at 3:16

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.