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.

Research, Ideas and Development

As my MA comes to a close, I would like to reflect on my project. To fully understand the progress I have made, I would like to look back at my research, ideas and development.

I began my research by looking into how a good interface is created. I found a number of great sources online which taught me about how aesthetics and function are utilised during the design process and how the four main categories for UI function are key to creating a successful design.

I then looked into bad interfaces and what makes a design fail. I started to look at examples from my own experience and looked at whether these were subjectively good or bad to other players. I found that a lot of complaints were made by colour blind players who struggle to differentiate between various hues. I found that many games’ colour blindness presets are still not enough for most players as colour blindness is a huge spectrum that varies from person to person. This kickstarted my ideas on player based colour customisation and how that could be used to create a unique and enjoyable experience.

I began to follow online tutorials for Adobe XD, a widely used program in industry level interface design. While creating UI designs of my own, I quickly realised how difficult it can be to create a HUD layout that is objectively good and would work for everyone. Just because a design works for me, does not mean that it would work for someone else and how could I overcome this? I realised that the software I had been using, Adobe XD, allows users to move menus and panels to any location on the screen. This pushed me to explore my previous customisation idea further and I realised that the concept of customisable UI could be widened to include panel movement. If players can recolour and relocate their interface elements, the final logical addition to this system would be to allow players to resize their panels too.

With the concept in my head, I then reached out to a number of professional game and UI designers to better understand how the games industry currently caters to disabled players and to get their opinions on my idea. After a number of very interesting and insightful conversations, I had an overwhelmingly positive response to my concept. This reaction was just was just what I needed to push my project forward to completion.

Proposed Outcome

As my MA comes to a close, I would like to reflect on my project. To determine the project’s success, we must first look at my intended outcome in order to make comparisons.

The main outcome I am aiming to achieve for this project is to create a prototype or concept which demonstrates the ability to customise colour, size and layout of an interface. The idea would be based in a customisation menu within the game’s options.

For colour, there would be a set of pre-designed ‘themes’, including a set for each variation of colour blindness. There would also be a colour wheel available to allow players to finetune the colours of individual interface panels.

For size, there would be preset small, medium and large options for quick adjustment for visually impaired players. This would apply to the entire HUD and would scale everything. There would also be an option to select individual elements, such as text, buttons, panels, etc. This would allow players to scale certain aspects and create variation between panels.

For layout, there would be a number of presets designed to offer a variety of recommended options to players. Players would also have the option to drag and drop panels around their screen in order to create a play space that works best for them.

Alongside this, I have been building an understanding of UI and the practices, processes and programmes used in the industry to create interfaces. I am eager to learn enough to make me employable as a UI designer in the games industry and I am creating a reasonable sized portfolio in order to showcase my skills and to demonstrate everything I have learnt.

Aims and Objectives

As my MA comes to a close, I would like to reflect on my project. To understand the scope of my research, we must look at the aims and objectives I originally laid out.

My original idea was to explore the concept of a system in which players have the ability to fully customise their own interface. I wanted to include features such as:

– colour wheel selection for each section of UI

– resizing whole panels or buttons

– drag and drop panels to create new layouts

The uses for these customisation options are limitless. It will be accessible to people with disabilities, sensory issues or even colour blindness and will allow them to create a gameplay experience that is both functional and enjoyable.

Live streaming is a huge part of the gaming community and these options will be very useful to streamers when arranging their overlays. This will mean that no elements overlap the camera or subscription notifications. It will even be enjoyable to regular players just for personalisation of their gaming experience.

Gaming is an amazing way to bring people together and to help those who need a temporary distraction from the harsh realities of life. As game designers, I believe that it is our job to provide this and that we should always strive to help as many players as possible to feel included in gaming and the gaming community. With the correct funding, researchers and coders, this concept could become a reality. I believe that the idea could be life changing for so many people around the world who could benefit from the enjoyment of playing games.

Alongside this project, I wanted to explore what makes a good UI and how it is made using industry standard software. My plan was to attempt to create my own interfaces, menus and displays using this software and working to build a portfolio of work in order to pursue my career as a UI designer in the gaming industry.

Rationale

As my MA comes to a close, I would like to reflect on my project. To understand why I began this research, we must first understand the rationale behind it. This idea is one very close to my heart for personal reasons.

Video games were a huge part of my childhood. My parents and I would spend hours playing network games on our PCs but this became difficult when my mother became ill. She always loved to play games such as Diablo, Unreal Tournament and Warcraft, but this became limited by physical disabilities, especially due to hand tremors.

A game interface is the bridge between the player and the game so, if it does not fit the needs of a player, it is useless. In my experience gaming does not cater to disabilities and I would like to change this. The idea of removing limitations to allow people with disabilities to play games is a ground breaking and necessary step that, I believe, should already have been taken.

In recent years, game studios have been trying to improve accessibility in their games. Options such as rebinding keys, font size, captions, scalable UI, colour blindness options and disabling flashing lights have become more common in gaming and, while this is a brilliant first step, it is not enough.

Fighter HUD

This is my design for the a fighter HUD with a timer. I decided to go online and search for game screenshots. I found this and decided to create a HUD with no context or ideas about mechanics. I wanted to focus purely on the aesthetics of my design working with the aesthetics of the game. I included the key display elements:

Player Health Bars

The player health bars shows how much damage each player has taken so far. I created a bar colour coded to each player’s character and included the characters’ sigils in within the bar. The bars for each character reside in their appropriate corners of the upper portion of the screen. The total health points are out of 100 (maximum health).

Powerup Bars

As seen in the screenshot, the player characters are performing special abilities beyond melee attacks. Under each of the players’ health bars, I have included a bar to represent the players’ powerups. Each successful hit increases this bar and allows the player to charge up their special abilities. I included a digital readout of this as a percentage too in order to make it easier for players to read during fast paced gameplay.