Menu


Escape from Tarkov Menu UX Redesign

1.12.2020

Tarkov is one of the most atmospheric multiplayer games currently out there. The gameplay is a unique PvP experience that combines infuriating realism with feelings of constant fear and stress; unfortunately, the same can be said about the game menus.

This post points out some of the UX problems in Tarkov’s menus with some tangible examples of how they could be improved. There are numerous issues with the in-game UX, but this article focuses only on the menus. The article is my own personal point of view; I have zero relation to the creators of Tarkov, Battlestate Games.

Escape from Tarkov Menu UX Redesign

For those new to Escape from Tarkov, it is a first-person shooter game that aims to capture the experience of stepping into the shoes of an ex-military survivor who’s just trying to make it through the day in an unforgiving world. Tarkov isn’t your typical hero shooter where you blast away platoons of enemies – the first bullet usually kills you and, as the game title says, your main goal is usually just to get the hell out of there before bleeding out.

While the game very visibly states it is work in progress, it has been in public beta for three years as I write this. Sure, many early access titles have some “quality of life” problems, but three years should be more than enough to do something about the numerous issues in the game’s user interface.

The game has a somewhat unique point of view on player experience, so it’s better to go through some background info before diving into the problems.

Player Experience Vision of Tarkov

Tarkov isn’t about being a military rock star. Most of the time you are lacking resources, scavenging abandoned buildings for nails or an unspoiled pack of food. In the dog-eat-dog world of dystopic Russia you shoot before asking questions as you claw your way up the local food chain, and temporary alliances during raids often end up with a knife in the back.

The game’s take on realistic damage makes it one of the most stressing games I have ever experienced. Movement is about careful observation before dashing for the next cover, never knowing if those steps will be your last. The learning curve is just out of this world and during the first hours of the game you build a habit of hugging the ground whenever you hear any sound even remotely suspicious. You just need to learn the hard way how to survive or… eh, die trying.

In Tarkov more is definitely more.

The second important aspect of the game is the spectacular amount of details. You don’t just have hit points, but body temperature, different levels of bleeding (for each body part, of course), hydration, stamina for arms and legs… well, you got the idea.

The same principle applies for the true main character of the game: firearms. Each of the guns in the game can be broken to pieces and fine-tuned using the hundreds of weapon mods available. In Tarkov more is definitely more, and it’s easy to lose hope with the weapon modding unless you were born to be an engineer.

High Level Menu Review

Complex. That’s the word that describes Tarkovs UI menus quite well. While the appreciation of details is part of the game’s player experience vision, there’s a definite “made by engineers for engineers” attitude in the interaction design of the game, with a strange fascination towards long list full of irrelevant details. A notorious example of this is the flea market, where the screen is filled with numerous details while the player is often unable to simply purchase the stuff they want to.

When playing Tarkov for the first time, you’ll probably notice some basic UI conventions have been thrown out of the window. Many buttons simply feel to be in wrong places or lacking affordance and some basic actions feel tedious. I made a simple usability test using a colleague as test user; it took them several minutes to figure out how you can do a task as simple as selling an item from your inventory!

Tarkov’s menus are unstructured and in dire need of harmonization.

The designers of the game also seem to love icons. While icons in general can make it easier to understand context and increase glanceability of the UI, adding an icon for every single action makes the layout cluttered and undermines perceived menu hierarchy. It’s sometimes hard to find the important buttons when every single button has an icon next to it.

Tarkov suffers from a symptom typical to games that have chosen the long beta testing path: the menus are unstructured and in dire need of harmonization. Many of the screens feel like they simple were added one by one into the game, requiring the player to visit them just to see if there’s anything worth visiting in the first place.

Another problem with the menus is that they’re just plain boring. Now, remember we’re not talking about a spreadsheet software but an entertainment product – part of the experience should be the menus feeling great. The latest large addition to the game, player’s Hideout, was an attempt to bring 1st person view immersion into the menus, but it feels like a completely different animal compared to other areas of the game, plus it has several usability issues considering we’re talking about  a game with such a wide feature set.

