Sign in to follow this  
Orymus3

Looking for feedback on UI components (Video)

Recommended Posts

Hi,

 

I'm currently working on a game in which there is a combat playback simulation sequence (all is automated).

In an effort to keep the player informed of what is happening, I've recently added 'gauges' to keep track of each ship's life and the status of their weapon.

 

I use the below color-coding:

 

Green: Friendly ships' life (also determines they are YOUR ships).

Red: Enemy ships' life (also determines they are your OPPONENT's ships).

Blue: Readiness status of each weapon (cooldown/reload).

 

There's currently a lot of gauges on screen and I was wondering if anyone had suggestion on how to better organize all of this information.

 

[media]https://www.youtube.com/watch?v=SZEMMGctrXY[/media]

Share this post


Link to post
Share on other sites

My suggestions:

- Bring the bars closer into the ships. They're quite far away right now, it's hard to tell which bar applies to which ship

- I think health should be the same color for all ships (regardless of friendly or enemy). Can you instead color the ships differently?

- Maybe the cooldown bar should be next to the health bar (i.e. on the same side of the ship).

Share this post


Link to post
Share on other sites

Quick edit based on these comments:

I've taken 1 and 3 together by placing the readiness bars below the life (thus using the space efficiently).

 

As for ship colors, from an indie budget's standpoint, having each ship use color swaps would be a nightmare... Perhaps I could work using an icon on the side instead though?

 

 

gaugetry_02.png

Share this post


Link to post
Share on other sites

The improvement is exponential, it's all about that visual comfortableness for users. I can easily determine the ships bars now, however phil's last comment is quite optional.

 

If you are on a low budget, as one is in indie gaming, I'd suggest simply enlargening the health bars slightly to signify their colours. I'd sway from using logo's however, as their aesthetics are quite nice but very missable. It's all about making the user feel the information is there, having them search for it frustrates them.

 

However, take the time to look at it yourself, do the ships status seem hard to determine? While you are a game developer, you are also a game player. Think, where are life bars done right? How can I make my life bar stand out?

Share this post


Link to post
Share on other sites

Thanks.

I must confess though that, looking at this representation so often lately, I'm affraid my judgment has become warped, hence why I felt I needed a bit of external feedback on this.

 

I have a fairly good control over the height of each bar, so I can definitely stretch the life bar to make it bigger in comparison to the other bars.

 

That's still a heavy UI component to have (especially on a ship with, say, 6-10 weapons!). Perhaps I should come up with the worst-case scenario upfront and see whether this approach is viable.

 

Thanks again.

Share this post


Link to post
Share on other sites
The grouping helped a lot! Here are some more tips:
  • The bars look a bit similar. Adding a pattern-texture to them (dotted, striped etc.) can make them easier to differentiate. The dots don't have to be individual items like they are in some games, it's enough that they are distinct. 
  • The green and red colors are easy to mix up by people who are color blind (I think ~5% of males are). Test this easily by setting your color picker into HSL and drag the (S-saturation) bar down to zero for both your green and your red colors. If they are too similar then you will have have to adjust them a little. 
  • Finally, to make it easy to distinguish class of vessel and team, you can add a sprite indicating which fraction they belong too. 

Here is an example: 

 
[sharedmedia=gallery:images:4399]

 

Share this post


Link to post
Share on other sites

It seems a bit messy there just seems to be too much going on especially if a ship can have 6-10 weapons each with their own bar.  

 

What about a red overly that covers a ship as damage increases representing the percentage of damage done?

Weapon recharges could either go entirely or maybe just a small do or icon for each weapon that changes from red to green or fills from empty to full.  Something that takes up less space then a full bar and can be lined up side by side.

Share this post


Link to post
Share on other sites

First thing that comes to mind is unless I moused over a ship, I'm not displaying any sort of interest in it. I could click a ship if I wanted to keep it toggled on. Otherwise this is more information than I need.

 

 

This will probably come as extra work . As the player, if this were a really important battle I'd use instant replay, rewind, and I'd capture it cool.png . This paragraph only applies if I was really into the game.

Share this post


Link to post
Share on other sites

In addition to the improvements you've made, I'd make the life bar slightly higher and add markers for 25%, 50% and 75% (this will also allow you to reduce the width of the bars without them becoming hard to read). Also, I'd get rid of weapon charge bars for charge times < 1 or 2 seconds.

 

