Creature recruit window, add a real "CHANGE" button

[LeHerosInconnu]

In fheroes2, it is possible to choose between the base creature and the upgraded creature in the creature recruit window.
This is a good improvement to the original game.
However the way it's done with the text over the creature sprite is not optimal.

In fheroes2:

For my "Project Ironfist" mod project, I made some "CHANGE" buttons to change the creature to buy for the creature recruit window so that it looks better visually and more understandable for the user.
I think the ability to click on the creature sprite to change creature should also be possible by the user, but the text over the creature sprite must be removed.

[Branikolog]

Well... As for me i don't like both implementations... Current one covers the gorgeous sprites of HoMM2 creatures...

"CHANGE" button to change the creature to buy for the creature recruit window so that it looks better visually and more understandable for the user

This looks much better, but i still don't like having such big button in that place, for an option players won't use often...

My proposal here is to implement small arrows < _ > on both sides of creature.

[LeHerosInconnu]

@Branikolog.

Well... As for me i don't like both implementations... Current one covers the gorgeous sprites of HoMM2 creatures...

"CHANGE" button to change the creature to buy for the creature recruit window so that it looks better visually and more understandable for the user

This looks much better, but i still don't like having such big button in that place, for an option players won't use often...

My proposal here is to implement small arrows < _ > on both sides of creature.

I had also thought of "arrow" buttons for the previous fheroes2 project, but this was not implemented that way in fheroes2.

I had also tried with buttons close to the creature's sprite, but I thought it was less aesthetic because the buttons were a bit too close to the sprite, and smaller buttons would not be practical to use, or the window would have to be enlarged.

Finally, after the current implementation in fheroes2, I thought that a more accessible and indicative button would be just as good.
Visually the right edge of the "CHANGE" button is aligned with the right edge of the "MIN/MAX" button and the left edge with the left edge of the "CANCEL" button.
The "CHANGE" button and the other action buttons are grouped in the same area ("MIN/MAX" button, box and "arrow" button for the number of creatures), it's better for ergonomics.

[Branikolog]

Well... "CHANGE" button is too big for that place and is too close to "MAX" button... Looks not good...
What if we take a smaller buttons and place them near sprite?

[LeHerosInconnu]

@Branikolog.

Well... "CHANGE" button is too big for that place and is too close to "MAX" button... Looks not good...
What if we take a smaller buttons and place them near sprite?

I also tried it with these buttons.
Try with the dragon sprite, the only solution is to enlarge the window in width or height depending on the position of these buttons.
I even tried with a "CHANGE" button written vertically (only one button is needed to change the creature finally). :)
Again the window needs to be enlarged.
Believe me, I've tried many combinations.

The width of the button depends on the text to be written inside the button. :)
Without changing the size of the window, the horizontal "CHANGE" button remains the best compromise in my eyes both aesthetically and ergonomically.

[Branikolog]

Try with the dragon sprite

Without changing the size of the window, the horizontal "CHANGE" button remains the best compromise in my eyes both aesthetically and ergonomically.

Well, for me it is still not the best implementation i can imagine for this game....

[LeHerosInconnu]

@Branikolog.

Try with the dragon sprite

As you can see, it doesn't work.
The arrow buttons are too close to the sprite.
The solution for this option would be to widen the window.

Without changing the size of the window, the horizontal "CHANGE" button remains the best compromise in my eyes both aesthetically and ergonomically.

Well, for me it is still not the best implementation i can imagine for this game....

My initial goal at the time was to find a way to do this without changing the size of the window.
Now it's always possible to do it better by changing the window size.

[Branikolog]

As you can see, it doesn't work.

For me it doesn't look too close to the sprite.
We can also move this buttons further:

And also we can shift a bit creature sprite to right... But even current screenshot is ok for me.
I don't want to change window's size too...

[LeHerosInconnu]

@Branikolog.

As you can see, it doesn't work.

For me it doesn't look too close to the sprite.
We can also move this buttons further:

And also we can shift a bit creature sprite to right... But even current screenshot is ok for me.
I don't want to change window's size too...

I don't know, the elements seem to be all compressed in the window space.
Moving the buttons away from the sprite they will end up too close to the inside edge of the window and the yellow frame of the creature's cost.
This should be tested with all elements in their correct positions.

[Branikolog]

We can shift a creature sprite a bit to right, so it would be placed in the middle between left edge and "cost per troop" area. And place those arrows in a proper places. Even above placement for that arrows doesn't seem for me too close to the edge.... Maybe, it is that because of neutral color (comparing to the whole window). Or, probably, because of the name of creature is also placed quite close to the edge...
On a screenshot above i don't feel all elements are really compressed...
I love that "CHANGE" button, but unfortunately it seems too big for such a small window, and I start feeling the "compression" there. :)
In a case we decide to enlarge this window, I'm sure, it would fit perfectly.
Anyway, I simply make a suggestions, nothing more. We even can try to draw a special arrows for this case. ;)

[LeHerosInconnu]

@Branikolog.

We can shift a creature sprite a bit to right, so it would be placed in the middle between left edge and "cost per troop" area. And place those arrows in a proper places. Even above placement for that arrows doesn't seem for me too close to the edge.... Maybe, it is that because of neutral color (comparing to the whole window). Or, probably, because of the name of creature is also placed quite close to the edge...
On a screenshot above i don't feel all elements are really compressed...
I love that "CHANGE" button, but unfortunately it seems too big for such a small window, and I start feeling the "compression" there. :)
In a case we decide to enlarge this window, I'm sure, it would fit perfectly.
Anyway, I simply make a suggestions, nothing more. We even can try to draw a special arrows for this case. ;)

Let's give ourselves some time to think about the subject. :)

[Branikolog]

Agreed! We sould be patient with some ideas. Let them grow into the best objectifications with time. )

[LeHerosInconnu]

What do you think of this?

The user can click on the arrow button (only one button is required) to the right of the creature's sprite area or directly on the creature's sprite area to cycle between the base version of the creature and the enhanced version(s) of the creature.
The frame can also eventually change color (such as when a troop is selected in the meeting screen) to indicate to the user that the zone is clickable.

The sprite of the creature and the text "Available: 0" are centered accordingly in the frame.

I prefer the version with only the corners of the frame displayed that does not "enclose" the creature. :)

[Branikolog]

Cannot tell you, that I don't like an idea of placing a sprite into a frame... (but actually, I think the type you've proposed doesn't suit the overall interface design) :)
But the frame doesn't solve the problem we're discussing here... Unless, we can draw it in a special way, player would definitely note, that it's clickable and it would suit overall game design. But I think for such task we need an artist for help...
Also a small button in a corner is not obvious and accurate solution... (As we even cannot declare its functions) In that case, your previous proposal with "CHANGE" button looks better.
I expect change button appear either in the bottom area of creature sprite, or on the both sides of the sprite, or even over/under the sprite itself. But not in the corners.

[LeHerosInconnu]

Hello @Branikolog,

I think this one could be the right one. :)

[Branikolog]

Hi, @LeHerosInconnu !
I think we need to make a separate discussion for this issue. ) I think we'd spend lots of time choosing the best solution. :)
On subject:
Well, this location for "Change" button is better from the rest, but in this case "Available 0" is definitely not on a proper place.
Also, I wish to have not such "large" solution of this problem. ) something less noticeable. I mean, this button changes the perception of this window, because it's rather huge.

[LeHerosInconnu]

@Branikolog.

Okay, I opened a discussion here: #2755.