Jump to content
  • Advertisement
Sign in to follow this  
Orymus3

Looking for feedback on UI components (Video)

This topic is 1701 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

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:

[/media]

Share this post


Link to post
Share on other sites
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).

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
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!