Loading...
  OR  Zero-K Name:    Password:   

Post edit history

Why Zero-K's User Interface sucks

To display differences between versions, select one or more edits in the list using checkboxes and click "diff selected"
Post edit history
Date Editor Before After
12/16/2018 10:43:26 PMCHrankAdminDeinFreund before revert after revert
12/16/2018 10:43:04 PMCHrankAdminDeinFreund before revert after revert
12/16/2018 10:30:38 PMCHrankAdminDeinFreund before revert after revert
Before After
1 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. 1 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.
2 \n 2 \n
3 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. 3 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.
4 \n 4 \n
5 I reset my settings to default and joined an on-going team game. Here's what I was presented with: 5 I reset my settings to default and joined an on-going team game. Here's what I was presented with:
6 https://i.imgur.com/8RFv5ME.jpg 6 https://i.imgur.com/8RFv5ME.jpg
7 \n 7 \n
8 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? 8 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?
9 \n 9 \n
10 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. 10 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.
11 \n 11 \n
12 = Widgets = 12 = Widgets =
13 === Map markers === 13 === Map markers ===
14 [b]Goal:[/b] Communicate location-specific information that is relevant to the current situation. 14 [b]Goal:[/b] Communicate location-specific information that is relevant to the current situation.
15 \n 15 \n
16 [b]Layer:[/b] 2nd look. Map markers give additional insight and should not take priority over main elements. 16 [b]Layer:[/b] 2nd look. Map markers give additional insight and should not take priority over main elements.
17 \n 17 \n
18 [b]Suggestion:[/b] 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. 18 [b]Suggestion:[/b] 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.
19 \n 19 \n
20 === Player colors === 20 === Player colors ===
21 [b]Goal:[/b] Differentiate between friend and foe. Recognize allies and your own units. 21 [b]Goal:[/b] Differentiate between friend and foe. Recognize allies and your own units.
22 \n 22 \n
23 [b]Layer:[/b] 1st look. It should be very clear where allies and enemies are. 23 [b]Layer:[/b] 1st look. It should be very clear where allies and enemies are.
24 \n 24 \n
25 [b]Suggestion:[/b] 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. 25 [b]Suggestion:[/b] 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.
26 \n 26 \n
27 Small shading differences can be used to differentiate between enemies, 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. 27 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.
28 \n 28 \n
29 \n 29 \n
30 These two simple changes yield us this result: 30 These two simple changes yield us this result:
31 https://i.imgur.com/WeFEdcE.jpg 31 https://i.imgur.com/WeFEdcE.jpg
32 \n 32 \n
33 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. 33 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.
34 \n 34 \n
35 === Chat === 35 === Chat ===
36 https://i.imgur.com/VHk2NGM.png 36 https://i.imgur.com/VHk2NGM.png
37 \n 37 \n
38 [b]Goal:[/b] Gain insight into your allies' latest plans. 38 [b]Goal:[/b] Gain insight into your allies' latest plans.
39 \n 39 \n
40 [b]Layer:[/b] 2nd look. 40 [b]Layer:[/b] 2nd look.
41 \n 41 \n
42 [b]Suggestion:[/b] 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. 42 [b]Suggestion:[/b] 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.
43 \n 43 \n
44 === Global Commands === 44 === Global Commands ===
45 https://i.imgur.com/sIY0xyU.png 45 https://i.imgur.com/sIY0xyU.png
46 \n 46 \n
47 [b]Goal:[/b] Allow new users to discover and try commands that'd usually be limited to power users. 47 [b]Goal:[/b] Allow new users to discover and try commands that'd usually be limited to power users.
48 \n 48 \n
49 [b]Layer:[/b] 3rd look. 49 [b]Layer:[/b] 3rd look.
50 \n 50 \n
51 [b]Suggestion:[/b] 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. 51 [b]Suggestion:[/b] 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.
52 \n 52 \n
53 === Economy panel === 53 === Economy panel ===
54 https://i.imgur.com/MTCkJ57.png 54 https://i.imgur.com/MTCkJ57.png
55 \n 55 \n
56 [b]Goal:[/b] Give an overview over the current economic situation of the battle. 56 [b]Goal:[/b] Give an overview over the current economic situation of the battle.
57 \n 57 \n
58 [b]Layer:[/b] 1st look. Economy alone decides many battles. 58 [b]Layer:[/b] 1st look. Economy alone decides many battles.
59 \n 59 \n
60 [b]Suggestion:[/b] 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. 60 [b]Suggestion:[/b] 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.
61 \n 61 \n
62 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. 62 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.
63 \n 63 \n
64 === Menu bar === 64 === Menu bar ===
65 https://i.imgur.com/1LnD0uC.png 65 https://i.imgur.com/1LnD0uC.png
66 \n 66 \n
67 [b]Goal:[/b] Allow players to adjust game settings and control what they are playing. 67 [b]Goal:[/b] Allow players to adjust game settings and control what they are playing.
68 \n 68 \n
69 [b]Layer:[/b] 3rd look. Not needed for active play. 69 [b]Layer:[/b] 3rd look. Not needed for active play.
70 \n 70 \n
71 [b]Suggestion:[/b] 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. 71 [b]Suggestion:[/b] 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.
72 \n 72 \n
73 === Player list === 73 === Player list ===
74 https://i.imgur.com/c08Rsi3.png 74 https://i.imgur.com/c08Rsi3.png
75 \n 75 \n
76 [b]Goal:[/b] See who you are playing with and against. 76 [b]Goal:[/b] See who you are playing with and against.
77 \n 77 \n
78 [b]Layer:[/b] 3rd look. Possibly 2nd if it updates during play. 78 [b]Layer:[/b] 3rd look. Possibly 2nd if it updates during play.
79 \n 79 \n
80 [b]Suggestion:[/b] 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. 80 [b]Suggestion:[/b] 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.
81 \n 81 \n
82 === Zoomed in unit selection === 82 === Zoomed in unit selection ===
83 https://i.imgur.com/EkPx7GA.png 83 https://i.imgur.com/EkPx7GA.png
84 \n 84 \n
85 [b]Goal:[/b] Show what units are being commanded. 85 [b]Goal:[/b] Show what units are being commanded.
86 \n 86 \n
87 [b]Layer:[/b] 1st look. 87 [b]Layer:[/b] 1st look.
88 \n 88 \n
89 [b]Suggestion:[/b] 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 [url=https://www.youtube.com/watch?v=MZiSvM0zB2E]BAR selection widget[/url] over the one used in ZK. It uses animated white outlines that are much easier to see. 89 [b]Suggestion:[/b] 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 [url=https://www.youtube.com/watch?v=MZiSvM0zB2E]BAR selection widget[/url] over the one used in ZK. It uses animated white outlines that are much easier to see.
90 \n 90 \n
91 === Zoomed out unit selection === 91 === Zoomed out unit selection ===
92 https://i.imgur.com/QYAERd1.png 92 https://i.imgur.com/QYAERd1.png
93 \n 93 \n
94 [b]Goal:[/b] Show what units are being commanded. 94 [b]Goal:[/b] Show what units are being commanded.
95 \n 95 \n
96 [b]Layer:[/b] 1st look. 96 [b]Layer:[/b] 1st look.
97 \n 97 \n
98 [b]Suggestion:[/b] The white radar icons are easy to see, but they don't correspond to the icons shown in the [color=green]selection bar[/color]. As in the single unit selection, the radar icon should be shown somewhere near/on the unit icon. The [color=red]damage, health and value information[/color] 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). 98 [b]Suggestion:[/b] The white radar icons are easy to see, but they don't correspond to the icons shown in the [color=green]selection bar[/color]. As in the single unit selection, the radar icon should be shown somewhere near/on the unit icon. The [color=red]damage, health and value information[/color] 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).
99 \n 99 \n
100 === Command panel === 100 === Command panel ===
101 https://i.imgur.com/kIdmrEf.png 101 https://i.imgur.com/kIdmrEf.png
102 \n 102 \n
103 [b]Goal:[/b] Show what the currently selected units are capable of. 103 [b]Goal:[/b] Show what the currently selected units are capable of.
104 \n 104 \n
105 [b]Layer:[/b] 2nd look. 105 [b]Layer:[/b] 2nd look.
106 \n 106 \n
107 [b]Suggestion:[/b] 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. 107 [b]Suggestion:[/b] 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.
108 \n 108 \n
109 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. 109 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.
110 \n 110 \n
111 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. 111 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.
112 \n 112 \n
113 === Building placement === 113 === Building placement ===
114 https://i.imgur.com/Sq0lszo.png 114 https://i.imgur.com/Sq0lszo.png
115 \n 115 \n
116 [b]Goal:[/b] Show where a building can and can't be placed. 116 [b]Goal:[/b] Show where a building can and can't be placed.
117 \n 117 \n
118 [b]Layer:[/b] 1st look. 118 [b]Layer:[/b] 1st look.
119 \n 119 \n
120 [b]Suggestion:[/b] 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. 120 [b]Suggestion:[/b] 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.
121 \n 121 \n
122 === Core selector === 122 === Core selector ===
123 https://i.imgur.com/JY4GI5B.png 123 https://i.imgur.com/JY4GI5B.png
124 \n 124 \n
125 [b]Goal:[/b] Quick access buttons to select frequently used units. 125 [b]Goal:[/b] Quick access buttons to select frequently used units.
126 \n 126 \n
127 [b]Layer:[/b] 3rd look. 127 [b]Layer:[/b] 3rd look.
128 \n 128 \n
129 [b]Suggestion:[/b] 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. 129 [b]Suggestion:[/b] 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.
130 \n 130 \n
131 === Economy overlay === 131 === Economy overlay ===
132 https://i.imgur.com/27qiwAL.png 132 https://i.imgur.com/27qiwAL.png
133 \n 133 \n
134 [b]Goal:[/b] Visualize mex and geo spots. 134 [b]Goal:[/b] Visualize mex and geo spots.
135 \n 135 \n
136 [b]Layer:[/b] 2nd look. 136 [b]Layer:[/b] 2nd look.
137 \n 137 \n
138 [b]Suggestion:[/b] 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. 138 [b]Suggestion:[/b] 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.
139 \n 139 \n
140 === Afk detection === 140 === Afk detection ===
141 [b]Goal:[/b] Make sure no units get lost due to players leaving/going afk. 141 [b]Goal:[/b] Make sure no units get lost due to players leaving/going afk.
142 \n 142 \n
143 [b]Layer:[/b] 1st look (afk person). 2nd look(receiving person). 143 [b]Layer:[/b] 1st look (afk person). 2nd look(receiving person).
144 \n 144 \n
145 [b]Suggestion:[/b] 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. 145 [b]Suggestion:[/b] 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.
146 \n 146 \n
147 = Maps = 147 = Maps =
148 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. 148 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.
149 \n 149 \n
150 https://i.imgur.com/VTRZIs1.jpg 150 https://i.imgur.com/VTRZIs1.jpg
151 \n 151 \n
152 === Skybox === 152 === Skybox ===
153 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. 153 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.
154 \n 154 \n
155 === Terrain coloring === 155 === Terrain coloring ===
156 The highlight should be put on terrain features that matter to the player: pathability, slopes and elevation. This means that [color=red]ramps[/color] should be clearly shown. Instead the terrain color (see [color=green]green areas[/color]) seems to have no correlation with elevation or slope. 156 The highlight should be put on terrain features that matter to the player: pathability, slopes and elevation. This means that [color=red]ramps[/color] should be clearly shown. Instead the terrain color (see [color=green]green areas[/color]) seems to have no correlation with elevation or slope.
157 \n 157 \n
158 Although not the worst example, Adansonia uses very saturated colors that can distract from the game and UI: 158 Although not the worst example, Adansonia uses very saturated colors that can distract from the game and UI:
159 https://i.imgur.com/jXvBgFB.png 159 https://i.imgur.com/jXvBgFB.png
160 \n 160 \n
161 The texture patterns and variations on Wanderlust have too much contrast, which can make it hard spot units on them: 161 The texture patterns and variations on Wanderlust have too much contrast, which can make it hard spot units on them:
162 https://i.imgur.com/jhYS1yf.jpg 162 https://i.imgur.com/jhYS1yf.jpg
163 \n 163 \n
164 = Conclusion = 164 = Conclusion =
165 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. 165 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.