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.