hud total

User interface in the videogame gameplay

Hello friends. Hope you are doing great while the spring… springs (Okay, that was awkward). Anyway we are back today with you with an interesting subject for our column Interactive Project’s “How to’s”. We would like to have a bit of discussion about User Interfaces!

But, ehi wait, we are not talking about the nice menus your software have, but we want to talk about what you actually see in the videogame while playing: gameplay interface!

It is lovely to play a game where immersion is optimized, and what is crucial is to try to understand what works and what not… But let’s make a step back. When we tried to confront with the subject matter we found nothing but chaos.

So we asked Simone Serafini to step up and take the lead and illuminate us in this dark matter.

Simone Serafini, UX/UI designer, with a bachelor from “European Institute of Design”, has great experience on web graphics and development.

He led us into the world of gameplay interface and explained us that there are four ways to integrate “extra information” in the screen of the player during gameplay. Thus we decided to dedicate today’s post to understanding which are those chances (don’t worry we will come back in a future post how to implement what in which cases)*:

  • Meta: this interfaces give back something which is happening in the game and the character see or feels it, but the player do not see it in the gameplay. These effects are usually rendered together with a sound which contributes at explaining what is going on and let the player react to the situation. Imagine you driving a car in the game and, at a certain point it starts raining, the water drops appearing on the screen are the perfect representation of a meta interface. The drops have the objective of letting the player understand that wheels grip to the asphalt will be reduced because of the changes of the weather in the game.

hud total

  • Spatial: Spatial interfaces are exactly the opposite of meta ones. If the game was real life these elements would not exist at all. In this case the character is unaware of the existence of the interface but is the player who sees them in 3D. The use of this interface is a kind of “reminder” or hint for the player who gets to know existence of objects or actions to perform. A classical example is a placeholder remembering where a gun was left by an enemy or where the save point is.


  • Non-diegetic: this one is an easy one the non diegetic interface are all the 2 D representation which are usually seen on the screen. Whether is a map, a screen remembering the team formation, the bullets left, or the life indicator. The peculiarity of these interfaces is that the character of the game is not aware of them and, at the same time they do not appear as object inside the game.


  • Diegetic: also know as “here comes the cool” (just kidding), these elements have it all the player sees them only because they exist in the game and the character is actually able to visualize them. Better, the player is not able to visualize and interact with these interfaces if the character is not using them. Examples are all over, from maps, to gps position, to clocks and lamps, the examples are limited only by the creativity of the designers.


It is not always easy to integrate the right mix of interfaces in the game, sometimes more complex (read diegetic only) does not mean more successful, sometimes keeping it simple is optimal for the game and more effective. It is always better study it and ask for consumer’s feedback.

Are you looking for support on your videogame’s graphics and on publishing? Write us here!

And stay tuned for next posts on Interactive Project’s Blog columns “How to’s”.



*Note: when we talk about player we intend the gamer behind the videogame, when we deal with character we mean the being videogamer is controlling.

About Interactive Project

Interactive Project develops and publishes mobile and browser-based game, with focus on motor-sports and racing titles. The company is also engaged in assisting indie developers in the finalization and publishing of their games, through the project “Indie’s Way”, and it collaborates with third party companies on ad hoc development of gamification apps and advergames.

Our games are developed with extreme cure to graphics, design and game-play experience, stressing the social and multiplayer aspects. Each game is a modular product, opening the possibility to re-use the technology to boost the development of new games, titles and gamification apps.

19. June 2015 by Interactive Project
Categories: How to's | Leave a comment