Final Conclusion

Research

At the beginning of the year, I knew nothing about UI design, even less about how to create interfaces myself. I started off by researching the theory behind UI creation in games. I learnt about art style, colour theory, shapes and sizes and semiotics. I learnt that consistency is key and that aesthetics really can make or break a design. I also learnt about Diegetic, Non Diegetic, Meta and Spatial categories. I learnt that these categories depend on whether the player and the character are aware of the interface elements and how this affects their design.

With this theory fresh in my mind, I went on to explore my own experiences with bad UI and broke down which features worked or didn't work for me personally and why. This really helped me to understand what to do or not to do when creating my own designs in the future. 

I chose an interface which I didn't like and went on to improve it. While this was purely subjective, it helped me to utilise my research on colour theory and consistency. I adjusted colours, logos and themes on the Sims 4 menu - a controversial interface within gaming. As my research continued on the Sims 4 and I gathered more opinions on the game's interface, I discovered a world of issued from colour blind and visually impaired players who find the game unplayable due to lack of usability, sensory overload and even seizures, due to the game's vibrant, child-like colour scheme. 

This lead me down a path of research into colour blindness. I did colour tests of my own on myself and my peers to calculate population percentages and I looked into the accessibility features for colour blindness within gaming. I found that, while some games provide preset options for Deuteranopia, Protanopia and Tritanopia, they are often underdeveloped and was the entire gaming experience with an odd hue, even for those suffering with colour blindness.

This is what initially lead me down the route of customisation. While, as designers, we try to create interfaces that benefit the majority, we will never cater to everyone. My theory began to develop that we could create a feature in the options menu of our games which allows players to choose from some presets that the designers have created, but also allow players to tweak their own UI using a colour wheel or swatch palette. This way each player could personalise their own experience of the game while also allowing players with visual difficulties to create a usable interface.

Following this idea, I decided to get my hands dirty and start to create my own HUD designs. These started out as very poor quality drawings on my iPad and eventually became interesting and unique creations. However, one of the main issues I found was with layouts. As I tried to design my first HUDs, I realised that my designs may only work for me. Perhaps my designs were better for right handed people because I am right handed and there is a subconscious bias? 

To negate this, I returned to my idea of customisation. What if players could drag and drop menus to their desired locations? Similar to design applications like Photoshop or Unreal Engine, players would be able to click and drag menus around the screen and favourite layouts. Again, the designers could come up with a handful of presets for players who are just looking out of personal preference. But players who are right or left handed could create layouts that cater to that; players with disabilities such as dexterity issues or amputations could create a layout that is accessible despite their handicaps. This feature could also be helpful to streamers. Livestreaming games is such a huge market but streamers run into difficulties when creating their overlays. Most of the time, streamers are covering important UI elements with their cameras, followers, subscribers or messages. With this feature, their game interface and stream overlay would not have to overlap and nothing would need to be compromised.

The final step in this customisation is size. If players can change the colour and layout of their interface, why could they not change the size? Menus could be scaled by their corners with a simple drag of the mouse, even button sizes could be adjusted using a small, medium or large setting. A lot of games in the current market operate on rescaling UI, as a whole, on a slider. Perhaps this could be built upon and used to scale different menus and panels separately, allowing players to prioritise certain elements that they use more often than others.

After theorising this concept, I interviewed a number of industry professionals - both with UI experience and without - to determine if my idea was realistic and worthwhile. The responses I got were overwhelmingly positive and all of the people I interviewed agreed that accessibility for disabled players is a necessary and exciting step for the gaming industry. 

The issue that we found with this however is funding. Each game has a budget and companies cannot afford to spend more than a designated amount. When looking at the budget, many more steps come before this such as level design, storyline, actors, music, modelling. UI is one of the last items on the list and accessible UI is even lower. Smaller game companies will also have less budget meaning that a lot of elements are cut from the final game in order to meet deadlines and financial limits. At the moment, the technology requires a lot of research and development and that is something companies just don't see as profitable. This is something we must overcome as an industry and we must evolve to include everyone in the brilliance that is gaming.

Overall, I have really enjoyed this year. This research has opened my eyes to the limitations of gaming when it comes to accessibility and has made me realise that, while what we have achieved as an industry is groundbreaking, we still need to look forward to further improvements we can make. Everyone should have the freedom to enjoy games and our job as designers is not complete until that dream becomes a reality.

Portfolio

My first designs were a set of 3 HUDs. FPS, racer and RPG. I created these on my iPad using Procreate and my Apple Pencil to draw the designs over screenshots. 

They are blurry, the aspect ratio is wrong and there is not enough bleed space around the edges. But these designs became the basis for my exploration into Adobe XD and the beginning of my journey into UI design.

My exploration into Adobe XD began with recreating the FPS HUD from the previous project. After some amazing feedback from Twitter, I created these in the correct resolution, aspect ratio and with a decent amount of bleed space on them. The iterations began to evolve the longer I spent exploring XD's features. Eventually I created a design that I like and could see in a real game.

