Battle UI Improvements (Part IV - Now With Fatigue)

A discussion area for general design issues that staff would like detailed feedback on.

Moderator: Staff

User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Battle UI Improvements (Part IV - Now With Fatigue)

Postby Roots » Sun Aug 16, 2015 12:36 am

Part III of our older battle layout discussions can be found here: viewtopic.php?f=21&t=5042

With the new battle fatigue feature now implemented, I think it's time to take a fresh look at our battle UI And see how we can improve upon it. The battle UI is quite complicated and there's a lot to cover, so to start out with let's just talk about the main battle view when no command window, dialogue window, or anything else is on the screen. Here's what this looks like today, with the HP/SP fatigue system and indicators in the UI.

Image

Looking at this, these are the problems I see:
  • HP/SP numeric text is hard to read (simple to improve: needs a text shadow). Furthermore, the presence of this text covers up the HP and SP bars that now are a little more complex than a simple single colored bar. It can make it difficult to find what region of the bar is fatigue and where the active max HP/SP is (the small yellow bar)
  • When there are two enemies of the same type in a battle, there's no way to differentiate between the two of them. You can't tell which icon on the stamina bar (on the right of the screen) corresponds to which spider.
  • Although not seen here, when an actor receives damage the damage numbers are not bold enough to make it easy to see. Furthermore, the damage appears on the side of the character and moves around, which also make it harder to read.

I took a stab at this and here's the result, with markup annotations

Image

I'm going to go through these changes/proposal from the markings here clockwise, starting from 12:00.
  • Move the stamina bar to the top of the screen. This was Djinn's suggestion. I'll talk about that more later.
  • Add an "A", "B", etc. to distinguish between enemies of the same type. On the enemy's action icon, I put an "A" to show the enemy there (the other spider is hidden behind the snake icon and would have a "B" icon)
  • Added the distinguishing letter to the enemy target as "Spider A". Also some slight re-formatting of the text for the attack point target name (Head)
  • Proposal: make an icon image of an arrow that sits between the action name and the target. Just to make it a little more clear that "X" is being done to "Y"
  • Just a remark that these "arrow" icons are temporary/place holder images. I made these to get this feature working a long time ago, and we still need to replace it with something nicer
  • Proposal: move the HP/SP number text to the right of the HP/SP bar instead of sitting on top of it and obstructing the view
  • The greyed out "Swap" icon that is always in the lower left corner was for a feature we had planned long ago that would allow you to swap out party members mid-battle. I'm not worried about this feature at all right now because we won't have more than 4 characters for a long time still, so I just want to cut it out entirely. If we decide to have a swap party member feature later in the game, we'll just revisit the design and figure out what needs to change.
  • Proposal: The damage numbers (12 on Claudius, 7 on the spider) might be better and more readable if they are above the head of the actor in question. This in addition to using a bolder/more distinguished font would make damage easier to track.

Now regarding moving the stamina bar to the top of the screen and making it horizontal instead of vertical. We've considered this in past design discussions. Here's Djinn's recent mockup that contains this suggestion.

Image

The thing about the top of the battle background image is that it is supposed to be the most visually interesting aspect of the background. We also have support for this part of the background to be animated (imagine a castle under attack and seeing other NPCs and enemies fighting it out in the background). So I was really hesitant about putting any permanent UI elements over this part of the screen for that reason. However, there are benefits to doing it here as well. I think it would be easier to glance at and quickly assess the state of the situation. We would also be able to have a much longer stamina bar here, and icons wouldn't overlap so often or so frequently. I'm honestly torn about whether to keep the stamina bar where it is or move it to the top of the screen and make it horizontal. I could go either way really, so I want to hear more opinions about this. :shrug:


