Game UI Faceoff: Doom vs Dishonored 2

Akhil Dakinedi
Dec 25, 2016 · 32 min read

I have this obsessive habit of screenshotting UI’s in every video game that I play, and this is one way of putting them to good use. I joked in an earlier case study about how I could run an entire blog specifically about the UI choices in video games, so here’s a start.

The Games

Instead of critiquing the UI of one game, we’re going to be comparing the interfaces of two different games, as this does a better job of providing more insight into why different design choices were made in each game. The games are Doom and Dishonored 2, two of the best games to have come out in 2016 (and I can personally recommend both of them).

The hellish landscape of 2016’s DOOM remake

Doom is a modern remake of the classic 1993 first-person shooter that the industry has come to revere for pioneering the genre. It’s a fast-paced, gory, and bloody action shooter that pumps the adrenaline up to maximum and never slows down. Developed by id Software and published by Bethesda Softworks in May 2016, the remake was met with critical acclaim upon release for its authentic singleplayer campaign that stayed true to the feel and gunplay of the original game.

Eavesdropping on civilians while perched upon a tree in Dishonored 2

Dishonored 2 is a sequel to 2012's beloved stealth-action game Dishonored. Its gameplay primarily revolves around sneaking and using supernatural powers to neutralize the opposition. The game gives players full freedom in how they approach this — either lethally or non-lethally, which in turn affects the game world and story outcome. Developed by Arkane Studios and also published by Bethesda Softworks in November 2016, Dishonored 2 was praised for its stellar level design and creative gameplay that it encouraged.

Both these games are different yet similar enough to be compared for their UI. They both contain isolated “missions” that the player must go through and they share a similar foundation to some of their gameplay elements. They’re both triple-A titles from the same publisher and were both extremely well-received upon release. They set a good benchmark for the current state of UIs in game design, so let’s dive right into it.

Disclaimer: I played both these games on PC with a keyboard and mouse.

01: The Start Screen

First impressions matter, and it’s the job of the start screen to deliver it. It may or may not be accompanied by a splash screen beforehand. This is the very first screen the player sees that sets the tone of the game. There are many different approaches that games can take in terms of what to display here — and it primarily depends on whether the game wants to focus on setting the tone of the experience or whether it wants to focus on getting the player in-game as quickly as possible.

Doom’s original start screen during launch

Doom likes to go big and bold with its start screen. It has a very iconic logo and the UI displays it proudly, with the logo taking up over 80% of the screen. Note that there’s no artwork here whatsoever. It’s just the logo, icons, and buttons. The tone setting is done purely through the logo (at least visually): it’s hard, edgy, and gritty. There’s a strong brand identity associated with the logo and the screen makes sure to takes full advantage of it. Some flame animations in the backdrop accompanied with the low bass beat of thumping metal assist in establishing the tone as well. As the player is getting a feel for this, they are asked to choose between one of the game’s three modes.

Doom’s updated start screen, now with artwork and update copy for each gamemode

A couple months after releasing, Doom’s start screen got an update. The logo shrunk. The three different options got their own artwork, along with additional content notifying the player of recent updates to the game and what’s coming up. It’s an interesting change. By this time, most players had completed the campaign and had stopped playing the game. In order to get more players into the multiplayer and to get them to try out the map maker (Snapmap), the game started highlighting this information on this screen to attract the attention of new players booting up the game for the first time. It’s a simple way of stating “Hey, look at all this other stuff that we’re doing aside from the campaign and what we’ve got planned for it!”

It’s a successful UI update and definitely gives the player more context as to how the different modes of the game are changing over time. While the original start screen is cleaner and more to the point, this update still retains the identity of the Doom logo while also giving each game mode a unique visual identifier through the thumbnail artwork. Keeping the player informed about recent updates and upcoming content is also a great way to increase player engagement.

Now let’s see how Dishonored 2 fares.

Dishonored 2’s splash screen

Dishonored 2 has a splash screen before the start screen. Right off the bat, we know this game cares more about establishing a tone than Doom does simply due to the presence of a splash screen. It also relies a lot more heavily on its artwork to establish the tone than Doom does. This screen is a reflection of the game world, with both playable protagonists literally taking center stage. The framing and composition of the shot is very intentionally centered on the subjects, not on the logo of the game. There’s distinctly more emphasis on character and atmosphere here. Once the player presses any key, they are taken to the menu on the actual start screen.

Dishonored 2’s start screen

