HUD Redesign for Supergiant’s Hades

This is a case study I did to understand what makes this extremely active, action filled rogue-lite game tick without it’s on -screen HUD being intrusive.

Image for post
Image for post

This was the original screenshot that inspired me to make this case study. Since the game is in Early Access, the devs have made a few key changes since that screenshot was taken.

When I picked up the intent to try my hand at redesigning this, I wanted to try a system of hiding away the extra Boons (the special abilities in the game, on the left side) altogether. By the time I started this redesign, the devs had actually implemented a similar system along with dynamic organisation of the icons.

Image for post
Image for post
Image for post
Image for post

The menu system to view the Boons and their information is slightly different as there isn’t a separate menu to access.

Image for post
Image for post
Image for post
Image for post

Proposed changes

Problems to solve :

Minimise eye travel distance, make tracking of the most important combat resources easy.

Beak apart the left-side heavy UI.

Associate all Call to Actions with actionable objects in game (to reduce problems of disassociation and eye travel and to compensate for the displacement of their permanent anchor in existing UI)

Create relevant grouping of resources and other information to reduce cognitive effort during decision making.

Following is the original layout

Image for post
Image for post
Original layout

Following is the proposed layout

Mockups

Image for post
Image for post
Original
Image for post
Image for post
Proposed

Proposed changes in action:

Proposed changes in action

As character information now takes up the place previously occupied by all CTA elements, I decided to make the CTAs a dynamic spatial elements. This works well since the actual items the user interacts are very diegetic in nature, and CTA only occurs in non-combat time (except poison antidote pools later in the game)

Image for post
Image for post
Original
Image for post
Image for post
Proposed

Conclusion

Unsolicited redesigns are always redundant and a waste of effort according to many, which I would concur as it doesn’t make much sense to design or redesign anything without knowing the requirements, business objectives and technological constraints of the actual product. Nonetheless this study and redesign is simply an exercise for myself to show my thought process and how I would approach things.

The actual game has some stellar art direction in terms of UI and the UX is extremely functional and supportive of the game design.

This project was made using

Image for post
Image for post

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store