Mobile HUDs

In my previous post, I presented a number of modified iterations of a HUD I designed over my winter break. I followed the advice of Senior UI Designer, Richard Warner and feel like I incorporated his feedback relatively well. However, there is one point that requires more research to complete, a mobile version.

As I don't play any mobile games and have never designed games for that platform, I completely overlooked the idea of creating an interface for it. I understand that many popular games are redeveloped into simplified versions for mobile players to enjoy and that, in industry, I may come across this type of brief. 

I decided to pick a few popular games to dissect in order to gain a better understanding of the elements needed in the transition from FPS PC games to pocket edition.

Player Unknows Battlegrounds (PUBG) - 2016

The PC HUD layout is very clean. The player and team health is displayed in colour coded bars on the lower left, while the lower right displays the minimap. The lower middle shows the player's current weapon, ammo, health bar and armour bar. The upper middle shows compass directions in a narrow bar and the upper right shows the number of players remaining.

The mobile HUD is far more busy. This can be based on the smaller screen size but is also due to the player's lack of keybinds. These controls must be displayed in on-screen panels and buttons for quick use. 

Immediately we can see that both the team information and the minimap have been moved to the top of their respective sides of the screen. The remaining player count has also been switched from the upper right to upper left corner. But both the player health bar and the compass have kept their place.

The interesting addition is all of the buttons. On the left we can see a controller stick for movement along with a backpack symbol to open the player's inventory. The current weapon indicator has been improved to show both of the players weapons and allows them to swap quickly. It also now shows med-packs and utility which can be pressed for use. On the right we can see a large bullet symbol which allows the player to fire their weapon. There are also three movement buttons, crouch, prone and jump and a crosshair to allow the player to use their weapon scope. Up the side of the minimap there are also options buttons for settings, volume and microphone.

Conclusion

At first glance, I hate this HUD. It is far too busy and overwhelms me a little. I also feel that the text needs some revision as there is some overlap, especially around the compass at the top. I understand the need for the extra buttons but I feel that some symmetry or more aesthetic layout could have been used here. This layout strikes me as function over all else which can be good for ease of use but does not feel inviting or intuitive, especially for new players.

Fortnite - 2017

The PC layout is very exciting and colourful. The lower left shows the player's health and armour while the lower right shows the player's inventory, supplies, weapons and ammo. The bar at the foot of the screen shows the player's level and progress. The upper left the team's health and armour. The upper right displays the minimap and the upper middle shows a compass.

The mobile HUD is quite charming and presents the same fun and colour of the PC version while not overcrowding the screen. The minimap has swapped to the upper left corner alongside the player health and armour and the team information. The compass has remained in the upper mid section. The inventory and weapons bar have been separated. Now the player's supplies are in the upper right corner along with the options button, while the weapons and ammo are in the lower mid stretch. The inventory and build buttons frame this bar. The lower left now holds a controller stick for movement while the crouch, jump and shoot buttons are on the middle right of the screen.

Conclusion

I prefer this mobile HUD far more, I think this is mainly due to its simplicity. The number of buttons don't over face the player and even the colour and opacity choice are easier on the eye. I will keep this design in mind when I design my own mobile HUD in the future.

Minecraft - 2011

While not an FPS, I believe that it is important to consider ideas from other game genres. Minecraft's PC HUD is very simple with all of the interface grouped in the lower middle section of the screen. The player's inventory is displayed in boxes with their level progress bar, health and hunger laid out above.

The mobile HUD retains the simplicity of the PC HUD. It keeps the inventory bar at the base of the screen with a button to open the inventory menu. The health and hunger bars have been moved to the upper left of the screen and a menu button has been added to the upper right. Movement buttons have also been added in the lower left corner.

Conclusion

I love both HUDs for Minecraft, their simplicity really give players an easy and informative learning experience when starting the game. I really enjoy HUDs that allow players to explore for themselves without becoming overwhelmed or lost and losing interest in the game.

Final Thoughts

All of these mobile HUDs include the same elements overall:

- movement controls (lower left for access with thumb)
- shooting or additional movement (lower right for access with thumb)
- options/settings
- inventory or weapon swap buttons

These elements will all need to be included in my mobile HUD iterations and it will be interesting to see how they will change the existing layout that I have designed. I am excited to try this challenge over the next few days!