For my next project, I was asked to consider how my designs would translate into mobile games. While my career focus is not based in mobile gaming, I thought that it would be an interesting assignment and would help me to explore different resolutions. It was an interesting project as I hadn't previously considered how controls also need a place onscreen. This really limited my space and I had to think carefully about placement.

For my next project, I decided to step things up a notch. I set out to recreate the entire HUD of Valheim. This included the basic display and all of the pop up menus. I used the original menus as a base for my designs while also incorporating menu tweaks from game mods I had seen for Valheim in the past. I love how this project turned out, from the figureheads, to the mods, to the mural behind the menus. I think that it fits the Viking IP very well and I am very proud of my work.

As somebody who played this game a lot, I feel I had a reliable opinion on flaws within the game's interface. While these opinions were entirely subjective, I know through multiple discussions with friends that they shared the same issues with areas of the UI. I created a simplified version of the interface that was far more easy on the eyes than the original.

I used the Dark Souls HUD as my inspiration. I created health, magic and stamina bars in the upper left, a weapon wheel (console d-pad) in the lower left and a money widget in the lower right. 

The screenshot shows ornate walkways and swords which hints at fantasy themes; while the glowing armour and fragmented braziers show a more futuristic or sci-fi theme. I wanted to balance this by creating a clean and simple design that would balance both themes. I feel like I achieved this with a minimalistic design to the elements. 

The red banners and drapes in the screenshot instantly made me think of Asian culture where red is a prominent colour for success and power. I wanted to bring this into my design so I decided that the player's sigil in the upper left could subtly reflect this.

Overall I think this design went quite well. I really enjoyed the challenge of working out of context with only game art to work with and used this idea for many more designs over the remaining year.

I really wanted to try out a fantasy style HUD which incorporated weapons into its design. I found some beautiful sword hilts on google and added coloured bars to the blades to form health and stamina indicators. I also added a money widget in the lower corner for the player to keep track of their loot.

I wanted to keep the design as simple as possible and not crowd the screen. As game graphics improve, designers add less and less clutter to their HUDs. This gives the player a more immersive experience of the game and allows them to really sink their teeth into the huge and beautiful worlds presented to them. 

Overall I think this design went quite well. Designing the swords was a challenge as the proportions and angles had to look right but it was a lot of fun and I am very pleased with how they turned out. 

For this design I wanted to try to create a hardcore HUD with little to no UI elements. Many games now include a difficulty mode which reduces interface clutter and creates a more raw, intuitive experience of the game.

With this in mind, I created a simple health bar above the enemy boss. I used a random fantasy generator online to create a name for the beast and used the colour of its eyes as a basis for the colour of the bar. I also wanted to create a subtle indicator of the player's health and so I added a red vignette to the edge of the screen along with blood spatters to display damage taken.

I absolutely love the way this design turned out and the decluttered interface is definitely a refreshing take on the designs I had been creating. I would like to create more HUDs like this even after MA.

For this design, I wanted to use the sci-fi theme to create a futuristic looking HUD. I decided an ECG heartrate monitor would fit well in this design and wanted to see how I could achieve the look in XD.

The health bar is based on BPM so shows the character's heart rate and health out of 100. The idea is that the lower the player's health, the faster the heart rate. The player would also hear a subtle, quiet, racing heartbeat as their health got dangerously low. Along with this, the screenshot shows the character holding a handgun so I created a small ammunition breakdown. The screenshot also shows the character using some kind of special ability on an enemy so I created a cooldown timer for this along with a targeting system for directing the ability.

This may be one of my favourite designs. I love the subtlety of the elements and how well they are colour and thematically matched to the screenshot. I would love to create a working prototype of the ECG health bar one day!

For this design I came up with the idea that the player had to kill waves of enemies within a time limit. I based the idea for the HUD on clocks.

I created a health and ammo readout with a radial readout as well as a digital one. These radial indicators would reflect the damage taken or bullets used. I even changed the dial on the ammo radial to look like tiny bullets. I used the same design at the top of the screen for the timer and the enemy kill counter. I also added a crosshair and small health bars above each enemy to allow the player to strategically prioritise the enemies they kill.

This is a very simple HUD and, while not one of my favourites, I enjoyed the challenge of making every readout work on a radial display.

I wanted to try a different genre of game for this design. I hadn't created a fighter HUD yet and decided it would be an interesting challenge.

I created two identical health bars above their respective characters and colour coded these to match the fighters. I also used their sigils within the health bars so that the players will find differentiation even easier. I added powerup bars under each of these with a digital readout of their percentage charge before the players can use their special abilities. I also included a match timer. This is located in the centre of the screen so neither player have a disadvantage when checking the time during fast paced gameplay.

One of my more colourful HUDs, I like the symmetry of this design and how both sides must be completely mirrored to prevent any unfair advantages. Both players must have the same information at the same scale and identical layouts in order to ensure the match is based on skill alone. This was an interesting challenge to keep in mind and was fun to create.