If you've ever shown Zero-K to another person or read some feedback from new players, you'll have encountered that many feel overwhelmed or even intimidated by the game. This is detrimental when it comes to attracting new players to the game, especially for those new to RTS games.

While Zero-K is a very technically demanding game at a high level, it can be enjoyable, for some people even more enjoyable, without knowing every aspect of the game. The problem is that our current user interface doesn't reflect that in any way.

I reset my settings to default and joined an on-going team game. Here's what I was presented with:


This is overwhelming even for me as a veteran of the game. How should a newbie even get a grasp on the situation at hands?

I'm going to suggest some changes to the design to deal with this issue. Of course all of these changes are meant for newbies, they should all be configurable and don't have to be used by experienced players. The goal is to order the visibility of different UI elements by their significance to the current situation. The color palette should be limited to the absolute minimum required, preferably choosing colors without too much contrast or saturation.

Widgets

Map markers

Goal: Communicate location-specific information that is relevant to the current situation.

Layer: 2nd look. Map markers give additional insight and should not take priority over main elements.

Suggestion: Map markers and drawings are all over the map and only accumulate as the game progresses. They should quickly fade to have some transparency and possibly even disappear entirely after a few minutes. No player should have to know about the eraser for normal marker usage.

Player colors

Goal: Differentiate between friend and foe. Recognize allies and your own units.

Layer: 1st look. It should be very clear where allies and enemies are.

Suggestion: Default to simple colors. There should be a color for enemies, allies and your own units. Detailed information about which ally/enemy a unit belongs to would be excessive at a first glance. Try to avoid using fully saturated versions of red and green.

Small shading differences can be used to differentiate between specific players, but they should be kept so small that one wouldn't notice them at a first glance. They are secondary information and should thus have a visually secondary role.


These two simple changes yield us this result:


Now one can actually recognize the two parties involved in this battle. Next up I'm gonna have a look at some of the smaller UI elements.

Chat

Goal: Gain insight into your allies' latest plans.

Layer: 2nd look.

Suggestion: The chat is using way too many and oversaturated colors. Messages should be a very light grey but not white. Communication with allies should be just slightly tainted in green. Player names should not be colored or use much less saturated colors. I'd also suggest putting it into the top left as it is otherwise blocking valuable space in the center of the screen.

Global Commands

Goal: Allow new users to discover and try commands that'd usually be limited to power users.

Layer: 3rd look.

Suggestion: This is a very rarely used feature and has fittingly small icons. I don't think it is important enough to warrant the use of so many colors. The icons should either all be grey unless hovered over or use a common, simple color scheme. It would be nice to add a button for placing map markers. There's a button to erase map markers, yet markers can only be placed with an undiscoverable hotkey.

Economy panel

Goal: Give an overview over the current economic situation of the battle.

Layer: 1st look. Economy alone decides many battles.

Suggestion: This is the only UI element where I find there is no need to reduce the use of colors. The placement of stored resources, income and pull is unintuitive. It would be nice if it could be made clear that pull represents how much of your income is being used, for example as a fraction.

I disagree with the use of red and green for negative and positive numbers - as long as this is the same red and green used for enemies(bad) and allies(good) which I would recommend as to not use too many colors. If red means bad, then a lack of metal use should be red while using lots of metal (but not way too much) should be green.

Menu bar

Goal: Allow players to adjust game settings and control what they are playing.

Layer: 3rd look. Not needed for active play.

Suggestion: No colors should be used here, all white should be replaced by light grey. If hotkeys need to have a color it should be much less pronounced than full green (the most luminescent color). It might make sense to put a pause button here, as it is otherwise only accessible indirectly via the settings menu or by knowing the hotkey.

Player list

Goal: See who you are playing with and against.

Layer: 3rd look. Possibly 2nd if it updates during play.

Suggestion: There are way too many colors here. There's a detailed player list accessible via the tab key. This should be written in grey for discoverability. Flags, Clans and Rank can all be moved solely to the detailed list. CPU and Ping status would make more sense as a warning instead of being constantly displayed. Only display the CPU/Ping icon when they exceed normal values.

Zoomed in unit selection

Goal: Show what units are being commanded.

