Sprite Stories: Keith

Category: careers

February 8, 2023
Sprite Stories: Keith

UX / UI design for games: the gamer’s sixth sense.

Person smiling at camera for portrait photo to share their games industry story. Person’s photos sits left of a white and grey pixel backdrop which displays name, role and the Firesprite logo in red and an article pull quote in black text.

I felt really inspired by my colleague Jon’s recent article in which he shared his indirect journey into game design and some insightful advice for aspiring designers. So, I thought I’d write down my thoughts about my own particular field in the games industry: User Experience and User Interface design.

Like Jon, my route into the games industry was a convoluted one. When I graduated from Uni, I was already 24, having not really known what I wanted to do when I was younger and messing up my A Levels in the process. After I graduated, I did a merry-go-round of jobs including being a Complaints Manager for American Express, and an in-house designer for a manufacturing firm that made security systems. It’s only because I knew someone who worked at a local games studio that I even considered it a viable career, “You mean I could do design for games!?”

And here I am now, almost twenty years after graduating, Lead UI Artist, working with some of the most talented people I’ve ever met on AAA games. Pinch me.

But on to those UI/UX opinions:

Some say UI/UX, but the words of a previous boss ring in my ears; UX always comes before UI. You need to fully understand what you’re making before you can add layers of beautiful style to that system. UX is fundamental to how successful the UI for a game will be.

There are good arguments for UX and UI design being two separate disciplines. Certainly, there is still a lot of misunderstanding on what the difference actually is. UX design is all about figuring out how things should work; how do you open the player’s inventory, what will happen when you do? Will it be an overlay in the game world or a full screen menu? Will there just be a list of usable items? Or will there be a crafting function within it? How do players combine items? There’s a lot to think about, and that’s just one tiny feature of a game.

UX is all about controlling the contents of Pandora’s Box before it’s opened. Working out all of these things before the code team start building these systems – we can’t expect coders to rewrite a perfectly good system just because we want to change something late in the day. Not to mention, constant reworks can get very expensive!

UX sits alongside a lot of the design team’s work. In fact, many game designers I know would make excellent UX designers. But a good understanding of visual communication and screen layout is where graphic designers and UI artists excel. Which, I suppose, is why so many UI artists get into UX design.

It’s counter intuitive, but UX’s job is to go unnoticed. If it’s successful it provides a seamless, intuitive experience for players to understand where they are in a game, what’s expected of them, and how they achieve those goals.

Given my history in complaints management, I know that people are more likely to comment on what is causing friction or a barrier to their success, rather than what they like or what works well. So even if a game’s art style is loud and bold, the inputs and navigation should still offer a path of least resistance to success. ‘Success’ ranges from interacting with a menu, performing an action, or killing a Boss. If you’d like to read more on UX, Laws of UX is a very good place to start, written about web design, it’s still compatible with games development.

UI for games’ main function is to give the player those senses lacking from the detachment between sofa and screen. Without UI the player can only go on what they can see through a small ‘window’, hear through their speaker set-up, and in some part feel with haptics.

There are far more than the traditional ‘five senses’ we’re taught about in school. What about heat? It’s not touch; I don’t need to touch a kettle to know it has boiled, I can feel the heat coming from it. And how about balance? I’m not touching anything, but I know when I’m about to fall.

As a player, it is impossible to feel the things your character is going through. UI gives direction when it’s needed, draws attention to important elements for success. It warns of failure or danger. And lets the player ‘see’ their character’s other senses; pain, heat, cold, breath, balance, scent, hunger, thirst, exhaustion…

Another important role of UI is to reduce the player’s need to remember things. This is often referred to as cognitive load. Instead of players having to keep track of multiple types of resources, the UI keeps track of it for them. This allows the player to focus on more important things, such as available cover, or enemy movement.

UI’s aim should always be the most elegant, appropriate vehicle for delivering pertinent information to the player in an intuitive way, being unobtrusive to the player’s success, and sensitive to the game’s genre and artistic vision.

Sometimes that should be a big flashy HUD, other times an almost non-existent ghost. What do I mean about appropriate vehicle? There are many types of UI, the HUD of old has evolved from a purely player-facing information board. It is now a more nuanced system capable of informing the player of all kinds of things. So, there are a variety of ways a designer can convey messages to players.

Let’s talk about those types of UI. The first is Non-Spatial UI. Think of your classic health bars in the corner of the screen. They are a screen-space element. There just to let the player know about a specific element that is important: proximity to death. Some titles do this nicely by only showing those bars when they were depleting. That’s what I mean by pertinent information: health is only relevant when you’re losing it.

Next is Spatial UI. These are interface elements that are displayed in the game world for the player’s benefit. Button prompts on a ledge instruct a player how to climb. Arrows and chevrons on a racetrack direct players around difficult-to-see corners. These things are placed in the game world for the player’s benefit only.

Diegetic UI is amazing. It can really challenge what a player may expect UI to be. Diegetic UI exists in the game world. The player and the character being controlled can see this UI. Amazing examples are when UI is seen in the world for example as holographic projections that the character is actually using. Another great example is when information is presented within terminals and mini-puzzles. Meta UI is information delivered to players that doesn’t really fit in the above 3 categories. A good example of this is the ‘Red Mist’ vignette that occurs when players are taking damage. Or the desaturation of the screen when a character is about to run out of oxygen.

I’ve mentioned the importance of UI being unobtrusive too. That does not necessarily mean almost non-existent. In recent years, there has been a move towards sparse HUDs. Games using less UI to help drive immersion. However, if a player has to constantly wrack their memory for small details, pausing the game to check a Wiki site of enemy weaknesses, or they do not possess the ability to sense what’s happening in the game, then less UI becomes a blocker of immersion. Too little information can be as disruptive as too much.

A User Interface is a powerful information delivery system. It gives game developers countless options to help gamers feel part of the universe they are playing in. Using UI that is appropriate to a game’s genre and artistic vision gives a player a sixth sense within that world. Much like a rocket getting into orbit because of gravity not despite it, players need good UI to become immersed in a game.