My Opinion on The Sims 4 Interface

I have played The Sims series since its first game launched in the year 2000. I have played all of the main games extensively and still regularly return to its latest instalment, The Sims 4, to this day.

As an avid player of the series for the last 20 years, I like to believe that I know quite a lot about the games and would like to use this knowledge to evaluate the UI in the latest game.

So lets get into the issues that I have: 

The Sims 4 was released in 2015 but was rebranded in 2019. This included a new main menu and loading screen along with new branding for online sales of the game and physical changes to game packaging in stores. 

Main Menu 

This is the original main menu for The Sims 4 and I have no real issues with this screen. It is simple to use and gives a good representation of the game through colours and feelings. 

This  is the new main menu from the 2019 rebrand and there are a number of issues that I personally have with this game. 

Colours 

The new colour palette is very confusing for me personally. I feel that the colours do not go well together and are constantly fighting for the player’s attention due to their vibrancy. I can understand the use of the blue and tones, to an extent, as all of the previous sims games feature the colour quite heavily. However the use of the pink and orange colours seems very strange to me as they are not seen anywhere else and do not compliment the well. 

Advertising 

While the first menu also had advertisements, they were more subtle and were presented more as news updates for the player. This new menu heavily features the large list of expansion, game and stuff packs available to buy for extra money. These icons, when clicked, send the player to the webpage to purchase them. While it can be helpful for the player to see which packs they have purchased, this feature is also unnecessary and dangerous when considering that many players of The Sims are children. With many documented cases of children spending hundreds and even thousands of pounds on in-game currency or packs with parents’ credit cards, access to buyable extras should be a little more difficult in my opinion. 

Animations 

While animations can be fun and aesthetic to the player, they can also be distracting. The llama in the lower right of the screen constantly bounces up and down while the confetti around it rotates. While the animation is cute, it is unnecessary, distracting and takes away from any and all of the useful parts of the screen. 

Loading Screen 

This is the old loading screen. It features the old plumbob logo and has informative text about the game appearing periodically. 

This is the loading screen brought in with the 2019 rebrand. At the time this was introduced, I was having a number of issues with my PC and it would randomly crash on me – especially when playing The Sims – producing a ‘blue screen error’. This hue is almost identical to the windows error and would terrify me every time it appeared as I thought, for a brief moment, that my PC had crashed again. 

After a huge volume of complaints from players – especially those with sensory issues – the loading screen was updated to a darker shade. Although I much prefer this screen, it is yet another shade of blue added to the game’s palette that does not match anything else. 

Live Mode HUD 

My main issue with the HUD is its size. The design is clearly intended to be minimalistic and unobtrusive but the problem comes with a larger screen. My screen resolution is 3840 x 2160 and the size of the HUD is significantly reduced to a point where, even with good eyesight, I have to sit extremely close to the screen. 

Build/Buy HUD 

As someone who spends a lot of time in the build/buy mode, I have very few complaints about the UI. My main criticism, again, comes from my screen resolution. The item catalogue is too small, making it easy to miss an item when looking for it. In the previous games, the catalogue had an arrow which expanded the menu and doubled the number of items in view. I think that this feature would be beneficial in The Sims 4 to help builders find what they are looking for. 

Summary 

Despite the multiple issues that I have with the UI in this game, I still love it and continue to play it regularly. This shows that although flaws in UI are less than desirable, they are not always game breaking when issues occur. 

My Experiences with Bad UI

Now that I have researched a little into what makes UI good, I can start to evaluate what makes it bad. In my many years playing games, I have come across multiple interfaces that clash in terms of both looks and function. 

Everything below is simply my opinion and is subjective. I understand that everyone will have different experiences and thoughts on these games and I would love to hear others opinions on these game interfaces. 

Diablo II: Lord of Destruction 

Diablo II is one of the first games I ever played as a child and will always be close to my heart. However, when looking back at this game from a more critical point of view, there are issues with the UI. 

For the most part, the UI is well made. The inventory system is cleanly laid out and its grid format makes each section easy to understand; the health, stamina and mana meters are pretty yet simple to understand at a quick glance in combat; and quick hotkey access to potions in the player belt makes refilling those meters fast and easy during a battle. 

My personal issue comes from the player skill menu. As the player gains experience, they can increase their level in order to gain access to new skills and spells. The presentation of these unlocked skills is less than ideal however. 

Each character class (sorceress, necromancer, druid, etc) has a total of 30 skills each, which are slowly unlocked throughout the game. They are presented in a grid format, which can be accessed by clicking the square button on the lower right of the screen. 

