UI Design for Dark Shot VR

UI in video games and other mediums is in a constant battle between displaying necessary information and making it look clean. Video games usually get away with it by having a lot of UI elements on the screen that inform the player what is going on at all times. In VR however, you cannot place UI elements on the camera as it makes the player nauseous and heavily breaks immersion. Therefore you need to find ways around it by placing UI elements around the map or player's body.

In Dark Shot VR, we needed to display player health, which special arrow you have selected, and the cooldowns of them. We first decided on placing the cooldown of the passive arrows on the bow itself. The cooldown would be showed by the bow changing colors, once it changed back from blue it was ready. For the rest of the arrows and health, we placed the information on the player's free hand. That way we did not overload all the information to one hand and would allow players to understand what is going on easier since your free hand will generally be positioned closer to you. Also, if we placed all of the information on the bow, there would be a lot of different places the player would have to look in order to understand the state of the game. We need the player to be able to understand at a simple glance the state they are in and what they should do. Something also very important to us while designing the UI was to include numbers for the cooldowns of the arrows. The reason being that if there were serious players playing the game, they want to know exactly at a glance what they have to do instead of guessing through the progress bar countdown. We wanted to overall make sure the design allowed for a high skill ceiling so that players could always improve on what they were doing.

As far as the look of the hand UI, we wanted to place the three equipment arrows, the selected ultimate, the cooldown of both, and the players health on the hand. We placed the ultimate on top and made it bigger than the rest because we wanted it to feel more important than the rest. And once you use the ultimate arrow, the ultimate icon switches to a percentage showing you how much more is needed before you can use your ultimate again (Similar to Overwatch and their ultimate build up). The other three were placed on the left right and bottom section of the UI where they were all tied to the same cooldown. That way they were still important and can be used, but still not as important of the ultimate. Once you used one of those arrows the middle icon switched to a progress bar with a countdown until you could use the special arrow again. The reason being is that the majority of the icons on the hand are tied to the same cooldown so putting it in a median zone helped show that the three arrows were tied to the same cooldown. Also, whenever you selected any arrow the icon in the middle would switch to what you have selected for more feedback on what you select. The player health was placed on the outer rim of the hand so that we could have the health dissipate radially so that the player could see easily how much health they had.