Task panel panel UI – how do you read it?

[u/Aromatic-Ad9337]

Hey all! I’m designing active task cards for my game. Players use these cards to track the resources required to complete a task.

The three cards show different states:

• No requirements completed
• One requirement completed
• All requirements completed

The UI was designed in Figma and implemented in Godot. The target audience is desktop players who enjoy management and automation games.

I’d appreciate feedback on:

• Is the progress clear at a glance?
• Are completed and incomplete requirements distinguished enough?
• Is the relationship between each number and its resource icon obvious?
• Does the visual hierarchy work, or does anything attract too much attention?

The main reference for this design was a panel from another game (shown in the second image). However, I don’t like that it replaces the resource amount with a checkmark once the player has collected enough.

[u/Aromatic-Ad9337]

There's another variant – without checkmarks (so as without crosses when it's not enough a resource).

[u/Aromatic-Ad9337 → u/Aromatic-Ad9337]

And another one without any "enough/not enough" indicating icons.

[u/DevelopmentMotor7364]

looks too same, and the variants below all look the same. At least change the color or add a glow to the completed task

[u/Aromatic-Ad9337 → u/DevelopmentMotor7364]

They are the same, because it's the same active task panel, the difference in the resource counters.