The most difficult part about this current mockup is the HP/SP numeric text. We don't have a lot of room to work with here. And I also really like the look of our HP/SP bars and don't want to see those go away. While we might be able to squeeze in the HP/SP text now with these low-digit numbers, we wouldn't be able to fit late game HP/SP values which will have more digits. I'm at a loss about what to do here. :( Back in the day, we decided against not having a bar graphic and just having text like this: "HP: 1257/5428", because it's a lot more difficult to look at those numbers and figure out "Okay, I'm down to about 25% of my max health". Hence the bars, which are much easier for a user to glance and and quickly absorb the information. But the bars by itself are difficult as well, because then you don't have a good idea of "Okay, that enemy dealt 50 damage to me last round. How much of my HP did that remove?". This is why we have both the text and the bar graphics.

How can we make these both fit in this limited space in an aesthetically pleasing way? We also don't want to "hide" this information from the player ever, because they need it available 100% of the time to make informed decisions about their next actions.

-----

End of rambling. I look forward to hearing others ideas/suggestions, and maybe seeing mockups from other people as well. :angel:
Image
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Roots » Sun Aug 16, 2015 7:04 am

I know this is jumping the gun, but I couldn't help myself. :help: What I'm really eager and excited to improve in the battle UI is the command window. I put together a mockup tonight with several proposed changes. Rather than look at one window view at a time, I think it will be easier and more efficient to look at the whole workflow. On the left below (OLD) is the current way the command window works. You select an action type, then an action, then a target, then an attack point (if the action targets an attack point). On the right is an initial stab at an improved interface (NEW). You select an action type, then an action, then a target/attack point (in the same window).

Image

First lets talk about the old design. Particularly, what's bad about it.
  • It lacks a lot of information about skills and targets. Especially about the different targets available
  • In the select target and select attack point windows, there's a lot of empty space that isn't being used
  • Getting a command entered takes a lot of presses of the confirm key (four at max). There's also more navigation involved since skills are ordered into types
  • If a character has one of each skill type, the select action window will be largely empty, even though all available skills could be fit in a single window

Now how the new design and workflow improves upon these problems. Let's cover one window at a time.
Select Action Type
Attack/Defense/Support have all been combined into a single category, "Skills". Two new categories have been added here as well: "Recent" when is a list of the character's most recent actions and targets (so that the player can easily re-enter a past command). "Recover" is basically telling the character to do nothing this turn, which is used to regenerate additional SP. Recover would most often be used when the character has expended all their SP. (This is a feature that we haven't talked about or discussed yet, so I know this is coming out of nowhere. We can easily remove this action type or replace it with something else.

Notice the action type text doesn't take up a lot of room in this window. So to the right of the text, there's a dividing line and a "preview" of the currently selected action type (in the example, the cursor is over "Skills", so it shows the first four skills for the character and some of their properties). The contents here would vary depending on the action type selected (Items would show items and inventory counts, etc). To get to the next menu, the user either presses the confirm key or the right arrow key.

Select Action
The contents of this window vary depending on what action type was selected. Here, we see the Skills action type. It shows all the skills the player has, and there's icons to the left of the skill name to make it readily apparent whether the skill is of type attack, defend, or support. Cursor arrows on the top and bottom of the screen indicate if there are more skills available than can fit in the window. The target type follows on the right with an icon to denote if the action affects an ally, enemy party, etc. Then we have the SP that the skill requires, and in parentheses immediately next to it is the amount of SP fatigue that using this skill would cause. Finally, the "Prep" title indicates the warm-up time for the skill in number of seconds. Once a skill is selected with CONFIRM, the user goes to the target selection window

Select Target
Here we have the available target names on the right (enemies in this case since an attack skill was selected). (The selected enemy will be highlighted, and the others greyed out...I didn't get around to doing this for the mockup). For the highlighted enemy, we display the attack points if the skill targets an attack point. To the right of that we show the expected amount of damage it will cause on average, and the % chance for the attack to be successful. Finally, under effects we will have room for any icons representing status/elemental effects that the target might be affected by.

----------

So as you can see, this first draft of a re-designed command menu really mitigates the problems we have with our current design. There are still some concerns to address, however. Mine include the following:

1) I'm not sure if we should have icons for the action type text box, or if it's fine with just text. I kind of like making things more visually interesting with having these icons then just spitting a bunch of text everywhere.

2) The "Recent" action type will be tricky, because that will mix both skills and items (presumably). I'm also unsure about if we want to be able to use a past action in the recent menu on a new target in the workflow. For example, say last turn we executed the Sword Strike skill on Spider A. Now the user wants to execute that skill on the Scorpion enemy. Can they go to the Recent action type, select the Sword Strike, and change the target of this action?

3) If an action affects an entire party, I'm not sure if we should skip the Select Target window, or display some information in there (like expected damages on each target if it's an "attack party" skill)

4) I'm not sure if the "preview" in the action type menu is helpful or just confusing. :huh:

