Á

スターフィールド (Sutafirudo)

I've been playing a certain high profile video game that I felt had poor UX/UI menu design. I set out to design it differently.



The Menu System

Menu systems in video games seem to be inevitable, particularly the more complex a game is. This is an ongoing project that I'm undertaking for fun, and I'm slowly working through the different parts of the menu system as I re-design them envisioning a better experience. With Sutafirudo, I'm exploring the following menu areas (gray = not done yet):

  • Pause Menu
  • Map
  • Quests
  • Player/Character
  • Loadout
  • Inventory
  • Skills
  • Ship
  • Load/Save

Areas that I have completed will be documented on this page and I will add more as I make progress. Chek out the all-encompassing Figma prototype that will grow as I tackle different areas.

I'm designing with console controls in mind, but the prototype works via mouse click.

Sutafirudo Figma Prototype


The Pause Menu

Pressing the menu button brings up a dashboard with a spattering of information. Through this screen you can access other parts of the menu system.

I find the original design to feel sparce. While I appreciate the use of white space, the pause screen feels too minimal. The quadrant design separates the information too much. There are five main focal points but they are spread out and that requires your vision to zigzag when switching between different categories.

For my pause menu, I went with a triangle layout that places the primary information in a familiar reading pattern. Because the game lacks a minimap (that being a separate issue), bringing some of that information to the pause screen would add utility and help balance the space.


The Map

The view button brings up the game map. This can also be accessed through the menu screen. This game has a four-layer map system, ranging from star clusters to ground maps.

The original design does not allow the player to freely switch between the different levels of the map system. This prevents the player from charting their voyages based on the ground information of a destination. The 3D topography is a pretty cool effect that helps the player undertand the change in elevation.

My map makes clear the current layer of detail that you are viewing and would allow the player to go up or down. I also added colored areas that tell you where certain resources are located. My topographic map is 2D, but a 3D effect would help accentuate the change in elevation.


The End. Where to now?