Video Game UI: or when a design career comes full circle

I can tell you the exact moment when I knew accessibility was going to be an important part of my design career. It was when I was playing the video game Dragon Age: Inquisition and the settings were paltry. The subtitles were abominable and beyond unacceptable. It was a tragic showing and proof of how far we had to go before we could be inclusive. Not just in games, but in the world of design in general.

If you told me that exactly a decade later (minus 19 days), BioWare would release Dragon Age: Veilguard with some of the most impressive accessibility options I’ve ever seen thus far from a Triple A studio, I would’ve been speechless and skeptical.

Dragon Age: Veilguard Accessibility Menu

Where Veilguard succeeds in accessibility however, it fails spectacularly in UI design. Listen, I’m the last person to tell you that video game UI is easy right? I haven’t made UIs for games, haven’t had to work with stakeholders, and team mates. Haven’t had to sit in on discussions for the cohesion of the product. So how can I speak about a topic I’ve never been involved in?

Because I’m the customer. I’m the consumer. I’m the one all of that hard work was for.

And because I also happen to be a designer who is passionate about organizing large amounts of data (see the many TTRPGs I’ve designed, or any of the other data heavy web-based products I have worked on.)

Examples to get familiar with

We can’t simply dive head first into this topic without going over some of the other UIs in the industry. For this topic I’m specifically targeting character screens, where a player will go to get information about their character. For RPGs this usually includes things like:

• Health/HP

• Mana/Magic/MP

• Basic overall stats, such as Attack (ATK), Defense (DEF)

• Any statuses, such as Poison or Paralyzed

• Equipment, what you’re wearing

There can be other bits and baubles, sometimes they list money on this screen but they usually save that for an inventory screen. This isn’t ALWAYS true, just usually true. And a usually true concept creates a pattern of familiarity for players.

Get it? Got it? Good. Let’s do a little competitor analysis:

Screenshot from Baldur’s Gate 3 of a Character Stat Screen

We have to start with the most obvious comparison, the one everyone else will be making because of the timing and setting: Baldur’s Gate 3. A popular release from 2023, BG3’s fanbase is still going strong and remains one of the most popular western RPGs in recent memories. It’s ruleset and statistics come from the Dungeons & Dragons 5E system, meaning it’s relying on an intense set of regulations to function.

This also means that players are expecting to see an overwhelming amount of data about their character up front and also in depth if they so choose.

From this screen, I can see my HP (in my image on the leftmost portrait section of the screen), my defense (or AC) in the middle panel, my overall stats and level in the left panel, and any other relevant information. I could dig deeper if I choose, but the highlights are all there. In terms of “score”, as in, if something hits all 5 points of what a player is expecting at minimum, BG3 gets 5/5.

Let’s look at a weirder example.

Cyberpunk 2077: Inventory menu

Here we have Cyberpunk 2077. This one IS weird because everything you need for your “at a glance” is in the Inventory and not the character menu. We’re missing statuses and our DPS (attack power) could be a little more obvious, so 4/5.

Cyberpunk 2077: character stats menu

All right so here’s clarification from the previous menu. It’s not exactly what I was expecting to see, and the navigating of menus makes it a bit convoluted, but nothing is hidden too deeply and (for the most part) labelled well.

Diablo IV Character screen

You’re starting to see the pattern right?

That’s not to say we don’t have some mildly successful rulebreakers. Take Metaphor Re:Fantazio for instance:

What on earth is going on here? Where is anything? Nothing is where you think it is, and honestly that’s my largest but only complaint about Metaphor. I could never remember what menu I needed to look in to find the information. So it’s not screaming success, but it’s beautiful to look at. Like digging for treasure in a jewelry box. A very…overflowing… jewelry box.

Breaking down where things go wrong

(Firstly, a HUGE HUGE shout out to interfaceingame.com for almost all of the screenshots I’m referencing here.)

Now that we’ve seen some prior examples and set the stage for minimums and rule breaking potential, let’s dig into Veilguard. At first glance, all appears well. The top navigation bar matches and is similar to many other menus of its genre, a bit plain but legible and everything in the menu you think it should be in. Good start!

Ok so where is my health? That’s weird… not seeing it. Seeing my attack and defense though, that’s good. Seeing how much until my next level, also good. All my equipment, sure. An inventory button, makes sense since inventory isn’t nearly as important in this one.

It looks like we also have my four primary skills on the bottom middle there, and two icons underneath my name and level bar on the left. And oh, a stats button! Great. Bit weird to hide it, but cool, it exists.

Dragon Age: Veilguard Character Menu

Not shown in this screenshot is the option for Tooltips, which are floating boxes that hover over content to provide more information. This is accompanied by an interactive animation that lights up the specific area target and highlights it to attract attention. It should be noted that this animation still fires even when tooltips are off, leading to some confusion about if something is a button to be pressed or if it might be broken.

Wow, uh. Okay. Couple decisions made here. It’s acting visually like a pop-up but the entire other menu is hidden until you leave this one. And then we have…what ultimately amounts to a bulleted list styled like a table of contents for a book, organized by categories that don’t make a ton of sense. You can’t see it in this screenshot, but in fact Health is listed twice in this second section and then in the last section. It has no differing prominence, no sense of order or hierarchy of importance. For all intents and purposes, it’s a spreadsheet readout of your stats.

Okay. Decisions were definitely made.

The pros: It’s easy to read and quickly scannable.

The cons: It has no hierarchy and the organization of content means things don’t necessarily fall in categories that make sense to some players.

By my own system, this puts Veilguard at a 2/5. You can find further information, but it is hidden.

How do we fix it?

I think there’s a couple ways we can use patterns players are familiar with while differentiating ourselves from the competition. It feels like, currently, there is a heavy emphasis on the visualization of how the character looks and all else is secondary. Nothing wrong with that, but because of that I think a few more things should be front and center.

If we cut out all of the fanciness, we’re left with wires that look something like this:

Let’s move a few things and add in some missing things.

Firstly, we’ve added the more vital bits of info front and center: health, mana, statuses, damage, and resistances. We’ve removed the skills, they can go into the Skills menu which is a logical place for them. Powerups moves to it’s old spot to take up far less screen space, which leaves us room to add the additional things. We move resources and currency to allow for that organizational hierarchy, and add a more prominent button for detailed stats. We also remove the class/faction icons as they provide little to no useful information.

This also opens the door for the information to look less like a spreadsheet and more like design.

I will now get off my UI soapbox. Thank you.