Alex Baird UI | Fallout 76 UI Redesign

2024 | UI Redesign

FALLOUT 76 - MENU UI REDESIGN

A personal project & UX exercise - exploring a critical analysis and UI/UX rework for Bethesda Game Studios' online multiple RPG title, Fallout 76, to improve the navigation and information visibility in the in-game menu system.

Made using Adobe Illustrator.
This is in no way affiliated with Bethesda Game Studios or Microsoft; it is a personal project.

CHANGING THE DEFAULT VIEW

There are three different version ("views") of the in-game menu system in Fallout 76:

The Pip-Boy view - the default view, and the most "immersive" option: UI is rendered on the screen of a device on the player's arm, complete with post-processing and lighting effects.
(Which of course comes with readability and accessibility issues).
The transparent view - an alternative view of the menu system, UI is detached from the Pip-Boy and rendered on screen at a slight angle, with a transparent background that allows the player to see gameplay behind the UI.
The Power Armor view - a unique display, available when the player is wearing Power Armor.

My focus on this design exercise is on the transparent view as I believe it should be default - it allows for more screen real estate to be dedicated to UI and the transparent background gives players a view of live gameplay (an important feature in an online game with PvE and PvP, where danger could be approaching the player while they are in menus).

While this does mean the iconic Pip-Boy menu would be the "secondary" option in what I'm proposing - it wouldn't eliminate it from being an option, it would just mean the more readable and accessible option would be on by default.

GLOBAL CHANGES

There are multiple changes I am proposing that will be global changes across all screens in the menu system:

1. Minimum font sizes are increased.

Originally, body text was 32-40pt on a 4k screen (not including text scaled down for localisation) - I have changed this minimum font size up to 56pt, which is the minimum recommended font size in Microsoft's Xbox Accessibility Guidelines.
We should avoid going lower than our minimum font size - strings will need to have enforced character limits to avoid shrinking text including with localised text.

2. Subtitles will be visible while the player is in the in-game menu.

As it is an online game and gameplay doesn't ever pause, NPC dialogue and audio logs will still play when the player is looking at the menu system. Currently, subtitles do not display on-screen when the menu system is open.
I have made some space to ensure subtitles can remain visible on-screen while the menu system is open; to ensure players with auditory processing issues can still be aware of noise and dialogue while in menus.

3. Prompts are better contextualized; the prompt bar at the bottom of the menu will be sorted into 2 lines (one for general global menu actions, and one for prompts relating to the currently highlighted menu item), and list sorting prompts will appear at the top of the list.

We can better accommodate for long localised strings, as there is now more horizontal space for prompts.
General global menu action prompts will now be in a consistent place across all screens.
There will be a stronger connection between the sorting prompt and the list of items being sorted.

4. Added a horizontal boundary to tracked quest text.

Tracked quests appear on the right side of the screen on the HUD and in all menus; currently, there is no horizontal boundary for strings to take a new line - they will just continue across the screen for as long as they need.
Adding a boundary and forcing text to take a new line ensures a clearer separation from the tracked quest list and other UI elements, preventing overlap on elements.

5. Global information visible on the bottom border of all screens.

Currently, the information that appears at the bottom of the game menu (e.g. carry capacity, armour resistances, currencies, etc) will change depending on the menu that is visible. The bottom bar will now display all information, consistently.
The player now won't have to navigate between screens to find quick-access information (like inventory weight or currency); they will be able to check with a quick glance.

6. Rearranged tabs to ensure all tab names could be visible at once.

Mostly a problem with the Inventory (INV) menu; multiple item categories/tabs were split into 2 in Fallout 76 (compared to all previous games in the series), this has bloated the number of categories up to 12. I have reduced this to a maximum of 8 (though I feel even that is still too much).
Having fewer tabs to navigate and ensure all tab names are visible (and able to be selected with a single click with keyboard and mouse input) is important; it allows for greater overview over the different item types the player has, and allows for quicker navigation.

THE STATS MENU SYSTEM

Fallout 76 is heavier on survival elements than other games in the series - in some of the later games in the series, hunger and thirst were optional features - in F76, they are base features.

Alongside health and radiation, the player must manage their hunger and thirst using (often irradiated!) consumables. Due to the post-apocalytpic nature of the game, these consumables often come with negative effects - e.g. drinking water will give radiation poisoning, but radiation treatment causes increased thirst, etc. The player can also pick up a variety of status effects - from weaponry/traps, injuries, drugs, diseases, etc.

It's important to manage all these stats and to have a good overview of them all, as they are all interconnected.

STAT - STATUS

I added visiblity over the player's radiation level back into the Status screen; this feature was removed in 4 and 76, resulting in the player having no numerical visibility over their radiation sickness - their only visibility now is the reduced red section of their health bar.

I added the visible radiation level back in as I feel it's a very important stat to show the player in a game based in an irradiated post-apocalyptic world - I believe it is especially important for players to have visibility over the numerical value of their radiation sickness, as radiation reducing Aid items use numbers in their stats. What does -10 Rads mean if the player does not have a number for how sick they are with radiation?

Similar to showing the numerical value of the player's radiation level, I also decided to add a numerical representation of XP back into the Status screen - earning 10 XP for an action feels arbitrary to players if they don't have any context on if this a lot of not, or on how much XP they need to get to the next level.

Redesigned Menu

Original Menu

STAT - EFFECTS

There is a nice transition between the Status and Effects screen with the backer behind the status effect icons on the left expanding out to the right to display status effect text; there is an awkward extra bit that appears on the left however, so I've removed that.

Overall, the layout of this screen is nice and clear so I've made no changes there (beyond updating the screen to fit the global changes I've made) - I did add some colour-coding to the status effects however, just so the player can differentiate between positive and negative effects at a quick glance and know which ones need actioning.

Redesigned Menu

Original Menu

STAT - SPECIAL

I made no major changes to this screen, other than updating the layout to fit the global changes I'd made.

Redesigned Menu

Original Menu

STAT - COLLECTIONS

Similar to the Special tab, I made no major changes to this screen other than fitting the global changes I'd made.

I did make one small change: I moved the capacity count for each currency to the top of the description, and added a paragraph space after and capitalization to the text, to ensure the player's visibility over their capacity for each currency was clear and consistent.

Unlike other games in the series, Fallout 76 has multiple currencies (with new ones being added occasionally in live updates) - and (again unlike other games in the series) there is an upper limit to the amount of currency the player can hold; so I feel it is important to clearly provide this information to the player.

Redesigned Menu

Original Menu

THE INVENTORY MENU SYSTEM

Being a mix of RPG and survival, inventory management is important in all games in the Fallout series. Inventory in these games is limited only by carry weight, with excess items being able to be stored in a player-owned home (or other misc storage area).

In Fallout 76 however, there is another element that adds to the player's need for frugality and management of their items: storage space is limited (unless the player has a paid monthly Fallout 1st membership subscription).

Players must take extra care in this game in deciding what items they may need and what must be thrown away, making inventory management all the more crucial - and making a robust, accessible and intuitive inventory user interface essential.

INV - WEAPONS

Due to needing to accommodate for "blank" space on the screen (to display tracked quests, show gameplay behind the screen - or in the case of the base Pip-Boy view, show immersive visuals), screen real-estate is valuable and scarce in Fallout 76. It is important to be frugal with what and how information is shown and how it is laid out to ensure the player gets all the information they need in a game with intertwined RPG and survival features.

In the base game, there is a scrolling feature used on item overview information due to the vast amount of information sometimes not being visible all at once - I have decided to try and eliminate the need for this, as it's important that the player can see key information at a quick glance.

Displaying information for weapons has been the biggest challenge; all weapons have between 6 to 12 stats to show - NOT including any extra effects from modifiers (though I have accommodated for 3 lines of them, just in case).

I re-arranged the layout of information, sometimes relying solely on iconography and numbers over text descriptions to fit it all in, to ensure all information was visible at once, without the need of a scrolling feature. I also added in some colour-coding, so players can see positive and negative comparisons to other items quickly and clearly.

It was a struggle to show all these possible stats PLUS a render of the item; I believe a render of the item is nice to show, but if needs be, it could be covered with modifier text as that information is more vital.

Redesigned Menu

Original Menu

INV - APPAREL

In other games in the Fallout series, Armor and Apparel were one category - Apparel - in Fallout 76, this was split into two. I have decided to merge Armor and Apparel back into one category to combat the issue with this game having an excessive number of tabs in the Inventory menu system.

I believe these categories were acceptable to merge back together as Armor and Apparel items take up a decent amount of weight, so the player will need to be frugal with them, and will unlikely be carrying a lot of these items with them.

Redesigned Menu

Original Menu

INV - FOOD/DRINK & AID

Aid was another category of inventory item that was split into two in Fallout 76 - now being Food/Drink and Aid.

I decided to keep these item categories split, as it's more appropriate to have the distinction in this game than others in the series due to the added survival features - players need to manage their hunger and thirst while also juggling a variety of status effects they pick up in their journey, so having a distinction between Food/Drink (for managing hunger and thirst) and Aid (for managing status effects) felt important.

I decided to change the format of consumable items to make the modifiers clearer, by moving the information to the top of the info lines, changing the text colour, and expanding the text to be more descriptive (e.g. "+1 END for Xs", instead of "END 1").

Redesigned Menu (Food)

Original Menu (Food)

Redesigned Menu (Aid)

Original Menu (Aid)

INV - MISC

The Misc category is - as the name implies - anything that doesn't fit into other item categories. They are often quest items, decor items, currencies, or assorted tools (e.g. bobby pins and keycards). As a result, they don't need additional information beyond weight and value, and have no interactions.