Looks awesome so far, keep up the great work!

Share this post


Link to post
Share on other sites


The bars look a bit similar. Adding a pattern-texture to them (dotted, striped etc.) can make them easier to differentiate. The dots don't have to be individual items like they are in some games, it's enough that they are distinct.

 

I actually thought about that. Initially, I was going to create the gauge using several small "segments" which meant I got to control the overall look. For optimization reasons however, I had to use a single bitmap that I'm stretching horizontally so as to avoid putting too much strain on my onEnterFrame events.

If you notice though, there's actually a gradient in the center of each bar (because the base bitmap is 128 width and resizes negatively).

 


The green and red colors are easy to mix up by people who are color blind (I think ~5% of males are). Test this easily by setting your color picker into HSL and drag the (S-saturation) bar down to zero for both your green and your red colors. If they are too similar then you will have have to adjust them a little.

Indeed, that is a concern. A bunch of people that are interested in my game are also colorblind, thus I'm already aware of this. I've considered reverting both gauges to green and find a different way to differentiate ship owners.

 


Finally, to make it easy to distinguish class of vessel and team, you can add a sprite indicating which fraction they belong too.

There's a lot of argument against doing so. I was interested in visiting this solution, but it seems like this is not the best approach unfortunately.

 


It seems a bit messy there just seems to be too much going on especially if a ship can have 6-10 weapons each with their own bar.

Yes, that's the reason why I've created this thread. I'm a bit concerned with information flow.

Although, realistically, I wouldn't expect most of the fights to be more than 2v2 or less. I went with pretty much the worst-case scenario to see how it looks though.

 


What about a red overly that covers a ship as damage increases representing the percentage of damage done?

This sounds like a suitable solution. I can think of various ways to implement this that shouldn't be too demanding.

 


First thing that comes to mind is unless I moused over a ship, I'm not displaying any sort of interest in it. I could click a ship if I wanted to keep it toggled on. Otherwise this is more information than I need.

This will probably come as extra work . As the player, if this were a really important battle I'd use instant replay, rewind, and I'd capture it . This paragraph only applies if I was really into the game.

This IS the instant replay (combats are not actually fought by the player as per an RTS, they are simulated and this is the graphical rendition that is returned to the player after the turn is processed).

I'm a bit concerned that not displaying this information would make the battles hard to understand (the "why did I lose" syndrom).

 


In addition to the improvements you've made, I'd make the life bar slightly higher

Yes, I am also unhappy that it has pretty much the same height as everything else, though its definitely a more critical information.

 


and add markers for 25%, 50% and 75%

Do you mean like, vertical yellow bars across the gauge to segment it?

 


Also, I'd get rid of weapon charge bars for charge times < 1 or 2 seconds.

It could look odd if some weapons' cooldown were accounted for and others weren't?

Also, I'm anticipating that most weapons will take 2+ seconds to reload. The values I'm using right now are simply random because I didn't get around to creating the external XML balancing document yet for these.

 


Looks awesome so far, keep up the great work!

Thanks :)

 

 

Couple thoughts on where to go next:

- Add a top-of-screen gauge on each side that represents the total amount of hp of each faction. This way, it will tell you who has the most "life" overall left. I think its the closest indicator to winning/losing trend.

- Implement a red mask overlay (that starts with the back of a ship and slowly progresses towards the helm). I'm thinking this mask should be something around 25-50% transparency so that, whily ou undeniably see it, you can still see the ship sprite.

- Enlarge the HP gauge vertically

- Find a way to differentiate ship owner instead of gauge colors (and reinstate enemy ship gauges as "green").

