Feedback Need your help with skill UI

I have a problem to come up with a good solution for this, and maybe you have an idea.

In my game Ova Magica you have skills, which look like this:



Here is now my explanation and problem with the "stat lvl up percent":


You can level up your stat values by using a skill. This is one of the main ways to level so it is very important.

The progress is shown by the bar on the bottom with the stat icon, for example a clock for speed/agi.
Each time you use the skill the bar is filled a bit. When the bar is full the stat value is raised by 1.

BUT: There is a limit which is the skill strength.
For example if the skill strength is 35 you can only raise your speed to 35 with the skill. Image 3 shows how the bar looks when the limit is reached

My Problem:
This looks positive even if it is negative.
Because when the limit is reached you have to gain stronger skills to be able to level up else you stay weak.

The stars indicate the load time of a skill (like in Grandia 1). Having this maxed is positive because you can use the skill faster. So i am happy how the stars look maxed out.

How can i show better that the limit of raising your stat value is reached so it doesn't look so positive on the bottom bar?

 

The really obvious solution (if I'm understanding correctly) is to lerp the color from green to red. Is that bar something you want to keep at 0? Or does it not matter as long as it's not at max?

 

The bar is required when it is not maxed so you can see the current progress for gaining the next stat level up.
You mean to make it red instead of yellow? I think it looks a bit to agressive maybe because the bar takes so much space, do not know. I will try and see if i like it!

 

Wait, I think I misunderstood. I thought the bar was denoting some value you always kept at 0. It sounds like you're saying it's kind of a regular leveling bar, except that you can't level up until you've performed an activity, and you want to denote that on the bar somewhere. That correct?

One thing I'm not understanding is the symbol at the end of the line. What is a clock supposed to represent? Can the player sit there and wait and the bar will fill without them doing anything? If you changed that image when the player hits "max" to be something that clearly indicates a limit (like a speedometer, as an example, or some other base image and the disable symbol), they might see that they're not gaining points.

 

The icon is the symbol for a stat value. For example the clock for the speed/agi.
There are stat values like, hp, mp. atk, def, agi.

Every time you use the skill the lower bar fills a bit (like in Skyrim maybe). When its full the stat value is raised by 1. So for example your agi is 8, then you use the skill around 5 times and the bar is filled, then your agi is raised and the bar resets again.



To "force" the player to gain stronger skill there is a limit how high you can level up a stat value which is represented by the skill attack power. If the power is 35 you can raise you stat values to max 35 with this skill. Then the max on the lower bar is shown.

Now the problem i have that it looks now positive because it is maxed and maybe some players will think this is good. But actually they should think, "oh i need to geta stronger skill".

So you are on the right direction to indicate somehow that the bar is not filling/ your not gaining points.

 

You could modify the icon to indicate something increasing (like putting a plus sign at the top-right), and then remove that and change the color/replace it with something else when it's maxed.

You could put some kind of fraction on there, so they can clearly see that their numerator value doesn't increase with actions after they've maxed out. You might have a prompt if they take some number of actions with a maxed out bar, pointing out that it's maxed out and what they need to do to change that.

 

The word "Max" sounds positive, how about "Level Cap Reached" "Limit Reached", "Limited", "Blocked", you wouldneed to move the longer text to the centre and maybe even make it red or some other color to clarify its negative impact:

​

(Understand that it wouldn't apply if you have fully maxed, as per the top textbar, but you get the idea)​

 

Wow, that's actually a great idea!!! i think i will use that! Thank you so much!

 

@JohnnyA
Thank you again!
https://twitter.com/ClaudiaTheDev/status/1284570180367142915?s=19

 

No problem, looking awesome