With a striking transition, the camera zooms and pans closer to the characters as the main menu appears into view. The player gets closer to the main characters as they go deeper into the menus — a nice touch. Dishonored 2 only has one game mode (the campaign), so the rest of the options are additional game settings. The aesthetic for the main menu is controversial — it’s messy, it’s using a different font for each option, and the highlighted state is extremely stark. And yet, it works.

This futuristic-grunge style is a central aspect of the interface’s look and feel, as we’ll see with all the menus for Dishonored 2. The game world in Dishonored 2 is one filled with chaos, disorder, and corruption. The UI here mirrors that by angling all its text, having offset justification on all text labels, and using asymmetric splattered brushstrokes for both the background of the main menu as well as the highlighted state. There’s also some very subtle movement and blurring to all the UI elements as they slowly pan and rotate around their central axis, reinforcing the notion of an ever-changing power struggle within the game world.

Paying a visit to the “Void” in Dishonored 2

The inspiration for the UI here comes from the “Void”, a mysterious dimension within Dishonored 2’s game world where immaterial black objects twist and turn, bending reality into something eerily strange and beautiful. Just as the story in the game creates narrative arcs around the game’s overarching themes, the UI personifies the same themes through stylized visual design.

02: Getting Into The Game

An often overlooked aspect of game design is how the player actually resumes their game from where they left off. How many clicks or button presses does it take from when the player decides to start playing the game to when they’re actually in-game? How easy it it for them to navigate through them? The experience of this flow is very crucial, so let’s take a look at how you go from the start screen to in-game in Doom.

The Load Game screen in Doom that shows up when the player hits “Campaign” from the start screen
The loaded game options, from where the player must hit “Continue Game” to resume their game

Doom makes the player select their game slot and offers up further options within that game slot. It’s very straightforward and extremely simple. A screenshot of the current level serves as an identifier of what mission the player is currently in. It’s a minimalist design with only the essentials. The goal here is clearly to get the player in-game as quickly as possible.

In terms of aesthetics, Doom tries to preserve the futuristic sci-fi vibe of its world. They could’ve gone all-out with the hell theme but they stick to the clean layouts and simplicity of modern futurism. There’s little to no stylized elements and as a result, the interface doesn’t stand out in any way.

Dishonored 2’s Load Game Screen

With Dishonored 2, we have a more stylish menu where the game prompts the player to either continue where they left off or load a specific save file.

Dishonored 2’s Load Game Screen

With a more complex game comes a more complex UI. Dishonored 2 offers two playable protagonists, both of whom are separately identified visually in the campaign slots. There’s different chaos levels for each playable protagonist and of course, different types of saves (auto-save and quick-save). This screen does a stellar job at identifying all these differences between the save files and makes it very easy for the player to pick the playthrough that they want to resume. It’s a very scalable design built to work for save files for seven or seventy simultaneous playthroughs of the game.

So while Doom goes for a somewhat bland and generic load game screen, Dishonored 2 goes for a flashy and robust load game screen full with categorized playthrough options. The game world is again mirrored within the UI in Dishonored 2 — a trend that will carry across all of its screens.

03: In-Game HUD

What does the player need to know at all times? How much “stuff” needs to be crammed into the four available corners of the HUD? When and how do contextual notifications show up? These are all problems that the HUD can solve through the use of clever design.

Health and ammo. These are the two things every first-person shooter needs to inform the player about. The health bar changes the play style of the gamer by informing them how aggressive or safe they can be. The ammo bar tells the player whether the weapon they’re wielding can carry them through the next wave of enemies, whether they need to swap weapons, or if they need to scourge for more ammo.

Doom’s HUD forces the player’s eye to the bottom left and right of the screen

Doom retains its futurist aesthetic in its HUD with the information displayed as overlays. Health on the left, ammo on the right. Shields are simply an additional buffer to health and is highlighted in a differentiated color. Ammo is on the right as a number. Doom continues the trend of ultra-minimalism by not displaying the type of rounds or ammo that the weapon uses. In the heat of battle, this information is irrelevant to the player. All the player needs to know is that the higher the number, the safer they are for the coming fight. The weapon silhouette, secondary rounds, and equipment (grenades, etc) are all a beneficial touch that provide additional context to the player at all times.

Dishonored 2 forces the player’s eye to the top-left of the screen