On the positive side the high-level menu flow is functional. Many of the screens benefit from having tabbed navigations, so having one main screen with individual buttons instead of tabs is sensible.

Main Screen and More

The main screen of Tarkov is really lacking oomph, looking much like 90’s NES main screen. Considering the game has only one player character, using the screen estate to promote that character would both look sweet and also prevent accidentally going to raid with no equipment.

Since the main screen is used as the root level of the game’s navigation, it would also make sense to add some informative elements in there: the player level (or more like xp needed for the next one) and important crafting statuses. A nice extra would be letting the player know if any crafting items are about to be ready within the next minutes.

Current main screen Current Main screen.

Redesigned main screen Redesigned Main screen. Let’s put that player character into the spotlight!

On global level some menu restructuring would be useful: add Flea Market to main menu and include Tasks in footer menu. Tasks (player quests) in general are important in early and mid-game and the player should be able to access them quickly. Status high lighting (e.g. displaying the number of completed tasks as a number near the Tasks button) in general would help the player to identify areas of interest and reduce the amount of visiting screens just to see if there’s anything worth visiting in them.

Global UX issues in Tarkov menus

  • Buttons lack affordance; quite often they don’t look like buttons at all. While this is an art direction choice, introducing an interaction color (light orange in my design) would help a great deal.
  • “Back” button is located on the right-top corner of the screen. While this is natural for closing dialogs, it can feel out of place on regular views. The most logical place in this case would be the left-top corner of the screen.
  • Footer menu grouping is not very logical. It would make more sense to have the main items on left and less important items on right.
  • Some of the micro-copy has a developer-oriented point of view; searching for barter type items for instance is called “Required search”.
  • All confirmation buttons are labeled as Yes/No, and the player needs to read through all the text to figure out the context of the buttons. An item deletion confirmation dialog, for instance, should have Delete/Cancel as button labels.
  • Last of all, Hideout’s generator status should be displayed near the Hideout button. Leaving generator accidentally on (or off, in later game) is one of the most common user errors.

Inventory Tetris

Tarkov’s inventory management is a whole masochistic mini game of its own. The player has a 2D grid for their stash, which never quite has enough space for storage. While the reduced storage space forces the player to make interesting (although sometimes painful) choices, working with an almost full stash makes you want to claw your eyes out.

A typical mid-game raid ends with a situation where the player needs to cram their backpacks inside eachother like Matryoshka dolls, storing soap and gun parts in vest pockets and equipping your character with six guns just to make room for those things you want to sell for some hard needed cash.

This video illustrates how painful it can be to do something as simple as changing the pistol grip for a weapon.

The inventory design greatly harms the overall experience, and a simple fix would be to introduce some type of temporary working area that is not part of the player’s limited stash. This temporary area would be wiped at the start of each raid, allowing flexibility for stash management without letting the players cheat for extra space.

Current Gear screen Current Gear screen.

Current Gear screen Redesigned Gear screen. Temporary Desk allows better inventory manipulation while not in raid.

A Temporary Desk would allow quick selling all of its contents for the trader(s) offering the most rubles for them, eliminating one of the most laborious chores in the game. Each trader usually buys only certain type of items, so getting rid of the post-raid junk usually involves a tedious menu samba between several traders. To add insult to injury, there are separate screens for buying and selling items.

Current Traders screen Current Traders screen.

Redesigned Traders screen Redesigned Traders screen. No more separate tabs for buying and selling.

Other than the awful use of inventory space when not in raid, Tarkov’s inventory does a lot of things well. The inventory’s 2D grid mental model is also used in other menus, even in the Traders screen, preparing the player for inventory management during the raids. It’s important to understand here that inventory management during raid isn’t just about picking up loot; it’s about rummaging through containers, sweating and hoping there are no enemies nearby picking up the noise you make. In-raid inventory management supports the game experience vision, but outside the raid the effect is completely opposite.

The inventory also displays item hotkeys and even live graphics for all the weapon mod combinations. As a cherry on the top, the player is able to preview their reflex sight by rotating the weapon inside the weapon inspection screen!

Current Inventory right-click menu Current Inventory right-click menu.

