Designing Rolling Bob's HUD

First of all, I would like to thank the Moon Factory team for its support developing the interface and giving a hand when it comes to talk about HUD.

Just to get easily what were our needs designing HUD, I will explain brieftly Rolling Bob's game concept (please, look the game's trailer for a better a idea about our game).

"Rolling Bob is a platformer game where player (males and females from 9 to 12) has to lead and protect Bob by drawing his path to save the BITS".

WHAT THE PLAYER NEEDS TO KNOW

Well, I do hope that you have a overall idea about the main premises of the game  But, since we are here to talk about the HUD, I am going to list what were the most important things to track for the player:

Once we know what it is needed to communicate player, let's decide how to do it.

Cores, Time, BITs and other achievements make the player earn Score Points. 

HOW IT IS PRESENTED

Since our target audience were mainly males and females from 7 to 12 years old, the best thing to do is keep the things simple and kind:

WHAT DID IMPROVE THROUGH TESTING AND ITERATION?

Basically, everything planned and designed works as it was simple and effective. The problem with energy bar was noticed during the first testing sessions as it was predicted. But what we learnt during these phase was that we will not be able to catch the players' attention far from Pointer or main character since:

For all these reasons, HUD remained practically unnoticed for players until they get some expertise. As long as Pointer was the main focus of attention for player, it was thought to be also the main source of information as long as it does not disturb for drawing. Then, the following changes were made in HUD to enhance the User Experience:

REINFORCING FEEDBACK

Of course, that was the more basic stuff; the game had more complex features that we learnt to communicate effectively using different channels for providing enough feedback to players. This is the case, for example, of the 'Time Bullet' skill, which enables, as you can guess, slow down time in scene. For this skill it was needed to show that:

Then, the following things where designed:

Even being great the sensation and the feedback changing between modes, players kept a bit puzzled when they have to tell how much energy is left. So, diegetic approach was not enough and game needed an extra HUD element, something that design want to avoid to keep it clean and, of course, do not saturate the Pointer.

Then, Pointer was no longer an option, so design go for the bar, but, taking advantage of the metaphore of the time, we introduced underneath of the Time Counter, which result very clear for players in later testings after the implementation. It was also added the same colour code from the light of the helmet to show how much is left.

SPECIAL CASES

As a self-imposed rule within User Interface design, HUD should remain as simple and clean as possible. This applies to other cases as the bosses' design.

Instead of having non-diegetic or spacial elements gauging the health points of the enemies, design take the beloved and handy diegetic approach to contextualize the life's counter in the boss concept design. Then, every boss tell player how is suffering damage by losing parts of his body as it can be head gems from the 'Bad Furnace' helmet (see the pic at left) or the wings and the turrent from a aircraft. This also has a use as a sense of progression and a reward during the boss fight instead of having numbers going down.

When a reinforcement was needed for certain mechanics as 'Teleport' (player can teleport to
another point in screen when Energy Bar emits a green glow),  desing though to have signals inside the levels. These idea work nice since players were warned about:

WHAT COULD BE IMPROVED?

Regarding to HUD, the thing that I missed most were the animations. Due to a work overload, team was not able to deliver a more eye-catching HUD with animations, for instance, when a core is collected and it is summed up on Cores Counter. Here, it will be feel great have a +1 animation on total cores collected and a shaking effect of the counter, for example.

As designer, I will like to see a HUD theme related to the narrative. For instance, there was a proposal of having the HUD as the own interface of the main character. Something similar to the one seen in Metroid saga for Gamecube.

Of course, our HUD will not be that crowded since we have our rule of keeping it clean, but just adding helmet appearance and HUD icons as holographic will look nice and coherent. Moreover, HUD design proposal had two modes to avoid saturation of elements: minimal and expanded HUDs.

Minimal will keep the elements seen to this poin and expanded will have more as current score and objectives. Expanded HUD will prompt automatically when a main character get to the end of an area or a NPC calls main character through communicator (when player is not able to draw). This will show the players their own progress (they were able to change between modes by swiping over DS4 touchpad) and it will match more the theme. But, after some cutbacks related to in-level objectives, this idea was not implemented.

What we did implement was a HUD rays' effect when main character suffers an impact from an Evil Core, blinding partially player's vision and breaking the fourth wall. This required too much iteration until we reach something that was close to what we were looking for.

FINAL WORDS

Rolling Bob main HUD is simple, but full of good ideas to solve certain issues as we discussed above (particularly, Pointer and dragging features). Overall, I am happy with the work that we did, but HUD animations and a contextualize theme could be the icing of the cake. But it can be forgotten that it was our first game on PS4 and it was developed in 8 months...

If you want to give it a go, Rolling Bob is available for PS4 in PS Store. Hope you like the game!

Please, feel free to share below any thoughts about the article. If you want to visit my site and read more design stuff, click here.