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 '19 at 17:46
  • I have added many details and some more screens, I hope that's better now! – aybe Aug 11 '19 at 18:06

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 '19 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 '19 at 19:59
  • How does this work when there are many child elements that you need to display? – Michael Lai Aug 13 '19 at 2:06
  • well i don't know, I should craft some UI code first! – aybe Aug 13 '19 at 3:15
  • 1
    It's certainly attractive, and looks functional. – Baldrickk Aug 20 '19 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 '19 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? – ghislaineguerin Aug 11 '19 at 20:32
  • Beside the fact to know what's happening, not much. It's rather to make it perceptual shorter :-) – aybe Aug 11 '19 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. – ghislaineguerin Aug 11 '19 at 21:49
  • You made a point here, that's right! – aybe Aug 12 '19 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 '19 at 3:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.