5) Conveying the amount of SP fatigue isn't intuitive. If I was a new player, I'd probably look at (-2) and think that meant that I could only use the skill two more times total with my current amount of SP. But putting "Fatigue" title text on this window just wouldn't fit either. So I don't know if there's a way to make this better.

6) In the skill action window, one thing we don't show is the relative damage increase or healing increase (depending on the skill). But even if we had room to show this information, with a mix of attack, defense, and healing/support skills, this could be very confusing information to show. Maybe just having the SP requirement there is enough to compare relative strengths of skills? :shrug:

7) In the select target window, it would be nice to show the relative damage/hit % of the enemies together, instead of showing this information relative to the attack points for the currently selected enemy. If a skill doesn't target attack points, maybe we could then show the damages of all enemies in the menu instead of attack points? The downside is this can be pretty confusing to the user. We'd need a way to figure out how to make it apparent if the damage numbers are describing the enemies or the attack points.

8) We don't have any place to show known enemy resistances, weaknesses, immunities, etc. There is the use of the menu key to change the contents of the window to provide more detailed information about a selected action type, skill, item, or enemy though. (This is already a feature active in the old design, although it is not obvious at all that the user can do this). We can definitely continue to make use of the menu key to provide the player with more detailed information. We just need to make sure that the player actually knows about this ability.

9) One thing I want to do (this is more of a design feature than a UI question) is that when a player discovers a property of an enemy through battle (say, that the Scorpion enemy is weak to water), I want the battle UI to inform the player of this known vulnerability. That way the player doesn't have to remember in their head what enemies are weak to or strong to what; the game remembers that information for them. And it also encourages players to use different types of skills in battle to probe enemies for weaknesses. It's not readily apparent how such a feature could be realized with this design.



Phew, okay that's all I got for now (for real this time). These mockups take a lot of time to create and ponder about, so I hope we can have some fruitful discussions about them. :D
Image
Djinn_in_Tonic
Member
Posts: 67
Joined: Sun Aug 09, 2015 10:36 pm

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Djinn_in_Tonic » Mon Aug 17, 2015 9:09 pm

Roots wrote:HP/SP numeric text is hard to read (simple to improve: needs a text shadow). Furthermore, the presence of this text covers up the HP and SP bars that now are a little more complex than a simple single colored bar. It can make it difficult to find what region of the bar is fatigue and where the active max HP/SP is (the small yellow bar)


Part of this is also because we're using a semi-transparent background for the information panel, which is automatically going to decrease visibility. Would you be opposed to a switch to a solid information panel, as in my suggested UI? It's a large clarity increase, although it does lose a little bit of the background image visibility.

Add an "A", "B", etc. to distinguish between enemies of the same type. On the enemy's action icon, I put an "A" to show the enemy there (the other spider is hidden behind the snake icon and would have a "B" icon)


This sounds good to me.

Proposal: move the HP/SP number text to the right of the HP/SP bar instead of sitting on top of it and obstructing the view


Definitely.

The greyed out "Swap" icon that is always in the lower left corner was for a feature we had planned long ago that would allow you to swap out party members mid-battle. I'm not worried about this feature at all right now because we won't have more than 4 characters for a long time still, so I just want to cut it out entirely. If we decide to have a swap party member feature later in the game, we'll just revisit the design and figure out what needs to change.


Proposal: Replace this with a button allowing us to toggle detailed alternate player statistics (probably with a hotkey that accomplishes the same thing -- the button is there as a constant reminder this information is always available). This might include things like Current hp versus Maximum hp as numbers instead of a bar with just current hit points, and might display status conditions.

I think it would be easier to glance at and quickly assess the state of the situation. We would also be able to have a much longer stamina bar here, and icons wouldn't overlap so often or so frequently. I'm honestly torn about whether to keep the stamina bar where it is or move it to the top of the screen and make it horizontal. I could go either way really, so I want to hear more opinions about this. :shrug:


I think a left-to-right bar is going to be important if we use a bar system with visual marks for when a character is going to act: players are used to seeing timelines that move left-to-right rather than down-to-up, and, as such, I think it's easier to give them something they won't have to relearn. We could, however, incorporate that into a bar on the lower half of the screen if you'd prefer to keep the top area clear.