The menu that appears is clunky and obscures the player’s view of their surroundings. This makes the menu impractical for quickly switching spells in the middle of combat. While the menu remains relatively small when the player is new – due to their lack of skills – it quickly becomes hard to navigate when the player’s level increases. This can really hinder their performance in harder fights later in the game. 

The second issue is that, in order to learn about a spell, the player must hover the cursor over it for a moment. This triggers a pop up text box which explains the spell’s stats, damage and effects. This forces new players into choosing spells between battles and hoping that they work well for them in combat. Should the spell not work as expected or deal less damage than needed, players have to stick with it until they have a moment to read more about their other options. 

I have however overcome these issues as I have memorised each skill’s icon, their effects and their position in the skill menu. I have my favourites and I know, at a glance in combat, which skill I need to change to. This knowledge however has only been achieved by playing this game for around fifteen years – because practice makes perfect. But this concept does not help new players who are picking up the game for the first time. 

Luckily, Blizzard learnt from their mistakes and created a much better system in Diablo III. They created a menu with full descriptions of skills to ease player accessibility and only made this menu available when out of combat to prevent new players dying in fights while trying to navigate a clunky menu or by flipping it open accidentally. 

Assassin’s Creed III 

Assassin’s Creed III is a beautiful game with beautifully fluid combat sequences. However, it is somewhat ruined for me personally by the weapons system. 

The weapon wheel is an ingenious creation that allows players to cycle through their available weapons. It is supposed to be easy to open and quick to navigate so the player can pick and choose what long or short range weapons suit their circumstances. 

Most weapon wheels appear and disappear on screen in a split second so as not to break the player’s immersion or pace during a fight. However Assassin’s Creed III created a weapon wheel that takes up the whole screen. It takes a couple of seconds to load into a transition animation which then gives you the option to switch your weapons. 

The game takes, on average, 1.5 seconds to load into the weapon wheel screen. While this may not seem like a lot in real time, the fight sequences are so fast that this really breaks the player’s immersion and interrupts their pace. 

Once the screen loads, the player has a few options. On the left there is a simple choice of melee weapons. But, on the right, there is a choice of long range weapons, throwables and animal traps. During a fast paced fight sequence, these extensive choices are far too much for the player to navigate between. I have lost count of the amount of times I have died and lost progress because my character was too busy throwing rabbit bait on the floor instead of firing arrows to defend himself. 

I cannot understand why Ubisoft deemed this a good design, when Assassin’s Creed II – a game released 3 years earlier – had a, near perfect, well laid out, quick to access weapon wheel. If it ain’t broke, don’t fix it. 

Star Wars Jedi: Fallen Order 

Fallen Order is a stunning game, from graphics to gameplay, there are so many things that are done right in this game. But my issue comes from the in-game map. 

The map is intended to present as a 3D hologramatic representation of the level and, on paper, that is a really cool idea. But in practice, this map is so difficult to read. 

The map allows the player to flip through multiple storeys on each level, while attempting to highlight the one currently selected. It shows unexplored passages or collectables in bright colours – which is great – but the issues appear when trying to reach them. Unlike a 2D map, the player cannot clearly see where they need to take left or right turns in order to reach their destination as they have to continuously rotate the map, making it near impossible to read. 

I am somewhat of a perfectionist and always try to obtain the 100% completion achievement – but for this game, I gave up. Although I have found most of the collectables and explored most of the levels, trying to locate the last few parts I need for 100% has become an impossible task. No matter how many times I look at the map, I just end up confusing myself and giving up. 

While this isn’t accurate for everyone and, undoubtedly, some people will find this map clear to understand, I have had many issues with it during my time playing this game. To quote my previous post: ‘if one misuses your UI, then it simply means that your UI is misuse-able’

Summary

The games listed above are brilliant in their own way but all have small flaws in their UI that hinder gameplay or usability. In my next post I will be looking into a game with multiple flaws that need addressing in further detail.

UI Design – Function

What Makes User Interface Work? 

To understand what makes UI work, we must first look at the two key elements, narrative and the fourth wall

Toptal.com defines narrative as: 
‘the story that a video game tells’. ⁽¹⁾ 

Toptal.com defines the fourth wall as: 
‘an imaginary barrier between the game player and the space in which the game takes place’. ⁽¹⁾ 

These aspects create two questions that have to be answered in every UI component: 
– ‘does the component exist in the game story?’ 
– ‘does the component exist in the game space?’ 

This then creates four categories of UI Design. 

Non-Diegetic 

Does the component exist in the game space? No 
Does the component exist in the game story? No 

