Research into User Interface Design Within Video Games

(23/03/2013) As mentioned in my previous research notes into the Principles of Interaction Design, Interface Design is governed by factors such as visibility, prediction, feedback, learnability and consistency. Even though these elements are key to designing Interactive experiences these principles can differ depending on what Interactive Product you're designing. In the case of a computer game, the experience the user has with the Interface can change drastically depending on a number of various factors.

When we talk about User Interfaces for computer games the term GUI is used, GUI stands for Game User Interface. Basically GUI refers to the medium of which the user communicates with the device (e.g. keyboard, mouse, joystick, etc) and the interface to which the user also interacts with (e.g. maps, inventory, options, etc). It is these types of elements that many game developers consider as the glue that binds the user's input to the actions that happen on-screen, without it the user cannot interact with the game nor can they gain feedback from it.
Depending on what information needs to be displayed at present, GUIs can be used in a number of different forms. Generally these different forms either display a flow of constant information whilst in-game (e.g. health-bars and minimaps); commonly known as the HUD, or provide the user information that is better suited outside of the game environment (e.g. menus and options). However though any type of GUI has the mutual purpose of sending the user the relevant information clearly and quickly whilst able to be disposed of easily when understood.
Because computer games have to consider the element of fiction, the principles of user interface design differ in comparison to more general types of UI Design. The reasoning to this is because there is an actual character in the setting who is an invisible yet key component to the story, much alike a narrator is to a book or film. Therefore, the real unique quality of UI Design for computer games is that there is a varying level that the fiction can be linked to the UI itself. Through the narrative and the environment of the game the UI can either be directly linked to the fiction, partially linked or not even linked at all. To better explain this, game developers can describe the different types of HUD UI as either being Diegetic, Meta, Spatial or Non-Diegetic.

(24/03/2013) A Diegetic User Interface are elements that exist within the geometry and fiction of the game itself. So, instead of game developers choosing to provide information by using a 2D overlay, they're choosing to display information that both the character can interpret within the story and the user that's playing the game. Take the example of Farcry 2, in Farcry 2 there are a number of gadgets that the user can pull up at any given time which take on the roles of a typical HUD interface. So in the case of displaying the time to the user instead of using a constant overlay or switching to a static menu, the character can just bring up his watch and read the time from there. Using a Diegetic interface is an interesting method of enhancing the narrative experience of the character whilst also providing the user an experience that doesn't stray away from realism. In terms of storytelling, having the character interact with the environment whilst also giving the necessary information that the user needs is a great method of creating immersive gameplay, however though it doesn't come without its drawbacks. There are many cases where game developers have tried to use a Diegetic Interface but have actually negatively affected the experience of the user through response times. Games such as Metro 2033 or Fallout 3 use animations to transition the character interacting with the device that gives the user the necessary information, however though if there is a waiting to time to get to that information this can frustrate the user over the course of a long game.
The image to the right is from the 2008 RPG game Fallout 3, it displays a few snapshots of an animation of the character taking the PIP-Boy (Personal Information Processor) towards their eye view. Even though this animation only lasts for half a second, the user is continuously using this device to retrieve information, therefore they have to sit through this animation countless times over the course of an 80 hour game. Instead of immersing the character within the game, using a long response time in favour of functionality can actually alienate the user from the experience of the game itself as they're constantly waiting to make progress through the process of slow moving geometry.
(25/03/2013) Diegetic User Interfaces can also be implemented within games that use a ficticious time period as their narrative setting. For example, FPS games set in the future can use diegetic patterns that represent HUD features (e.g. health and ammo), through narrative objects such as helmets. Take the example of the most recent Syndicate DART game, within Syndicate DART there are a number of UI elements that can all link to the futuristic and technological narrative that belongs to the game istelf. Features such as the highlighting of enemies and showing ammo, serves as information that can help the user whilst also fitting within the storyline as the technology to show them is available to the characters. Other examples of diegetic solutions within a futuristic setting can be the holograms that are used to represent text books in the 2008 game Dead Space. So, instead of breaking the fiction by using a 2D overlay or cutting to a paused menu, Dead Space uses a UI that is explained through the medium of holograms that both the user can interpret and the character ingame can see.
Even though Diegetic UI elements are a powerful tool to immersing the user within the storyline of the game itself, there are times when it can seem innapropriate to implement them. For example, in some cases Diegetic UI elements are illegible within the geometry of the game world, this can be due to the fiction of the storyline not backing up the functionality enough or even the case of obstructing information especially within a 3D setting. Another reason to why it's innapropriate can be the need to break the fiction in order to provide the user information that the character may already know, but the user may not know.

