Did you know that one in six Dutch citizens is low-literate and therefore has difficulty with reading and/or arithmetic? That is something to take into account as a user interface designer when developing a game UI. There are more facets to improving the user interface of a (serious) game. In this article, we share five tips to improve the user interface of a game.

A good game UI helps players navigate through the game, find the right information, complete challenges and unlock rewards. This interface must be right down to the smallest detail. It should be visually appealing but above all functionally sound. In this article we will look at five tips that help to improve the playability and functionality of a game UI, namely:

  1. Form follows function
  2. Be consistent in UI design
  3. The standard is enough
  4. Accessibility is more important than 'prettiness'
  5. Take multiple resolutions into account

Form follows function

An important rule when creating a game UI is that the form of an object follows its function and not the other way around. This principle is called "form follows function" and plays an important role in game design.

The 'form follows function' principle is not only applied in game development. Car manufacturers use it too. In 1998, FIAT introduced the FIAT Multipla: the ultimate example of "form follows function".

In the year 2000, the FIAT Multipla won the "Ugliest Car Award" and with good reason. However, in the same year FIAT won the "Best Family Car of the Year" award and that is what it was all about. FIAT designed a car with two rows of three seats: three in the front and three in the back. The design stemmed from the function of the car: a family car for six people that was also nice to drive.

Whether it's cars or game interfaces: make sure the look flows from the function of the element.

Be consistent in the UI design

The UI of a game should be consistent. Think about the way players interact with the game. If a frequently used button is first in the top left corner, then in the next level in the bottom left right corner and then in the top right corner again, this will confuse the player.

Colour usage and white spaces should also be consistent. It is wise to use a fixed colour palette with primary and secondary colours. Make sure there is a balance between a darker colour and a slightly lighter colour. Finally, it is good to use green for elements that give positive feedback and red for warnings, notifications and negative feedback.

Tip: you can find a good tool to create a colour palette here!

The standard is enough

Creativity is a good quality, but it can also work against you in UI design. As mentioned before, the design should flow from the functionality, and it is important to be consistent in the design. Furthermore, we would like to add is that you do not have to reinvent the wheel. For example,  a standard icon for a 'start button' quickly meets the requirements and therefore does not need to be redesigned. Not only does it take time to design a new icon, but you also have to have it tested by the target group and adjusted, if necessary.

You can make use of standard icons by using existing design systems. A 'design system' is an overview of standard elements for a user interface. The advantage of such an overview is that all elements only have to be tested once by the user and that it can be implemented by the whole development team with one click.

You don't have to come up with a design system yourself if you can get inspiration from big companies like Google, Apple and Microsoft. Curious? Check out this and this article!

Accessibility is more important than 'beauty'.

One of the most important parts when developing a game UI is accessibility. Accessibility of a game does not only mean that the game is playable on different systems. It is mainly about making the game accessible to as many people as possible. In the next paragraphs, we look at readability and white space.

Are the texts legible?

As many as one in six Dutch people over the age of 16 is low-literate. This means that they have difficulty with reading, writing and/or arithmetic. These 2.5 million Dutch people have difficulty with digitization and therefore also with (reading texts in) games. Text sizes that are too small and unclear fonts are common complaints from users.

UI designers experiment a lot with fonts to make them fit the setting of a game. However, this often goes at the expense of readability. The video below gives a good explanation of typography in games and how small adjustments can make a huge difference:

Is there enough white space between the elements?

White space is generally described as the space between two lines of text. As you can see in this blog, there is enough space between the lines to ensure that you do not get lost in the text.

For the same reason, there is a full line of white space between this and the last paragraph!

White space is also important around elements in a game's interface. There are two types of white space: micro and macro. Buttons should not be too close to each other (micro-whitespace) and not too close to the edge of the screen (macro-whitespace).


Take multiple resolutions into account

The fifth tip we would like to share with you sounds logical: take into account multiple resolutions and aspect ratios. This is difficult nowadays with many different devices and screen resolutions on mobile, tablet and desktop. If you have a different resolution yourself, you will soon notice that many developers overlook this and the interface or effects do not use the entire screen.

It will save you a lot of work and time if you check your designs regularly during development: making the interface suitable for different screens afterwards is a lot of tedious work. Test it often and keep it up to date.

You also want a UI you can easily maintain. Different systems for different platforms is not ideal.

A plug-in that helps us with this in Unity is Universal Device Preview. It allows you to have Unity take screenshots of different devices and screens while you design your interface.

Do you have trouble maintaining your UI and do you spend a lot of time setting up the interface for different screens afterwards? Soon we will post an article explaining how to set up your Unity with one interface for multiple platforms.  Do you want to be notified when this article is online? Subscribe to our newsletter!

[sc name="newsletter-signup-EN" ]