Non-Diegetic UI exists outside of both the story and space of a game, this means that non of the player characters or non-playable characters (NPCs) are aware of the existence of the UI. 

Toptal explains that ‘in fast-paced games, non-diegetic components may interrupt a player’s sense of immersion’ ⁽¹⁾ as they distract from their goals and limit their success. However ‘in strategy-heavy games, they can provide players with a more nuanced assessment of resources and actions’, ⁽¹⁾ therefore assisting the player in making informed decisions and aiding their success. 

The most common use of Non-Diegetic UI is for stat meters. These will be used to keep track of time, damage, health and other various resources that the player needs during gameplay. 

Diegetic 

Does the component exist in the game story? Yes 
Does the component exist in the game space? Yes 

Diegetic UI exists in both the story and space of a game, this means that the player characters and (NPCs) are aware of the existence of the UI. 

Toptal explains that ‘even though they exist within the game story and space, poorly considered Diegetic components are still capable of distracting or frustrating players’ ⁽¹⁾ in much the same way as Non-Diegetic components. Ultimately for UI to function properly, it must always be well designed. 

Toptal also states that ‘scale makes Diegetic components tricky. For instance, an in-game speedometer that resides on a vehicle’s dashboard will likely be too small for players to see clearly’. ⁽¹⁾ In most games, this speedometer will also be present in a corner of the screen along with a small map (or minimap). But these ‘can [usually] be toggled to a 2D, fullscreen view, making them Non-Diegetic’. ⁽¹⁾ 

The line between Diegetic and Non-Diegetic UI becomes blurred with a simple use of a button making it potentially difficult for designers to find a balance between the two styles used by each category. 

Spatial

Does the component exist in the game story? No 
Does the component exist in the game space? Yes 

Spatial UI exists in the game space but is not in the game story. This means that player characters and NPCs don’t know that they exist while still working as a visual aid to the player themselves. They are usually there to help the player to select targets or to highlight points of interest. 

Toptal states that ‘text labels are a classic example of spatial UI components’. ⁽¹⁾ This is often seen in sports games during matches and allow the player to identify which characters they are controlling and where they can move. Toptal uses the example of fantasy and adventure games where ‘players may encounter important objects that are unfamiliar in appearance. Text labels quickly remove ambiguity and keep players immersed in the gaming experience’. ⁽¹⁾ 

This type of UI, when done well, should be really informative to the player without distracting from their experience. It should aim to give them easy to read, simple information that improves their ability to play the game. 

Meta

Does the component exist in the game space? No 
Does the component exist in the game story? Yes 

Meta UI exists in the game story but not in the game space. Player characters and NPCs may not be aware that this UI exists despite it being involved in the story. 

Toptal explains that meta components can be as simple as ‘a slowly accumulating layer of dirt on the game’s 2D plane’. ⁽¹⁾ These details are very subtle and almost go unnoticed by the player. But they can be made much more obvious in genres such as action and adventure games, where the ‘field of view is sometimes shaken, blurred or discoloured to show that a player has taken on damage’. ⁽¹⁾ 

This use of UI affecting the players’ camera is a quick and easy way to inform the player of factors such as damage taken without forcing them to take their eyes off the gameplay to look at their healthbar.

Summary

There are many different aspects to be considered when creating UI and all must be carefully balanced in order to create an accessible, attractive interface for players.

Categorising UI is not as simple as it first seems and will vary from game to game. Toptal explains that categories may vary ‘depending on a game’s narrative and its players’ relationship to the fourth wall’. ⁽¹⁾ Categorising UI may also be largely down to the aesthetic of the game too. As stated in my previous post, UI should match and blend with the art style for the game so as not to reduce immersion or playability.

The image below summarises the categories listed above in a more concise way and will allow me to refer back for information quickly in the future.

References 

(1) Micah Bowers. (2019). Level Up – A Guide to Game UI (with Infographic). 
Available: https://www.toptal.com/designers/gui/game-ui#:~:text=What%20is%20a%20game%20user,Diegetic%2C%20Meta%2C%20and%20Spatial
Last accessed 2nd Oct 2020.

UI Design – Aesthetics

What Makes User Interface Look Good? 

To understand what makes UI look good, we must first look at what it is. 

Dictionary.com defines user interface (UI) as: 
‘The interface features through which users interact with the hardware and software of computers and other electronic devices’. ⁽¹⁾  

Medium.com supports this by saying that ‘the user interface is the space where interactions between [your] users and the machine occur’. ⁽²⁾ 


