UI’s Impact on the User Experience

Many people play games for enjoyment, stunning visuals, and charming character personalities. However, an often overlooked area that brings these things together and greatly affects the game’s user experience (UX) is the user interface, also known as UI. This is a graphical element that affects the player's user experience while playing a game.

While a simple button might be functional, functionality alone is often not enough for a visually positive or satisfying user experience. These embellishments need to be intuitive, fitting for the aesthetic of the game, and unique in their design. Much like most work in the preproduction of a game, this requires a lot of testing and iteration to understand what treatment best meets the functional and creative needs.

For our game, Boogie Beyond, we did not have a good understanding of UI needs when entering preproduction. Once our level design (layout of the game) was set up in Unreal (our game engine of choice), we were better able to see the interactions and needs for the menu’s layout.

I began concepts for the most important menu - the main menu. I picked two locations that existed within the game map and worked within the chosen menu buttons. After making a few adjustments and iterations, those concepts were reviewed by the team and one location was selected. This cycle of design and review was repeated until we reached the final product for the main menu.

Main Menu Concepts

Once the main menu was complete, work on the UI for the dance battles began. Using the agreed upon general layout, I made a collection of varied buttons which would show progression of when a user should hit the button to the song beat. The design team played around with shapes and VFX to see what would, and what would not, be over stimulating to the player.

Dance Battle UI Concepts

This part of the process took many hours of tinkering. Our team wanted this interaction to be intuitive because it is a core mechanic in how a player interacts with the game. And, as a VR game, we wanted to avoid confusion and eye strain, which could lead to motion sickness. Examples of things that could impact player confusion, eye strain, and motion sickness are the use of poor color, too much movement in the environment, and complex game mechanics. We want the best experience for any type of player who wants to play our game. Therefore, we spent time refining the dance area, movement around the map, and all interactions that go with those moves.

Finally, I want to share a few extra images of the handheld menu UI to show more examples of the progress behind Boogie Beyond – from first concept to final implementation.

Handheld Menu Early Concept (left) and Final Concept (right)