top of page

Game Interface Design Theory

Updated: Jan 10, 2021

Designing your game UI and HUD elements can be challenging, how do you actually create a good interface that helps with gameplay and immersion? Human-Computer Interface/Interaction or HCI could be described as the study of how humans interact with computers and computers interact with us. HCI is still an ever-expanding area with new technologies being developed at a rapidly fast pace that allows humans to interact with computers in increasingly innovative ways, But what has this got to do with games? what can you learn or incorporate into your own game development work? This blog post will discuss some of the relevant HCI theories that can be applied to video games design.

Firstly let us start with user psychology and discuss the relevance of this in relation to HCI. Let's start by defining what psychology is.

"Psychology refers to the study of human behaviour and the human mind, or the mental attitude of a group. Your parents will find it hard to understand the psychology of the teenager."

Psychologists use scientific methods to conduct studies of the mind and behaviour of humans, they will formalism theory's and test results to reach conclusions on important findings, but how does this relate to games? We can take aspects of these tests results and apply them, to create user interfaces that seem to just work. When taking into consideration the physiological aspects of the users experience we can create user interfaces that are easy to understand.

The next few sections will cover some of the principles of user interface design, discussing a few key areas such as memory, cognition, reasoning, perception and metaphors.

User Experience (UX): Memory

There are three different types of memory which are sensory, short-term and long term memory. knowing and understand aspects of human memory can greatly improve our ability to design video game menus and HUDs'.

Short-term memory is the capacity for holding but not manipulating, a small amount of information in the mind in an active, readily available state for a short period of time. This is because short-term memory can only last for around 30 seconds and can only ever hold around several pieces of information at a given time.

Destiny Two HUD

The destiny HUD uses minimalist features to communicate to the players' key feedback elements such as health, ammo and ability charge. Thinking about our memory and like many FPS games, this HUD utilises short term memory in an excellent way. This is because there are around several HUD elements on display and these HUD elements will only need to be checked every so often to make the player aware of there ammo count or special ability charge, making use of the 30-second rule within short term memory. For example, most players will never remember there ammo count at a specific part of the game and instead, its something that is checked regularly to ensure their weapons are either close to the reloading point or need reloading.

Long-term memory is essentially our past experiences and knowledge, it is created through encoding and reinforcing short-term memories. The phase or type of memory responsible for the storage of information for an extended period of time.

Unlike destiny's HUD, the world of warcraft HUD is very complex having a large verity of HUD elements on display at a given moment. This type of HUD utilises long term memory, this is because the player needs the cognitive ability to understand, remember and retain the HUD elements, layout and the associated purpose or action of a given HUD element. A player would learn how to use this HUD type by through encoding and reinforcing short-term memories.

Reasoning & Perception

In addition to memory when designing a video game HUD/interface we also must take into account a players reasoning and perception of a given HUD element or design. Reasoning attempts to explain how a user will react to an interface, whereas perception will attempt to explain the way in which a user will regard, understand or interpret a given HUD element or design. There are a set of laws called Gestalt laws of perception that attempt to explain perceptual phenomena in the world around us, as designers we can utilise these laws. In the following section, we will take a look at some of those laws.

Law of Proximity

The Law of Proximity states that objects that are near or 'proximate' to each other tend to be grouped together. It is part of the Gestalt Laws of Perceptual Organisation and Gestalt psychology, which was founded by Max Wertheimer. Wertheimer noted that rapid sequences of events create the illusion of motion.

In the example image, you can see a basic pattern of circle objects that form natural groups using the law of proximity. But how can the law of proximity be applied to a video game HUD/interface?

In the example images of Minecraft you can see how the law of proximity is in use within the crafting menu, elements that appear nearest to each other form a natural grouping of inventory slots that the player can easily distinguish from one another.

Law of Similarity

The Law of Similarity is the gestalt grouping law that states that elements that are similar to each other tend to be perceived as a unified group. Similarity can refer to any number of features, including colour, orientation, size, or indeed motion.

In the example image, you can see how the law of similarity has been applied using shapes, sizes and colours to create what appear to be naturally occurring groups. This can be utilized in games to help players identify quickly different elements that look the same or similar.

In many games, you will come across items that fall into a similar category to one another. Resident Evil is one such game, in the example image you can see flame and acid rounds that are used for the same weapon. They both use the same graphical HUD image but use colour to make a clear differentiation between the two items. This enables the player to distinguish between the two, once they have worked out and recognized the applied colours meaning which is reinforced through the descriptive text. This is a good example of how you can apply the laws of similarity within your HUD menus.

The Law of Continuity

The Law of Continuity is a Gestalt psychology principle that unifies multiple elements on a linear path. The law of continuity holds that points that are connected by straight or curving lines are seen in a way that follows the smoothest path. Rather than seeing separate lines and angles, lines are seen as belonging together.

In the example image, you can see how the two paths differ depending on how the colour is applied to them. In video games, this can be used to show different paths that a player must follow or is currently on.

You can see in the example image the law of continuity is used to help players clearly establish zones of control within civilizations. Many other strategy games make good use of this law to show a verity of different aspects of game-play such as player or unit moment, current path, zones of control and so on. The type of interface being shown in the example is called a Spatial Interface this will be covered in more detail in the next blog about HCI.

2,485 views0 comments


bottom of page