UI Redesign - v 2.1

As part of a uni assignment, I finally got the chance to make so much-needed changes to the UI of this little one-week experiment.

I began by going through all the assets in the hierarchy in edit mode and just seeing what they looked like. This allowed me to already find a few issues, such as the misspelling of the name of our voice actor in the credits page. A fresh perspective also showed me just how hard to read our chosen font is. Short of just replacing it, and so drastically changing the visual style of the game, I chose to just use it more carefully and sparingly. Making the font bold - especially for smaller text - also really improved legibility. I also remembered that different people had different opinions on the volume of the different sound elements of the game, so I added a new menu item to the pause menu to handle that. I also added a message that pops up during the cut scene when the player moves the mouse: "Press [Space] to skip cut scene" (the message disappears again after a second or so when the mouse is not moved). I then quickly implemented the cut scene skip logic.

Then I played the game again for the first time in over six months. Some issues immediately jumped out at me, such as the information overload that happens as the player is taken from the cut scene into the actual level and then confronted with a wall of hard-to-read text and a voice-over explanation of the oxygen-tank and boot grip mechanics by the narrator, both at the same time! Also, the HUD contained no visual indication of how long the player has until the boots lose their grip on the ship.

I did take some time to address a couple particular mechanical issues that came up in the feedback of the original version. They both related to the movement mechanic, and since this was so central to the assignment, I decided I had to do it. Fortunately, that went relatively smoothly (although it did take some time to do). The result of these fixes is that the movement is much smoother and more intuitive (at least in my opinion).

Next, I focused on the HUD. I wanted to add a meter to indicate how long the player has until their boots lose their grip. The first decision was whether to have one meter for each boot or just one that combined the information from both boots. I decided that the really relevant information was how close the player was to losing their grip and flying off into space, so I decided that the meter should only display the grip for the boot with the smallest amount of current grip.Then, I spent a relatively long time considering locations on the screen where I could place the meter. I didn't want the player to have to lose their focus on their avatar, so I decided to put the meter near the avatar, at the center of the screen. It was at this stage that I remembered the health bar from Dead Cells . I had always thought that was a really clever solution for non-intrusive diegetic UI. Thinking about the design of the meter, I really wanted to experiment with a "wheel" (radial) meter, since I had never done one before, and I thought that since it's essentially a countdown, the clock-like shape would be fitting, in terms of affordance. So I put a canvas with a radial meter on the back of the avatar, and after a bit of coding, it was working quite nicely.

However, the biggest issue of the original game were the instructions. I could not easily change anything about the narration without asking the voice actor to record new lines. Luckily, I found that the original lines were in themselves good enough of an explanation of the basic game mechanics - the issue was really the visual component of the instructions. The initial idea was to cut as much verbal information from the visual instructions as possible. I also remembered how frustrating it was when people didn't understand how to play the original, since demonstrating it to them in person would have been so easy. Therefore, it was a quite obvious decision to make an animated demonstration of the movement mechanics. This ended up working so well on its own that, in the end, I decided to leave it without any additional verbal explanations. I also added a screenshot that labelled the HUD elements mentioned in the voice-over narration and made the tutorial accessible from the pause menu. I hope the result is a much clearer and more intuitive tutorial for the game.