# data[].attributes.body
background story and worldview design

# data[].attributes.body
UI design， special, color

# data[].attributes.body
Copyright:

P-studio. (2016). Persona 5 [Video game].JP:Atlus.

Rockstar Games. (2018). Red Dead Redemption 2 [Video game]. Rockstar Games.

CD Projekt. (2015). The Witcher 3: Wild Hunt [Video game]. CD Projekt Red.

Smith, M. Games with the best user interfaces in the biz, Game Rant. (Game Rant, 10 September 2021) Available at: <https://gamerant.com/games-best-ui/ > (Accessed: 06 May 2024).

Xuemeng, Y. A Reflection on Game UI Design. (NYSE: ZH, 11 June 2019) Available at:  <https://zhuanlan.zhihu.com/p/68641437 > (Accessed: 06 May 2024).

What is UI in Games? | All about User Interface (2023) Available at: What is UI in Games? | All about User Interface (polydin.com) (Accessed: 06 May 2024).

What is UI design? (no date) Available at: What Is UI Design? | Miro (Accessed: 06 May 2024).

# data[].attributes.attachment_link.readable_text
When done correctly, User Interfaces, or UI, go unnoticed. Or at least, if not overlooked, the work done behind their implementation goes largely unrecognized. UI is a bridge between the gameplay and the player, and without it (or with bad UI), any given gaming experience can leave players totally in the dark.

RELATED: The Best Ways To Use Games In Language Learning

That said, stylish or funky UI design can deliver to players empowerment, clarity, and that tingly feeling whenever someone pushes a big red button or flips an electrified switch. Whether for immersion, good information delivery, or just being iconic, these games have UI handled.

This UI is so durable it would still work after being hit with an atomic bomb: the older Fallout perfectly captures a sense of "skeuomorphism," which means experiencing an object (or, in this case, menus) that retains an essential essence from the original. Old-world tech, built to withstand the bomb, rusted over with time and damage, complete with thick, pressable buttons all over the screen.

Since 's 3D iterations, the series has been treating players to an immersive Pip-boy-based UI system, in which the character navigates the game's menu from their wrist device. The Pip-boy is clunky and weighty, as described in the lore, but it also feels stripped down enough for ease of access, ensuring that the player never feels too lost in clunky item lists.

Ruffling parchment, the clang of rusty iron on smooth steel, the Dishonored menu UI owes as much to its immersion-minded sound designers as it does its visual UI designers. That aside, the Dishonoredseries is an excellent example of good user experience (UX), as everything is clean reading and easy on the eye.

Shattered glass, stylish gashes, and blood blots speckle the screen, but the cohesive art style helps hold it all together and never loses the player on their journey around the game's options or power-ups. It perfectly captures the feel of a soot-soaked world. Even the pause menu is a work of art in itself, blending the dynamism of cloak-and-dagger gameplay with the weightiness of the setting.

While other entries in the series have hardly shied away from trying out something new, The Legend of Zelda's first 3D outing pulled a lot of innovative tricks in its day, including inventing brand-new ways to communicate its controls to the player seamlessly. From the all-important, context-specific action button to the camera lock-on (or Z-targeting system).

RELATED: Underrated Nintendo Games That You Should Play

Originally, the team wanted Navi to replace the camera lock-on system, but through playtesting, they realized that it wasn't always clear what Link was looking at, so they added the classic four-arrow pointer. The equipment screen, too, seems to be screaming excitement about being set in 3D, being set in the internal space of a cube, making the player feel as though they are in a portable armory. And who could forget the iconic play-your-own music mechanic? Ocarina of Time wrote, printed, and bound the UI rule book single-handedly.

Glitzy, picaresque, and stunning. Full of charm and character, Persona 5's anime and pop-inspired interface design captures the core themes of the game brilliantly and is a work of art itself. Like all works of art, digesting it can also be challenging.

Newcomers to Atlus games (or newcomers to the Persona series) may find the fifth entry's UI design to be a bit much, even a little UX-unfriendly. But once the player gets used to the high style and punchy chic, every other dialogue box or menu will look practically bland by comparison.

Asking players to keep track of every single human need, relationship, skill, attribute, and more sounds like a lot. Asking them to do that for a whole family of simulated people seems insane. Luckily, Maxis took what could have been a cluster-plum of information and laid it out in a way that wasn't just accessible, but easy on the eye.

Each interaction available in is also laid out in a brilliantly thought-out wheel to avoid giving one choice (the one at the top) more weight than any of the others. The buy/build menu is a delight to behold with each item cleverly sorted into a variety of common-sense categories with recognizable symbols, all while leaving the canvas highly visible so the player can get building their dream home.