Medium also states that the key aspect to visual UI design is Graphical User Interface (GUI). Defined by Dictionary.com as:
‘A software interface designed to standardise and simplify the use of computer programs’. ⁽³⁾ 

Medium says that designing a GUI is based on the ‘screen real estate’:
‘What information should the player have on [their] screen? Where? And When?’ ⁽²⁾ 

There are two methods to answering this:
– to keep carefully add information to the screen until it is cleanly occupied enough.
– to put all of the information on the screen and then remove parts until the layout is empty enough and displays all of the information needed by the player. 

Art Style and Immersion 

Medium states that keeping the UI art style consistent with the in-game art is key to improving immersion, but also to consider that keeping a ‘flat design UI’ ⁽²⁾ looks infinitely better than trying to match more detailed game art, such as 3D or realistic. 

Shape 

Medium shows that shape and light direction hugely affect its interactivity. The example given is that ‘light comes from the top and shadows induce depth and possible motion when pressing it’. ⁽²⁾ 

Keep Talking and Nobody Explodes – 2015

This bevel and embossing technique can be seen in games such as ‘Keep Talking and Nobody Explodes’ where two players must communicate to defuse a bomb. The buttons on the bomb display this use of light and shadow giving them a 3D, glossy effect. This appeals to the players childlike instinct making them want to touch and interact with the buttons, therefore achieving an aspect of immersion needed for a good game. 

Size 

Medium’s solution to size is, ‘scale [your] buttons to their proportional use’. ⁽²⁾ Making everything huge creates an ugly display with no path for the eyes to follow. There is a similar rule in graphic design that describes how peoples’ eyes will naturally follow the curve of larger to smaller text. This is why headings and titles are always the largest on the page. To utilise this correctly, the most important information should always be larger than the less important information. The same is reflected here with buttons in UI, that the largest ones should be the most used and the smaller ones should be less used. 

Like graphic design, according to Medium, ‘scale between the elements matters too’. ⁽²⁾ Designers should always bare in mind how items are scaled when compared to each other. There should be a degree of uniformity between all of the small items, all of the large items and how their sizes compare to each other. 

Semiotics, Colours and Consistency 

Much the same as graphic design, colours should relay certain information. As Medium states ‘colours should ask “what it does?” Is it good? Is it bad?’ ⁽²⁾ 

Also consider that colours can have multiple different meanings depending on context. For example, green, in a positive way can mean: health, positivity and nature. But in a negative way can also mean: poison, greed and illness. 

This symbolism also varies between platforms, media and cultures. For example: at the beach, red is used as a warning of danger; when driving, red is used to stop the flow of traffic; in Asia, red is very positive and ‘means good fortune and joy’. ⁽²⁾ 

However, most games, despite existing cultural symbolism, will use relatively similar colour schemes to subconsciously instruct the player, making it much easier for UI designers to communicate with the user. 

Medium states that there should always be consistency between ‘how the player operates, actions and interacts with buttons’ and between ‘colours and space’. ⁽²⁾ 

Medium lists a rule for knowing how many colours to use when designing UI (as shown above). 

1. ‘pick a dark/black colour and a slightly brighter one’ ⁽²⁾ 
2. ‘pick a light/white colour and a slightly darker one’ ⁽²⁾ 
3. ‘pick a red colour for alerts, warnings and negative feedback’ ⁽²⁾ 
4. ‘pick a green colour for validations and positive feedback’ ⁽²⁾ 
5. ‘pick another accent colour for everything [you] need to highlight that is not good or bad’ ⁽²⁾ 

Designs may include more colours if needed depending on the project but designers must be careful to match the colours and keep the ‘energy level’ of the colours the same. 

‘If you need to use variations of the same colour, only [change] the saturation and lightness value’. ⁽²⁾ This is key to both graphic design and UI design. By keeping colours consistent, the UI becomes far more easy to use and overall more pleasant to look at, immediately improving the players’ experience. 

Animations 

Medium claims that ‘slight motion and transitions can convey so much information and feeling in a very intuitive way’. ⁽²⁾ Animations can make the players’ experience far more smooth with very little trouble. Like level design, the best animations are ones not even noticed by the player. 

The timing of these animations is very important too. The designer must create a transition that integrates with the pace of the game. Too fast or too slow and the player will feel a jolt from their immersion. ‘Motions should last between 200ms and 400ms. Any animation over 500ms might feel too slow’. ⁽²⁾ 

As shown in the gif above, each animation conveys a different type of feeling. ‘Sine’, ‘quad’ and ‘cubic’ all have a more natural feel due to their structured movement; whereas ‘back’, ‘elastic’ and ‘bounce’ have a more cartoon feel as they are very energetic.  

