UX/UI

Introduction

One of the key elements that can make or break a game is the user experience (UX) and interface (UI). UX encompasses everything from the overall flow and feel of the game to the way that individual mechanics and features are presented to the player.

Meanwhile, the interface includes all of the menus, buttons, and other elements that player use to interact with the game. Both of these elements play a critical role in shaping the player's experience and can have a major impact on the game's success. In this article I'm exploring some interesting considerations that go into designing effective and interesting UX and interface in games, with the ones I've been part of developing.

Diegesis

One way or another, every game needs to deliver status information to the player. One common way of doing this is to display 2D elements (texts, numbers, bars, etc.) in screen space. Other techniques can be integrating information in the environ-ment, having it actually present in the world.

In The Legend of Zelda: Breath of the Wild, the player can assume the in-game time by location of the sun. Another example, in Dead Space, Isac's health bar is located on his back. Integrating the information with the world to deliver information to the player, making them diegetic, can add tons of immersion to the game.

Decompression and its user experience and interface

For our 7th project we concepted several ways of integrating the information the player would need in an FPS into the world.

First approach was inspired by Dead Space, displaying the player's health and stamina on the forearms and an indicator on the wielded weapon for it's fire rate along with a laser sight to aim with. Technically, in our engine ISTE, we have most of the necessities set up to be able to implement this in a game. Though, with the short timeframe to deliver a game we went back to the drawing board to simplify.

A player needs to be able to navigate some kind of menu, and every game project at The Game Assembly requires an in-game menu. We interpreted it literally; with this concept to the left.

The main focus is leaning towards the same direction as for status information - integrating it with the world - using the left forearm to pop up a display, covering a large part in the center of the viewport.

Results - the experience matters

Iterating on the concept arts, keeping the mindset on the immersion with diegetic elements, we took advantage of the fact that the player is wearing a helmet with visor. Below are the results, the heads-up display and menu in Decompression.

The menu we developed for Decompression was somewhat unconventional. It's not common to see similar menus in video games. We predicted it would be a challenge to make it feel right and fit into the game. However, if I do say so myself, we managed to achieve a pretty good result.

In collaboration with Emil Carlsson as artist, whose work can be found on Artstation, we used mesh effects to create the menu. The heads-up display is a composition of sprites in screen space. Logic and rendering are implemented using entity component systems, which can be read about in Lukas Bergenstråle's article on ECS-B. To make life easier, I made both the menu and HUD editable in ISTE's level editor.

The Charm of Traditional

Let's put the all-in immersive user experience aside for now. Menus and other information given to the player do not always have to be diegetic, and in many cases, nor should they be. What I would call a traditional menu is straight up a title, some buttons, maybe a slider or two, all on top of a background image. They don't need to fit in immersively - it's a game, after all.

The traditional menu has its charm with being straightforward, behaves as a menu is expected to behave, and it rarely requires the user to learn something new to understand or use it. The same goes for a heads-up display. There can be icons well designed to instantly inform the player what this element is; a couple of hearts, for example, tiled up next to each other - that is your health.

Spite: Infected Grounds and its user experience and interface

For our 6th project, where we made a Diablo clone, we were inspired by how they display status information in-game. Here's a video showing our attempt at a similar heads-up display, where status information are all gathered together and docked bottom part of the screen.

We went for a simple and traditional approach for menus. Starting the game takes you to a main menu where you can enter the world directly or navigate in and out of sub-menus, such as level selection and settings.

All elements in the heads-up display and menu are editable with a built-in tool in our editor, developed to meet our needs for this project. An artist can add images, buttons, and text, and then tweak all the necessary properties, which are then serialized to a file when saved.

Buttons have an option to set a type, which is simply a function mapped to call when the button is clicked.
Images, similar to buttons with mapped functions, can have a pre-defined type listed as "gameplay images". The system that processes the logic treats these accordingly. For example, a player's ability displays the cooldown, activates an emitter to spawn particles, or tints the image to indicate insufficient power resources to use it.

In collaboration with Malin Michálek as artist (check out her Artstation) who also used the tool to build the heads-up display and menus in Spite: Infected Grounds.

Other Projects

I've been part of the UX/UI task force in every game project I've participated in at The Game Assembly. Even though each game's UI system has been built upon the previous game's functionalities, every game has required its own solution and system to match up with the game's genre and story. Another heads-up display I'm proud of is the one in Ignite, you can read about it here.

Conclusion

As a programmer, developing systems for UX/UI in games, one of the biggest challenges I've faced is the balance between functionality and aesthetics. It can be tempting to focus solely on one of the aspects, resulting in the other falling behind later on. To tackle this, I've worked iteratively with the team throughout the production and have had external playtesters give feedback, finding out what would suit the game and deliver the experience we aim to achieve.