Layer: 1st look.

Suggestion: It is way too hard to find the selected unit(s). It's supposed to be visible on the first glance what units are selected. I'd suggest a white outline for selected units. Personally I also prefer the BAR selection widget over the one used in ZK. It uses animated white outlines that are much easier to see.

Zoomed out unit selection

Goal: Show what units are being commanded.

Layer: 1st look.

Suggestion: The white radar icons are easy to see, but they don't correspond to the icons shown in the selection bar. As in the single unit selection, the radar icon should be shown somewhere near/on the unit icon. The damage, health and value information at the bottom right is only supplemental information for power users. It certainly shouldn't be full white, instead I'd recommend using a middle grey (see stored resource color).

Command panel

Goal: Show what the currently selected units are capable of.

Layer: 2nd look.

Suggestion: There are way too many buttons and colors here. Priority should be given to the most important commands: stop, fire, attack, move. The other commands should be in a second row with smaller, less colorful buttons. I like the use of similar colors for similar commands, but it would be better if all of these colors were much less pronounced.

State toggles should similarly be ordered by importance with only fire and move state getting the full icon and others being smaller in a second row.

Alternatively to having first/second row commands/toggles, the less important buttons could also be simply hidden with an easily discoverable "advanced mode" to enable them.

Building placement

Goal: Show where a building can and can't be placed.

Layer: 1st look.

Suggestion: Nowhere in this pop-up is a text explaining that the terrain is too uneven for placement. The hotkey displayed (Space+click) doesn't even work in this context. Instead placement hotkeys such as long click for terraform could be shown. Rotation hotkeys should also be shown, as the ability to rotate buildings is otherwise undiscoverable.

Core selector

Goal: Quick access buttons to select frequently used units.

Layer: 3rd look.

Suggestion: The hotkey text is nearly unreadable because of the excessive use of color. As with all other 3rd layer widgets this would preferably just use grey-scale/simple colors.

Economy overlay

Goal: Visualize mex and geo spots.

Layer: 2nd look.

Suggestion: While the mexspots are held in a very subtle grey, geospots are marked in the brightest possible yellow. The yellow should be much less pronounced.

Afk detection

Goal: Make sure no units get lost due to players leaving/going afk.

Layer: 1st look (afk person). 2nd look(receiving person).

Suggestion: When a player is AFK, there should be pop-up on the center of the screen, similar to the pause screen, explaining that units have been given away due to afk and that they will be returned by moving the mouse. When a player is able to receive units, there should be a smaller window on the side of the screen, informing him that he has temporarily received units from an ally. Possibly this window could also have an option to reject receiving units in the future.

Maps

Maps are the canvas that the game is painted on. They should try to be as neutral as possible such that they don't distort what's on them. Many recent maps have already gone in this direction by only using a single, desaturated color in different intensities. Visual focus should lie on features that are important to gameplay.

Skybox

The skybox is probably the least important feature on screen when looking at the map from above. The light blue background on Akilon is way too bright for that.

Terrain coloring

The highlight should be put on terrain features that matter to the player: pathability, slopes and elevation. This means that ramps should be clearly shown. Instead the terrain color (see green areas) seems to have no correlation with elevation or slope.

Although not the worst example, Adansonia uses very saturated colors that can distract from the game and UI:


The texture patterns and variations on Wanderlust have too much contrast, which can make it hard spot units on them:

Conclusion

Although I've probably missed many things, I'm hoping to have stepped on every developer's feet here. A lot of work has been invested in the design of each individual widget/map and I'm not trying to invalidate that. Instead I'm hoping on the feedback from the widget creators and to end up with a common color scheme as well as a clear visual order.

raaar I'll add your suggestions to the list. Just keep in mind that this is just about things that are in-game. I'll make another thread for lobby and website.

DeinFreund You raise good points but I don't agree with :

- markers: most markers have limited lifetime but think about bertha or nuke spotting? You wanna have these the whole game...
- ally colours. It is imo quite easily understandable which colors are "friendly" and which are not

I agree with the map markers and player colours points (although I would personally not use the default for player colours in that case). I don't think I agree with a fair fraction of the rest.