If Doom goes for sci-fi, Dishonored 2 goes for surreal fantasy, even with its HUD. The most crucial information in Dishonored 2 is health and “mana” — the amount of magical power the player has to cast supernatural powers. It does this by color: red for health and blue for mana, mirroring the colors of the items that provide health and mana. Both these bars take the form of stylized arcs on the screen that un-fill as the levels go down. Dishonored’s equivalent of Doom’s weapon silhouette is the illustrated icon art for the currently equipped power. When this is replaced by a weapon, the ammo remaining is displayed in this circle as well.

Sunlight filters through an abandoned manor in Dishonored 2

In both these games, the star of the game is the environment. They’re beautiful, dark, twisted, and captivating. Cluttering the screen with another overlay of HUD elements would take away from the immersion, so both these games try very hard — and succeed — at keeping the player’s attention fixated on the environment and their goals.

04: Main Objectives

How well does the UI inform the player know what they’re supposed to be doing? What is their goal and how far away are they from accomplishing it? What have they done so far and what’s left to do in this level?

Players like to wander and get lost in large open-world games, sometimes for hours on end. Keeping the player on-point with their main goals through the mission goals UI requires clear directions digestible in the quickest way possible. Best practices here are to not handhold too much but subtly nudge them towards their objective.

Doom’s Mission Objectives screen

At first glance, Doom’s Mission Objectives screen can feel a but overwhelming. There’s lots of information overlaid on a massive interactive map of the level. When we look at it more closely, this approach actually makes perfect sense. At its core, Doom knows the main problem that its players will face: navigating its complex levels. The game features large non-linear maps which can be intimidating to players. There’s frequent back-tracking involved and many hidden items stashed away in secret rooms of the level. So the player needs a map, and a useful one at that. The game allows toggling the map between 2D and 3D, zooming in and out, and offering a large range of pan and highlight options.

The story objective, of course, is highlighted on the screen and marked on the map. However, there’s no waypoint or route. The game wants the player to explore and find a path to their destination. It encourages the players to explore every nook and cranny of the map before moving on to the next one; it even encourages the player to look for them by informing them how many they’ve got and how far away they are from collecting them all.

Dishonored 2’s Mission Objectives Screen

If Doom’s largest player challenge was navigating the level, Dishonored 2’s challenge is to make the player aware of all the different approaches that the player has at their disposal to accomplish their objective. Dishonored 2 is a game about choices, and these are tough decisions (either moral or ethical) that impact not only the game world but also the outcome of the story. Like Doom, Dishonored 2’s biggest asset is its ability to identify the largest player challenge and its ability to offer a compelling solution right on the Main Objectives screen.

Once the game has laid out the various options available to the player on this screen, it also gives players a checklist of tasks to do if they desire to keep going down that path. After a crucial point in the checklist, the alternative approaches that the mission offers get locked off, which this screen also does a good job of notifying the player of. Overall, it succeeds because it knows where players will get tripped up the most and offers a clear path to let them approach the objective however they would like.

Static maps in Dishonored 2 for every level

There’s no need for an interactive map in Dishonored 2, since environmental cues is all the player needs to get to their destination. There are, however, complex multi-layered environments that benefit from having an overhead map broken out into the various sections. These come in the form of in-game items that the player can stumble into with enough exploration.

It’s an interesting contrast at how much emphasis each game puts on its most confusing elements and how they attempt to clarify the issues through the UI. It’s important to note than neither one objectively does it better than the other here. They simply take different approaches to address different problems. As long as the player isn’t confused after tinkering with this screen for five seconds, it has accomplished its job.

05: Pause Menu

Believe it or not, this might as well be the screen players see the most. Modern gaming happens in a distraction-filled house with constant breaks and interruptions, and the pause menu is on-screen for a significant amount of time. Its functional purpose is to allow the player to freeze the game in its current state for a certain amount of time and resume it from there some time later. Let’s take a peek at how the two games fare here.

Doom’s simplistic Pause Menu

As expected, Doom doesn’t go for anything flashy. If you pause the game, the player is presented with the most minimal menu imaginable: a black screen with a menu of options. Functionally, it does its job and doesn’t bother trying for anything else. And now, Dishonored 2.

Dishonored 2’s Pause Menu

Stylish. Swashy. Chaotic. These are the first words that come to mind when you’re slammed with Dishonored 2’s pause menu. It’s artistic, it’s painterly, and it’s beautiful. There’s a very big emphasis on aesthetics here, and once again, the UI mirrors the game world. Different fonts for each menu item embody the disorder in its society, and the tilted UI hints at everything in its world being slightly off. Shards of broken glass in the background and future-punk brushstrokes on the menu items add a level of uniqueness to it that gives it a very distinct feel.