In the cases where Diegetic UI elements cannot fit within the geometry of the game world, developers can still maintain the game's narrative with using elements that sit on the 2D Hub Plane; these are known as Meta elements. One of the most common uses of Meta elements can occur in popular mainstream FPS games such as Call of Duty. Instead of the commonly used number-based health-bar functionality, the developers at Infinity Ward decided to use a 2D Plane to display how hurt the user is through blood spatters/veins on the screen. By looking at the video to the right we can see the progression of how the character is becoming more and more vulnerable whilst being attacked. If he was to carry on being shot, the 2D blood plane would increase and eventually turn into a grey overlay with a tilted camera shot, indicating the character has been killed.

(27/03/2013) Even though it can seem that Meta elements are best suited for First-Person Shooters, there have been other game genres that have adapted that type of User Interface too. By looking at games such as Grand Theft Auto IV which has a third person view, we can see Meta elements through in-game functions such as the mobile phone. When Niko Bellic our protaganist receives a phone call from an NPC, the user is met with a 2D image of the mobile ringing with the option for the user to answer it or decline the call. At first, the interaction of this UI element can be considered diegetic, however because the element appears on the 2D Hub plane it is Meta.
Because Meta is dependant on being linked to the narrative it can be quite difficult to define in non-FPS settings such as racing or sport games. By looking at the image to the right we can see at least 6 UI elements situated on the 2D Hub plane, however only one of these can be strongly linked to the narrative of the game, this is the speedometer in the bottom right corner. Because the speedometer is a feature that you would generally find within a racing car (both functionally and aesthetically in this case), it is highly considered as Meta as both the character within the veichle and the player would interpret this information exactly as portrayed. However, the other 5 UI elements within the HUD may not be considered as closely linked to the narrative as it  can be quite hard to tell whether or not the character would have that exact information as shown in the image.

Diegetic and Meta UI Elements are the glue that is needed into creating immersive gameplay which is heavily intertwined with the narrative, however, not all genres of computer games need or even require the UI to be connected to the storyline. 3D Visual aides is a great example of UI that provides information to the user within the geometry of the gameworld, however aren't to do with the storyline at hand; this is known as a Spatial UI element. (28/03/2013) Because Spacial UI elements break away from the narrative, they should only be used to provide the user information that the character may already be aware of. Take the example of a character trying to get from point A to point B, they may know exactly what path to take, but because the user is unfamiliar to the terrain they don't know. This is the cue for a UI element to be implemented within the geometry of the gameworld showing exactly which direction the user must take in order to achieve their goal or progress within the game. Even though Spatial UI elements are a great method for keeping the immersion of the user, as opposed to screen menus, they still break the fiction of the game. This is why when implementing this type of UI the developers should keep to the fiction of the game as much as possible in order to not break the immersion of the user.

(29/03/2013) Fable 3 is a great example of a third-person game which uses Spatial UI elements in order to describe the direction for the user to go. Instead of breaking the immersion by using a menu-screen, the developers decided to keep to the fiction by tapping into to the magic aesthetic quality of the game with using a "golden trail". By looking at the image to the right the character ingame is met with the trail in order to lead them to the treasure. However, the purpose of this golden trail is not to directly support the storyline of the game but to lead the user to the objective if they're unsure of which path to take. Therefore, the existence of this trail is not registered by the character ingame but by the user in order to provide more information. This type of 3D Visual aide was similarly used in the recent installment in the Bioshock Series, "Bioshock Infinite". If the user was found to be lost within the setting of the gameworld by pressing N on the kayboard a 3D arrow would pop up briefly on the screen to lead the person to their objective. Even though the aesthetic quality doesn't match the fiction of the game, by using a briefly shown arrow not only does it emphasise functionality (pointer of the arrowhead) but it also doesn't break the immersion too much as it's not constantly there. The issue with using a constant visual aide such as the one in Fable 3 is that it can feel particularly uncomfortable if there is something physically and constantly within the gameworld whilst not supporting the character's acknowledgement in the slightest.