In particular I think removing colour from many of the GUI elements you suggest will make them less newbie-friendly, not more. Newbie-friendly is not only "how noisy is my screen", it is also "how easily can I find the buttons I want to find", and making everything grey is going to make many buttons difficult to distinguish, identify and find.

Playerlist should just not be on the screen all the time, unless the user wants it to be.

Unit selection could use some thinking about. Dunno how I feel about putting the radar icons on the selection screen, I feel like that might just introduce movement on the screen where it is not necessary. The selection screen can be photo only, icon only, somehow squeeze both in at once, or photo/icon depending on camera height or something - I don't think there's a clear case for something besides photo only.

Building placement thing could use improvement. Geo-locator could be more subtle. AFK units stuff is a known issue.

I'm not sure that it is useful to put the map design issues in the same thread as the rest.

quote: Making many buttons grey will make the important buttons stand out. I often see newbies clicking around the Global Commands bar when they're just trying out the game. That's not really a place a newbie should ever be clicking. The UI should lead players to the right actions. Once a player knows that he's looking for a specific button, I agree that it'll be harder to find that button if it's only faintly colored. Yet the player is already looking for that specific button, thus all the UI now has to do is to differentiate buttons within a single element. Do you really need the full arsenal of colors and shapes to do that?

There's more to being a newbie than "the first few moments where you're aimlessly clicking on stuff", there is also "the process of learning the game after you know generally what side of the screen a given button can be expected to appear".

edit: I can see a case for making some of the more obscure unit commands harder to find, but I don't think the global commands and menu bars are actually a serious distraction. I can barely even see them on your screenshot...

edit2: A basic familiarity with at least some of the stuff on the Global Command bar (contour map, pathing map, etc.) doesn't seem like a bad thing for a new player to have, or at least for them to know exists.

I don't think the analogy to Blender is particularly useful. Blender is a tool used with cool calm reflection where very few or none of your button presses are time critical. Its GUI design has different priorities.

I don't really think there is a meaningful difference between your two screenshots.

edit: That being said I don't have a serious objection to merely lowering the colour saturation on the corner menus. Going full greyscale seems like it loses far more than it gains though.

quote: I don't think the analogy to Blender is particularly useful. Blender is a tool used with cool calm reflection where very few or none of your button presses are time critical. Its GUI design has different priorities.

People are spending thousands for alternative software because they're more familiar with their user interfaces. In a professional setting of all cases does time matter. These UI changes are made only because they save valuable seconds that would end up adding up to the price of a commercial tool.

Even though you might hardly notice it, it's exactly these subtleties that cause UI designers to ask me if we'd ever even thought of what an outsider sees coming into the game.

quote: I have no heard any reports of new players being overwhelmed by colours in particular.

This is what I've been told from talking to other game developers and general UI design guidelines, not specifically new zk players. I believe colors are on of the easiest things to change in the UI while also being able to achieve a much more coherent look. By generally reducing the use of colors we can then emphasize important elements much easier.

The post was intentionally a bit clickbaity and provoking to see how the reception to such a change would be. Seeing that you mostly agree with the ideas, except for some details, the implementation will be the next step.

quote: I quite agree that Zero-K's GUI is probably not a professional job but I am unconvinced that some of the individual things you have suggested are by any means an improvement.

I'm far from a UI designer and this list is mostly just a list of things I stumbled upon since the steam release. We agree that the UI can still need some work, so I'm trying to find out what way to go with the changes. If the result isn't as appealing as expected we can still go back. Desaturating colors is on the same axis as replacing colors by grey, so it should be easy to find a reasonable trade-off there.

GoogleFrog I'm sorry if this all sounds a bit pretentious for an actually small changeset. Especially compared to the UI work you've done in the year before steam. I'm aiming to keep UI design an active topic and to possibly get more people involved in it. After all it's one of the things that are hardest to conceptualize yet generally easy to implement.

Great post DeinFreund!

As someone relatively new I thought I'd share my experience:
For background, I had a reasonable amount of previous RTS experience, including Balanced Annihilation and Complete Annihilation.