Redesigned Inventory right-click menu Redesigned Inventory right-click menu. Notice visualization of the results of some actions and location of the flea market buttons.

Here’s a list of some smaller UX issues in the inventory management

  • Flea market interaction. Searching for (related) items from the flea market is very common while in inventory. This action is somewhat hidden in the middle of a right-click menu and should be emphasized. The game actually experimented with a second level menu but reverted the back, probably due to usability problems.
  • Unpredictability of actions. Quite often you open a container or search the flea market for an item, just to find out you hit a dead-end. Capacity of containers should be visualized and (estimated) number of items on flea market should be listed before the player starts the search.
  • Multiple item selection. Allow selecting multiple items in the same fashion as in most file explorers (by dragging a rectangle around the items).
  • Item rotation. Currently you drag an item with mouse and press R key from keyboard to rotate it. How about just having that action in the right-click menu?
  • Gear tab is the most often visited tab. Let’s make it the first item in the tabbed navigation.
  • Keyboard shortcuts should be displayed in tooltips.

Flea Market Nightmare

The game’s flea market, a lively hub for player-to-player trading is the place for scavengers to sell their hard-earned treasures and for Hideout builders to easily get the materials they need. Or that’s the theory at least. In practice you probably end up scrolling through one of the endless listings, just to find out someone else had already purchased the item once you finally get there.

To me, the flea market is the section of the game that really drives you insane. Nine out of ten attempts to buy some high demand item result in a modal dialog that mocks you for not being fast enough. Now, you could of course say you can just go for the high-priced offers and avoid all the frustration, but in the early and mid-game that’s a luxury you probably can’t afford.

Here’s a video describing your typical flea market experience.

To twist the knife even further, the lists are often swamped by useless barter items (trading guns for sugar, nails for sugar, even sugar for sugar) that make the listings very taxing to your mouse wheel. There’s a separate Search Settings dialog, but it’s so slow to use that it’s often just faster to go for the scrolling.

Let’s approach the problem by identifying the very elemental use cases: to buy stuff as cheap as possible, or as fast as possible. The basic ingredients for these actions are time and money, and the less the other you have, the more the other you in general need.

My solution is to turn the whole flea market system upside down: instead of browsing all the hundreds of offers, you simply choose the item you need and how long you’re willing to wait in order to get it. The server would then place the players in queues where the next person in any given price range gets to buy the item they are queuing for. This way you can choose to wait for a while to get the best price, or just shut up or gently ask them to take your money.

Current Flea Market screen Current Flea Market screen.

Redesigned Flea Market screen Redesigned Current Flea Market screen. 90% less mouse clicks to get your stuff done.

This approach would be extremely useful for non-combat items, but admittedly it’s not optimal for say, browsing what type of submachine guns there are available. For that purpose, the “classic flea market” should be kept as an option that can be easily switched on or off.

Here’s a video demonstrating the Flea Market redesign in action.

Some smaller UX issues on flea market

  • Filters are hard to access. One solution to this would be to just replace Search Settings dialog with a settings area that uses standardized UI elements.
  • Prices are hard to read. First of all, a thousand separator should always be used; currently it’s used only on some selected views. For second, price in Rubles should be rounded up to the nearest ten Rubles; a couple of Rubles has next to nothing in value and too specific numbers harm readability.
  • Current market prices is hard to find. The prices of items change organically during the course of the day and checking current prices is very slow. A simple solution is to replace the amount of offers with the average price; nobody cares if there are 90 or 42 chocolate bars for sale if they are all overpriced. This would allow the player to just open their wish list to see if there’s anything worth looking at.
  • Bartering with other players is next to impossible – unless you’re trading sugar, of course. Adding a new “Barter deals” screen that automatically checks what items in your inventory are needed by someone would ascent the bartering market from its current gutter. Once again, previewing the amount of available deals in the tab title would save useless clicks.
  • Remove excess information. Do you really want to know the player ID of that punk selling those shotgun shells? The only use case for this is real money transferring, which is currently a huge problem in Tarkov community.

The Time Has Come - Raid!

Raids are the very core of Tarkov experience but entering them unfortunately does a poor job in preparing the player for the upcoming excitement.