Games which don't have a main focus on a storyline may benefit more with Spatial UI elements as there is a larger aesthetic choice to which they can stylise the information for the user. Because the developers don't have any physical characters within a setting, they don't have to cater to the level of fiction and can solely focus on the appearence and functionality of their UI elements. For example, the styling used in racing games such as Forza 4 demonstrate how Spacial elements can be beautiful pieces solely put within the geometry of the game. By looking at the image above we can see a range of simple interface icons and clean font types that match perfectly with the rich 3D qualities of the game. With using such a clean and simple style not only does it serve its purpose to relay information to the user, but it can still allow enough room to show off the environment without being too cluttered.

(01/04/2013) Last but not least, if the UI has no place within the gameworld and no actual correlation to the storyline itself, then this type of user interface is known as Non-Diegetic. When we talk about Non-Diegetic elements we can specifically refer to the majority of interface elements used in previous generations of computer games. Health bars, mini-maps, ammo stats and weapon selections are all prime examples of Non-Diegetic elements used over the past generations. The main aspect to remember about this type of user interface is that it's not renedered within the gameworld itself and that it is only visible/audible to the user playing the actual game. 

What I believe to be the key purpose of Non-Diegetic elements is that they serve solely for the interactive experience of the user playing the game. Aspects such as functionality and UX (User experience), I find is a lot more important to focus on initially before trying to intertwine user elements with the fiction. Take the example of the 2007 MMORPG Runescape, even though its interface has been stylised to the narrative of the game the majority of user elements are still Non-Diegetic. By looking at the image to the right we can see a user interface that has been completely rendered on the 2D plane and outside of the gameworld. The only elements to what I can see are rendered within the gameworld are health-bars and hitpoints that have been spatially placed over the characters in the background. Within this image there are no elements that are Meta or Diegetic, this could be due to the fact that the game is solely based on experiences between online players and a story that is mainly expressed through NPCs and text onscreen. If this type of game was to be a single-player experience then I could understand the need to implement more storylike user elements (e.g. instead of the backpack being displayed in a grid, it could be shown within a bag). However, because the game is based on experiences with real life friends/enemies I'm guessing the developers needed to focus more on functionality in order for the user to react quicker with other online player actions. Take the example of another user trying to kill you, it would be a poor experience if you had to fiddle around with opening your backpack whilst trying to get items to fight them back with, rather than actually fighting them back in the first place.
The fact that Non-Diegetic elements could be best suited for online-gameplay doesn't mean that they're always implemented within them. Games such as Anno 2070 do adopt Non-Diegetic elements however it can still be both single player and multiplayer. (03/04/2013) Anno 2070 uses a rich 3D experience accompanied with a minimalist user inteface that has both bold icons and simple type. The reason for this interface to be designed in such a way is because games such as Anno 2070 are heavily based on functions and dynamic game-changing actions. This genre of gaming can be typically known as God-games or RTS', usually the interfaces are non-diegetic because effectively the user is treated as the protagonist. They control a lot with what happens within the game therefore it only makes sense if the interface was non-diegetic because of the amount of actions the user will be performing that can change the gameworld drastically.

Earlier it was mentioned that many games over the past generations adopted Non-Diegetic interface elements; this was probably due to the fact that when developing games a lot of mathmatical equations were involved and room for fiction was quite limited. The image to the right is a screenshot from the popular 1992 game Wolfenstein 3D. The interface it uses is nearly completely non-diegetic as most of the information is only displayed to the user in quantative data. For example intead of the screen turning red if the user was shot, the health percentage would decrease as the user receives damage. This is how a lot of old game interfaces used to look before the technology was available to create more immersive gameplay within the geometry of the gameworld.

