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: 8643
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

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

Postby Roots » Wed Aug 19, 2015 6:47 pm

Image

Image

Here's a slightly different version of the existing UI with your text colors. I also made a change so that when the character's HP goes below 25% of the active max HP (== full max - fatigue), the text and bars turn red like you showed in your mockup. I committed all recent UI changes to the central repository so they are active right now for anyone to take a look at and play with. We still have the indicator bars for where the active max HP/SP is. Thoughts on keeping or removing those? I wouldn't mind removing them if the darker HP/SP colors were easier to see (even though I used the same colors as in your mockup, they are really difficult to see in this version).


In the meantime while we're waiting for feedback on the HP/SP text positioning, do you have any thoughts on the new menu workflow I proposed for the command window? That's something I'd like to get started on this week (it will probably take a bit longer to do than the other changes that have been made).
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 » Wed Aug 19, 2015 8:03 pm

Roots wrote:In the meantime while we're waiting for feedback on the HP/SP text positioning, do you have any thoughts on the new menu workflow I proposed for the command window? That's something I'd like to get started on this week (it will probably take a bit longer to do than the other changes that have been made).

I'll drop some feedback on that a bit later: initial impression is favorable though.

Can you tell me where in the code database the driving code behind the menus is? I've found the graphics portion, but can't seem to locate the menu set-up file for the life of me.
User avatar
Roots
Dictator
Posts: 8643
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

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

Postby Roots » Wed Aug 19, 2015 8:40 pm

If you're talking about the GUI menus (the red background with steel border you see everywhere), that is in src/common/gui. The battle UI uses some of its own custom images not provided by the GUI system, and those are built by separate logic blocks in src/modes/battle/. Most of the changes I've made so far have been in battle_actors.cpp in this directory. Changes to the command window will almost all go into battle_command.cpp.
Image
User avatar
Roots
Dictator
Posts: 8643
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

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

Postby Roots » Thu Aug 20, 2015 7:43 pm

Image

Image

EDIT: New mockup version based on external suggestions
Image