How can we make these both fit in this limited space in an aesthetically pleasing way? We also don't want to "hide" this information from the player ever, because they need it available 100% of the time to make informed decisions about their next actions.


See my above suggestion about making an in-battle UI toggle: with important information on both sides, players can be expected to check it regularly, even though no single part is available 24/7. Another option would be to remove the SP bar in favor of a numeric treatment, freeing up horizontal space we could use to put in more hit point information -- which is a bit more important, since maximum HP is going to be more considered for healing and protection abilities than maximum SP will be.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Roots » Tue Aug 18, 2015 12:00 am

Djinn_in_Tonic wrote:Part of this is also because we're using a semi-transparent background for the information panel, which is automatically going to decrease visibility. Would you be opposed to a switch to a solid information panel, as in my suggested UI? It's a large clarity increase, although it does lose a little bit of the background image visibility.


Not opposed at all. First though, let's try doubling the amount of darkness drawn over the background. That should be an easier change and has more or less the same effect. We can always add a UI panel later if we like.

Djinn_in_Tonic wrote:Proposal: Replace this with a button allowing us to toggle detailed alternate player statistics (probably with a hotkey that accomplishes the same thing -- the button is there as a constant reminder this information is always available). This might include things like Current hp versus Maximum hp as numbers instead of a bar with just current hit points, and might display status conditions.


Not a bad idea. BTW, if you hold down the swap key (default key: A) then the HP/SP bars disappear and it shows you any active status icons for each character. Another "hidden feature" that we haven't communicated at all the player yet. I'm unclear on what we information we would show on these two different views in your proposal though.

Djinn_in_Tonic wrote:I think a left-to-right bar is going to be important if we use a bar system with visual marks for when a character is going to act: players are used to seeing timelines that move left-to-right rather than down-to-up, and, as such, I think it's easier to give them something they won't have to relearn. We could, however, incorporate that into a bar on the lower half of the screen if you'd prefer to keep the top area clear.


That's funny because one of the core leaders on this team in the past argued just the opposite (left-to-right didn't make sense). I didn't/don't agree with that myself. Fitting the bar into the lower part of the screen would be difficult due to the design requirements we have had in place for our battle backgrounds for a long time already (see: this wiki page). Basically, top 256 pixels are reserved for the background (where sprites can not be placed), the middle 256 pixels are for sprites, and the bottom 128 pixels are for menus. Putting the action bar above the menu in the sprite area would cover the sprites partially and is undesirable. I wish we had the space there, but alas it is not so.

Djinn_in_Tonic wrote:Another option would be to remove the SP bar in favor of a numeric treatment, freeing up horizontal space we could use to put in more hit point information -- which is a bit more important, since maximum HP is going to be more considered for healing and protection abilities than maximum SP will be.


An interesting suggestion. Although I'd still want to be able to know my max SP (and SP fatigue) as a player. Hmm, I didn't think about changing the HP/SP bars since we already have those nice graphics for them. What if we consider bunching the bars together? Maybe we have the HP bar on top and the SP bar right beneath it? That would give us enough room for HP and SP numbers + bars on the same view. I'm thinking something like this: "HP: ## (bars) SP: ##". I can take a look later and get an estimate of how much room we have to work with here, but I think we have 25 pixels in height for each line of character data.
Image
Djinn_in_Tonic
Member
Posts: 67
Joined: Sun Aug 09, 2015 10:36 pm

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Djinn_in_Tonic » Tue Aug 18, 2015 12:08 am

Roots wrote:That's funny because one of the core leaders on this team in the past argued just the opposite (left-to-right didn't make sense).


I'm...this completely confuses me, to be honest. Left-to-Right is how all timelines are written, and how basically the entirety of Western culture processes written or visual information. I have a hard time imagine ANYONE with design training feeling that presentation doesn't make sense. Ah well. :shrug:

Djinn_in_Tonic wrote:An interesting suggestion. Although I'd still want to be able to know my max SP (and SP fatigue) as a player. Hmm, I didn't think about changing the HP/SP bars since we already have those nice graphics for them. What if we consider bunching the bars together? Maybe we have the HP bar on top and the SP bar right beneath it? That would give us enough room for HP and SP numbers + bars on the same view. I'm thinking something like this: "HP: ## (bars) SP: ##". I can take a look later and get an estimate of how much room we have to work with here, but I think we have 25 pixels in height for each line of character data.


