Compact way to represent a progress with many sub-operations?

Question

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

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

Problem:

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:

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

Question:

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

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 ?

Answer 1

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.

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:

Answer 2

Can hierarchies be grouped graphically?

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

Answer 3

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.

                     Loading:
                Child 1, Child 2 
[======================42%-------------------------] 1 MINUTE LEFT

Answer 4

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.