I showed these two mockups to a co-worker today who is a senior UX designer and asked her to comment on the aspect of putting the HP/SP numbers on the same line versus having them separate and larger. Here is what she had to say:

  • Given a choice between these two designs, from a usability standpoint she prefers the second one due to the easier readability of the numbers
  • She recommending detaching the HP/SP markers from the bars and instead using those as a column header above the HP and SP number text
  • She recommended combining the HP/SP bars into a single bar with a green and blue section, and having a very thin one pixel border (I think it mostly is one pixel, but I can't remember
  • She was not a fan of the dark blue/dark green section of the bars because they are barely discernible from black; but she did like the use of the yellow indicators on the bars in the second mockup to distinguish a visible boundary between those sections

I think her suggested changes are worth trying out, so I'm going to take the second mockup and do some modifications to put HP and SP in a column header and combining the bars to see how it looks. I might try brightening up the dark colors as well (which I may have coded in incorrectly from the first mockup).
Image
User avatar
Roots
Dictator
Posts: 8643
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

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

Postby Roots » Fri Aug 21, 2015 1:50 am

I made a quick and dirty change based on the suggestions my UX designer friend said in the last post. I added it to the previous post to make it easier to compare to the other versions. I think this is my new favorite version.

  • + The bars are much less cluttered now and easier to see.
  • + The HP/SP text is only on the screen in one location, denoting the number text, and the colors of the bars matching HP/SP are pretty obvious
  • + Removing HP/SP gives us room to make the balls a little smaller if we need them to be (they are currently at 110 pixels here). This could allow us to fit in maybe a small icon to indicate that a character has a status affliction active
  • + The bars for each character are separated more and are much easier to see than in either of the previous two mockups
  • - The HP/SP text protudes into the battle area a little bit, but I think this is fine because it's not a large screen element and that area of the battlefield will almost always be free of any characters or enemies as well.

Like I said this mockup was a quick hack and the colors aren't exactly right (way too bright at the moment), and I think we could afford to make the HP and SP text larger and easier to read in this case if we choose to. My feelings are we should pursue this avenue. I like that both the bars and number text are large and easy to read and neither of these elements feel "cluttered" or squished together.
Image
Atypikal_Arkitect
Junior Member
Posts: 28
Joined: Tue Aug 11, 2015 1:57 pm

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

Postby Atypikal_Arkitect » Fri Aug 21, 2015 5:37 pm

I like the new mock up:

  • Feels the least cluttered.
  • Smart use of color, and space.
  • Using darker variants of bar would probably suffice for showing fatigue graphically.

If your considering reducing the space taken up by the portrait the additional space could be given to show a fatigue percentage, then each of the key statistics will be expressed numerically and graphically.
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 » Sat Aug 22, 2015 8:18 pm

Roots wrote:
  • + The bars are much less cluttered now and easier to see.
  • + The HP/SP text is only on the screen in one location, denoting the number text, and the colors of the bars matching HP/SP are pretty obvious
  • + Removing HP/SP gives us room to make the balls a little smaller if we need them to be (they are currently at 110 pixels here). This could allow us to fit in maybe a small icon to indicate that a character has a status affliction active
  • + The bars for each character are separated more and are much easier to see than in either of the previous two mockups
  • - The HP/SP text protudes into the battle area a little bit, but I think this is fine because it's not a large screen element and that area of the battlefield will almost always be free of any characters or enemies as well.


I still feel like there's wasted space and that, with the numbers and bars separated, there's almost no need for the bar. Overall it's READABLE, definitely, but I don't think it's particularly well designed -- the heading labels, the large amount of space, the disconnect between bar and associated number...there are a few more, but those are the big one.

Here's a mock-up that I think might solve all the problems: highly readable, visible bar, no disconnect between the stat and the bar in question, and is probably the most immediately distinguishable mock-up we've had so far. I did mess up and label SP as MP out of habit though.

Image

Thoughts?

Do note that this uses the FULL 128 pixels. I don't think this is an issue though -- I'm not convinced the 8-pixel fade area is actually that crucial.
User avatar
Roots
Dictator
Posts: 8643
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 23, 2015 6:45 pm

The bar gives the player a since of how much HP/SP they have lost compared to the maximum and also how much fatigue is affecting the character, so that information is mandatory to have IMO. I'm not so concerned about having some empty space (we need it since HP starts in the 10s range and will grow to presumably then 1000s range), but I do see your point.


On your design:
  • The thing I dislike the most and immediately noticed is the HP/SP text. It just seems really redundant and makes the numbers more difficult to read with those extra three characters crammed in there.
  • Although I don't like the bars as much as the last one because they are smaller, I understand the intent with making them thinner. They look less "official" without the border though. Maybe just one white border line under the bar would make it look nicer?
  • I do like how much room we save by combining the bars and text this way. Leaves enough room for up to 3 status icons I think.
  • Not a huge fan of the black separator line used to break apart the current max and the full (non-fatigue) max values on the bars.
  • I agree with using the full 128 pixels and doing away with the fade. If anything, maybe the top pixel row can be a gray border line (you had that in one of your earlier mockups I think and I liked how it looked).

My general feeling toward it is between indifferent and slightly positive. I really don't like trying to cram so much information in a small space and I don't think that makes the design better.

From now on lets assume we have the full 128 pixel space to work with and not reserve anything for a border fade or anything like that. I'm going to make the change to the background image in a couple days to remove the fade. Here's another thought: why don't we do away with the HP and SP text entirely? I mean, it may not be immediately obvious to the player what these different numbers are, but we can assume that our audience is likely at least somewhat familiar with RPGs and every RPG has a HP number of some sort. I think after a couple battles even the most naive player will understand that green means HP and blue means SP (plus we can put this info in the first battle tutorial). After thinking about it, I am in favor of removing HP/SP headers/info text from all future mockups.
Image
User avatar
Roots
Dictator
Posts: 8643
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 23, 2015 11:17 pm

I just showed that design to someone who is familiar with the project and she didn't even notice the bars there at all. She thought the bars were separators between the different characters, not something meant to convey information to the player. So that's a huge disadvantage of this design (I would go so far to say it's a deal-breaker). Part of the reason for this was that the HP/SP text was the same color as the bars. If the text was white it may be a little bit better, but I still think that the cons outweigh the pros here. :|
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 » Sun Aug 23, 2015 11:42 pm

Roots wrote:I just showed that design to someone who is familiar with the project and she didn't even notice the bars there at all. She thought the bars were separators between the different characters, not something meant to convey information to the player. So that's a huge disadvantage of this design (I would go so far to say it's a deal-breaker). Part of the reason for this was that the HP/SP text was the same color as the bars. If the text was white it may be a little bit better, but I still think that the cons outweigh the pros here. :|


That's...really bizarre, actually. No one I've shown it to has had anything similar to that response: it's also a fairly standard arrangement used in FF VII, FF VI, ChronoChross, and many other games of the genre we're emulating. So I'm really legitimately puzzled by that: I think that's less of a deal-breaker and more of a really strange outlying opinion that I honestly do not understand. The division of the lines, multiple bar colors, and color association with the appropriate numbers are all visual cues that they relate to each other directly. It's about as strong as that design can get, I believe. :shrug:

Also note that this confusion will probably vanish the instant a character is damaged and the corresponding bar begins to move. If we can train players to recognize health and SP differences by color, I'm sure the visual cues will quickly alert them to the fact that the bar is, in fact, their health bar.

I could probably resolve this by making the number text smaller so the bar doesn't extend even slightly below the bottom line of the name, but I'm really convinced this is an isolated case. I'll run it by some more people to be sure, but I don't expect to hear this input from anyone else.

Image

Here's a new version. We have a dividing line at the top, no HP text, and a gray outline forming the bottom and right side of the HP/SP bars, which also serves as a really clear way to visually indicate your current HP, current Max HP, and current Fatigue values without having to add lines everywhere.

A bit about the bar size: Yes, they ARE smaller. This is because the bars themselves don't actually contain any information you need moment-to-moment. Your moment-to-moment concern is your current HP value. Your SECONDARY concern is how high your HP can go, but we only need that when healing, so the bars can afford to take secondary visual priority. This is further increased by the addition of a Wounded color, which helps us tell when we should focus on our health - to - maximum health state. I think, as presented, it actually adds a needed hierarchy in terms of where a player's focus priority should be at given stages of the battle.
User avatar
Roots
Dictator
Posts: 8643
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

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

Postby Roots » Mon Aug 24, 2015 3:47 am

I like this version much better than the last. :approve: I see nothing more for us to improve on here, and I'll make the appropriate changes to make this design go live sometime in the next week.

EDIT: Also showed this to the person who had criticism about the previous design and she also likes this much better. :)
Image
User avatar
Roots
Dictator
Posts: 8643
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 25, 2015 3:49 pm

Image

Here's the previous design applied to the code. Changes:
  • Increased font size for both character names and HP/SP text
  • Changed the colors of the bars to match the previous mockup
  • Moved the HP/SP text back to white
  • Removed the 8 pixel high "fade" from the background shadow. It is now all the same color, except for a single row of gray pixels at the very top.
  • Adjusted vertical spacing of elements to account for making full use of the 128 pixel space
  • Changed the HP/SP bar border image and text alignment to match last design draft
  • Removed the yellow indicator bars (code is currently commented out and can easily be added back in if we decide we want to keep them).

The HP/SP bars are 80 and 60 pixels wide, respectively. I noticed the bars were of different sizes in the mockup and although I initially was skeptical about the idea, I decided it made sense after all since HP and SP will probably cover different ranges of numbers (1000s vs 100s) and also helps distinguish between the two a little better.

I decided to try out the HP/SP text as just being white. The reason we changed the color in the first place was because we moved the text and bars apart and needed a way to associate them. Now that the text and bars are back together, I don't see a compelling reason to color this text (and I think the text is more readable in white because it doesn't blend into the bar). We can easily change the text colors to match the bars if we want though. The HP bar still turns red when health is critical (< 20% I believe), but the HP text currently remains white regardless of bar color.

The new colors look a lot better. They are visible, but not blindingly bright. Because of this, i decided to remove the indicator bar and see how it looked. I like it better without the indicator bar, although it's still hard to tell between the darker green/blue color and black (players with poor vision would be even more affected). I'm a little torn about whether or not the max indicator mark is better to have or not. :|

The character highlighting needs to change, probably to something similar to the gray highlight in the design. The red highlight, while nice and consistent with our UI color scheme, wouldn't work well when we have an HP bar in the red. I'll work on this image in the near future.

The portrait is currently centered vertically. It is 100x100 pixels, meaning there's 14 pixels above and below it. I know that in your designs you liked to use another portrait that takes the entire space, but that's not an option I'm afraid. Like the damage frames of enemy sprites, the character portraits shown in battle show visible damage as well. That's why we use these specific portraits (it's another nice touch to show how hurt characters are). If we can figure out some sort of command button to put underneat the portrait (ie, show "Menu" and "Swap" keys), then we can move the portrait to the top and squeeze those in under them (with about 20-28 pixels vertical and 100 pixels horizontal space to work with).

There's empty space now to the right of the characters. Status icons should go here. Each icon is 25x25 pixels, and we have about 90 pixels of space between the SP bar and the action menu. That gives us room for 3 status icons to fit here, which should be plenty for most cases. If we have more than that, maybe we could have the status effects "scroll" through the area, or briefly show the different effects every few seconds.


Overall, I'm liking this direction a lot.
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 25, 2015 6:56 pm

Roots wrote:I decided it made sense after all since HP and SP will probably cover different ranges of numbers (1000s vs 100s) and also helps distinguish between the two a little better.

That was the intent!

I decided to try out the HP/SP text as just being white. The reason we changed the color in the first place was because we moved the text and bars apart and needed a way to associate them. Now that the text and bars are back together, I don't see a compelling reason to color this text (and I think the text is more readable in white because it doesn't blend into the bar). We can easily change the text colors to match the bars if we want though. The HP bar still turns red when health is critical (< 20% I believe), but the HP text currently remains white regardless of bar color.

I personally prefer them colored (I think they stood out just fine with the monospaced font, and any readability issues are probably due to our current anti-aliased font choice), but I'm not going to make a big stink about it if you're set on white. :D

The new colors look a lot better. They are visible, but not blindingly bright. Because of this, i decided to remove the indicator bar and see how it looked. I like it better without the indicator bar, although it's still hard to tell between the darker green/blue color and black (players with poor vision would be even more affected). I'm a little torn about whether or not the max indicator mark is better to have or not. :|

I'm CONVINCED you're using a different color, or there's some effect over it: look at the difference between your bar and mine.

My dark Green hex color is #008220. Your's appears (jpeg artifact makes it a little hard to be certain) to be somewhere around #09310c, which is MUCH darker. Your LIGHT green is about #06d201, while mine is #00e837 -- slightly slighter. That's probably causing the issue.

The portrait is currently centered vertically. It is 100x100 pixels, meaning there's 14 pixels above and below it. I know that in your designs you liked to use another portrait that takes the entire space, but that's not an option I'm afraid. Like the damage frames of enemy sprites, the character portraits shown in battle show visible damage as well. That's why we use these specific portraits (it's another nice touch to show how hurt characters are). If we can figure out some sort of command button to put underneat the portrait (ie, show "Menu" and "Swap" keys), then we can move the portrait to the top and squeeze those in under them (with about 20-28 pixels vertical and 100 pixels horizontal space to work with).

Menu and/or Swap keys would be perfect.
User avatar
Roots
Dictator
Posts: 8643
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

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

Postby Roots » Wed Aug 26, 2015 1:42 am

I figured that was your intent. Lets stick with text color as white for now. We can try it out for a while, then try changing the color, and see what we like best. I opened up the two different images and double checked the RGB values that I entered. I think that a bug is responsible for this. Going to look into it tonight.

EDIT
Think I fixed the bug (it was in the rectangle draw code and it wasn't setting colors correctly). The colors look much better now and I see no need for an indicator bar. Haven't commented that code out yet though just in case we change our minds.

I committed all recent changes to the central repository, so others should be able to check them out. Included a couple more improvements:
  • The red highlight has been replaced with a light gray highlight similar to the mockup images.
  • The golden highlight has been removed entirely. This was previously used to indicate that another character is ready to execute a command when the player is selecting a command for another character. It was more confusing than useful, so I just got rid of it.

I'm considering my work for this section of the UI complete for now. I'm sure we'll continue making minor tweaks here and there, but I think we're all happy with it for now. The only thing we have to figure out is what to do when a character has more status effects than can be displayed with the HP and SP bars there. Also, I haven't added the code to display the status icons here yet, but I'll do that in the near future.


Next I'm going to be tackling the changes to the command window that I proposed in the beginning of this thread.
Image
User avatar
Roots
Dictator
Posts: 8643
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

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

Postby Roots » Thu Aug 27, 2015 6:09 pm

https://notabug.org/koz.ross/awesome-gamedev#fonts

Here are some resources for finding free fonts (OFL license). If you want to find a good monospace non-aliased font here for damage numbers, by all means take a look and pick a couple for us to choose from. I don't have the bandwidth to look into this myself right now.
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 » Thu Aug 27, 2015 7:06 pm

Roots wrote:Here are some resources for finding free fonts (OFL license). If you want to find a good monospace non-aliased font here for damage numbers, by all means take a look and pick a couple for us to choose from. I don't have the bandwidth to look into this myself right now.


Inconsolata is one of my personal favorite mono-spaced fonts, and is available from Google Fonts.
User avatar
Roots
Dictator
Posts: 8643
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

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

Postby Roots » Mon Sep 07, 2015 8:56 pm

Image

FYI, I'm beginning work on this design today. I'm not going to make all these changes right now. Just some of the more core changes which include:
  • Combining all skills into a single list
  • Showing all targets in the target window
  • Reformatting things here and there

I'm going to save the following for someone else to do:
  • Implement the "Recent" action type in the action type selection menu
  • Implement the preview (right side area) of the action type selection menu
  • Showing the damage and percent to hit rate

I don't expect that we'll have time to make all of these changes for this month's release, especially considering the design is still not finalized. But I did want to do some amount of improvement here to sort of pave the way for more changes down the line.
Image
User avatar
Roots
Dictator
Posts: 8643
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

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

Postby Roots » Wed Sep 09, 2015 3:44 pm

Had a thought this morning as I was working on the action type menu (Recent, Skill, Item, ...). How many actions is it useful to have in the recent menu? I imagine that anything beyond 3-4 recent actions are unlikely to be helpful. I made the following observations:

  • The action type menu doesn't use a lot of space (the "preview" section to the right of the line was intended to fill it out)
  • If we only have a small number of recent actions stored, having a separate action type category seems unnecessary
  • Since we're having so much empty space without the "preview" information in the action menu, perhaps we could use this extra space for the recent actions instaed

What I'm imagining for this menu is to have all the action types in the bottom row, add a horizontal separator, and then add the recent actions in the top three rows. For example:

Code: Select all

Sword Strike    (Target Icon)  SP   
Healing Potion    (Item Icon)  Count
Fortify Allies     (Target Icon)  SP
     Skills    Item     Recover


So in other words, the recent actions (up to three) are contained directly in the top level menu and there's no separate menu to access them. This makes it easier for the player to quickly see the recent actions they've taken and they can select these recent actions faster as well. The downside is that we might be cluttering this menu with a lot of information and it may be confusing, especially mixing skill and action items together. Maybe when there are no recent actions (ie the start of the battle) this space could have text that says "No recent actions" or something, to make it more apparent to the user what this space is meant to contain. We also might want to consider adding the target that the recent action was applied to (ie: "=> Spider"). When the player selects a recent action, they'll be brought to a detailed view where they can see all the information about the skill and have an option to change the target to apply the action to.


Just an idea I want to throw out there while its fresh on my mind. I'm not planning to make any changes here right now, and the action type menu is going to be very cold and barren with only "Recent Skill Item" option text, and the Recent category will be grayed out since it's not available yet.
Image
User avatar
Roots
Dictator
Posts: 8643
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

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

Postby Roots » Sun Sep 13, 2015 4:59 am

I'm finished working on UI changes for this month's release as of tonight. I wanted to try and improve the target selection window in the command workflow and I did make a little progress on it, but it was more work than I thought it would be and I'm a little burned out on coding right now.

Changes we have ready for this release:
  • Action category menu now displays "Skill Item Recover"
  • The Recover action is implemented and working now (restores 3x more SP than a normal turn would)
  • The skill selection window and item selection windows have been improved and are mostly inline with the mockup image. We don't show fatigue that would be generated currently

Future changes we'll need to work on after this release
  • Improve the target selection command window to be something similar to the mockup
  • Add a "Recent action" section in the category selection window
  • Take a hard look at the battle victory menu and make improvements there accordingly
Image

Return to “Design”

Who is online

Users browsing this forum: No registered users and 3 guests