Adding this extra layer of immersion with in-theme aesthetics gives the game a very interactive feel. It’s as if the UI belongs in the world of the game. It’s beckoning for the player to touch it and play with it. It wants players to tinker with its messy, splattered feel and manipulate it. With an extremely straightforward menu like that of Doom, there’s not much room for imaginative interactivity. Dishonored 2’s UI designers clearly felt strongly enough about the UI that they infused the game’s tone and theme directly into it — a very difficult and extremely admirable feat.

06: Weapon Wheel

Both these games employ this UI paradigm to allow players to quick-switch their current weapon or gadget. It’s a console gaming solution to the problem of controllers not having as many programmable hotkeys as PC keyboards do. It has made its way to the PC and it looks like it’s here to stay. So let’s see how these two games incorporate it.

Doom’s minimalist weapon wheel

Doom’s weapon wheel is excellent. Imagine that you’re ambushed by two powerful demons around a corner and you have to switch to your shotgun. You bring up the weapon wheel. The time in-game doesn’t freeze — it simply slows down. The weapon wheel neatly appears off-center to the right so that your vision of the targets isn’t obscured. You can still move and position yourself while also switching weapons as the in-game time slows.

Visually, the wheel is a light translucent overlay with a huge emphasis on the weapon silhouettes, a large part of Doom’s identity. Ammunition remaining is displayed as flat numbers. Instead of saying “56 5.5 caliber rounds” and “210 75mm rounds”, the UI simply displays “56” and “210”. It’s way easier to digest in the heat of the battle after all the irrelevant information is thrown out.

Now for Dishonored 2.

Dishonored 2’s weapon wheel

By contrast, Dishonored 2’s weapon wheel looks a lot messier. It takes over the entire screen, it obscures the entire game, and it’s a lot more in-your-face. Time doesn’t completely freeze here either. Things are happening in slow motion in-game as you’re switching weapons but you can’t see any of it (an odd design choice). The game also adds helpful instructional text about the weapon or gadget in the center of the wheel to provide some guidance on how to use it. Ammo counts are displayed as numbers on the outer fringes of each weapon circle.

Dishonored 2 is a game that encourages stylish and creative kills. Taking the player out of the action just to have them swap weapons seems a bit off. Not being able to see the game while swapping weapons is another misstep. As far as the weapon wheel is concerned, Doom is the clear winner. The minimalist approach pays off hugely here as the focus is still on the enemies and the world, not on the tools available.

07: Primary Upgrades

Both these games have RPG-like upgrade mechanics to further enhance customization of weapons, powers, and gadgets. This is a crucial component of the game’s UI because here, it needs to inform the player what’s going to happen before they decide to purchase an upgrade. It needs to make sure that the player is well-informed enough to make the right decision, without making it seem like an upgrade is objectively better than another equivalent one. Easier said than done.

Doom’s primary weapon upgrade screen — Selecting a weapon to upgrade

Doom’s emphasis on big and bold is apparent here yet again, with the upgrade allowing clearing out 80% of the screen space for a gigantic viewmodel of the weapon itself. Players can scroll through the list on the left for the weapon they want to upgrade, and observe the gun in all its glory on the right. Once they’ve selected one, they choose its upgrades.

Doom’s primary weapon upgrade screen — Selecting upgrades for the weapon

The player gets to choose between two different upgrade “trees” for each weapon. In this case, the player has acquired two upgrades for Remote Detonation and can complete an optional Mastery Challenge for an additional bonus upgrade. Note the descriptive yet succinct flavor text for each upgrade informing the player clearly what each one does. The screen also uses translucency and affordances very well to highlight unavailable or locked upgrades.

Doom’s primary weapon upgrade screen — Acquiring two upgrades for the same weapon

The game doesn’t force you down one path for a weapon upgrade. It allows you to fully upgrade both trees for one weapon, if you wish to do so (gameplay-wise, this is not the wisest choice but it’s still there). Shown above is the Charged Burst being upgraded while Explosive Shot has already been fully upgraded, save for the Mastery Challenge. Note the expanded and collapsed views of the active and inactive upgrade tree. This screen does a great job at showcasing the relevant content that the player cares about and does away with the rest elegantly.

Let’s check out Dishonored 2.

Dishonored 2’s Powers Upgrade Screen

