By: Lynda McDonald
Last week Kotaku posted an article about how awful they think the UI (that’s user interface if you don’t know) is in Fallout 4. I don’t necessarily disagree and they are certainly not the first to complain about it. But Bethesda are trying to do something very important with their UI design, something that I think we need to acknowledge at the very least, whether or not we think it is designed well.
Usually, when someone plays a video game the goal is to immerse themselves within the world that the game is set in. One of the bigger issues that designers have to overcome is designing a menu system that does not break the player’s immersion. This is very difficult as any slight design flaw can bring the fact that the player is in the menu to their attention and break their immersion. In a lot of ways designing an effective menu for a video game is similar to laying out a book; when it’s great it means that it becomes invisible to player. Essentially Bethesda what are trying to do is overcome this obstacle by implementing a diegetic menu design.
What does diegetic mean?
In short, an element is diegetic if it usable the in-game character (i.e. if the in-game character can hear/touch/interact with it). In terms of UI design effective examples of this include the Pip-Boy in Fallout 4 or the health bar on the back of Clark’s suite in Dead Space. Diegetic elements help to keep players immersed in the game as they do not force them to break from the narrative like a normal menu might. In Fallout 4, if you attempt to cross a heavily irradiated area with a companion they may comment on the sound of of the geiger counter in the pip boy and, sometimes, other NPCs may ask you about that “fancy watch on your wrist”. This is all evidence that diegetic elements can sometimes become part of the narrative in their own right and this in a great step forward in terms of designing with avoiding breaking player immersion in mind.
The Pip-Boy is by no means a perfect example of a diegetic menu design. It is most likely just a stage in the evolution of these types of menu systems. With that in mind let’s have a quick look with one of kotaku’s main gripes with the Pip-Boy design: the ratio of screen used for the menu vs the “unused” area around the screen. What we can see to the right of the screen is the various knobs and buttons that your character uses to navigate through the menu. In fact, you can see your character’s hand actually use buttons as you flick through the menu. This is an important part of the extension of the player’s immersion while they are in the menu system. As they are looking through a screen they would not normally see while simply running around in the world, it is important from a diegetic design perspective that the player can see their character’s hand navigating through the menu.
Finally there is the use of green text on the screen along with green icons, all on top of a green background that many players also complain about. To understand why the Pip-Boy screen was designed this way we need to understand the word skeuomorphic, which means that a UI element is designed to look like the object that it represents in the real world i.e the Apple IOS bookshelf designed to literally look like a bookshelf. In order to keep the player immersed while using a diegetic menu system it would obviously have to look like something that the character would use in-game. Hence, the old-style screen colours and shape.
What Bethesda are trying to do with the Pip-Boy is important in the evolution of video game design as it is helping us to better understand and develop (and most importantly talk about) diegetic UI design. As crucial as it is that we tell them what we don’t like about it, we also need to acknowledge what they are working towards.