Video games have never been more popular, especially since the advent of affordable mobile gaming. Revenue for mobile gaming in the US alone is estimated to reach approx. $3.31 billion in 2016, up from 2.03 billion in 2013. With the same source revealing that the mobile gaming market is “the fastest growing segment of the gaming industry worldwide”, there has arguably never been a greater role for icon designers to play in designing game interfaces.

While a lot of general design principles still apply, user interfaces in games have quite a few important differences from OS or web GUIs. Erik Fagerholt and Magnus Lorentzon argue that there are four different types of game interfaces related to both game geometry and narrative. These include diegetic, non-diegetic, spatial, and meta interfaces. These traditionally apply to 3D game worlds, but can just as easily be applied to a 2D game.

Diegetic interfaces exist within the game world, and the player interacts with them directly through the game’s character. Non-diegetic interfaces, on the other hand, are completely external to the game world’s narrative and mechanics and often serve to give players extra information about what’s going on in the game, e.g. health bars or the ‘HUD’. Spatial UI elements exist within the game world external to the game’s narrative, with the express purpose of giving the player – rather than the character – additional information about the environment, a game mechanic, or an objective. Finally, meta elements are those which exist separate to the game world, but communicate something about the narrative to the player – often by manipulating the fourth wall.

As we will see in the examples of Worms 3 and Temple Run 2, icon design can play an important role in the effective functioning of the first three types of in-game GUI – often in combination with one another.

Worms 3

Worms 3 menu
Worms 3 game

The Worms 3 GUI is a great example of an icon-heavy non-diegetic interface. Throughout the main menu and within gameplay itself, Worms 3 relies heavily on the use of icons to allow users to interact with the game.

The icons are simple and refer very literally to the main game mechanics – choosing a weapon, jumping, or firing – but what makes them standout is that they reinforce the game’s visual geometry: the worms can backflip or jump forward in the style described by the icons; when a weapon is used, it will resemble the weapon icon; and the explosions look like, well, the explosion icon. It’s a really simple, straightforward way of integrating icons into the game interface, no text needed.

Temple Run 2

Temple run

Although it may not be as popular as it once was, Temple Run 2 is still a good model for using diegetic icon elements in a really interesting way. Just take a look at the gameplay video below. Gameplay begins when a player ‘takes the idol’ – but, once the idol is tapped by the player, the game character appears from the tunnel and takes it.

Similarly, the golden tokens the player needs to collect are in an easily recognisable icon format, and the trail they form for a player to follow is also an example of effective spatial use of icons. These elements not only make gameplay straightforward and accessible, but serves to quickly immerse the player in the position of the character.

By learning about the different types of ingame interfaces, it’s possible to learn a great deal about the possible applications for icons within games.

As writer Anthony Stonehouse states in a post for Gamastura:

Game UI has a key advantage (or disadvantage from some perspectives) in that players are often engaged with the narrative and/or game mechanic enough for them to learn new interaction patterns, or forgive bad ones. This is likely the reason so many games have bad UI, as testing needs to encompass the core game mechanic while UI is seen as secondary.”

[Photo by chanzj]

Need an Android icon?

Let's improve your sales with an app icon that converts

Get your new Android app icon

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.