Dishonored 2 has two different types of primary upgrades: powers and weapons. The powers screen has the six available powers highlighted on the left side, with seven additional enhancements right below it. Each power has its own skill tree with branching paths and upgrade requirements. Note that the flavor text for each upgrade (on the right) is far more detailed here than it was in Doom. Dishonored 2 is a complex game with powers that can be combined in unique and interesting ways, so the game goes out of its way to provide the player with strategic tips and how to use it most effectively.

Dishonored 2’s Powers Upgrade Screen — The skill tree for Far Reach

The base version of each power costs a certain amount of runes, and the upgraded versions of each power cost even more runes (the in-game currency for power upgrades). This requires the player to jump into all the power explanations and strategically decide how they want to allocate their runes, as there’s a limited amount of runes in the game. This means a lot of reading about the power and its upgrades, going back to a different power, reading about that power and its upgrades, and repeating for the rest until the player feels confident that they have a strategy for a power upgrade path for their desired style of gameplay. The UI could definitely have accommodated for better comparative analysis of the powers to solve the problem of the current experience, which is jumping around back-and-forth between the skill trees of the different powers to make a choice.

Dishonored 2’s weapon upgrades

Beyond powers, there’s the basic gear and gadget upgrades that Dishonored 2 gets, and this comes with its own unique set of UI. All of this can only be accessed at specific locations in the game, so the player cannot bring it up whenever they wish to. Let’s see if any compromises were made in the UI as a result of only being available in specific points in the game.

Dishonored 2’s weapon upgrades — Blueprints

You get to upgrade equipment by finding blueprints and installing them with in-game currency. Simple as that. The UI here is very pretty. It’s got a workshop-type feel to it with the blueprint aesthetic and evokes the feeling of tinkering with your equipment to make it better. The only offshoot here might be the navigational affordance, tucked away into small dots on the top right of the screen. I’ve seen some players miss this entirely only to assume that there was only type of gadget they could upgrade (when in reality, there are six).

Dishonored 2’s weapon upgrades — Error states

The UI here is impeccably designed, accounting for the many states of blueprints and providing a visual affordance for each one: undiscovered, discovered but locked, discovered and available, available and purchased, available but insufficient funds, available but lacking pre-requisite upgrade(s), and available but upgrade slot unavailable. It’s immediately clear what each state of each blueprint is without it needing supplementary text. It’s quite incredible to see this level of effort put in for UI that only shows up at very specific points in the game that the player only sees eight or nine times at most.

Dishonored 2’s weapon upgrades — A fully upgraded Gear & Outfit upgrade

The blueprint upgrade UI in Dishonored 2 is a great example of UI design done right. Not only is it visually stunning and thematically appropriate, but it’s also highly functional and very intuitive. The player is never left asking questions like “Will I have enough funds to upgrade this all the way?”, “What exactly is the benefit of getting this?”, or “How many more blueprints do I need to find to get the Masterwork unlocked?”. Everything is clear and the UI paints a clear picture of where the player is currently at and where they need to get.

Doom, by comparison, is a lot more simplistic. As a result of being more complex, Dishonored 2 goes all out in its UI to ensure that players are fully informed of all the available options at their disposal, be it a power or a weapon or a gadget upgrade. And it does so masterfully. Dishonored 2 definitely takes the cake here for the better UI.

08: Secondary Upgrades

These games go even further with the level of customization available. While not as impactful on gameplay as the primary upgrades, these secondary upgrades serve to tweak minor things like movement, speed, increased chance of buffs, and other small quality of life improvements.

Doom’s Secondary Upgrade wheel

Doom offers a variety of in-game challenges that can be completed to unlock runes, which then fit into one of three slots. The UI for this screen is simplistic while managing to echo some of the arcane symbolism from hell. Each secondary upgrade can be upgraded to three different levels — all visually represented within the same block. Text plays a huge role here as well, incentivizing the player to perform the instructed actions to upgrade the rune. Again, Doom succeeds here with its simplicity when treating secondary upgrades.

Dishonored 2 has some interesting things up its sleeve when it comes to secondary upgrades.

Dishonored 2’s Secondary Upgrade screen — Bonecharms

For secondary upgrades, Dishonored 2 has bonecharms, in-game collectibles that can be equipped into one of ten slots in the secondary upgrade wheel. Each bonecharm offers passive abilities that the players can pick and choose to complement their playstyle.

Dishonored 2’s Secondary Upgrade screen — Equipping Bonecharms

