ME1 UI Design Challenge: Pt I

Welcome to part one of my attempt to update the Mass Effect PC HUD and UI. I’ll be posting updates are regularly as possible, so some of the changes may seem small, but hopefully once they’re all together, the differences will be clear.

Note: I will be referring to Commander Shepard by the ‘she’ pronoun, because to me, Female Shep is the best Shep. No offense to fans of Canon Shep or Mark Meer, but I find Female Shep’s delivery more compelling, thanks to the excellent work of Jennifer Hale.

Current Party Health Indicator

The existing ME1 health/shield, overheat, and item display.

I started out by analyzing the most essential part of the combat HUD; the health display. If there is one thing that should never be obscured or confusing in an action game, it’s your health bar. Unfortunately, ME1’s display leaves a bit to be desired. Here are some of the issues pointed out by Mr. Majewki in his tear-down of the ME1 interface (which you can find here).

  • Placing Shepard’s health between the two other team members’ bars is confusing and makes it harder to pick out at a glance, which is crucial during firefights.
  • The tilted angle of the display is inconsistent with the rest of the UI, and it makes the health bars hard to compare.
  • Since health is displayed as a percentage bar, having Shepard’s bar be longer makes no sense, and actually gives the player the false impression that Shepard always has more health than her companions.
  • The NPC icons are too complex, and more or less unnecessary. They’re just there to pad out the line and serve little actual purpose.
  • The icons used for medigel and grenades are overly complicated and do not clearly convey what they are meant to represent.

With these issues in mind, this is what I came up with as my initial wireframe:

HUD Health Update 1

The design is simple, but I feel it improves on a few key points:

  • Shepard’s health bar is now clearly more important than those of her companions. It is equal in length, more accurately conveying that it is a percentage bar, but it is still taller than the other two, helping it stand out.
  • The weapon overheat bar no longer has the large, unnecessary square section on the right.
  • The health and grenade icons are simplified and more clear in their purpose.

With a bit more refinement, I was able to improve on the icons and edging. This is the first result I came up with:

ME1 HUD Party Health 2

The icons are now larger, making them easier to see and to click. I also added cooldown bars to both, since the strobe-like cooldown indicator in the original design was not always easy to see, and it was often hard to tell how close the item was to being ready for another use. Still, the design felt like it was too angular. ME2 used a lot of sharp angles and hard edges, but ME1 tended towards gentler curves. With that in mind, I made a few more refinements and came up with this:

ME1 HUD Party Health 3

Obvious hierarchy, improved icons, and clean cooldown indicators. Hopefully a solid improvement.

There are still some further tweaks I want to make, but I feel that the current design is strong and will serve as a solid starting point for the rest of the UI update. If anyone cares to offer feedback or suggestions, I would be thrilled to hear them. Thanks for following along, and I hope to have more updates in the near future.

From the Beginning: Mass Effect UI Redesign Challenge

Newer: Part II, Part III, Part IV, Part V, Part VI, Part VII, Part VIII, Part IX, Part X, Part XI

12 thoughts on “ME1 UI Design Challenge: Pt I

  1. Pingback: ME1 UI Redesign Challenge: Part IV | My Portfolio

  2. Pingback: ME1 UI Design Challenge: Part III | My Portfolio

  3. Pingback: ME1 UI Design Challenge: Pt II | My Portfolio

  4. Pingback: Mass Effect HUD/UI Redesign Challenge | My Portfolio

  5. Pingback: My Life At War - Page 145

  6. Pingback: ME1 UI Redesign Challenge: Part V | My Portfolio

  7. Pingback: ME1 UI Redesign Challenge: Part VI | My Portfolio

  8. Pingback: ME1 UI Redesign Challenge: Part VII | My Portfolio

  9. Pingback: ME1 UI Redesign: Part VIII | My Portfolio

  10. Pingback: ME1 UI Redesign Challenge: Part IX | My Portfolio

  11. Pingback: ME1 UI Redesign Challenge: Part X | My Portfolio

  12. Pingback: ME1 UI Redesign Challenge: Part XI | My Portfolio

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: