UI Design and Crypt of the Necrodancer's Heart in the Wrong Place

So, I've been playing a fine amount of Crypt of the Necrodancer, making it to the final group of levels and unlocking most of the content. I can confidently say that I'm having a blast.

However, there's a simple, yet serious flaw that arguably makes the game more unnecessarily difficult than it already is. And it has nothing to do with the difficulty. I believe there's a major problem with Necrodancer's UI in plain sight. Look at the hearts' location.

Crypt of the Necrodancer by Brace Yourself Games

Meanwhile, here's some other UI screenshots for comparison.

The Binding of Isaac: Rebirth by Edmund McMillen and Nicalis.

The Legend of Zelda: A Link Between Worlds by Nintendo

Blossom Tales: The Sleeping King by Castle Pixel and FDG Entertainment

All the health bars in the previous three games are placed on the left. Meanwhile, Crypt of the Necrodancer is the complete opposite. I believe this should be fixed.

The main problems I believe exist with Necrodancer's health bar:

• It doesn't stand out enough from the rest of the UI and is overshadowed by other elements.  The beating heart and items in particular demand more attention.

• It's placed in the corner that players(at least myself) won't bother looking.

• The game does not draw enough attention to it to show players what state they're in.

• The game doesn't provide any other feedback to inform you of the state of your health.

As a result, Necrodancer's placement, in my experience, has affected my ability to perform well. I seldom took my eyes off the player character to look up at my hearts because it took so much effort. I consequentially took risky actions without the immediate knowledge of my health, feeling surprised after dying suddenly and unexpectedly from an enemy hit.

In most games, your character's health is the most vital piece of information to players. It often dictates whether they'll be able to keep playing or have to start over. As seen above, many games a similar perspective feature their health bar on the left, adhering to the left-to-right mapping.

This is likely because we, as Westerners are taught to read left-to-right. Designers have often taken advantage of this to convey important information in terms of priorities. Super Mario Bros., for instance, had you moving left to right to reach the goal. Of course, there's exceptions for this rule, such as multiplayer games like Street Fighter that have the rightmost player with their health bar at the top-right.

Necrodancer's placement of the health bar betrays the years of experience players have accrued from games with similar themes and perspectives. When they're used to certain UI layouts across games, they can more instinctively look at certain parts of the screen. This sort of habit can be hard to break, and creating a UI that goes against that pattern can make the user experience more cumbersome. It's often the reason why UIs can become standardized, such as the use of health bars, or inventories as grids.

It's always important to ask why this position was decided on. This could be part of the possible design goals:

Keep players focused on the environment and rhythm.

The music is one of the core pillars of this game. In most cases, players need to focus on their eyes on their character, the environment and the entities in it. Too much menu feedback runs the risk of distracting them from it, which can hurt overall performance.  

The HUD at the bottom already stands out a lot by:

• The beat bars that move inward to the heart

• The beating heart sprite having the largest size and animation

Emphasize the importance players' Inventory and equipment.

The current loadout greatly affects player actions and decisions. It needs to be visible at all times so the player can take a look at their state.

For instance, having a dagger equipped vs. a longsword makes a huge combat difference, as the latter can hit enemies two squares away compared the dagger's range of one. This lets the player keep enemies at a safe distance. Consumable items such as scrolls, food and bombs are equally important and display button combinations for players to use.

It's very understandable for these items to stay on the left because players need to quickly look at and recall these instructions in order to succeed. But I get annoyed at dying because I want an easier way to evaluate my health.

Possible current UI priority from Brace Yourself Games, descending from highest to lowest:

1. Beat meter and coin multiplier - Bottom, takes up most space, frequently moving elements, largest
2. Equipment  - Top-left, showing 
3. Items - Left, directly under equipment
4. Health - Top-right, next to coins & diamonds
5. Gold & Diamonds - Top-right, after health
6. Map - Bottom-right

As a result, I have established 3 design goals:

• Help players easily know their health with minimal effort

• Maintain similar priorities of other UI elements as much as possible.

• Retain focus on the environment beat of the music.

Using these goals, I've come up with several possible solutions:

Switch the items and health bar positions.

Placing the hearts on the top-left corner and the items on the top-right corner will conform with players' mental model of similar top-down games, allowing them to look more easily without spending the extra mental energy or focus to move their eyes to the top-right.

• Pros:

  • Fits common placement model of UI in games with similar mechanics and perspective, fitting mental models of players who have played such games.

  • Increases priority of the hearts, as the (western)players' eye usually moves from left to right

• Cons:

  • Possibly makes it harder for players to remember to look at the items and equipment on the right.

  • Affects how the items and equipment is being chunked. The equipment and items would be separate entities, risking more fractured information for players to take in.

