INTERFACE design
Goal
Create intuitive interfaces that prioritize gameplay over scrutinizing information and navigating menus, while allowing for a robust customization system.
Challenges
-
Many customization options, must be easily navigable for quick transition to gameplay.
-
Several streams of information flow to the player during gameplay, cannot clutter screen.
-
Controller forward game, make it accessible so haptics can be used, also it's more fun with two sticks.
Solutions
-
Customization presented as a slotted grid with labelled keypresses to streamline navigation.
-
Simple info panes which lean visuals rather than text and slide-out menus that vary based on player position.
-
Reactive UI tailored for use with a controller, utilizing haptics and visual triggers to inform player of cooldowns, damage, and other effects.
Out-Game Menu
In the prototype, our out-game menu only existed as a screen where the player chose a ship type and color, then connected to a team via direct IP. Customization was nonexistent at this point, so when the game was entering the next stage of development I made the priority.
Concepts
At right are my concepts for the customization screens. Since the game was still being fleshed out when these were created, there are several elements that were cut or redesigned, such as the "pilot", when I set about creating my wireframes.
Wireframe
Below is a wireframe I created to detail the functionality and screen transitions for the out-game menu. I opted to design the menu as if this was a Nintendo 64 game, reflecting our visual design ideology for the models and visual effects.
I leaned into using large fonts and bulky buttons with exaggerated highlight effects with the goal of making controller navigation easier to follow. Some game systems, such as the color customization and number of abilities, were simplified to cut down on screen clutter.
Final Implementation
The menus were implemented almost exactly as shown in the wireframe above, with the exception of the "player info" bar at the bottom. In our final iteration of the menu UI we repurposed this bar as an area to show the current party rather than make players navigate to a separate screen to see this info.
In addition our game modes underwent somewhat of an overhaul, expanding from just one to three. The play screen was created to allow players the ability to choose each game mode before launching into the game with their party.
Stylized versions of the players fly around the colony as they prepare to scramble.
The camera can be rotated to inspect the player's ship from different angles.
Similarly to skills, gear was sorted by rows corresponding to slot as well. Gear heavily influences the strengths and weaknesses of a ship.
Stylized versions of the players fly around the colony as they prepare to scramble.
hud
The gameplay UI was originally slapped together for our prototype. When eventual release became a reality this system needed to be scrapped and completely redesigned. In addition to needing a complete visual overhaul, there was much more information which we needed to display.
Our prototype UI included only very basic information, and was originally conceived as in a very steampunky style. I decided it was best to scrap everything and start from scratch.
My initial concept. I quickly decided that this design cluttered the play area too much, making the visible area of the gamespace uncentered and oddly shaped.
Our final UI. The design remained essentially the same but now features sliding prompts which activate based on the player's location along with iconography to represent the functionality of their skills.
Our prototype UI included only very basic information, and was originally conceived as in a very steampunky style. I decided it was best to scrap everything and start from scratch.
UI Components
1.
2.
3.
HP and XP bars.
Cargo fills as salvage is collected and Cash earned is above.
Team Info: Teammate name and current HP.
4.
5.
6.
Colony Info: HP bar (with numeric value) and current population.
Play Area: HP bars above all ships, elements on each display tier.
Wave Info: wave number, time elapsed, threat count.
7.
8.
9.
Ability Bar: Level up indicator at top, labelled ability icons with cooldown overlay below.
Minimap.
Slide-out bar, displays player location-based commands.
A Sea of Icons
These symbols were designed to represent various skills and equipment. Our intent was to communicate the essence of how each of these components functioned
Icons are displayed both in the customization screen and in-game next to the corresponding skill button, for quick identification at a glance.
Damage Effects
I created two immersive effects to reinforce the amount of HP displayed on a player's health bar. My goal was to convey the damage without use of numeric values and to scale the effects based on the amount of damage the ship had already sustained.
The first was a particle effect to visualize physical damage to the ship. I chose to represent this as venting plasma, as if the ship had a ruptured hull. We ramp this visual damage up as ship health decreases to help show the player they are in danger.
The second is a damage overlay, designed to look like a cracked cockpit, affecting the whole screen. This effect appears on top of both the play area and UI, which becomes more apparent as higher damage is accrued. Once at critical health, the screen is almost completely obscured, until the player is able to repair their ship.
in-game menus
My intent when designing these menus was to make everything simple. To avoid clutter, access to the menus was split across a few activation methods.
-
"Start" button brings up a standard in-game menu through which the player can only access options, quit or resume.
-
Flying a ship over the colony activates a slide-out which allows access to the Shop.
-
Flying a ship within the highlighted build area around the colony activates a slide-out which allows access to the Tower menu.
Tower Menu
Pressing the button displayed on the slide-out brings up the tower build menu below. Highlighting a tower icon brings up the cost and a short description of behavior. Each class has access to a unique set of towers which complements their role in the team.
Shop Menu
The Gear Shop is slightly more complex than the tower menu, each item has five levels of effectiveness. Ship class determines which pieces of equipment are available for players to choose when customizing their ship.
Controls
Control layouts are accessible through "Options." The controls displayed are determined by which keypress the player uses to access this menu.
"Intuitive" was first and foremost our ideal when designing the controls. We attempted to mimic many existing control schemes while keeping the number of buttons to a minimum.
Endgame
In the prototype our endgame screen was just a field of static with red text that said "Game Over." When we set about reimagining the conclusion of each level we wanted to supply the players with some interesting statistics, loot, snarky "accolades", and of course XP.
Our Gameplay Designer created the concept at right and handed it off to me with a design brief for finalizing.
We required two versions of the endgame interface, one for a successful mission and one for a failed mission. In addition to suggesting demerits (negative accolades) for the loss screen, I leaned into using more alarming colors that matched both the pirates and our damage effects.
I was given a great opportunity while creating the release UI for Stardrift Nomads, in that I had constant feedback from testers and convention goers during development. This back and forth between myself and the players as they were interacting with our interface live, helped shape the final product as I incorporated suggestions and affected tweaks to pain points.
From the bare bones of the prototype we made great leaps and bounds when finalizing the UI for release. I believe we were successful in creating a reactive interface that could be intuitively used by both controller and mouse/keyboard.
Over time, we heard less and less suggestions and complaints from our players about the interface or navigation within the game. Ease of access and simplicity of interaction gave way to our players focusing on gameplay, strategy, and just having fun.
In the end, I supposed that's what good UI is all about, facilitating gameplay rather than being a barricade to fun.