These motions also depend on their confines. Medium states that: ‘elements moving within the screen bounds should accelerate and decelerate. Elements moving out of the screen should only accelerate; and elements entering the screen should only decelerate’. ⁽²⁾ 

Friction 

Friction sums up how user-friendly the interface is and is comprised of every element listed above. Medium concludes that ‘the user interface should give information the player needs at the right time and should be controllable the way the player likes it’. ⁽²⁾ 

Usability and Satisfaction 

Simply put, the user is never wrong. Focus on the core audience and an interface that is frictionless. ‘If one misuses [your] UI, then it simply means that your UI is misuse-able. Players can’t use it wrong, only the way they believe it is supposed to be used’. ⁽²⁾ 

References 

(1) Dictionary. (2020). User Interface Definition. 
Available: https://www.dictionary.com/browse/user-interface?s=t#. 
Last accessed 28th Sept 2020. 

(2) Equal Iron. (2017). The Only Advice You Will Need to Make a Great Game UI/UX. 
Available: https://medium.com/ironequal/the-only-advice-you-will-need-to-make-a-great-game-ui-ux-74a0db8de642#:~:text=Your%20UI%20should%20be%20consistent,space%20should%20also%20be%20unified.&text=You%20could%2 
Last accessed 28th Sept 2020. 

(3) Dictionary. (2020). Graphical User Interface Definition. 
Available: https://www.dictionary.com/browse/graphical-user-interface?s=t 
Last accessed 28th Sept 2020. 

4 Week Diagnostic Project

Summary 

This is a short experiment to test the feasibility of my area of interest and to identify initial areas and sources of research. 

I will be finding a game with subjectively poorly designed UI. I will then carry out research as to whether other people find the same issues that I did and ways to improve the issues identified. 

I have laid out a week-by-week plan below in order to structure this project properly. 

Week 1 – UI Research 

To start off this project I will be researching what makes good UI design: 
– what works? 
– how does it work? 
– what doesn’t work? 
– why is good design important? 

Once I have understood these concepts, I can begin to evaluate what makes poor UI design.

Week 2 – Game Research 

I will review games that I have previously played from a more critical point of view – looking for issues that I found in UI during my time playing them. 

I will then research games that wider groups of players have had issues with. 

I will then check these against each other and hopefully I will find a game that, based on multiple opinions, has poorly designed UI. 

This game will be ideal to look into as I will have both primary research and secondary research to back up my opinions, evidence and conclusions. 

Week 3 – Prototypes 

Having found a game with poorly designed UI, I will create concepts for HUD layouts or menus that reflect and improve upon the issues found by the players. 

I am aiming to create my own version of the improved UI in order to explore potentially better layouts or colour schemes. 

Week 4 – Conclusion 

I will write a short (200 – 300 word) summary of the project and reflect on my findings. In my conclusion I will discuss: 
– what I found 
– what I need to research further going forward 
– how my understanding of UI has evolved 

Introduction

Who Am I? 

Hey, I’m Aiden. I’m 21 years old and I’m from the North West of England. 

For as long as I can remember I’ve loved playing video games, but “that’s not a real job”, right? Well I thought so too until three years ago… I finished college with no idea what I wanted to do so I decided to look around some universities for inspiration. Three years later and I’ve just graduated from the University of Central Lancashire with a BA Honours degree in Game Design. 

In the last three years I’ve learnt how to design and blueprint levels, create and texture 3D models, make visual effects and draw characters – all on a variety of software. For my final project I created an entire game myself. This project tested me and forced me out of my comfort zone by making me explore new methods and practices. One of these practices was user interface (UI) design. 

I am now studying MA Game Design to learn more about UI so I can follow my dream to create games – because yes, it is a real job. 

What Do I Know? 

As mentioned above, I have had very little experience with UI design. I mainly worked with it during the final year of my degree when I had to make a game. I created: 

health bar – player and enemy
collectable counter
skill wheel
main menu
main menu – controls
pause menu
game over menu

I have previous experience with freelance graphic design which really helped this project. My background knowledge of Adobe Photoshop and Illustrator was ideal for helping me to create UI and will definitely be a good base for future projects. 

What I Will Be Studying? 

I am hoping to learn the basics as well as challenging some existing ideas on UI.
I would like to: 

  • research existing types of UI and how they vary depending on the genre of a game 
  • research into design tools and software used in industry 
  • explore how to develop my own workflow and method when making UI 
  • understand how good design directly affects usability and accessibility  
  • experiment with styles, themes and colours 
  • challenge current issues in UI design and research improvements in these areas