Turn the heart at the bottom of the screen into a health bar.

Have the heart sprite full when health is full, parts of it darkened from top-down when less than full, gradually getting more "empty" similar to the hearts representing health. Also display in the middle of the heart the numeric health value.

• Pros:

  • Most visible UI element. Player would only have to look vertically down to check on it.

  • Displaying numbers very explicit and informative. Easy to render, requiring no art.

  • Turning the heart into a health meter looks simple

• Cons:

  • Risks adding too much visual noise or clutter, giving too much attention to the bar and visual overload

  • Could be too redundant.

  • The heart "fill" alone would be too ambiguous for the player to gauge exactly how much health they have.

  • Might have to change the beating heart graphic to a heart representing health to better convey it as such.

Move health bar bottom-middle, closer to beating heart/beat bar

• Pros:

  • Many games such as PlayerUnknown's Battlegrounds keep the health bar at the bottom middle, which players are used to seeing.

  • Gives much more visibility and priority.

• Cons:

  • Could make bottom of screen too cluttered, as the health bar consists of up to 2 lines of individual hearts. This can possibly distract from gameplay.

Add small health bar above player character's head when hit

The small health bar would look like the hearts above enemy heads, but would stand out with a different colored outline to denote the player. It could be visible for around 1 second after being hit, similar to Goldeneye 007 on or Perfect Dark on Nintendo 64.

• Pros:

  • Much more easily visible to players when needed.

    • Showing it on top of the character, the player's primary focus point, will make them more likely to see their hearts.

• Cons:

  • Could add clutter to the middle of the game screen and obscure other parts of the game area

  • Could be too heavy handed or redundant

Show flashing of the hearts being removed while taking damage.

• Pros:

  • Draws greater attention to the health bar to remind players of their current state.

    • Similar to the way items they pick up are translated to the appropriate slow to convey that they just equipped them.

• Cons:

  • Could take away too much attention to the gameplay and beat.

    • The player is often forced to pay attention to the beat at all times.

    • This runs the risk of poor performance, as stated above.

Add more sounds to inform players of the health state. For example, if the character's health is low, they could let out a stronger grunt or shout.

This is similar to Nuclear Throne, in which the player's character makes a distinct cry at low health to convey that they're in danger and that players need to change their approach to survive.

• Pros:

  • The right sound can instinctually prime players into knowing their character's in danger and need to change tactics or restore health fast.

  • You might not have to change much about the UI placement.

• Cons:

  • Could be annoying to players if it doesn't sound right.

  • Takes extra sound design effort.

Add a colored flashing effect to character synced to the game's beat.

When hit, if the player ends up at middling health, they would flash yellow for a few beats during the song. If at low health, they would flash red for the rest of the duration of the song until they restore health.

• Pros:

  • Flashing colors like yellow and red are easy to perceive as "warning" and "danger."

  • Since players likely look very often at the character, it will stand out more and relieve players from taking the effort to move their eyes up to the health bar.

• Cons:

  • Flashing colors could be too distracting to the overall gameplay.

  • Continuous flashing could be potentially very annoying.

  • Requires more visual FX programming

Add a colored flash effect to the disco floor based on health

The health of the floor itself could be used to convey the health, using a green-to-red scheme to denote how much health the player has.

• Pros:

  • As the game encourages players to survey the environment to make decisions, it can likely be more difficult to miss.

  • Flashing disco floor helps fit with the game's theme and aesthetic.

• Cons:

  • Players may possibly miss the meaning of the red and yellow tiles as the disco floor is used as positive feedback for moving and acting within the beat.

  • The disco floor is only visible when doing the above, so this system would require a different implementation to see at all times.

  • It could also distract heavily from gameplay since the player would focus on the floor instead of the monsters and traps in the environment.

Add warning flash to the health when low.

Adding a flash would immediately catch the player's attention, even if it's coming from the top-right corner.

• Pros:

  • Flashing would instantly help it stand out more and instantly convey to the player that there's an issue.

  • This wouldn't require any placement changes, just sprite state changes.

• Cons:

  • Would require changing sprite states.

  • Too much flashing could distract from the rest of game.  

Here's a sample mockup made in Photoshop. This was made using a screenshot in 1920 x 1080, based on my own desktop monitor.

Here's using the following solutions I'm using:

• Making the beating heart double as the "filled" health bar

• Adding the health as a number in the middle of the beating heart

• Switching the positions of the health bar and and equipment

Other changes I would plan to use are:

• Flashing for a couple of seconds on the hearts to indicate danger
• The player character shouting in a way that indicates they're in danger.