Last Friday, the first Early Access update for Stable Orbit, Electrolysis, launched on Steam. Electrolysis introduces new game elements, but also features a complete overhaul of the in-game user interface (UI). Today, I’d like to share a bit of the process that went into the designing what is perhaps the most important par of the UI, the station status panel.
One of my overarching goals with Stable Orbit was – and still is – to create a simulation game with a very minimal UI. I envisioned a game where you would be able to ascertain how well your station is doing just by looking at the station itself, rather than having to look through endless screens of data and charts. Early on in the development, the station panel design very much reflected this philosophy in that it wasn’t even really a panel but rather a collection of floating icons at the bottom of the screen. Since there wasn’t anything in the game yet that would explain the meaning of the various icons to the player, I put the below image in the release notes of the builds I sent out to early testers:
At this point in the process, I was still convinced the whole panel was just a temporary construct that would be removed once I figured out how to display all this data on the station itself. As such, the panel only displays the few choice statistics that I deemed at the time to be most important to the player: how money you have, how many crew (and how many of them are currently occupied with work), if you have sufficient power, how long your supplies will last and the internal and external temperatures of the station.
While as a designer I wanted to show less (in the UI), as a player I wanted more. All too often, while playing Stable Orbit, I would enable a debug overlay which displays a bunch of internal simulation data in order to get a better feel for how my station was doing. Clearly, the station panel wasn’t providing enough information to the player! Therefore, in the weeks before Gamescom, I designed a new version of the station panel which packed a lot more into the same space.
What I tried to do with this design was offer the player more data and at the same time provide a better at-a-glance overview of how the station is performing. Some aspects of it worked quite well – crew and power are green, so you can worry about other things – while other aspects proved to be quite confusing to anyone who wasn’t me. For example: why are the supply levels yellow? To indicate that they are steadily declining. Is that a problem? No, not at this time. But you should probably pay closer attention to your heat levels, since the amount of heat produced by your station is close to the capacity of the radiators – even though the heat bar is (still) green. All in all, I’d say this version could be summed up with “close, but no cigar”.
In the run up to Stable Orbit’s Early Access launch, I began work on yet another version of the panel. Based on the feedback I received on the earlier versions and my own continuing insights, I knew that the next version of the panel needed to accomplish three things:
- Explain the meaning of the icons, since not everyone understood what those meant (some players, for example, thought that the ‘heat’ icon meant ‘science’);
- Show absolute quantities of resources available, since percentages aren’t always meaningful or helpful to the player;
- Inform the player about the rate of consumption of critical resources.
The first prototype of the new station panel ended up looking like this:
What I immediate liked about the prototype was the density of information. Finally most, if not all, of the numbers needed to gauge how the station was functioning where combined in a single display. Still, there was a lot of work left to do before this version could be presented to the players. Since the Early Access launch date was nearly upon us, I shelved the prototype and focused on more pressing things that needed to be addressed before the wider public got their first taste Stable Orbit.
While working on Electrolysis, I first updated the prototype panel to match the look and feel of the new, darker, in-game UI. Originally, I intended the overall look of the user interface to be very light to contrast the darkness of space. Indeed, the light look worked very well whenever a part of the UI appeared over the darker parts of the screen. Unfortunately, I never managed to get the readability right when UI needed to appear over brighter parts of the screen – i.e. the day side of the earth or a solar array exposed to sun light. My tests proved that dark panels held up much better under various conditions, so that’s what I went with in the end.
Once I had the overall look of the new panel sorted, I spent several days on fine tuning exactly what information would be on display and also how and when it would displayed. When you start a new game, the station panel looks like this:
What this screen should tell you: there is a fair amount of oxygen, water and food stored on board, your core module is producing a little bit of power, but not much else is happening yet on your station. Once you begin adding modules, the individual sections of the station panel will light up and begin to display information that is relevant to you. Eventually, with a bigger station, you will end up with something that looks like this:
Our station could do with a few more radiators, probably, since we’re currently using over eighty percent of our cooling capacity. Otherwise, at a glance, we appear to be doing quite okay. And if we’re confident about our station’s status, we can now click on the little pin icon to collapse the panel to the side, leaving only a tiny strip of icons:
In this state, the station panel is quite minimal, if I dare say so.