Equipping a bonecharm is as easy as entering the “Equip Bonecharms” screen from the main Bonecharms screen and choosing a slot on the secondary upgrade wheel. The currently equipped bonecharm can be swapped out for a new one that better fits the players’ gameplay style. Text plays an equally important role here, as this is how the player makes their decision about which bonecharm to keep and which ones to sacrifice. Speaking of sacrificing bonecharms…

Dishonored 2’s Secondary Upgrade screen — Crafting Bonecharms

Dishonored 2 takes secondary upgrades to a whole new level, allowing players to sacrifice their bonecharms to acquire their traits and craft new ones that can have up to four different (or the same) traits. And of course, just like with the gear blueprint UI for primary upgrades, Dishonored 2 once again goes above and beyond for a beautiful, custom UI that only a select few players will ever see.

Players are greeted with another blueprint-style UI where they can choose to sacrifice bonecharms or craft them (given they possess enough traits). The UI here is fantastic once again, informing the user of locked and unlocked states, available and unavailable states, and an insufficient materials state.

Dishonored 2’s Secondary Upgrade screen — Sacrificing Bonecharms

Sacrificing a bonecharm is as simple as going into the Sacrifice menu and choosing the bonecharms that you’d like to say goodbye to. The main job of the UI here is to inform the player what they’ll be getting out of the deal. Some bonecharms have traits that cannot be learned, some break down into significantly more raw materials, and some cannot be sacrificed at all. A handy “Sacrifice Results” section (on the right) does just this, letting the player know what the results will be after the bonecharm sacrifice.

Dishonored 2’s Secondary Upgrade screen — Choosing Traits to Craft Bonecharm

After sacrificing bonecharms and acquiring traits, the player can choose up to four traits that they can combine into one bonecharm. This screen allows the player to pick these four traits. It’s a very forward-thinking UI, accounting quite well for scalability by sectioning off traits into different categories and allowing the player to sort and filter through them easily. The player may have as little as five or as many as forty bonecharm traits. Tabbed navigation and highlighted sectioning serves its purpose well, always keeping the player informed about the trait name and function.

Note that as you get deeper into the crafting flow, the new screen simply pops up on top of the old one as the older one blurs out and fades in the background. This creates a very powerful sense of going deeper into chaos, as the background can get quite visually overwhelming a few screens in.

Dishonored 2’s Secondary Upgrade screen — Crafting Bonecharms

Finally, when the four traits are picked, the game presents a grandiose future-punk crafting wheel that’s as beautiful as it is minimalist. Glyphs, magic, and an occult atmosphere do a great job at reflecting the tone of the in-game world here within the UI. At this point, you can either craft the bonecharm or swap out one of the traits for a different one. There’s even some amazing crafting animations that happen when the bonecharm is being crafted.

As evident, Doom keeps up the trend of keeping things as simple as possible and makes its UI do just that one thing really well. Dishonored 2, on the other hand, has a significantly more complex secondary upgrade system and once again, it goes all out to create extremely specific and incredibly good looking UIs to accommodate that. There’s no half-measures taken here, it’s all done with heart and a lot of great work has clearly been put into it.

09: Mission End Screen

How did I do? Did I find all the collectibles? Did I accomplish all the optional objectives? Did I complete all the challenges? This screen is basically a report card of the player’s performance in the mission. It’s very important to display progress here because this is the only feedback the player receives from the game about how they’re playing. This is the screen that serves as a catalyst for the player to assess how they did and what they can improve upon in the next mission. Up first is Doom.

Doom’s end of mission screen

Doom has a lot of stuff to tell you when you finish a level, and it crams all of it into one screen. The most important thing according to the game is the combat rating, displayed front and center with a bombastic entry animation informing the player how good their dodging and shooting skills were. The Challenges box shows the player what challenges they achieved or how close they were to achieving the ones that they didn’t. And finally, the Exploration box has all the other items in the level such as secrets and collectibles.

Dishonored 2 has very similar things to inform the player of at the end of a mission, but it does in a dramatically different fashion than Doom.

Dishonored 2’s end of mission screen — 1 of 3

Dishonored 2’s end of mission screen is actually three different screens. Since the game can be played in so many ways and so many complicated things can happen in a level, the UI tries its best to inform the player about everything that happened without overwhelming the player with a blast of information all at once.

The first screen, along with providing specific numbers of NPCs and game world items affected by your actions, shows you a handy affinity matrix of stealth and lethality. Players can go nonlethal assault, full-on lethal assault, lethal stealth, or the hardest of all — nonlethal stealth. Making players see their placement on one of these four quadrants is brilliant, as it makes them re-analyze their gameplay style and allows them to adjust accordingly.

