Consistency in the design of game interfaces

Interface consistency is the absence of contradictions in its design and operating principles

Consistency makes it easier for players to work with the interface and reduces the cost of producing the interface for developers

An example of consistency in design

In the screenshots below, the selected objects are designed in a similar way, this helps players in working with the interface

An example of consistency in the principles of interface operation

In the examples below, the main menu of each section is always on the left side of the screen. This is how developers teach players a certain pattern of working with the interface.

And the block with the side menu is the same module, which is used in different interfaces to save team resources

If the menu was in a new place every time, you would have to search for it, and this would complicate the work with the interface

How to make a consistent interface design

To make the interface design consistent, you need to assemble all screens from one set of elements and according to the same principles

Below are several screenshots with parts of such a set, the whole set can be viewed here https://www.behance.net/gallery/60073341/Destiny-2-UI-Visual-Design

Different types of inscriptions

Most likely there will be text in the game, which means you will need different types of inscriptions for different cases – headings, subheadings, regular text, important parts of the text, secondary inscriptions, and so on

Interactive elements

To work with the interface, you will need buttons and other elements that you can click on. Some actions will be more important than others, so you will need several types of buttons – more visible for the main actions and less visible for the secondary ones

Popup windows

The game will most likely need to confirm various actions, for this you will need pop-up windows. They are useful for other cases, for example for training at the beginning of the game

Hover tooltips

On a PC, you can hover over interface elements and read their descriptions. This is a pretty convenient story, so tooltips may also be needed

Design method for selected objects

The game will most likely have lists with the same items, shops with the same slots, tabs, and other sets of similar items. To distinguish the selected objects from the rest, they will need to be designed in a special way

A way to attract attention

Most likely, you will need to draw attention to some interface objects, for example, to tabs in which something new has appeared, or to new items. To do this, you can draw special markers

It is also useful to come up with a color that will contrast with the rest of the interface and use it only to draw attention to important objects

Registration of positive and negative events

There will most likely be positive and negative events in the game, so it is useful to come up with a design and choose colors for these cases. Red is often used for things associated with negative events, and green for positive events.

Binding icons

If the game is for PC and consoles, you will need bind icons. It is beneficial to use one set of such icons everywhere, because this will make it easier for people to learn how to work with the interface, and designers will not need to draw additional elements

Method of designing icons of items and skills

There will also be item icons in the game; their design should also be consistent. There is an article about how to get into style when drawing interface elements https://habr.com/ru/articles/721766/ And there is also an article about drawing a pack of icons https://habr.com/ru/articles/477562/

A way to show the quality of items

You may need a way to indicate the quality of items. This is often done using flowers, below are some examples.

Background for full screen interfaces

Interface modules will lie on some background. If the background is noisy and flashy, some elements will be difficult to read, and working with the interface will become more difficult. Therefore, it is beneficial to choose a calm and uniform background against which all elements will be clearly readable

Below are a couple of examples with backgrounds that complicate the readability of interface elements

Of course, there are noticeably more elements that can be prepared at the start of a project than I described above, but I think the basic set is already there. So now I’ll look at a couple more examples of consistency in the design of game interfaces and move on to the results

An example of consistency in the design of Prey

But the screenshots below show how the design style of regular text is used in modal windows, hud and on models in the game world

An example of consistency in the design of Warhammer 40000 Dark Tide

The example below shows how the design of the background of interface modules is used in full-screen interfaces and in the hud

Conclusion

Consistency is the absence of contradictions in the design and operating principles of the interface

Making a consistent interface is beneficial, because such an interface is convenient to work with if you are a player, and such an interface is easier and cheaper to create if you are a developer

Colleagues are wondering what set of elements they will need when designing the interface

To make the interface design consistent, you need to assemble all screens from one set of elements and according to the same principles

Here is a basic set of elements and principles that will be needed to design the interface:

Labeling styles – headings, subheadings, regular text, important text, minor text
Design of interactive elements – important buttons, regular buttons, secondary buttons, tabs, interactive panels, item slots
Hover tooltip design
Method for selecting objects
A way to draw attention to objects
Registration of positive and negative events
Binding icons for PC and consoles
Visual style of item and skill icons
A way to indicate the quality of items
Design for backgrounds

I hope you find some of the above useful.