Redesigned Menu

Original Menu

INV - JUNK

The Junk category is composed of crafting components - and items that can be scrapped into crafting components. Fairly simple, the core important pieces of information for this item category is value, weight, and the components gained from junk items.

Redesigned Menu

Original Menu

INV - AMMO

Further adding to the complexity of inventory management, ammo in Fallout 76 now has weight added to it; making it another item category that needs clear information to aid players in managing their ammo stock.

Redesigned Menu

Original Menu

INV - MODS

Mods are created when players use the crafting system: when applying a change to an item, a Mod is made and applied to the item. Mod items do not appear in the player's inventory unless they apply a mod/change to an item in a slot that already has a mod; that existing mod is then removed and put in the player's inventory.

The player is unlikely to have a lot of these in their inventory as they're likely to be sold or scrapped for crafting components when replaced with a better mod; but it is still another element of inventory management that needs clearly communicated to the player.

Redesigned Menu

Original Menu

THE DATA MENU SYSTEM

The Data menu system is used solely for tracking quests in Fallout 76 - in previous games in the series, the menu system was also used for viewing gameplay stats (e.g. crimes committed, mutants killed, etc) the game map (now moved to a separate menu system in Fallout 76) and for viewing notes and audio logs (which have been moved to the already overloaded Inventory menu system in Fallout 76).

I have decided to move the notes and holotapes tabs back into the Data menu system; I believe it makes sense from a categorization point-of-view (notes and holotapes are not items that need to be managed as they have no value and no weight, and they are pieces of data/information, fitting for the Data menu) - it also makes sense in terms of cleaning up the menu systems and reducing the number of tabs down in the Inventory menu system.

DATA - MAIN QUESTS

I changed the tracked marker on quests in the Main quests tab to display the outlined square shape that is used to represent main quests elsewhere in UI (on the map screen, tracked quest list, and on the HUD compass).

Redesigned Menu

Original Menu

DATA - SIDE QUESTS

Similar to the Main tab and tracked main quests, I have changed the tracked marker on quests in the various side quest tabs (Side, Daily, and Events) to display the outlined diamond shape that is used to represent side quests elsewhere in UI (on the map screen, tracked quest list, and on the HUD compass).

For quests that are timed (e.g. Events), the timer counting down to the end of the event will be displayed on the quest item in the list on the left.

Redesigned Menu

Original Menu

DATA - NOTES

As mentioned above, I had added the Notes tab back into the Data menu system (it used to be in the INV tab).

Notes contain written information the player can read, and do not have any weight or value, so feel more appropriate to display in the Data system rather than the Inventory system (which is already struggling with 8 tabs, reduced down from 12).

Redesigned Menu

Original Menu

DATA - HOLOTAPES

Similar to Notes, I added Holotapes back into the Data menu system to reduce clutter in the Inventory menu system - and because it categorically makes sense (Holotapes have no weight or value, so do not need to be involved in inventory management).

I also brought back the playback information that was present in previous entries in the game series (namely 3 and New Vegas); so players can now see a visual and numerical representation on how long a holotape's audio log is, and how far along through the audio file they are.

Redesigned Menu

Original Menu

THE RADIO MENU SYSTEM

The radio menu is very simple and isn't lacking in any information - or visibility over information. For this screen, I have just updated it to match the layout and treatment of other screens.

Redesigned Menu

Original Menu

UPLOADING HOLOTAPES TO TERMINALS

This is (somewhat) unrelated to the game menu systems, but has been a significant pain point in my own gameplay experience in Fallout 76!

Typical to the RPG game genre, the player will collect a large number of notes and holotapes that contain various bits of lore during their gameplay experience.

A feature that was introduced in Fallout 4 and used a handful of times - then used again in Fallout 76 is used many times, was uploading holotapes to terminals in the game world. This is a feature that is used to progress many quests - main and side - in Fallout 76 (likely a legacy feature from a time where there were no NPCs to interact with in the game, so most quests were gained and progressed through interacting with notes, holotapes, and robotic vendors).

When uploading a holotape to a terminal in Fallout 76, the list has several issues that make is not user friendly:
The player can only see 4 entries at a time.
There is no discernible order to the list (holotapes are listed alphabetically by default in the game menu; that is not the case here).
There are no markers to distinguish what holotape needs to be uploaded to the current terminal to progress the quest.

The UX issues with this UI only become more and more frustrating the further through the game the player progresses - as they will only pick up more and more holotapes - making what should be a quick action, sluggish and confusing.

I have made several changes to combat the issues with this UI:

Quest-related holotapes will have a quest marker on them.
Quest-related holotapes will appear at the top of the list.
All other holotapes will be ordered according to how they are ordered in the player's menu (e.g. alphabetically).
The visible list size will be more than doubled, so 13 entries can be shown at once (though there is the screen real estate available to further extend this, if need be).

Redesigned Menu

Original Menu

ALEX BAIRD