Dishonored 2’s end of mission screen — 2 of 3

The second screen of the three is dedicated exclusively to collectibles. The screen here doesn’t need to be so ostentatious and flashy like it is, but providing this level of importance to the UI here indirectly serves to inform the player how much the game itself prioritizes the collectibles. It’s quite satisfying to visually watch the circles complete and glow at the end of every level, knowing that you’ve acquired every possible thing in the level.

Dishonored 2’s end of mission screen — 3 of 3

Finally, the third screen deals with challenges. Interestingly, the UI doesn’t display the unaccomplished challenges and shows only the ones that have been completed. This was likely a design decision made knowing that no one player could possibly accomplish all challenges in one playthrough of the mission, since many of them contradict each other. For example, a challenge for not killing any enemies in the mission would fail if the player accomplishes the challenge for killing five enemies within three seconds. Completionists would certainly not appreciate the game showing the failed challenges as unaccomplished challenges, so this was a wise move.

Once again, Doom keeps things constrained to one screen while displaying the information in as little text and visuals as possible. Dishonored 2, yet again, goes for style while highlighting the substance. Every important element of the level is displayed independently and prominently, allowing the player to focus on the important parts of the level and to take it all in before proceeding to the next one.

10: Loading Screens

Another hugely overlooked UI component of modern video games is the loading screen, which is frankly inexcusable given how long the player stares at these waiting for the next section to load. As games get larger and move towards a true open-world, load times are inevitably going to be longer. The UI can easily inform the player about events in the story, or provide gameplay tips, or poke fun at itself lightheartedly. By now, you can probably make a good guess at what Doom does.

Doom’s Loading Screen

Mission name, loading percentage, and a tooltip all overlaid on top of an animating visual in the background. That’s all Doom needs to do and that’s all Doom does. It’s functional and simplistic, but also bland and unmemorable.

Dishonored 2’s Loading Screen

Mission name, mission description, loading progress, in-game player location, and interactive tooltips are all overlaid on a fancy watercolor visual in Dishonored 2’s loading screen. Again, there’s large splattered brushstrokes and cracking glass all over the screen to represent the fragmented and messy world of the game. Every screen we’ve seen in Dishonored 2 so far reflects this, and the loading screen is no exception.

11: Settings Screens

Like most PC gamers, my first impression of the game (after the splash screen) comes from the Settings screen. It’s the first thing that PC players go into to tweak things to their liking. Does the game provide enough advanced graphics options? What are all the different sensitivity options available to me? How many different levels of anti-aliasing can I choose from? All of this needs to be visible and apparent immediately. If it’s not, the UI has failed.

Doom’s Settings UI

Doom’s Settings UI is exactly what you’d expect. It comes with all the various options PC users have come to expect from modern games. Sliders show up where expected and radio buttons show up where you expect them to. Overall, it’s pretty straightforward and functions like a normal menu.

Dishonored 2’s Settings Main Menu

Dishonored 2 greets you with a giant, mesmerizing menu when you first enter the Settings section. Doom doesn’t do anything like this, but as we’ve seen, Dishonored 2 tends to go a little overboard with creating incredible looking UIs for even the least important screens in the game. The screenshots don’t do the animations on this screen any justice here.

Dishonored 2’s Settings UI

Dishonored 2’s Settings UI is functionally similar to Doom, and yet stylistically miles above it. There are beautiful textures, lighting, and animations all over the place. At times, this can be overdone to the point where it distracts from the main content. When the player is trying to adjust the graphical settings just to get the game to work right, the last thing they want to be reminded of is the effort put into the design of this screen and not the effort put into optimizing the game. But this is a rare case and for the most part, players greatly appreciate the beautiful UI designs that Arkane Studios has put into these screens.

12: Other Screens

This post could easily triple in size if I analyzed every single screen in these games, so here’s some honorable mentions in both these games that didn’t get a section to themselves. These are screens that stood out because they put a fun twist on screens that are normally ignored or under-designed.

Doom’s Credits screen

I would be remiss if I didn’t call out Doom’s spectacular endgame credits sequence, with the player being treated to freeze-motion animated scenes as the names of the team members come up on-screen big and bold.

Doom’s Credits Screen

It’s a spectacular sendoff to a high-flying, adrenaline-filled adventure. There’s some impressive visual effects in here and it actually incentivizes players to see it through all the way just to see what’s next.

Doom’s Credits Screen

