Looking for feedback on UI components (Video)

Started by
48 comments, last by Orymus3 10 years, 5 months ago

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:

[/media]

Advertisement

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).

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

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?

If, at any point, what I post is hard to understand, tell me. I am bad at projecting my thoughts into real words, so I appreciate the knowledge that I need to edit my post.

I am not a professional writer, nor a professional game designer. Please, understand that everything you read is simply an opinion of mind and should not, at any point in time, be taken as a credible answer unless validated by others.

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.

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]

It'd be better to simply create a color blind option mippy, as is done in most games now.

If, at any point, what I post is hard to understand, tell me. I am bad at projecting my thoughts into real words, so I appreciate the knowledge that I need to edit my post.

I am not a professional writer, nor a professional game designer. Please, understand that everything you read is simply an opinion of mind and should not, at any point in time, be taken as a credible answer unless validated by others.

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.

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!

This topic is closed to new replies.

Advertisement