How does UI/UX work in video games?

Sometimes, not noticing something is a sign that it’s working well. This is the case for User Interface (UI) and User Experience (UX) elements in a game, app, or website. Your seamless and simple interaction as a user is made possible by thoughtful design, in everything from menu screens to markers, to tooltips. We take a look behind the curtain together with the Liquid Swords UI/UX team for a better understanding of how these elements affect the games you love.

Håkan Pettersson: My name is Håkan Pettersson, and I’ve been a UX Designer at Liquid Swords for almost two years. Before I joined this studio, I spent 15 years at Dice in different parts of the company, from heading up a marketing group to working as a developer. Now, I split my time between art, design, and implementation.

Viktor Elg: I’m Viktor Elg, and I have been here almost a year now, and half of that was an internship. I was lucky enough to get hired after that. Since I’m fresh out of school, this Junior UX Designer role is my first at a gaming studio.

Viktor: Not necessarily, but game development education is something that's become much more nuanced in recent years.

Håkan: It might have existed when I started out, but most of my colleagues back then came from the demoscene or started out by sitting with their home computers, basically hacking.

Viktor: Mainly, I work in Figma to mock up scenes. I’ll also use Unreal Engine 5 to look at the set in context, and I work in Photoshop for some areas as well.

Håkan: Same here, and I also use Adobe XD and Illustrator. Any program that helps us move forward, really. Sometimes, it ends up being quicker to prototype something directly in Unreal. These programs are just the ones we’re comfortable with, you could use anything in this category.

Håkan: We identify and split tasks evenly between us. We’re both very self-sufficient and self-driven, so we tend to put our headphones on and start working. But we overlap when it’s time for feedback, we send it back and forth to each other. Then, we open up the process to collaborate with code and design.

Viktor: In my role, Håkan is also a sort of mentor, since I’m new to the industry. So I’m very thankful that our ways of working align.

Viktor: UX stands for user experience, and UI stands for user interface. For me, UI is more the art aspect, how the game looks, and UX is how it functions. How many clicks do I have to do to get from point a to point b? Is it accessible? Accessibility is often more prominent in UX work for apps and other areas of tech, but a lot of people don’t realize how much goes into game development as well.

Håkan: You can’t play a game without UI. You wouldn’t even be able to start it. You need UI to understand the gameplay; the more complex games become, the more UI is required. And I say this as someone who isn’t a particularly big fan of UI. I would prefer not to have any. That would be the best UX, but very few games are able to pull that off.

Viktor: I can’t think of any games without any UI. But I think Dead Space is one of the prime examples of integrating UI into the actual world. There are no bars on the side of the screen or anything like that.

Your health bar is a part of the character’s spacesuit, the map is this hologram, and everything is in the world is purposeful.

Håkan: I actually worked on Mirror’s Edge back in 2008 that had minimal UI. There was a little dot in the center of the screen, and we only added it because players got motion sickness without it. The game is basically a parkour simulator with a lot of motion and a first-person perspective. When it was being playtested, the testers got motion sickness because of the very bouncy camera coupled with their eyes drifting all over the screen. Adding that dot made people focus on the center of the screen and removed the sick feeling. We see a similar effect in a lot of VR games.

Viktor: The way VR has worked around it is by using a joystick to teleport instead of actually walking. So when you push the trigger forward, you get this kind of indicator that shows you where you would teleport. It does solve the issue, but it can also break the immersion since that isn’t how movement works in real life. I wish it did, though! Maybe in the future.

Håkan: UI is not necessarily a bad thing, but the thing I guess we both want to avoid is that the player plays the UI instead of the game. The UI is supposed to support the player but not give everything away.

Håkan: We work closely with the Game Design Team. They tend to want more UI, to want to show all the mechanics that are under the hood, which is understandable. But I think we have a good collaboration at Liquid Swords, they make requests, not demands. They’ll come to us with a problem that needs to be explained, and then we look at what level it needs, and then we all give feedback. It’s a great collaborative process.

Let’s use NPCs as an example. If you’re able to talk to every single NPC in a game, you need to find a balance for highlighting the important NPCs in the game. When you can talk to everyone, the main mission gets obscured. You can't just walk around and target every single NPC and listen to what they have to say. You have to figure out how to signal that this is an important NPC. For this type of project, we would collaborate with both Game Design and Art.

Our collaboration with the Art Team involves both the game world and the 2D space, which is everything on top of the game, such as Settings and Main Menu. Everything in the game needs to be aligned, the feeling should never change.

Viktor: Don’t rely on UI too much for tutorials. It’s much easier to have a big box of text that says “This is how you do this” appear on the screen instead of integrating it into the tutorial. It takes you out of the game before you have a chance to get into it, especially if that box pauses the gameplay. For third-person adventure games, for example, I find a best practice tutorial that allows the player to learn directly from the world. A great example of this is the tutorial in Half-Life 2. When you enter a room right after getting the gravity gun, you see a dead zombie with a sawblade in its stomach. As soon as you use the gravity gun to grab the sawblade, another zombie appears in the next room, and instinctively, you know to shoot the sawblade to kill it. And so it goes: you learn everything you need to know from the environment without any UI elements. All you need is your instincts, which is how it should be.

Håkan: Don’t be afraid of collaboration. We’ve got a solid method at Liquid Swords since there is overlap between all of the disciplines. The UI/UX work is involved from the very creation of a feature or design in the game. In the past, the disciplines have been more separated, and our team didn’t get the feature until the game design was finished it was our responsibility to solve any problems with it, which is especially tricky if the design is weak from the start and requires more UI just to explain the feature.

Håkan: Go into a feature with the mindset that less is more. It can be a lot of fun to add stuff and show all the existing information, but in most cases, that isn’t beneficial for the player. It just makes their experience more cluttered.

Thank you, Håkan and Viktor, for helping us put UI and UX on the menu!

The next time you play a game, stop and think about how the UI is weaved through the whole experience. From loading up the start menu, to the health packet you grabbed in the last second, to the NPC you knew to strike up a conversation with – each element has been carefully curated to help you focus on what really matters: playing a great game.

If you want to learn more about the work Liquid Swords is doing, read our interview with the Audio Team and one of our Technical Artists!