The scenes also contain some iconic references to specific moments from the original Doom — recreated this time in full 3D. It’s a beautiful way to say goodbye to a storied franchise, and it’s great to see the team put so much effort behind what could’ve been a very simple credits sequence with the names and titles of the team scrolling up.

Dishonored 2 — An in-game letter

This is an in-game letter found in Dishonored 2. Even a simple text view like this is gloriously presented, with a subtle animation and a backdrop of the Void as the player reads it. It adds to the immersion in ways a simple scrollable text view never could.

Dishonored 2’s Confirm Screen

Even an option to confirm or deny a change is presented with the same aesthetic, a testament to Dishonored 2’s commitment to evoke the feel and mood of the game through all its UI — including something as mundane and as much of an afterthought as dialog boxes.

Dishonored 2’s in-game worldbuilding and lore

Finally, Dishonored 2 does a great job collecting its in-game items in its menu for the player to read at their own pace. Handwritten notes go a long way in adding to the immersion and categorized sections for different types of items are also nice quality of life improvements. The aesthetic here, too, is downright gorgeous.

So Who Wins?

So that was a lot. Looking through the various screens, we can see that while UI of the games face similar challenges in how to best display information to the player and educate them on what to do. Both games put their own twist on things based on their complexity.

There are common trends. Doom likes to keep things as simple as possible and tries to fit all its UI elements on one screen whenever possible. It goes for a minimalist, simplistic design throughout all of its screens and it works. Dishonored 2 likes to overdo it when it comes to presentation, mirroring its future-punk aesthetic in every single screen throughout the game — be it the main weapon wheel or some obscure gear upgrade blueprint menu that only shows up eight times in the game.

Contextual in-game UI in Dishonored 2

As you can tell by now, there’s no “right” way to do UI design in games. There are best practices, which both these games follow. One chooses a straightforward and simple approach while the other goes for stylish and flashy. As a result of the choices and freedom offered to the player, Dishonored 2 has a lot more to deal with in its UI. And it handles all of it with grace. Doom is a mostly linear experience with one way to play (save for variety between gunplay styles), so its UI doesn’t have to do much aside from just being there when the player needs it.

Final Thoughts

Imagine that you’re traveling and you walk in to a reputed restaurant to try out a couple of highly recommended items from a menu. Both the dishes are very good. The waiter for the first dish unassumingly brings the dish out quite plainly and leaves. But the waiter for the second dish not only brings out the dish, but starts telling you about the ingredients, gives you suggestions on what wine to pair it with, has a charming demeanor, and is willing to answer any questions you have about the local cuisine of the area. In this analogy, the dish is the game, the chef is the game designer, and the waiter is the user interface. They’re all catering to you — the player. The waiter doesn’t have to do much beyond serve the meal, but he can choose to make it an uplifting and pleasant experience for you and as a result, it makes the experience of the meal better.

If a video game is a conversation between the designer and the player, then the game world is the medium for that conversation and the interface serves as the interpreter to break down the complex language of the game into comprehensible chunks to pass it along to the player. Doom does just this and does it very well. Dishonored 2 takes an ambitious approach to not just do it, but bakes the tone and feel of its game world right into all of the UI. It delivers itself — game and UI — as one coherent package and absolutely nails the presentation.

Doom is the unassuming and plain waiter whereas Dishonored 2 is the elegant, graceful, and charming one. Just as the experience of the meal is heightened by the better waiter, the enjoyment of the game is enhanced by the interface that goes above and beyond. Dishonored 2 is a stellar example of game UI done right, and I hope more game studios take note of how significantly the game can be enhanced when the UI seamlessly integrates itself into the package instead of just existing to serve the message.

Sunset in Dishonored 2

Hopefully this post serves as a good reference for those curious about the UI design of video games. Even as players, it’s difficult to stop and appreciate good UIs because our focus is usually on the more essential things like the visuals, sound, gameplay, or control scheme of the game. The UI is an extremely crucial (but almost always invisible) component of the experience from the player’s perspective and I don’t see enough material or reading about how to do it right anywhere online. The first step is noticing when it’s done well, so I felt compelled to write this post.

If I manage to play more interesting and varied games next year with unique UIs that stand out from the rest, I’ll definitely be continuing this series with more critiques. It could be insightful to see the difference in UI between, say, indie games or open-world RPGs, or even games that try to eliminate the UI entirely. It’s a fascinating field that deserves more recognition, and let this serve as a start for a lot more to come in the future.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store