Most of the time the player simply keeps hitting the “Next” button until the countdown begins, occasionally jumping back a couple of steps to double-check you didn’t forget to insure your gear. There are some screens that do good job in communicating their importance, such as the map selection, but roughly half of the screens are usually skipped.

A good way to restructure optional screens would be to start using a tabbed navigation at the point the player has made the mandatory choices for the match (PMC/Scav and Map selection). This way people who just want to start the game can see what they are skipping, while the ones looking to customize their raid options have easy way to jump to the desired screens.

Using a group of screens dedicated for starting the match also allows communicating the match details with background graphics and having a better button for finally confirming the match starting sequence.

Current Pre-Raid screen Current Pre-Raid screen.

Redesigned Pre-Raid screen Redesigned Pre-Raid screen. Notice the first tab is Insurance, which is something the players often want to visit.

Redesigned Pre-Raid Group screen Redesigned Pre-Raid Group screen.

Special attention should be given to the Group screen as it is very important for people not looking for a solo raid. The current design lacks immersion and crams all the info to the center of the screen. Strange enough, the only possible interaction with the other players – inviting them to your group – has been hidden into a right-click menu. Being able to see your group members’ gear before you actually start the raid would also be an improvement.

Some other UX issues for pre-raid screens

  • Navigation buttons are located all in one group, and it’s very easy to press “Ready” when you actually meant to press “Back”.
  • The main purpose of the Group view – being open for group invitations – has been hidden into a very small button. Making it an on-off switch would both save time and make it feel like a state rather than an action.
  • Group view info is structured in an unclear way. The list should be sorted and displayed in columns rather than with one long line of text.
  • Your group members’ gear should be visible before you start the match. Nothing sucks more than starting the game with two level 40 randoms who chose to do a hatchet run.

A Functional Hideout

As stated earlier, the Hideout as a 3D navigable area sounds like a great idea on the paper, but unfortunately the player being able to walk around in their hideout just doesn’t add anything into the game. Quite often game-like spaces like this help the player practicing the game controls without them even noticing it, but in Tarkov’s hideout the movement options are artificially reduced. After the first twenty or so seconds the charm of being able to look around simply fades away.

The game’s creators apparently noticed this as well; as you navigate to Hideout, you find yourself looking at a 2.5D top-down view of the hideout with a long list of icons for accessing each of the modules you can interact with. Some of the modules are made for crafting, and therefore visited on regular basis, while others simply act as hideout upgrades. The thing is, crafting takes time and scrolling through the list of twenty modules - just to see how your sweat shop is doing - will start to get on your nerves after a while.

The most obvious solution to the Hideout usability problems is to just list all the module icons on one screen, without scrolling – and grouped so that all the crafting related modules are in one place. Some basic shortcuts, like displaying the amount of fuel in your generator and being able to collect crafted items without navigating to the modules, would also serve as welcome additions.

Last of all, if the player does wish to enter the hideout in the 3D view, they should enter in front of the only thing you actually want to see in 1st person view – the shooting range.

Current Hideout screen Current Hideout screen.

Redesigned Hideout screen Redesigned Hideout screen with generator on.

Redesigned Hideout screen Redesigned Hideout screen with generator off.

Other UX issues on Hideout

  • There are no clear asy indicators for modules requiring fuel, especially with crafting. Once again, grouping modules is the answer.
  • Inspecting a crafting module simply lists the crafting recipes on a long list (up to 35 for Workshop). The player usually doesn’t have the materials for most of the recipes and finding available recipes is painful. Sorting by availability would help.
  • Module levels are hard to distinguish, especially since they have a leading zero. Also, their size is rather large considering their low importance for the player and there’s no way of knowing what the max level is. Using graphics instead of text would help.
  • Lightning and night vision effects are a nice addition, but they take unnecessary amount of space in navigation. Combining them all would make sense.
  • Having both footer navigation and module navigation at the bottom of the screen makes the area feel crowded and makes it easier to miss the buttons. Moving the module buttons to sides of the screen would help.

Screenshots of Escape from Tarkov are copyrighted property of Battlestate Games Limited.

« Takaisin blogilistaukseen