(27/04/2013) Overall we have seen how far Game Designers consider the element of fiction within their GUIs. Whether the UI is included within the geometry of the gameworld or lying on the 2D HUB plane and whether it can only be seen by the user playing the game or the character too. Even though some may consider that the more Diegetic elements that are involved strengthens the connection between the user and player, others still look towards the neccesity of Non-Diegetic elements as their role is to serve functionality above all. This is where we look towards the principles of developing a GUI.
When designing the UI for a video game there is always a pull between what would be easier to use and what would be better for the story. If we want to create either a mostly Diegetic or Non-Diegetic User Interface we must understand what each one does for the game itself. Effectively a Diegetic user interface brings the user closer to the game by pulling them further away from reality, whilst a Non-Diegetic user interface does the opposite by grounding them and reinforcing what we know as the “fourth wall”. So, why would we not want the user to be immersed within our game? Well, if we were to remove non-diegetic elements from game-design “law” then it would make it easier for the developer to make the user lose themself in the game via immersion. However making an element of gameplay experience more diegetic comes at the cost of usability, and thus by having a negative effect by pulling the user further from the experience. Take the example of the Fallout 3 animation I mentioned earlier, pulling up your arm with the PIP-Boy within the game is actually more difficult than it would be in real life. The specific problem in this case is that a Diegetic transition has been chosen over functionality and therefore making something mundane and repetitive more time-consuming. On the flip side of the coin though, it may not as be entertaining or memorable for the user to be taken to an inventory screen outside of the game-world, especially as a device such as the PIP-Boy has such a high popularity within the gaming community. On the whole though, Diegesis is something that all developers should consider in the course of making a game, whether a single element would be better suited with the narrative or separate from the game world itself. By enforcing this balance between immersion and usability, game designers can ensure that their game will be both entertaining storywise and easily usable when released.
The balance between Diegesis can also intertwine with one of the first basic principles of display-design; never sacrifice the appearence of an interface in placement over efficient information delivery. How the screen looks in terms of colours, icons and layout shouldn't be what a UI designer should be focussed on when they first develop an interface. By figuring out what decision the user will have to make at each point within a certain task the designer can focus on what information is required to be shown on the screen when the decision is made. So instead of creating a pretty layout for your game first-hand, by making the basic prototype with simple shapes and patterns a designer can really get down the foundation and structure needed for the interface before any stylisation. It is this basic principle which can save a designer from making further errors. For example, a common design error is to have a new window/dialog open for every aspect of a task, this can lead to a very cluttered display and the possible consequence of making cluttered procedures. A better approach to sending information is by having it always visible onscreen as eye movements are a lot more faster than waiting and bringing up new windows. By having a well-planned layout of all possible decisions before appearance, it is actually possible to present a lot more information/controls than initially realised.

(02/04/2013) Information and controls are also dependant on what form they're delivered in on screen, generally this can be either with icons or just plain simple words. The current trend with Graphical User Interfaces is to use an abundance of nifty icons instead of words, this is due to the fact that icons are generally more desirable to click as they have a dense surface area and are purposefully compact. Even though the comparison, words, can be quite long and thin which often provides a small and harder to interpret target, they can still be more useful than icons. Often enough Icons can be quite arbitrary and meaningless if their item concept is abstract and doesn't fit in with the general etiquette of interactive media products. A recent enough example of this can be the 2013 Simcity game, with the image above we can see a whole plethora of icons used to represent controls such as building categories and data maps. The issue here though (especially with the data map) is that the user would have to play the game for a long time with enough trial and error to understand the icons, why should we make the user memorise a meaningless symbol that may not even be used within any other interactive product? This is why icons tend to work best when closely resembled with other familiar objects that are used everyday physically or within other interactive products, for example a brush icon within a image manipulation program can be easily associated with a paint brush.
The principles of developing a GUI, especially for games, is that they will change depending on the genre of the game. Below are a set of annotated images displaying the general interface elements used within various genres.
Quite a few of the aspects that make an interface bad can be found in my research into the principles of Interaction Design, here I go into more detail about inconsistency with interfaces that can be unresponsive and contain too much or too little information. Additionally, I also mention the usage of typography, colour and styles that make an interface look bad, click here for the link to the blog.

Common Interface Layouts For Video Games
(Not all Interface Elements listed)

First Person Shooter

- The focus point is centered, your gun will always shoot towards it.

- Health generally on the left and Ammo on the right, other related elements are usually on the edge of the screen

- Semi-Transparent, Minimal interface used in order not to clutter gameplay.

- Other inventory overlays generally show up when activated (e.g. scrolling shows the weapon choices to the side of the screen).

- The general layout of FPS games, people who play this genre expect this typical interface structure.

3rd Person

- Requires precise targeting due to player movement dependency.




- Health top-left, actions top-right, other information bottom-left and Mini-map bottom right. (Common layout for 3rd Person, e.g. Zelda)






God-games/Simulation/MMORPG

- Dealing with various different statistics and objects

- The majority of the interface focuses on the management, this is easily distinguished from the action of the game.

- These types of games tend to have the biggest and most complex interfaces.