The goal of the UI is to above all else, be easy to follow and navigate, so much so that a tutorial would not be needed. Every part should be designed with clarity and functionality in mind, making sure that players can interact without confusion.
To explore these ideas, I created concepts for both the Field UI and the Menu UI using Photoshop and Unity:
First Blockout of Field UI (Scrapped as it was too cluttered)
Field UI
The field UI contains the essential elements players need while exploring the game world:
Minimap and Compass: Helps players orient themselves and track objectives or points of interest.
Health Bar: Positioning in bottom right corner helps with making sure players can easily monitor their status during gameplay.
ABILITY Slots: At the bottom of the screen, these slots show the player’s equipped ABILITIES (see Mechanics section for more details).
Pause Menu/Journal Button: A clearly marked button behind the Health Bar gives instant access to the pause menu and journal.
The arrangement ensures the field UI is uncluttered, keeping the player’s focus on the action while still providing important.
Menu UI
The pause menu incorporates additional functionality while maintaining the same clarity and ease of use as the field UI. Key elements include:
Main Panel: The far right panel shows the Journal, which logs quests, lore and others. Arrow keys or tabs at the top of the menu also allow players to navigate between sections, such as the ABILITY slotting or inventory.
Inventory System: Clicking on the ‘Weapon’ or ‘Shield**’** panel opens the player’s inventory (displayed where the Journal panel is). Players can choose from their weapons, shields and Marks, selecting them to equip with a click.
Player Stats: Lastly, the stats of the player can be seen on the far left panel.
The UI is designed with consistency across both the Field and Menu UIs. Each interaction is intuitive, with clear visual cues and logical layouts to guide the player’s actions.
By focusing on these principles, the UI serves as a bridge between the player and the game world, enabling focus on gameplay without being confused by complex layouts.
Panels are put in predictable locations to reduce cognitive load when switching between different parts of the menu
Icons and labels are used consistently across the panels to make sure players immediately know what they are for.
Lastly, make the menu and equipping system work more smoothly and easier with players, they will be able to drag and drop the desired weapon, shield or marks to the appropriate slots.
The slots will also be colour coded so players are aware of where the selected item goes. For example, when assigning MARKS to weaponry, the slot will match the colour of the MARK type. If a MARK slot is meant for Vitality MARKS, that slot will be green.