The core members of the team behind Disco Elysium were formed out of an artist collective, so it's no wonder that the menus and game-to-player information are so gorgeous. However, the game did something very interesting with the UI responsible for delivering its core gameplay: its dialogue window.

RELATED: Indie Games Where The Story Can Only Be Experienced Once

Players with a high, real-life Perception skill might notice that the window shares a resemblance to X / Twitter's thread display format. Lead designer Robert Kurvitz went on the record saying that dialogue was purposely designed to resemble social media with all its eyeball-grabbing bells and whistles. As a result, the right-hand-side text looks punchier and crisper than if it took a more traditional bottom-middle position.

At first glance, this indie space crafter might look as though it did away with UI entirely, besides a few contextual prompts. However, Astroneer cleverly weaves all the information a player needs to know about (health, energy, oxygen, etc.) either onto the player or in the player's pack, ensuring that the player's eyes are always on the funky and crunchy environment of Teheran and beyond.

When the player opens up their pack or gear, they are presented with UI mapped directly onto their in-game equipment. Everything, from crafting to exploration, is indicated through autos-snapping lines or unobtrusive bars, making for an incredibly immersive excursion into the alien landscape.

Besides excellent environmental storytelling and groundbreaking corpse-dismembering mechanics, is probably the game to jump into the heads of gamers when they think of effective UI. Whereas other games have put an ammo count on guns before or displayed health in an immersive way, pulls it all off from a third-person perspective.

Even the map is projected directly ahead of Isaac as he engineers his way through the Ishimura (or, more accurately, through piles of undead). Without such an ingenious game-to-player language, Dead Space would have likely lost a great deal of the atmospheric horror drip that it became famous for.

The minimalist stylings of Assassin's Creed's UI, which leaves most of the screen's real estate for the beautiful vistas found in the game, is no accident. Neither is the fact that all the UI can be customized (switched off) in the menu. This is because the game was apparently meant to be played without any UI at all, and instead relied on the intuitive control schemes. Control UI and the minimap were likely late features in development.

RELATED: Most Memorable Moments From The Assassin's Creed Franchise

Playing Assassin's Creed (especially the first game) is viable (if not a little tricky to get used to) without any of its UI. Altair will signal the player's chosen weapon-button press with a quick animation, and climbing to the top of buildings will allow the player to map the city with their own eyes rather than provide a GPS-like overview in the mini-map. Later games would drop this HUD-less approach but were still artful with their menu and overlay designs.

Being opposed to sleek, flat UI design, the Hearthstone developers wanted something that might appear in reality with a "feel over efficiency" mentality. They set out to capture the excitement felt when opening a pack of cards in real life. Bounciness and dynamic tilting movement, something that felt physical-feeling, magical, charming, and ultimately "constructed."

Despite recent store additions, Hearthstonefeels very much as if it were a handcrafted game made by a master of the "craft." It's less about "words and numbers" with an emphasis on bright, popping animations with lots of non-match objects to fidget with.

MORE: Games With The Most Impressive Graphics, Ranked

# data[].attributes.attachment_link.title
Games With The Best User Interfaces In The Biz

# data[].attributes.attachment_link.description
A well-executed UI can often be a tricky thing to pull off. Luckily, these games show how it's done.

# data[].attributes.attachment_link.title
What is UI in Games? | All about User Interface

# data[].attributes.attachment_link.description
Explore the dynamic world of UI in games. From immersive designs to seamless interactions, discover the key to exceptional gaming experiences.

# data[].attributes.attachment_link.readable_text
But the game design industry can look unapproachable and the idea of breaking into it can seem daunting to would-be game UI designers.

Don't worry, we're here to help. I f you're interested in getting into the field of game UI design, stick around.

This guide to game UI goes hand-in-hand with the recently published Game UX: The Complete Guide for 2024 . Together they'll tell you everything you need to know about game UI and UX, their respective markets, and how to break into the industry.

In this article, we'll first get an understanding of what game UI is before giving you an overview of the key interface components in game UI and the categories they fall under.

After that, we'll talk about what makes a great game UI and share some examples of these in action. Finally, we'll walk you through the current state of the game UI design market, before we wrap up with some key takeaways.

You can use this clickable menu to skip ahead to any section:

What is game UI design?

First things first, what is a game UI?

Navigating through the game

Finding the information they need

Accomplishing their in-game goals

A game UI isn't there to attract the player's attention. Instead, it's there to increase playability and help to build the seamless, immersive experience that makes up the best games.

It does this by creating visual cues to help players follow the right course of action in the games. These visual cues can be subtle or obvious; either way, they're there to empower players to be decisive and confident in their journey through the game.

As you'll have guessed by now, game UI design is the craft of designing, building, and testing game UIs.

The Game UI design market and demand