• I was somewhat overwhelmed by all the buttons, but I figured I could just ignore the little buttons and played through the campaign a bit as a tutorial (which it was actually pretty decent for). I didn't use the top left buttons until at least game 40. The small buttons on the unit command menu got slowly absorbed from games 20 to 100 (some of them could perhaps do with being a bit more prominent so that they get used quicker given how useful they are).
• I was also overwhelmed by all the unit options. Again, the (first few levels of) campaign helped by removing most of them.
• The mouse over text was an awesome help.
• The hints on the loading screen were a godsend. So useful to be fed bitesized reminders about useful mechanics and hotkeys. There should be more of them.
• I didn't figure out markers for a very very long time.

About the proposed changes:
1. Map markers: I didn't see map markers til very late (was initially playing team games with equally new friends or 1v1s) so I can't comment. I did find it annoying trying to watch a game when someone has drawn a big dick on the screen.
1a. The ability to use markers and erase things should be way more discoverable.
2. Player colors: I didn't mind the team colors, found them reasonably intuitive (brighter colors are one team and darker ones are the other). I even tried the simple color mode around game 4 and didn't like it.
3. Chat: No opinion on message colors. Seems fine.
4. Global commands: Making these more clearly ignorable initially might be nice.
4a. Having the markers be via one of those buttons rather than an undiscoverable hotkey would have been awesome.
5. Economy panel: I don't agree with swapping the colors, that would be immensely confusing to past me.
6. Menu bar: Sounds good.
7. Player list: I think having rank readily visible was useful, gives an immediate idea about how threatening that player is and whether I should be cautious. Country flags were nice flavor.
7a. I really think the mouse over for this should show that you can press Tab for more options! Took over 100 games to realize that I could give units and share resources!
8. Zoomed in: That was definitely a problem. Selections were very tricky.
8a. Also, for some of my friends telling units apart was very difficult.
9. Zoomed out: Yeah, the icons took a bit to get used to. That said, I had no issue with the white text. Was useful from the get go to realize how much metal worth of stuff I had and how many I'd selected.
10. Command panel: This was indeed somewhat overwhelming.
11. Building placement: Very much agreed. I still don't know how to rotate buildings.
12. Core selector: Green on a green background is a pretty poor color indeed.
13. Economy overlay: Mexes are way too subtle and geospots too blaring. Just to confirm: is starting with econ overlay the default? (it should be but I'm unsure if it is)
14. Afk: No comment.
15. Maps: Sure.
16. Skybox: I guess.
17. Terrain: Good god YES! The inability to clearly see slopes etc. is one of the worst things about Zero K. Particularly bad when they've been Tremored for a while.

I generally agree with DeinFreund's points (and I might be able to do some of those changes over the Christmas break), but to break down some disagreements:

Economy panel:
I partially agree, the colours here could be desaturated, especially the red, but it's important to have it immediately obvious that the numbers differ in function, and it's way easier to glance and see the income and drain without also having to parse position or the use of '+' and '-', which would be more taxing on the brain. This element should retain colour, but the colours could use some revision.


Player list:
I've never really liked this UI element (I have it on for casts pretty much only as an aid for editing/video descriptions). I mean, there is a playerlist you get from hitting Tab, but I can kinda see the point for team games, considering there isn't any display of the game's players in the load screen or anything.


Zoomed in unit selection:
I mostly agree, but in my experience the currently publicly available BAR selections widget doesn't have any of that animation, and doesn't have a selection preview when making a box (something I quite like about the default Unit Shapes widget). Maybe I just got the wrong version of the widget, I'm really not sure, though either way it would need some finagling to work with Epicmenu.


Zoomed out unit selection:
I thought there was an option to show the radar icons in the corner of each selected unit's box, but I might be mistaken. I suppose this would be worth a try, probably in the bottom-left corner, extending at most 1/3 of the box in either axis, since that's usually a spot where the unit image isn't. I am a bit concerned about it being noisy, but that's why I figure it's worth a try.


Command panel:
Good luck. The command panel is built to show the union of available commands and states for every unit type currently selected, so while there are shared elements, ensuring their placement is fixed may be untenable, especially once you get transports in the mix and there ends up being more than 18 buttons. I'd love this to be doable, but it would involve quite a bit of careful consideration of all the possible mixes of commands.