- Find a way to make the cooldown gauges less intrusive (though I'm not sure which way to go with that just yet).

- Apply consistent damage text color (red)

Share this post


Link to post
Share on other sites

Do you mean like, vertical yellow bars across the gauge to segment it?

 

 

Yes, though I did not have yellow in mind tongue.png. Here's an example:

[attachment=18602:gaugetry.jpg]

 


It could look odd if some weapons' cooldown were accounted for and others weren't?

Also, I'm anticipating that most weapons will take 2+ seconds to reload. The values I'm using right now are simply random because I didn't get around to creating the external XML balancing document yet for these.

My thought was that there'd be at least two categories of weapons, one that fires rapidly(think pew pew lasers) and one that takes a significant time to charge/reload(seems like your rockets belong to this category). The rapid fire category wouldn't be that interesting to display the charge bar for.

 

Alternatively you could use circular gauges for each weapon, you could colorize these by weapon type as well without getting a rainbow bar effect.

Share this post


Link to post
Share on other sites

 

Do you mean like, vertical yellow bars across the gauge to segment it?

 

 

Yes, though I did not have yellow in mind tongue.png. Here's an example:

attachicon.gifgaugetry.jpg

 

 

 


It could look odd if some weapons' cooldown were accounted for and others weren't?

Also, I'm anticipating that most weapons will take 2+ seconds to reload. The values I'm using right now are simply random because I didn't get around to creating the external XML balancing document yet for these.

My thought was that there'd be at least two categories of weapons, one that fires rapidly(think pew pew lasers) and one that takes a significant time to charge/reload(seems like your rockets belong to this category). The rapid fire category wouldn't be that interesting to display the charge bar for.

 

Alternatively you could use circular gauges for each weapon, you could colorize these by weapon type as well without getting a rainbow bar effect.

 

 

Honestly, I'd scrap the recharge bar unless you've actively selected the ship. It seems to add a ton of clutter to the screen that is unnecessary. I'd display the health bar and maybe add a separate UI element on the bottom or the top of the screen to view the details(like your charge bar) for the actively selected ship.

Share this post


Link to post
Share on other sites


Honestly, I'd scrap the recharge bar unless you've actively selected the ship. It seems to add a ton of clutter to the screen that is unnecessary. I'd display the health bar and maybe add a separate UI element on the bottom or the top of the screen to view the details(like your charge bar) for the actively selected ship.

 

Well Gratuitous Space Battles does pretty much that, and I ended up quickly browsing all of my ships repeatedly to figure out what was going on.

This game is great, but it lacks some clarity as far as weapons/defenses are involved, and its very hard to min/max based on that.

Since player skill and experience in my game will be focused on predicting outcome, I want to provide tools that allow them to understand how their DPS is calculated (because DPS alone is an extremely misleading stat).

 


My thought was that there'd be at least two categories of weapons, one that fires rapidly(think pew pew lasers) and one that takes a significant time to charge/reload(seems like your rockets belong to this category). The rapid fire category wouldn't be that interesting to display the charge bar for.

My game ref for these gauges used two models:

- linear gauges for fast weapons

- lit-up dots for heavier gear (torpedoes): it would be red, then turn yellow, then green when ready, and fire back to red (cooldown).

 

Although the dots are not as "precise" they still give a bit more info than nothing, so perhaps a series of colored dots underneath the healthbar could do (might be able to squeeze 10 of them on a single line actually).

 


Yes, though I did not have yellow in mind . Here's an example:

Yes, I understand, thanks.

Not sure if that would be necessary though, and it kind of breaks the pace of the gauge?

Share this post


Link to post
Share on other sites


Yes, I understand, thanks.

Not sure if that would be necessary though, and it kind of breaks the pace of the gauge?

It depends on the importance of hit point levels(e.g. there are special things you can do when a ship is below 25%). If this is not a factor at all than I think you should stick to what you have.

Share this post


Link to post
Share on other sites

I'd keep damage colours the same unless the colours have meaning.  Like in MOO2 where shield damage was blue and then actual ship damage was red.    Or If you have different damage types then those could be colour coded to give the player an idea of what type of weapons their opponent is using and can build defense accordingly.  So if I see lots of high green damage numbers appearing I know you use powerful biological weapons so I'll spend my research points on tech that reduces bio damage.

 

If you don't have things like that then keep all to a nice easy to see colour against your background.

Share this post


Link to post
Share on other sites
Multiple weapon bars I think could be solved by having them oriented vertically underneath the health bar.

Make them as tall as say two bars, and the width would depend on how many weapons are on a given ship. Since they're charging and firing much quicker than the health tends to change, having them take up the exact same amount of space isn't really necessary.

To distinguish weapons from each other, you could use sprites or icons that fill vertically instead of just bars

Share this post


Link to post
Share on other sites

Here's where I stand after a few minutes spent trying to implement my earlier reasoning. 

 

 

 

Couple thoughts on where to go next:

- Add a top-of-screen gauge on each side that represents the total amount of hp of each faction. This way, it will tell you who has the most "life" overall left. I think its the closest indicator to winning/losing trend.

- Implement a red mask overlay (that starts with the back of a ship and slowly progresses towards the helm). I'm thinking this mask should be something around 25-50% transparency so that, whily ou undeniably see it, you can still see the ship sprite.

- Enlarge the HP gauge vertically

- Find a way to differentiate ship owner instead of gauge colors (and reinstate enemy ship gauges as "green").

- Find a way to make the cooldown gauges less intrusive (though I'm not sure which way to go with that just yet).

- Apply consistent damage text color (red)

 

[media]http://www.youtube.com/watch?v=CHTynRz_ny0&feature=youtu.be[/media]

 

Still trying to figure out the red mask replacement for the ships, as I'm interested in testing this one out.

Status quo for everything else for now (I try not to introduce too many changes per iteration, by risk of making wrong judgment calls about why things better/worse).

 

Share this post


Link to post
Share on other sites

Looks good, but have you tried the versus bar at the top as being full screen that shows the contest between the two sides?  The bar represents the percentage of hp that each side currently has against the total current hp of all sides.  So if both sides have 500 hp then it would have half red half green if one side has 250 and the other 750 it would be 25% green and the rest red.  That way it shows which side is currently dominating.

Share this post


Link to post
Share on other sites

I don't like it very much... These bars are not looking too good. Maybe make a small one (not that wide) below a ship (or two: red-hull, blue-shield). Also, I see no need for the cooldown bar at all, at least not on the main view.

 

But more importantly, where is the pause/rewind button? And "details window" (the one which gives you all current ship's parameters after clicking a ship)? These are supposed to be the main tools for viewing/analysing the battle, right? The main view of ships firing at each other in realtime is just an addition, right?

 

I suspect the main problem is that you don't "feel" what kind of information you want to convey. You don't find it "needed" as a player. I think you can go two ways from here, first try to understand the information flow and provide a rich feedback system, second ignore it and just make some ships firing at each other and just make it look good. Personally, I would vote for the second in your case.

 


As for ship colors, from an indie budget's standpoint, having each ship use color swaps would be a nightmare...
? All artists I met did recolours for free (or extremelly cheap). Actualy, adding icons would be more expensive...

Share this post


Link to post
Share on other sites

Imo, bars are both too long and not thick enough.

 

Also , I think you need visual clues (like smoke, damaged hull etc) for some milestone damages (25%, 50% etc.) as it is not good to stick some bars when it is a crowded screen.

Share this post


Link to post
Share on other sites


But more importantly, where is the pause/rewind button?

 

Not done YET.

I wanted everything in the background stage to work before assessing top HUD elements.

It will be located in the top left corner (play, pause, resume, rewind, next fight, etc.)

 


And "details window" (the one which gives you all current ship's parameters after clicking a ship)?

It will be broken down across the bottom part of the screen based on my wireframes.

 


? All artists I met did recolours for free (or extremelly cheap). Actualy, adding icons would be more expensive...

Depends on the level of reskin involved. Also, I'm considering having multiple status of destruction per ship, so this could quickly increase. I'm running on a tight budget here, even doing some of the art myself (bullets/beams for example).

 


Also , I think you need visual clues (like smoke, damaged hull etc) for some milestone damages (25%, 50% etc.) as it is not good to stick some bars when it is a crowded screen.

Yes, definitely thinking about that now. Would look better too.

Share this post


Link to post
Share on other sites


Acharis, on 02 Nov 2013 - 12:44 AM, said:


? All artists I met did recolours for free (or extremelly cheap). Actualy, adding icons would be more expensive...

Depends on the level of reskin involved. Also, I'm considering having multiple status of destruction per ship, so this could quickly increase. I'm running on a tight budget here, even doing some of the art myself (bullets/beams for example).
Simple recolour will suffice. You can even order the image in 2 parts (PSD layers), the coloured one and the gray scale one. Then you render them separately and recolour the gray scale part on the fly (like glColor(1,0,0); for example :)). It does not add any work to the artist (if you get the PSD file and save the images yourself) since they heavily use layers anyway (to my experience).

Share this post


Link to post
Share on other sites

New Update!

 

[media]http://www.youtube.com/watch?v=l-Iyi9Ks0TA&feature=youtu.be[/media]

 

Here's what I did:

  • Added Red Masks (the ship turns to red as it takes damage)
  • Added Shields (the shield fades as it takes damage)

 

I've created 3 segments in the video, each with their own information flow.

Wondering what works best, and what I should keep building upon.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this