Ernst & Young noted a significant expansion as an "estimated 2.9 billion people played a video game in 2021" and "global revenue for the industry exceeded $193 billion." They also cite a compound annual growth rate in the gaming industry of 15.6% from 2016 to 2021-rapid to say the least.

Naturally, this industry robustness is good news for game UI designers. There is a strong and increasing demand for skilled game UI designers and industry salaries are generally good.

(as of December 2023) have the average total pay for a game UI designer as Glassdoor figures $125,976 annually. This is made up of $105,332 in base pay and $20,644 in additional pay.

They also quote a total pay range from $81K up to $199K, which will, of course, vary by experience, job level, location, company, and more.

As is normally the case, industry experience will give you an advantage when trying to get a job as a game UI designer, but it is possible to carve out opportunities without direct experience if you have the right skills, mindset, persistence, and approach.

Now that we've established both what game UI design is and the explosive game UI design market let's take a closer look at some of the components that can make up a game's user interface.

Interface components in game UI

Before we can begin to understand components in game UI, we first need to introduce two concepts that shape the four categories game UI components can fall into.
Narrative
In simple terms, the narrative is the story that the game tells the player.
The Fourth Wall
The fourth wall is the imaginary, invisible wall that separates the player from the space in which the game takes place. (The concept of the fourth wall massively predates gaming-it's thought to have been coined by the French philosopher and art critic Denis Diderot in 1758. Fourth walls also exist in theater, television, cinema, and literature.)

But, how do narrative and the fourth wall relate to game UI components?

All game UI components are categorized based on whether or not they exist in the narrative and in the game space (behind the fourth wall).

Which category a component belongs to depends on the answers to two questions:

1. Does the component exist in the game's story?

2. Does the component exist in the game's world space?

Four categories of game UI components emerge from the answers to these questions:

This table will help you understand how game UI components are categorized based on these questions:

Now that we've looked at the framework behind game UI components, we'll look at each of the four categories in a little more detail.

Existing outside both the game's world and story, diegetic components are only ever seen by the player.

None of the characters in the game are aware of these components and they play no role in the game's narrative.

But their purpose is vital. They help the player track their performance or progress and non-diegetic components include things like point tables or stats meters, menu screens, and health bars.

Designing non-diegetic components soundly and placing them in context is crucial to a game's playability.

Especially in fast-paced games, non-diegetic components need to be positioned carefully so as not to interrupt a player's sense of immersion.

Existing in both the game's world and story, diegetic components can be seen or heard by characters in the game and serve a purpose in the narrative.

Diegetic components include things like holograms, phones with visible screens, and speedometers. They're usually seen in the game's world on a small scale, which can make them difficult for the player to view.

Because of this, some handheld diegetic components, such as maps, can be toggled to a full-screen view. Doing this makes them non-diegetic, as they no longer occupy the game space and the character is no longer aware of them.

Badly designed non-diegetic components are one of the biggest reasons for poor playability as they can frustrate and confuse players.

Spatial components exist in the game's world, but not in the game's story. This means the player can see them on the screen in the game space, but the characters can't, and they don't serve a purpose in the narrative.

Things like text labels, arrows showing where a thrown object will land, and character outlines showing who enemies are, are all examples of spatial components.

Spatial components are an important part of overall playability. As visual aids they guide the player towards their next action, whether it's selecting an object, approaching a landmark, or choosing the correct path.

Meta components don't exist in the game's world but do exist in the game's story.

Examples of meta components include things like scrolling text and colored overlays to indicate changing health levels.

While some meta components are subtle, others are deliberately prominent. For those of you who play action and adventure games, the experience of taking damage and your field of vision getting blurred, shaken, or discolored might be familiar. These changes are indicated by meta components.

Now we've looked at the four categories of game UI components, we'll quickly introduce you to the heads-up display, or HUD.

What is a heads-up display?

Sketch describes the HUD as "an overlay that houses all sorts of UI elements" and "where the player will find most of the information they're looking for as they play the game."

The HUD, which takes its name from the heads-up display in modern aircraft, is essential to playability.

HUDs can exist both during gameplay and when the game is paused.

Amongst the 25 UI elements listed you'll find examples of diegetic, non-diegetic, and meta components:

Diegetic: The Rear-view Mirror (3) and Speedometer (15) are diegetic components as they can be seen by the character (the driver) and they serve a purpose in the game's narrative.

Non-diegetic: The Braking Suggestion (11) is an example of a non-diegetic component. It can be seen by the player, but not the character, and it doesn't exist in the game space or serve a purpose in the narrative.

Meta: The Position Indicator (8) & Fastest Lap Notification (9) are classic examples of meta components, as both serve a purpose in the game's narrative, but don't exist in the game space.

As this example from GT7 shows, players might need lots of different pieces and types of information while they play the game. This is where great game UI becomes a game changer.

What makes great game UI?

"Good design, when it's done well, becomes invisible. It's only when it's done poorly that we notice it. Think of it as a room's air conditioning. We only notice it when it's too hot, too cold, making too much noise, or the unit is dripping on us. Yet, if the air conditioning is perfect, nobody says anything and we focus, instead, on the task at hand."

Spool was talking about design in a much broader sense than game UI of course.

But everything he said resonates if you're trying to understand what makes a game UI great. A few tweaks to his quote illustrate the point: "Good game UI, when done well, becomes invisible. We only notice it when it's distracting us, confusing us, or is too difficult to find or use. If the game UI is perfect, nobody says anything and we focus, instead, on the task at hand-gaming."

Just as nobody uses their mobile banking app because they love analyzing the nuances of the UI, no one games to assess game UI.

Instead, like mobile banking app UIs, they're merely a function-albeit a crucial one-to support user experience, or in this case, playability.

Because of this, a great game UI is:

Unintrusive: It doesn't get in the way or distract from the gameplay, but masters space efficiency to give players information smoothly.

Clear: It doesn't frustrate or confuse players but is informative without being overly complex.

Convenient: It's not difficult to find or use, but is a natural, usable, and accessible part of the experience.

Now that we've gone over what makes a great game UI, it's time to take a look at a couple of examples in action.

Examples of great game UI in action

We're now going to take a look at two examples of great game UI from very different eras.

The Legend of Zelda: Ocarina of Time

The Legend of Zelda: Ocarina of Time remains the first love for many gamers of a certain generation and critics would agree-it's been rated as the best game ever by many publications and regularly features on top 10 or 100 lists.

Its UI introduced features such as the target lock system (this was known as Z-targeting in Ocarina of Time) and context-sensitive buttons. Both of these are now common UI components in the action and adventure genre.

This example shows the target lock system in action. A groundbreaking development at the time, it allowed the player to focus their view on an object with a tap of a button, and move around freely while keeping the object in sight.

The target lock system was an example of a spatial game UI component, as it was present in the game space, but not in the game story.

In this case, Link couldn't see the actual target lock and it didn't serve a purpose in the story, but it did exist in the game space. It was a visual aid for players that helped create a more immersive, enjoyable gaming experience for players.

Fast-forward twenty years and another outstanding game UI comes onto the scene, groundbreaking in whole new ways.

Pointing to how Dead Space has taken inspiration from Metroid Prime's HUD, he highlights how it extracts the UI out of the helmet directly into the game UI, so the components live in the world around the player.

This results in menus being holographic pop-up displays, with a nod to sci-fi movies. As interaction with these menus doesn't pause gameplay, UI interaction happens in real-time.

Dead Space's sophisticated diegetic UI in action:

Because of this extraction of the UI directly into the game, most of the UI elements in the game are diegetic, as they appear both in the game space and the game story.

And Dead Space's game UI design is so widely-respected because it blends seamlessly with the game's world and narrative.

Now that we've looked at two examples of great game UI in action, it's time to give you an overview of the game UI design market.

Final thoughts

If you're aiming to be a game UI designer there's never been a better time to carve out your career in the industry.

You might be feeling apprehensive about getting into what can look like a daunting industry, but taking practical steps to build up your knowledge about game UI design-and UI design more broadly-will give you the confidence and motivation to keep going.

Immerse yourself in the subject area. Learn the components, their use cases, and their categories according to their relationship with the game story and space.

Play a lot of games, read about them, write about them. Analyze them ferociously. Understand the history and evolution of game UI.

When it comes to applying for jobs, cast a wide net and be persistent. Ask people in the industry questions and get mentorship, if possible.

And remember, game UI design is built on the foundation of broader UI design. The principles that apply to game UI design are from UI design.

If you're looking for a good place to get started, our might be the perfect jump-off point. To learn more, free UI design course speak directly with one of our program advisors .

If you found this article useful, you might also be interested in:

This article is part of:

Writer for The CareerFoundry Blog

John is a Senior UX Writer and Content Designer with Dynatrace, a guest lecturer in UX writing at SWPS University of Social Sciences and Humanities, and a graduate of the UX Writing Academy. Originally from Wirral in the UK, he kicked off his writing career in Melbourne in 2015. Since then he's worked in Serbia and Austria in content strategy and content design at agency, startup, and enterprise levels. In his free time, John likes chasing his toddler son around, hiking, and staying up too late to watch his beloved Liverpool FC.

# data[].attributes.attachment_link.title
Game UI Design: Everything You Need To Know

# data[].attributes.attachment_link.description
What is game UI design and how do you become a game UI designer? Discover everything about this rising industry star of 2024 and beyond.