While working on my Senior Capstone I have been doing a lot of work on designing UI. For anyone not familiar with game design lingo UI is short for User Interface, there are many things that can classified as UI but most of the time UI refers to any element that tells the player something about their stats for example: health bars, ammo counters, and speed gauges. There are many types of UI and deciding what type of UI to use depends on what kind of game experience you want the player to have. Designing UI may seem like an easy task but UI is one of the most important ways the player gets feedback so it is important that a game has clear UI that does not clutter up the screen.

Getting Started:

When starting to design UI the first thing I like to do is make a list of all the mechanics that require UI elements, this gives you an idea about how many different UI elements you are going to need. Once I have figured out what UI elements that I am going to need I organize them based on how important they are to player feedback. The image below is the list that I created with my artist for our co-op mech game, we made a list of what each player needed to see and organized it by importance.

When this list is complete I begin thinking about what type of UI will best fit each element. There has been a lot of research done on type of UI and currently it is accepted that there are four types of UI which are: Diegetic, Non-diegetic, Spacial, and Meta. Each of these types of UI are useful for different game play experiences and I will discuss what types of UI work better for different games.

Diegetic:

Diegetic UI is a UI element that is in the game world (the player character would be able to see it) an excellent example of this is in the Dead Space games. The main characters health is displayed on his back so the player can always see it, all the other UI elements are also on the characters armor so the player can always see their stats but the screen is not cluttered by the UI. Diegetic UI works really well in horror games because it doesn’t clutter up the screen giving the player more room to see whats going on around them. Games that have a heavy focus on realism are also good choices for diegetic UI because the UI elements being visible to the character makes sense.

Non-diegetic:

Non-diegetic UI is the most common form of UI and it refers to UI elements that only the player can see. A good example of non-diegetic UI is World of Warcraft. This form of UI is useful in FPS and RPG games since the player has a lot of stats to keep track of. Non-diegetic UI is good for player feedback because the player can always see what their health, ammo, and other stats are at. The drawback of this form of UI is that the screen can get cluttered if there are a lot of UI elements, it is very important to be aware of how much of the screen is devoted to the UI.

Spacial UI:

Spacial UI is a UI element that exists in the game world (like diegetic) but the player’s character does not see it, an example of this is in Left 4 Dead the player characters have outlines around them that can be seen through walls. Spacial UI is commonly used to complement other UI elements, like in Left 4 Dead the players heath, ammo, and equipment is Non-deigetic but the players are outlined using Spacial UI.

Meta:

Meta UI are elements that are not spatially visualized for the player the most common form of meta UI is in the Call of Duty series the player has non-diegetic UI for their ammo and grenades but meta UI for their health (the screen gets covered with more and more blood the closer the player gets to death).

Conclusion:

Once you have decided what form of UI you want and what systems need UI you can begin creating the UI assets. While working on my Senior Capstone I worked with my artist a lot creating UI elements that are easy to read and understand. Don’t feel like you are limited to a simple bar either there are many different ways to make interesting and unique UI elements. Remember that UI readability is the most important aspect of UI design, if the player can look at a UI element and not immediately know what it represents then you have done something wrong. Finally the last piece of advice I have is to not be afraid to combine UI elements from multiple UI types, many games have diegetic elements along with Meta elements. The beauty of game design is that there are no real rules just guidelines so feel free to explore when creating UI elements.