Diegetic UI
A HUD Interface Design for First Player Shooter game
THE Goal
I'm a paragraph. Click here to add your own text and edit me. I’m a great place for you to tell a story and let your users know a little more about you.
The Insipiration
I am passionate at gaming, like 3 hours a day exploring different strategies and different gameplays. One of the category I like the most is FPS. So I draw my inspiration from the top 3 games I like.
Dead Space
Dead Space
In "Dead Space", Isaac's health and stasis energy levels are displayed as lights on the spine of his RIG suit, making the information available in the game environment without a traditional HUD.
Metro
In "Metro" series, the amount of time left on the player's gas mask filters is shown via a physical wristwatch.
Metro Metro Dead
Halo
the player's HUD, represented as the visor of Master Chief's Mjolnir helmet, displays critical information seamlessly. This includes shield and health status, weapon and ammo details, a motion tracker for situational awareness, and clear objective markers. The HUD also reacts dynamically to in-game events and environmental factors, enhancing the immersive experience.
Halo Halo Halo Halo
Breaking Down The Process
The Visual Ideation Process
- The edges of the visor show the player's health and shield status as intertwined helical designs. Blue helix for shields, red helix for health. Depletion causes the helices to retract towards the sides of the screen.
- Ammo count is displayed holographically on the weapon itself when the player looks directly at it, fading away when aiming to ensure an unobstructed view.
- An interactive compass embedded at the top of the visor, which subtly illuminates objectives when the player faces their direction.
- An integrated enemy tagging system, where a light red outline identifies threats. The intensity of the outline increases with the threat level of the enemy.
- A quick-command system, where players can "swipe" on the inside of their helmet (analogous to swiping on a touchpad or using quick commands on a controller) to call up a wheel of available commands or gear.
The Sensory Process
- When the shield is about to deplete, players feel a "pulse" vibration to signal imminent danger.
- Upon taking damage, a subtle red flash from the direction of the attack gives a visual cue to players.
- Directional audio cues, such as muffled footsteps or distant gunfire, get enhanced visual cues on the visor.
What the user have in control?
- Players can customize the transparency and color of individual HUD elements, ensuring an experience tailored to their preferences.
- Voice commands allow players to pull up specific HUD elements, like asking the onboard AI for a map or status update.
How is the immersive?
The Experience
The Mjolnir Visor HUD acts as a genuine extension of the player's in-game self. Every element is contextualized within the game world, ensuring players never feel pulled out of the experience. The HUD responds directly to the player's actions, environment, and threats, making them feel wholly connected to their avatar.