What's our current exact height / width in pixels? That'll really help me suggest UI alterations. Alternatively, are your current pictures 100% size? If so I can just save them and work with that. I'm a little confused currently, since I thought we were 1024x768, and 128 + 256 + 256 != 768...there's an extra 128 pixels somewhere, and I'd like to make sure my design is accurate.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Roots » Tue Aug 18, 2015 1:02 am

Well to be fair, he was a programmer and not a designer. I only remembered this because I had been taking a look at our past battle UI discussions and saw that comment among them.

Oh, uhhh oops. I guess the middle area is 348 pixels then (I'm pretty sure that the top and bottom are correct). The first image that I posted in this thread is indeed a full-size 1024x768 accurate screenshot. Please, by all means take a stab and moving things around, but just keep the tops and bottoms of the screen in mind. You can find all the image pieces that build our battle GUI here (most are in the menus directory, but some are scattered around in other places).


Image

Here's an older draft version that helps break down the screen a little more. This cuts the 1024x768 space into squares of 64x64 pixels, which makes it easier to figure how how many rows and columns of space we have to work with (characters, BTW, are approximately 64 pixels long and 128 pixels tall). The highest row a character can "stand" on in this image is the 4th row down, so the top of the character's head would never be higher than the top of the third row.
Image
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Roots » Tue Aug 18, 2015 3:20 am

Image

I decided to do a quick check to see what HP/SP bars would look like if they were combined on one line. We have 25 pixels of vertical space for each line of character information. The HP/SP bars are currently about 12 pixels high, so I was able to squeeze them together with just enough space. Keeping the HP/SP bars at their current size is on the left. As you can see, this is a really tight fit and it's hard to tell which bars correspond to what character like that.

I made an alteration where I removed 2 rows of pixels from each bar (making it 10 pixels high) and fitting that in the same space. The result of that is on the right side. Obviously the bars are not as pronounced here, but the spacing is much nicer and easier to read. What do you think? If we combine the bars like this, we should have more than enough space for HP and SP numbers (which I didn't show on this mockup since I wanted a side-by-side comparison of the two bar styles).

-----

One thing that I noticed when I was putting this together is that we're cutting out about 20 pixels of height that we could otherwise be using in the bottom area. Remember I said that the bottom 128 pixels were reserved for GUI? Well our GUI elements go as high as about 108 pixels, and then the next 20 pixels is empty space where the darkened background border gradually fades away. Maybe we should be taking full advantage of that screen real estate and use those 20 rows of pixels to better space out the character information, improving readability of the UI. :think:


EDIT: I just made changes to the background shadow (the dark area behind the GUI elements on the bottom of the screen). I made it much darker (90% opacity) and the top area that fades away the shadow is now only 8 pixels tall of the 128 pixel space. You can still barely see the battle background behind this. The GUI elements do look much sharper now with this darker background. If you approve of stacking the HP/SP bars on top of one another, I can begin working on adding those in and making better use of our bottom menu area to take advantage of the new background and extra vertical space.
Image
Djinn_in_Tonic
Member
Posts: 67
Joined: Sun Aug 09, 2015 10:36 pm

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Djinn_in_Tonic » Tue Aug 18, 2015 4:45 am

Roots wrote:I decided to do a quick check to see what HP/SP bars would look like if they were combined on one line.

The new size over-under set-up is basically exactly like the mock-up I was working on earlier this evening. I'm all for it.

One thing that I noticed when I was putting this together is that we're cutting out about 20 pixels of height that we could otherwise be using in the bottom area. Remember I said that the bottom 128 pixels were reserved for GUI? Well our GUI elements go as high as about 108 pixels, and then the next 20 pixels is empty space where the darkened background border gradually fades away. Maybe we should be taking full advantage of that screen real estate and use those 20 rows of pixels to better space out the character information, improving readability of the UI. :think:

Definitely. In fact, I'd consider cutting it down to a 1-2 pixel dividing line: I'm not convinced we need that slow fade at all.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Roots » Tue Aug 18, 2015 5:10 am

Awesome. I'm working on this right now. I'll post a shot once I'm done (might not be until tomorrow).
Image
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Roots » Tue Aug 18, 2015 6:39 am

Ok, here's a first stab at this (working code, not a mockup).

Image

  • Spaced out the character lines a little more than they used to be
  • Used the original HP/SP bar sizes since I now had this extra vertical space
  • HP is the number to the right of the bars. And SP is to the right of that.

Biggest question for me is where do the HP/SP text go, and how do we make it clear what each number is? Or do we even need to? Should the bars be on the far right and the HP/SP text on the left? Should the HP text be on the left, the bars in the middle, and the SP text on the right? I have no idea what would be best. :help:
Image
Djinn_in_Tonic
Member
Posts: 67
Joined: Sun Aug 09, 2015 10:36 pm

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Djinn_in_Tonic » Tue Aug 18, 2015 7:11 am

Roots wrote:Biggest question for me is where do the HP/SP text go, and how do we make it clear what each number is? Or do we even need to?


The current set-up seems fine for this release (although I'd like to restructure the whole UI a bit to accommodate a few things, including a description pop-up to detail abilities).

To solve the "which number is which" issue I'd recommend putting either a visual icon (say a green + symbol for health, and a blue water drop or something for SP), or simply coloring the numbers to correspond with the HP/SP colors.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Roots » Tue Aug 18, 2015 2:26 pm

Time again to play our favorite game "Things you didn't know that were already there" -- Part XIV
Did you know that pressing the menu key (default: S) in the battle command window when you are selecting an action (either a skill or an item) will show detailed information about the current selection? :) Although at the moment the only new information it shows is the prep time.

I had the same thoughts regarding green text for HP and blue for SP and using little health/skill icons. I'll try coloring the text first to see how that looks since that is easier to change. I'm also going to try moving the text to the left and the bars to the right, because the position of these elements just looks a bit odd to me in the latest version.
Image
Djinn_in_Tonic
Member
Posts: 67
Joined: Sun Aug 09, 2015 10:36 pm

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Djinn_in_Tonic » Tue Aug 18, 2015 3:42 pm

Roots wrote:Time again to play our favorite game "Things you didn't know that were already there" -- Part XIV
Did you know that pressing the menu key (default: S) in the battle command window when you are selecting an action (either a skill or an item) will show detailed information about the current selection? :) Although at the moment the only new information it shows is the prep time.

Ha! See, this is why I intentionally played the game with only the quick glimpse of the basic controls: I find it helps reveal things that may be issues. This information, for example, should be displayed by default: I don't believe players want to constantly have to press a new button to remind themselves what something does, or check out a new ability. Even if it overlaps the Sprite area a little -- I'd consider that an acceptable sacrifice.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Roots » Tue Aug 18, 2015 4:27 pm

Djinn_in_Tonic wrote:Ha! See, this is why I intentionally played the game with only the quick glimpse of the basic controls: I find it helps reveal things that may be issues. This information, for example, should be displayed by default: I don't believe players want to constantly have to press a new button to remind themselves what something does, or check out a new ability. Even if it overlaps the Sprite area a little -- I'd consider that an acceptable sacrifice.


Agreed, and I'm glad that you played the game that way for your first time because it has really helped bring light to some issues that I was unaware of. I definitely think we need to have button icons in certain areas of the UI (battle and maybe other areas as well) for non-obvious functions. Maybe we can mimic something like SNES controller buttons (because our control scheme is modeled after that controller anyway) and have little button icons for A, B, X, Y, L, and R. although I'd be concerned that the user would see "X" and think that the X key did something, and not realize that the X button means the menu command (S key by default). Maybe we could use symbols instead? :shrug:

Image
Image

Here's the second version of the status window changes.
  • Character name is drawn in yellow when the command window is open for that character
  • HP text drawn in green, SP in blue (same colors as the bars)
  • Swapped position of HP/SP text and the bar graphics
  • Reduced font size of HP/SP text to match the same size as the character name (it was slightly larger before)
  • Moved names a little further to the left (felt like I had the room) and adjusted horizontal spacing between other elements

I like this second version MUCH better. The colored HP/SP text does not look bad as I thought it would, although maybe it could be made a little bit brighter so that it's easier to read (especially SP). Other than that, I feel pretty comfortable with this area of the UI now. Are there any other changes we want/need to see here (other than minor touchups)? If not, lets begin looking at other parts of the UI. Maybe starting with the command window changes I suggested earlier.
Image
Djinn_in_Tonic
Member
Posts: 67
Joined: Sun Aug 09, 2015 10:36 pm

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Djinn_in_Tonic » Tue Aug 18, 2015 6:00 pm

Roots wrote:Are there any other changes we want/need to see here (other than minor touchups)? If not, lets begin looking at other parts of the UI. Maybe starting with the command window changes I suggested earlier.

First things first: I'd be fine with what you suggested. The following is in the interest of tossing ideas onto the table.

You may have noticed I really like clean UI presentations--mainly for the information density you can put on them without making them overly complicated. Here's a suggestion, paired with yours for comparison.

Image

This mock-up has a few possible advantages:

  • It occupies less horizontal room, possibly giving us more room for ability information and/or key status effects on the main screen.
  • It has a more immediate relationship between the bars and their associated numbers, allowing you to instantly see both a bar and a number for quick checking or detailed analysis, as necessary.
  • It's VERY clear, since it uses a mono-spaced aliased programming font, and thus has no pixels that aren't entirely solid (other fonts often have anti-aliasing). This allows the fonts to be smaller while still incredibly readable, and also helps us make sure names occupy the same amount of space per letter.
  • Since it shows the maximum / minimum, we can adjust colors to indicate injury level and/or Fatigue. Here the red-orange MAXIMUM HP number indicates your CURRENT MAXIMUM HP, and the purple MAXIMUM SP number indicates your CURRENT MAXIMUM SP. These numbers remain green and blue, respectively, when at their normal maximum values (see Claudius in my example). I've also indicated a "wounded" state on Markus (which might be anywhere from 30-50% hit points), which might give us another way to make abilities interesting -- having abilities that are stronger against wounded or unwounded opponents could be a cool interaction.

Thoughts? I think it manages to present pretty much all the important information yours does (and potentially more) in a manner which is at least equally clear (possibly more so) and occupies less space. The downside is that it's a little more modern in presentation and a little less "traditional old-school RPG," but I'm *personally* not attached to making sure our UI matches the older aesthetic.
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Roots » Tue Aug 18, 2015 8:27 pm

Things I like:
  • The font you used is amazing. Names and numbers are so much clearer to read. I do want to make sure that we can support that in-game (I think we only have support for TTF fonts, and I'm not sure about the backend stuff that renders the font right now).
  • The brighter colors for the HP/SP bars (unsurprising, since I mentioned that earlier)
  • The HP turning red when a character is at critically low health
  • Using a gray character highlight instead of the red/gold backgrounds we use (which kind of hurt visibility)

Things I don't like:
  • Adding the max HP/SP numbers and putting them all on one line makes it much harder to read IMO. It's this giant glob of numbers, and the numbers (especially SP) are so much smaller
  • The amount of color variation in the numbers. There's green/red for HP and blue/purple for SP, both for the current and max values. This further adds to the number confusion
  • I agree that putting the HP/SP text on the same horizontal line as the corresponding bar makes it easier to associate, but the reduced size, at best, makes the change a net neutral IMO.
  • The HP color is a little too "aqua" for my tastes and I'd prefer to see it more as a bright green.

Generally, I'm not strongly in favor of putting max HP/SP numbers up there. The most important information to present the user is the value of each character's HP/SP right now, and adding the maximums makes it more difficult to quickly look and verify that information. The only time I care about the maxes really is when I'm healing or restoring SP, and we can add that information to the command window when a healing/restore skill or item is selected very easily.

While it is nice to have that extra horizontal space, now that HP/SP bars are combined we're not in such a dire need of extra room. I'd rather have large, readily visible elements than trying to cram as much information as possible in that space, you know? Although it is really attractive to be able to fit status effects in there, we could shove in three in there at the most.

Overall there are definitely elements of your design that I want to use, and others that I'm a little more undecided about. The two things that I have the most concern with are adding the max HP/SP numbers and making those numbers smaller and stacking them on the same line. What do you feel about these criticisms?

By the way, do you have the font available that you used there? If it's a TTF font and is available to use under a free license, we could begin using this immediately.
Image
Djinn_in_Tonic
Member
Posts: 67
Joined: Sun Aug 09, 2015 10:36 pm

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Djinn_in_Tonic » Tue Aug 18, 2015 8:44 pm

Roots wrote:Adding the max HP/SP numbers and putting them all on one line makes it much harder to read IMO. It's this giant glob of numbers, and the numbers (especially SP) are so much smaller

Definitely valid.

The amount of color variation in the numbers. There's green/red for HP and blue/purple for SP, both for the current and max values. This further adds to the number confusion

I'm less convinced about this one. Having two colors for each doesn't seem like much of a stretch at all: color-changing health bars already have this, and it doesn't really confuse players. In the mess of numbers, however, you may have a point.

I agree that putting the HP/SP text on the same horizontal line as the corresponding bar makes it easier to associate, but the reduced size, at best, makes the change a net neutral IMO.

This one I disagree with: the reduced size is still quite readable, and I think the ease of association is a strong point in its favor.

The HP color is a little too "aqua" for my tastes and I'd prefer to see it more as a bright green.

That's an easy change. :D

Generally, I'm not strongly in favor of putting max HP/SP numbers up there. The most important information to present the user is the value of each character's HP/SP right now, and adding the maximums makes it more difficult to quickly look and verify that information. The only time I care about the maxes really is when I'm healing or restoring SP, and we can add that information to the command window when a healing/restore skill or item is selected very easily.

Fair enough. Let me do a little bit of revision and get back to you.

By the way, do you have the font available that you used there? If it's a TTF font and is available to use under a free license, we could begin using this immediately.

The font I used is my favorite programming font: Consolas. I don't remember if it's free-use or not. That said, any mono-spaced font intended for programming could be used in its place.
Djinn_in_Tonic
Member
Posts: 67
Joined: Sun Aug 09, 2015 10:36 pm

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Djinn_in_Tonic » Tue Aug 18, 2015 8:57 pm

Updated my suggestion a bit. Removed the maximum numbers and fatigue indicators, and adjusted the positioning of the HP / SP numbers. Also brightened the colors.

Image

Some numbers are on the small side, but I think the overall presentation is still incredibly readable. The slight overlap on the bar is, I feel, actually a non-issue, since you'll almost always have some fatigue and some damage, and you aren't really worried about those values until they fall low enough to really become visible.

I also included a bit of something I was mocking up, which is an information panel display showing hit chance and a brief description of the highlighted ability.

Thoughts on this presentation?
User avatar
Roots
Dictator
Posts: 8662
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Roots » Tue Aug 18, 2015 9:54 pm

I like this one much better. I don't think we have support to do the kind of font shadows for the numbers that you have in your mockup, though (shadows are done in only one vertical and one horizontal direction, and there it looks like you have a shadow in all four directions. I still feel the SP numbers are too small. I'm sitting at my desk looking at this on my laptop from about 4-5 feet away and I can barely make out the SP numbers (like I have to really focus my vision hard to see it). I think there's enough space that the font size could be increased by a point or two. I'm still not convinced about putting HP and SP number text on the same line, although this version certainly does a better job of that. I also like your action description flyout, although again I feel the text is small there.


I'd really like to get some more opinions on that matter rather than just the two of us deciding this. I might grab some random people and ask for opinions.
Image
Djinn_in_Tonic
Member
Posts: 67
Joined: Sun Aug 09, 2015 10:36 pm

Re: Battle UI Improvements (Part IV - Now With Fatigue)

Postby Djinn_in_Tonic » Tue Aug 18, 2015 9:57 pm

Roots wrote:I like this one much better. I don't think we have support to do the kind of font shadows for the numbers that you have in your mockup, though (shadows are done in only one vertical and one horizontal direction, and there it looks like you have a shadow in all four directions. I still feel the SP numbers are too small. I'm sitting at my desk looking at this on my laptop from about 4-5 feet away and I can barely make out the SP numbers (like I have to really focus my vision hard to see it). I think there's enough space that the font size could be increased by a point or two. I'm still not convinced about putting HP and SP number text on the same line, although this version certainly does a better job of that. I also like your action description flyout, although again I feel the text is small there.

How often do you actually play a game on a laptop screen from 4-5 feet away though? Standard is probably 2-3 feet, maximum. But yeah, we could make them SLIGHTLY bigger.

As for the shadow--it's a stroke outline. Not sure if we have that capability.


I'd really like to get some more opinions on that matter rather than just the two of us deciding this. I might grab some random people and ask for opinions.

Sounds good. I may do the same.

Return to “Design”

Who is online

Users browsing this forum: No registered users and 4 guests