#7 – How to keep your interface consistent

By ensuring consistency in the placement and appearance of UI elements, combined with UX best practices, we will establish a predictable and familiar user experience. This will enable us to create a better experience for our players, by reducing cognitive load and improving accessibility.

It can also save us a huge amount of time during design and development, by encouraging us to reuse colors, spacing and typography.

Take a seat, grab your favorite drink (coffee latte addict in the room, raise your hand), and learn something new about design in video games today.


Visual consistency in purchasing and trading in Borderlands 2

What is consistency in design?

Consistency in design is about making elements uniform, having them look and behave the same way.


As human beings, we have the cognitive ability to identify similar elements, and I believe this is where the Law of Similarity comes from. We’re also curious by nature: from chilhood to death, we’ll always be learning new things.

And that’s the whole point of these capabilities: when players are confronted with a design they already know, they are more likely to understand how to interact with it, which means increased engagement and satisfaction.

What does a consistent design look like?

Take a look at the UI design of the game Unpacking, a zen-like puzzle game about the familiar experience of taking items out of boxes and setting them up in a new home.

Design consistency from photo and camera mode of Unpacking

At first glance, we can see design consistency. Yes, but based on what?

  • Style, everything is in pixel art, with same pixel ratio.
  • Colors, the palette is always the same.
  • Buttons, they have the same shape, icon style and size.
  • Icons, they use the same black and filled style.

These elements are part of a whole, and many others can be taken into account, such as story, gameplay, control, dialogue or even sound design. But this is a consistency that is more a matter of “game” than “design”.

The benefits of design consistency for the player

Chances are your users have already played a game in their lives, which means they’re already familiar with the basic screens of almost every game: title, guided settings, tutorial, cutscene, paused game, character selection, map and so on… you get the idea.

This is where design consistency is important, as we’ll be using it to reduce the learning curve for our own interface.

Have you ever played an MMORPG? I won’t mention World of Warcraft in this article (oups, I have), but take a look at these MMOs. You already know where the UI elements should be placed: chat at bottom left, spells in the middle, mini-map at top right, life at top left, quest at right… It’s a very small learning curve, isn’t it?

A mix of MMORPG screenshots showing how similar the interfaces are

Respect industry standards and practices

Launch a random game from your steam account (I can’t believe you don’t have one), and press the “start” button or the “escape” key. Does this open the menu with a “quit” option? Of course it does. It’s a question of consistency between game standards and customer habits.

This sentence may not have been true twenty or thirty years ago, when video games were not very standardized because the medium was young (which is perfectly normal, everything starts somewhere).

Older game interfaces behave in the same way

Moreover, if you look at the game Buble Boble released in 1986 (holy chilhood memories) and compare it with other games released at the same time, you’ll see that they all display parameters such as life, high score and time at the top of the screen. This was the norm at the time.

Reusing well-know industry habits is the first step in minimizing the cognitive load and using the knowledge acquired by our players.

Screenshot from the game Buble Boble

Study UI consistency

Now that we know why we need to keep our design consistent, let’s take a closer look at how other game designers do it.

Colors matter

The first example concerns the game Disc Room, a game about, hum… discs in a room. Look at how they simply made the design with the same red, yellow and white in the map screen.

Map interface from Disc Room

If you’re working on a small game, my best advice is: pick a color palette and stick to it! It’s a great way to force creativity, make coding with color variables easier and keep the design consistent.

For example, for my game “Another Door”, I chose a palette of X colors, and here’s the result:

Pixel art design of our semi-coop pixel art game “Another Door”

Filter and style too

Here are 4 different screenshots of the same game: CupHead.

Color aside, the design is consistent, thanks to the filters and style Studio MDHR used to design it. I Inspired by 1930s cartoons, the visuals are completely unique. Sticking to one style doesn’t mean staying classic.

Finding the right balance between keeping the design consistent and innovation-based change is key to hitting the right UX experience notes. The “secret” lies in understanding your users’ needs and reflecting them in your design decisions only when necessary. Small changes will help with the product evolution while keeping design consistency intact.

CupHead style and filters consistency

Other design properties are also important

Text shadow, border radius, margin, padding, font size, border width, gradient, fill or border, inner shadow… are elements that all have their importance.

A good way of preserving the consistency of a design is to define rules and reuse them throughout the game. In the code, they will take the form of well-defined global variables that all user interface elements will use.

Look at that inventory in My Time At Portia: the designer has done a good job of repeating the spacing, radius and size of the elements.

UI inventory from My Time At Portia


Players aren’t lazy, they want to be efficient, and you can help them. Reuse design patterns that have proven successful with your users. The challenge is to find the right balance between innovation and consistency.

Links worth visiting

You want to share a link about video games, interfaces, game dev or design? Let me know.

Subscribe to my newsletter - A Good Interface

Leave a Reply

Your email address will not be published. Required fields are marked *