Yesterday, on November 19, we hit a significant milestone: our game reached 7,000 wishlists. So, how did we get here, and what does this mean for us? Let’s break it down.

Welcome back readers

I missed writing. It’s been a while since my last newsletter #21: Creating a Harmonious Color Palette: Tips and Resources dated June 4, 2025. I’ve been overwhelmed with game development and publisher research (more on that soon, stay tuned), and the focus of my newsletter no longer aligned with my current work.

As a full-time indie developer, my days revolve around building an entire game, not just UI design. Writing solely about UI felt like covering only 5% of my journey, which was frustrating.

I hesitated to expand into broader topics like development, design and marketing, fearing I’d lose followers who subscribed only for UI content. But I’m setting that fear aside and will start sharing more of what fills my days, beginning with this piece on how we reached 7,000 wishlists for Another Door.

7.000 wishlist: what does it means?

Steam is an incredible platform for reaching gamers. For a relatively low cost ($100), you can create a game page and access millions of potential players. On these pages, users can add games to their wishlist, a collection of titles they’re interested in, whether upcoming or already released.

A wishlist addition is essentially an “I’m interested”, which is a positive signal but not a guaranteed sale. For developers, wishlists serve several functions:

• Metrics: They help gauge interest in the game.

• Reminders: Users receive an email when the game launches.

• Tracking: Users are notified of price changes.

This feature is vital because, as any indie developer knows, marketing is half the battle. Even the best game is meaningless if no one knows it exists.

7.000 is the magic number

There’s a well-known threshold in the indie game world: 7,000 wishlists. This number often determines whether a game is ready for launch. Reaching it suggests:

• Interest: We’re so happy that over 7,000 players are intrigued by our game.

• Momentum: It increases our chances of appearing in Steam’s “Popular Upcoming” section, boosting visibility.

• Validation: Our design and concept are resonating with players.

• Effective marketing: Our recent efforts are paying off.

And it is on this last point that I will focus today.

How did we reach 7,000 wishlists?

On the famous blog of “How To Market A Game” someonce once said:

However, if you are sitting at 3000 wishlists despite at least 6 months of trying EVERYTHING to get your game seen and nothing seems to be working, it might be time to just release it.

We kept this in mind when we launched our Steam page in January 2024. Here’s how our wishlist growth looked from launch to six months later:

Initially, we saw a spike, but growth slowed significantly afterward.

Did we try everything? Not at all. We were consumed by development, playtesting, and art direction, often neglecting marketing, assuming a few weekly tweets would suffice. Spoiler: it wasn’t enough.

Steam page launch: 0 to 1,500 wishlists

In January 2024, our Steam page was minimal: a basic description, no trailer, and a few screenshots.

Fortunately, a Japanese Twitter account spotted us, and their post garnered over 300,000 impressions and 2,000 likes. We believe this single post accounted for nearly all of our first 1,500 wishlists in under a month.

It was a strong start and validated our idea.

The slowdown: 1,500 to 4,000 wishlists

From February 2024 to August 2025, we added just 2,500 wishlists, reaching a total of 4,000. With minimal marketing, just a few tweets and local events, it was encouraging to see organic interest. But we knew we needed to do more.

Taking action: 4,000 to 7,000 wishlists

After August 2025, we made key changes:

• Updated the Steam page with a trailer, new screenshots, and a revised description.

• Posted daily on Twitter, Threads, and Bluesky.

• Followed trends more closely.

• Reused successful content repeatedly.

• Celebrated milestones more frequently.

The results speak for themselves. Instead of relying on viral posts for spikes, we built steady, daily growth. People often ask what specific actions drove our wishlists. The truth? We didn’t do anything groundbreaking. Consistency and focus were key, along with the advantage of Suzy’s appealing pixel art style.

For example, a recent post that performed well was simple: no hashtags, just a mix of in-game screenshots and keywords, reposted by someone else, a tactic that seems to work well on Twitter.

From 7,200 to ??? wishlists

We’re aiming for a Q4 2026 launch, giving us plenty of time to ramp up marketing. Here’s what’s next:

• Reaching out to content creators and press.

• Releasing a demo and participating in Steam festivals.

• Experimenting with TikTok and YouTube Shorts.

• Writing more newsletters.

• Continuing daily posts on Twitter, Threads, and Bluesky.

I have 20,000 wishlists in mind for launch. Let’s see if we get there!

Summary

From 0 to 1.500 wishlists
⌛ In less than 1 month
▶ Thanks to a viral post from a Japanese content creator linked to our Steam page launch.

From 1.500 to 4.000 wishlists
⌛ 1 year and half
▶ With minimal marketing and a couple of local events.

From 4.000 to 7.200 wishlists
⌛ 3 months
▶ Posting daily, updating the Steam page, and reusing successful content.

From 7.200 to ??? wishlists
To be continued.

Thanks for reading!

Thanks for being part of this adventure with us! If you’re curious to see how Another Door unfolds, want to chat with the team, or just love games about gambling and betrayal, we’d love to have you along for the ride.

Join us here:

• Discord – Hang out, share your thoughts, and be the first to hear our updates

• Steam page – Wishlist the game and stay tuned for the launch.

• Every other link – For everything else.

  ---

You'll agree that staring at a blank sheet of paper (or rather a blank screen) and hoping that the perfect color palette will magically appear is not an ideal solution.

In this article, I'll give you some tips and resources to help you define your color palette and ensure its quality when you start a new project.

Grab a cold drink (summer is coming) and enjoy!

Good artists copy, while great artists steal

Funny way to start with this quote from a certain Pablo, right? Especially these days, with generative AI creators who have absolutely no qualms about stealing designers' work. I mean, you weren't supposed to take that quote literally, right?

I could also have chosen “Nothing is lost, nothing is created, everything is transformed” because both quotes correlate with my vision of creation. Far be it from me to enter into any debate, but I like the idea that design, or art more generally, is a constant evolution based on previous iterations.

Obviously, I'm not inviting you to shamelessly steal your peers' work, but rather to draw inspiration from it to create something unique. And their colors shouldn't be overlooked.

Take this beauty : Clair Obscur: Expedition 33 (or “thingamajig 33” if you're in the Land of the Rising Sun).

Observation is the key to success

There is a difference between looking and observing. Once you get past the stage of wonder (you know, that moment when the pixels dancing on the screen send your dopamine levels skyrocketing), it's time to start asking questions.

Let's take a look at how this game, made in France (oui oui omelette du fromage), uses colors.

Difference between the interface and the rest

Here, there's no need to pull out your color picker and start copying everything. In the image above, which looks like a battle scene, we can clearly distinguish two things:

• Firstly, the colors associated with the mood of the game, a rather dull combination of blue and gray that creates an unsettling atmosphere.

• Secondly, the colors associated with the interfaces, a mix of very dark colors with touches of colors that are much brighter than the rest.

The first point shows us that choosing a palette color doesn't mean that all of them have to be on the screen all the time. In this incredible turn-based RPG, there are a multitude of environments, each with its own atmosphere and therefore its own color scheme.

Too many colors at once can detract from the synergy on screen. Look how different this screen is from the first one in terms of colors, even though it's the same game.

Oh and while we are talking about Clair Obscur, take a moment to apperciate the work of Lorien Testard.

The second teaches us that contrasting and/or bright colors are everywhere in interfaces. Why? In the same way that movement can be used in a game: to attract attention.

This is why it's important to define the color palette with the game as a whole in mind, not just the setting or the interface.

I strongly encourage you to take your favorite games and do the same exercise, spending time analyzing which colors appear at what moments.

Working on your critical thinking skills is essential.

This little observation exercise allows us to project ourselves and try to understand the choices that were made.

However, before criticizing (in the sense of analyzing), let's keep in mind that we don't know the development context, the number of people involved, the target audience... These are all variables that you'll need to take into account for your own games.

Sharpening your critical thinking skills is an important factor when it comes to creating, and I'm not just talking about design. I'm also thinking about dialogue, gameplay, tutorials, controls, etc. Every choice you make will shape the final experience.

Choose a palette suited to the universe

It goes without saying that the atmosphere of a game also depends on the choice of colors, and to better understand this, we should first look at the psychology of colors.

This is a subject that is as fascinating (in my humble opinion) as it is vast, and there is still much to learn about it, but colors have real meaning for each of us and are rarely chosen at random in your favorite games.

For example, by analyzing the colors of the game Kabuto Park, without even knowing its gameplay or what it's about, you'll quickly get some insights. These shades of blue, green, yellow, and brown, all quite contrasting, immediately bring to mind nature, the sky, and wood.

For a game whose pitch is “capture the cutest insects,” it's a perfect match.

Let's quickly look at a second example with the game Sol Cesto. The palette here is much more varied, with more diverse tones and less striking contrasts.

Overall, the game is darker and yellow is very present. Coincidence? No. In Sol Cesto, your goal is to navigate the floors of a random underground labyrinth, descending deeper and deeper in an attempt to find the sun that was lost years ago.

Here we have another example of a palette that is well suited to the game's universe.

Each color comes with its own emotions

While yellow is more associated with optimism, blue is more associated with calm and consistency. You can find numerous studies on the internet, and we could debate the veracity of their findings for hours.

Let's assume that none of the rules mentioned in articles about color psychology are universal; each person will associate different emotions and feelings based on their own experiences or culture.

The color of a logo is never random

I love this image that attempts to categorize some of the world's most famous logos. However, aside from the date this image was created and the fact that some logos are no longer current, we should also consider that the meaning of colors can change over time.

Indeed, there is a lot of talk today about greenwashing, something that was less prevalent in the past, and I would be curious to see how many companies (not so green, unfortunately) end up with a logo in shades of green.

A different perspective depending on culture

Speaking of culture, I will give you a concrete example of how it can impact your designs.

In France, where I live, black is the color worn during mourning, while at weddings, the bride traditionally wears white.

Conversely, while researching online, I found that in Chinese culture, families generally wear white at funerals and the bride wears red at weddings (a color associated with happiness, success, and good fortune).

If this example is borrowed from real life, the same will be true in your game. If your game reaches a diverse audience, your color choices may not necessarily be understood in the right way on the other side of the globe. While this may be a marginal issue, it's still something to keep in mind.

Cultural differences in video games

Here's a little anecdote related to culture in games: in World of Warcraft, which I'm sure you're all familiar with, there are some differences between the Western and Chinese versions.

In fact, blood and skeletons have an unfortunate tendency to disappear in the Chinese version. Allow me to quote JudgeHype, a news site about WoW.

What you need to know is that, contrary to what has long been believed, China does not ban blood or skeletons in video games. There are games in China that feature skeletons and are not censored in any way. They are not considered taboo in Chinese culture either. There are no laws banning the use of skeletons or blood.

However, Chinese laws and regulations are so open to interpretation that publishers modify their games in advance to ensure they pass the approval process. In other words, some of the skeletons in WoW could easily appear in the Chinese version of the MMO, but Blizzard prefers to rework the graphics rather than have the game refused release, which would have a much greater economic impact as it would delay the game's release in China.

And what about my palette?

Yes, let's get back to the matter at hand. The emotions conveyed by colors, as well as the culture of your players, help you choose colors more effectively, but these are not the only factors to consider.

Mario Kart vs. Elden Ring: The Battle of Colors

For example, an arcade game aimed at the general public and casual gamers will have a more contrasting color palette with bright colors, such as the iconic Mario Kart below.

These games are generally designed for short, intense gaming sessions. Contrasting colors help maintain the player's energy and excitement.

In fact, this is exactly the type of tones and contrasts found in children's play areas, which are of course designed to attract the eye. Funny “coincidence,” isn't it?

Meanwhile, a game like the latest Elden Ring Nightreign, which takes place in a medieval fantasy universe and has a difficulty curve considered high, uses rather dull and dark tones. This has several advantages:

• The atmosphere is immediately more mysterious and the world seems more dangerous.

• The game mechanics are more complex and require sustained attention. Less contrasting colors can help reduce visual fatigue during long gaming sessions.

• This type of game encourages exploration and discovery. More nuanced colors can help highlight details in the world and guide the player to certain areas.

Consistent use of colors

When I write “consistent,” I mean “within the norm.” Take a look at the four games below. They're not necessarily from the same studio, nor are they necessarily aimed at the same audience or culture. And yet all of the health bars are red and positioned in the upper left corner of the screen.

Using patterns that are familiar to users is a significant advantage when creating your interfaces.

By reusing what your players already know, you greatly reduce the friction associated with learning time, and colors are of course to be included in this process.

Again, what I'm saying is just advice; it's perfectly acceptable to do things differently.

What about monochrome designs?

A monochrome design gives a clear and consistent identity, but it can also make the interface less engaging or too austere. It can be difficult to quickly distinguish between different types of elements. In this case, contrast and brightness are used to highlight certain elements.

The best example I have at hand is, of course, Halo.

By choosing a blue color combined with opacity, we get that futuristic feel that fits perfectly with the game's universe. However, as you can see, it can be difficult to distinguish the meaning of each element at first glance.

By losing color, or rather by keeping only one color, we also lose information.

It's up to you to test whether players respond well to your interface, because, as I mentioned, your judgment alone cannot ensure that the interface is understandable and/or accessible.

Focus on accessibility

You can't escape it: when I talk about colors, the subject of accessibility inevitably comes up.

Reminder about colors' best friend: color blindness

Color blindness, or color vision deficiency, is a genetic condition that affects the ability to distinguish certain colors. The most common types include difficulty distinguishing between red and green, as well as blue and yellow. This condition is more common in men (8% of the population) than in women (0.5%).

Implications for video games

• Colorblind gamers may have difficulty distinguishing game elements that only rely on specific color codes.

• Use high contrast and/or distinct patterns to help colorblind gamers.

• Offer customization options for colorblind gamers, such as color filters or colorblind modes that adjust color palettes to make them more distinguishable.

Without these adjustments, colorblind gamers may have a frustrating or disadvantageous gaming experience, as they may miss crucial information presented only through color.

Personal experience with accessibility

A few days ago, I was working on the interface for Another Door and the possibility of changing the font to switch between pixel art / a conventional typeface / and one suitable for dyslexics. I took the opportunity to share this on the game's Discord channel and got an interesting question:

The answer is no. When we think about accessibility, we often imagine someone born with a different condition, or something that remains unchanged over time. I'm sorry to say that this way of thinking is wrong.

Accessibility is also for me, for you and for everyone

Accessibility can be useful at any time in your life. Let me give you a few examples:

• Make the game playable with one hand? → If you have your hand in a cast or are holding your child at that moment.

• Making the text more readable? → You want to play while enjoying the sun on your patio, but the visibility of your screen is not optimal.

• Making the game display subtitles? → Not just for the hearing impaired, but imagine if you have someone sleeping in the next room.

These are just a few examples from everyday life that are directly related to accessibility in games. While some choices are personal (such as the preference between pixel art and high-resolution fonts), others will allow more players to enjoy your game in the best possible conditions.

My reasoning, if I had to sum it up, is to treat others as you would like them to treat you. This applies both in everyday life and in the options you offer in your games.

Conclusion

As usual, this is just a tiny fraction of everything that could be said about colors in video games. Color psychology, as well as your players' experiences and culture, greatly affect how your design choices are perceived and, therefore, how your game is perceived.

Contrast, game type, and accessibility are all factors to consider when choosing a palette. Your greatest allies will be your critical thinking and observation skills. Spending time analyzing how other games work will likely give you more insight than you think.

Another Door showcase & Private playtest

It's been a while since I last wrote an article, and the reason is pretty simple: between Indie Game Lyon, a trade show where we presented Another Door, and the launch of our private playtest on Discord, the time I had to write was, let's say, rather limited.

As for the trade show, everything went well. We had about a hundred players, a few dozen wishlists, and a lot of feedback, which is incredibly valuable to us.

Then we opened the game to private playtesting via the features available on Steam (key distribution and online matchmaking). And let me tell you, we didn't expect so much work after that.

The amount of feedback, bugs, and ideas for improving the game that we've collected is huge, and that's great! Because that's exactly what we were looking for when we launched this playtest.

Add to that our search for a publisher and the fact that I've started teaching UI Design to future game designers, and you can imagine that time is flying by right now.

Links worth visiting

• Cocorico - here are two French indie games, Sol Cesto & Kabuto Park, released very recently. Take a look!

• Game Accessibility Guidelines - A straightforward reference for inclusive game design.

• Bevy Engine - A refreshingly simple data-driven game engine built in Rust
  Free and Open Source Forever!

• A modern 2D level editor - from the director of Dead Cells.

• The GMTK Game Jam - is an annual game making marathon, where individuals and teams try to make a game that fits a theme, in a super short time period.

• Chroma - (developed by Ubisoft) is a one-stop solution for detecting color blindness-related issues in games.

• Jaku - is an exploration and search experience with procedural levels, making its replayability endless.

• The complete guide - for creating VFX within League Of Legends.

• Polyglot Gamedev - Start localizing your game, using this human translated resource for the basics.

• RetroArch - is the reference frontend for the libretro API.

Subscribe now

In this article, we'll be analyzing 4 interfaces that inspire me, whether for their beauty, their richness or even their layout:

• Balatro - the poker roguelike

• In Other Water - an Artificial Intelligence guiding a stranded xenobiologist

• Paper, Please - between duty and morality

• Backpack Battles - UI as a constraint

Grab something to drink and open your wishlist page on Steam, because you don't want to miss these gems.

Wait. What is… an user interface?

I've been writing about user interfaces for almost 2 years. I've been building interfaces for over 7 years. And when it came to defining what an interface is while writing this article, I drew a blank.

I did a quick search, “what is user interface design in video games? “ and the beauty of the Internet helped me find an answer:

UI design in video games refers to the visual and interactive elements that players engage with.

An answer that's wrong on so many levels. Let me explain:

• Health bars are not interactive elements, but they are part of the user interface.

• The user interface goes beyond visual elements alone, be they sight, sound or touch.

• The user interface has a clear objective

The right definition of UI Design in videos games

So I turned the internets upside down, gathered sources, examined the various definitions and here's what I found:

User interface design in video games consists of elements that provide information about the state of the game and allow players to interact, ensuring that the interface is intuitive, accessible and aesthetically pleasing.

This definition is more generic and easier to understand. It also redefines the main objective of user interface design, by including the term “accessible”, which is very important to me.

If you need more advice on accessibility, my very first article talks about it: #1 - How to make our game colors accessible to everyone

Balatro - the poker roguelike

If we take this Super Smash Bros Ultimate screen, by our definition, this is where the user interface is:

Which is not at all what you might think when you talk about “100% interface games”. In fact, if we talk in terms of % of screen space, there are practically no 100% interface games, because of white space (which is important, I've talked about it here).

But if we take this unknown game, called Balatro, we can see that the interface is almost everywhere.

I joke that Balatro isn't famous, the game has been a huge success since its release, I've personally played over 150+ hours of this incredible game. It's also a great source of inspiration for me when it comes to the game's feel.

What makes Balatro's user interface so special?

Three things come to mind when you ask yourself why Balatro's interface design is so special:

• It's simple - from layout to wording.

• It's attractive - the visual style and colors are well designed.

• And above all, it's juicy!

I'll concentrate on the last point - not that I'm not interested in the first two, but I have so much to say in this article, other games to present, and I wanted to keep it short.

What makes a game juicy

If you don’t know the game, take a minute to watch this short trailer from Localthunk the developer.

Now let's analyze.

• How everything is perfectly synchronized

• How each animation is accompanied by a specific sfx

• How these sfx are twiked according to their values

• How cards react to mouse-over, when played, when adding score

• How the game feels fast and responsive, yet complete at the same time

• ...

The list could definitely be longer, and I could dive into analyzing each item, but as always, I'm here to give you the clue so you can look for yourself.

Balatro is definitely the king of juice when it comes to independent games.

If you want to learn more about how it works, the best thing to do is download the trailer and play it in slow motion, analyzing how the sounds evolve and the animation speed of each element.

As a bonus, here's a video to show you step by step how to reproduce this sensation!

In Other Water - an Artificial Intelligence guiding a stranded xenobiologist

Let me introduce the 2nd game of this article, In Other Water.

Play as an Artificial Intelligence guiding a stranded xenobiologist through a beautiful and mysterious alien ocean. A non-violent sci-fi story, enter a world of wonder, fear and vulnerability, unraveling the history and ecology of an impossible planet. What will you discover together?

To be honest, I was fascinated by the design of this one.

I think the use of a restricted color palette and the flat design, combined with the fact that it looks like a sci-fi interface of a spaceship, definitely made me fall in love.

Creating an interface that matches the atmosphere of your game really gives you a marketing edge. In this case, the pitch is about Artificial Intelligence, xenobiology and an alien ocean - all of which perfectly match the look of the interface.

One of the first pieces of advice I give to people wishing to make pixel art is to choose a color palette, an asset size and to be careful to keep the same ratio on each design.

Well, it's exactly the same here, with one palette, one style and one consistency throughout the game. Inevitably, this immediately gives a professional look.

If we had to pick out three tips for this game's user interface, they would be these:

• Make the design of the game interface match the atmosphere of the game.

• Fewer colors in our palette isn't a bad thing.

• It's important to define a style and not mix everything up.

That's what we're trying to do with our game, Another Door. A lot of people talk to us about the colour palette and that's the first thing we chose when we started out!

Papers, Please - between duty and morality

Paper, Please is an excellent game released in 2013 (about 12 years ago, I feel old now) - which I didn't like myself, I tried it and... it wasn't for me.

If you take a look at the last review of the game (which are also extremely positive), you might find something like this:

“I let a terrorist through through border then was caught helping a resistance organization and was arrested after I shot the innocent people trying to cross the border. 10/10 game would recommend.”

And that is what the game is about: making choices. Choices based on your own needs and morality.

How Paper, Please's UI design is built around the game's story

What remains from my brief experience is that interface elements play a central role in the game world. Instead of a "validate" button, we have a stamp. This stamp takes us directly back to elements of real life, just like the stamp we apply when entering a country's border.

In this interface, the UI isn't just a layer on top, a layer that allows us to perform actions and that needs to be as fluid as possible.

No. The UI is the game.

A little stamp gives an incredible sense of power and fear.

Have I made a mistake? Did I ruin an innocent life? Did I let a terrorist into the country?

Backpack Battles - UI as a constraint

Let's move on to the last game on this list, Backpack Battles. Part of the "Inventory Management Auto Battler" category, the use of the interface here is very interesting.

We're not faced with a story and interface elements that embrace it. We're dealing with an interface that imposes its own constraints!

In fact, the main principle of the game is to place items in your bag correctly to get the best result. Often we'll find ourselves blocked by a lack of space, and we'll have to be cunning to place what we want.

Here the UI design is more about the gameplay than the story.

Conclusion

Focus on 4 games with memorable UIs: Balatro, In Other Water, Paper Please and Backpack Battle. Whether it's for its game feel, its aesthetics, the fact that it embraces the story or rather the gameplay.

Turning your interface into something unique takes a lot of work - but it's bound to reward your game.

A word to readers

Here are 20 articles and over 30,000 words written sharing my knowledge of video games and their design.

My vision of the world hasn't changed and I still believe that education is a real world changer and should be accessible to as many people as possible, that's why I make all the newsletters I create on video game development freely available.

The financial aid I receive and which is coming to an end means that I need to find a source of income if I want to continue sharing and writing my articles as well as developing my first video game.

So I've decided to open up the newsletter to monetisation. To keep in line with my values and my idea of education, I've also decided to make all the articles, including the archives, freely accessible.

To sum up, what will this change for you? Well, nothing.

And nothing is mandatory.

Simply, if one day my articles have helped you, if you like reading me or if you share my vision of things, you can now support me via substack.

In exchange for your support and to thank you, here's what you'll get:

• Future Game Discounts: Enjoy special discounts on my upcoming video games.

• Early Playtest Access: Be among the first to playtest my new games and provide feedback.

If you want to support me and you can't afford a financial aid - feel free to share my article and the newsletter around!

It's a pleasure to write for you, take care.

Links worth visiting

• Gitmoji - Keep your commit clean with an emoji guide.

• Cursor.ai - If I don't think AI is going to replace me tomorrow, I can't do without it.

• An interesting video - about how World of Warcraft icons are fading

• A tutorial video - How to Set Up Steam Stats & Achievements in GameMaker

• ShaderGlass - Overlay for running GPU shaders on top of Windows desktop.

• Steam Revenue Calculator (chrome extension) - I still think about making one for Firefox, anyone is looking for that?

• Polyglot Gamedev - Start localizing your game, using this human translated resource for the basics.

• Wanderbots - Quick Reference Checklist For Contacting Content Creators.

• 25th ANNIVERSARY FINAL FANTASY IX - A website for the fan, I guess.

• The Balatro Timeline - This is an account of everything related to Balatro development in chronological order

• Steam reviews template - This little tool simplifies the creation of copy-pasta Steam reviews

• KeyMailer, Lurkit, Press Engine - Three websites for developers who want to distribute their game

And that's it! I had a lot to share with you today.

In this magnificent game, as attested by the screenshot I'm including below, the story follows a stray cat who falls into a confined city populated by robots, machines, and mutant bacteria, and sets out to return to the surface with the help of a companion drone named B-12.

During my 6 hours of gameplay (that's how long it took me to finish the story), aside from the perfect cat gestures, the engaging plot and story offered by the game, and the incredible designs—what caught my attention was... a small backpack.

I’ve also published my first chat on substack, asking you, subscribers of “A Good Interface” if you have any topics you would love to discuss, and this answer took me straight back to my experience of Stray.

In the game Stray, where you play as a cat in a post-apocalyptic world (yes, I know, it sounds appealing right away), you receive a small "backpack" that allows you to get help from an AI-enhanced drone or communicate with other characters in the game.

The way the backpack lights up green when the cat is near an actionable item has a name, and that's what we're going to talk about today: the diegetic interface.

If you enjoy games that push immersion to the max and want to add a touch of originality to yours... this article is for you.

Grab something to drink, and enjoy your reading!

What is a diegetic interface?

As usual, let’s start with a definition:

What that’s mean is that when the green light appear in Stray, our cat could litteraly see it and can react according to - as well as other character in the game.

As opposite, if you take a look at thoses health bar from World Of Warcraft, they are non-diegetic, which mean only the players (you and I) can see them, they don’t exist for your character in the game world.

Advantages of this type of interface…

First, let's look at the advantages of this type of interface. Because, as you're beginning to see, when it comes to interfaces, there's rarely a solution that doesn't come with its share of advantages and disadvantages.

And, as always, it's just a question of knowing what they are, so that you can build a pleasant experience for your players.

Make the game more immersive

The first and main advantage of this type of interface, from my point of view, is that it make the game feel more immersive.

One of the most know UI Diegetic is from Dead Space. In the game almost everything is diegetic as you can see below:

• on the player's back you can see how many life points your character has left

• the number of ammo remaining is the small number near the weapon

• and the cursor is projected a few meters in front of the character

• ... even the inventory is projected via a hologram, which means it's diegetic because the character can see it and interact with it

This will reduce the number of assets floating at the top of the screen, the in-game character will be able to interact with you like “Hey, looks like you're out of ammo” and everything will be implemented directly in the game.

All these ways of rendering the user interface element, usually displayed at the top of the screen below everything else, reinforce the sense of immersion.

Helps reduce interruptions

Diegetic interface can help reduce interruptions and speed up some task, it can be faster to look at something already displayed on the screen than push a button and wait for a loading time to get that informations.

If you open the map in the walking simulator Fire Watch it will instantly put it in front of your eye (and the eye of your character).

This kind of action seems instantaneous and doesn't require you to click on several menus or sub-menus to access the information you want, thus helping to reduce interruptions during gameplay.

Enhance narrative coherence

I’ve never played the so famous post nuclear role playing game Fallout 3, but I’ve eard of the “Pip-Boy Model 3000” which is… a diegetic interface.

When you want to look at the map or browse your inventory, the game character raises his arm and looks at this little device, through the green screen you can now see what you're looking for. This is another way of enhancing narrative coherence in your game.

I mean, it's just the kind of game where I expect my watch to break down and I'm left without a map. It's really a way of pushing immersion and gameplay coherence to the limit.

Narrative coherence - The logical, coherent relationship between narrative elements, ensuring that plot, characters and events flow smoothly and meaningfully from start to finish.

Fun fact, I’ve found that the Model 3000 from Fallout 3 and the Model 2000 from Fallout 76 works differently in terms of gamedesign - accessing the Pip-Boy does pause the game in the first case while it doesn’t in the second.

And it’s also a good way to push immersion: since danger is always present, not having a safe place to rest adds more stress. (I remember the same thing happened in an Alien-type game, but I can't remember which one!)

Offers a creative challenge

All of which brings us to the last point, which is quite pleasing as a designer: this way of doing things gives you the chance to let your imagination run free and have fun with the assets.

With diegetic UI, you'll have to adapt to your game's universe to respect the world in which your character evolves.

In the same way that game jams impose limits (of theme, technique, design...), this kind of user interface imposes its own constraints: visibility, accessibility, location, size...

At first, this may seem like an extra challenge, but it's also a big boost for creativity. I've always seen these constraints as a way to push myself rather than a limitation. The best ideas often come from working within these boundaries.

Let's take a few examples of well-designed diegetic user interfaces to finish off on the advantages of this type of design:

• In World of Warcraft, if a character opens the map, they will hold it in their hands. As a potential enemy, this gives you an extra clue: that person is busy and might not see you, making it ideal for setting up an ambush.

• In Risk of Rain 2, each type of item you pick up appears on your avatar. This is an original way to show everything you're carrying—the more cluttered your avatar looks, the stronger you are.

• As long as you don't put your combination in Outer Wild, the interface doesn't appear on the screen.

• In Paper Please, characters hand you their paper, which you then inspect. A great way to link story & interface.

The benefits in brief

• Make the game more immersive

• Helps reduce interruptions

• Enhance narrative coherence

• Offers a creative challenge

There are certainly others, and now that you know what a diegetic interface is, you're bound to spot other games that have one!

... and its disadvantages

Now, let's talk about my favorite part: the disadvantages of this type of interface, because when it's easy, well, I find it boring. While it's interesting to discuss what works well, it's more important to point out what doesn't in order to avoid potential pain points and friction.

A problem for accessibility

When I talk about accessibility, I think about the colors of elements, size of texts, contrast, text-to-speech for visually impaired individuals and allowing users to customize their controller or keyboard controls.

I have already written a few lines on the topic in my previous newsletters, which you can get a glimpse of through these two articles:

• The basics of typography in game interface

• How to make our game colors accessible to everyone

Taking the example of Risk of Rain 2, where items accumulate haphazardly on the character, it is clear that this approach is not accessible and cannot replace a more traditional interface.

In fact, the designers understood this well, as it is possible to view the list of items carried by the character through an interface available at the top of the screen. Otherwise, the game would have lost a great deal of accessibility.

Risk of cognitive overload

When used sparingly, diegetic UI is pleasant to look at and adds an extra layer of immersion to the game. However, when used systematically, it can become a significant cognitive burden for players.

It is rarely useful to display all information at once, as not all information has the same importance depending on the game's progress. For example, Dead Space displays 3 or 4 pieces of information at the same time in a diegetic manner, and it is preferable to keep this number relatively low.

Bonus — an interview of the UI designer of Dead Space.

In my research on Reddit, I read many comments from players complaining that this type of design is detrimental to the game. Therefore, be careful not to overload the screens. I have already written a few articles on this topic here and there.

Taking Outer Wilds as an example, the visual indicator showing the direction of the ship's movement is diegetic. It could have been replaced with arrows somewhere on the screen, but it is represented by a kind of 3D lever.

Additionally, given the limited amount of information displayed at once, this indicator is not excessive and does not clutter the screen or the game.

More complex design

These last two points lead us directly to the third and final disadvantage I wanted to discuss.

Diegetic UI inevitably means more assets to create, more potential interactions with in-game characters (since they are aware of these elements), and even more potential accessibility or cognitive overload issues.

While it is a fantastic tool for immersion, it might be wise to initially set it aside to validate more important gameplay elements and then return to these interfaces later.

I speak from experience, game development is a long journey. Between new features and those you rework a year after initially working on them, managing your work time effectively is a real asset.

Disadvantages in brief

• A problem for accessibility

• Risk of cognitive overload

• More complex design

While a diegetic UI brings its share of benefits, it also needs to be used with care. It's not a catch-all where you can put everything.

Conclusion

While diegetic interfaces are a fantastic tool for immersion and creativity, often benefiting the game, one should not underestimate the potential negative impact they can have on the experience. As always, the best way to validate your ideas is to test them.

Links worth visiting

• Custom pseudorandom number generators! for Game Maker - That aligns perfectly with my article from last month.

• clumsy makes your network condition on Windows significantly worse, but in a managed and interactive manner.

• I’m trying Cursor - the AI Code Editor

• Is this the future of indie game publishing?

• Twitch statistics and analytics by Sully Gnome

• My game selection of the month STRAFTAT, (the) Gnorp Apologue and Yellow Taxi Goes Vroom

• Are Old Games Killing New Games? - by Push To Talk

In common usage, randomness is the apparent or actual lack of definite pattern or predictability in information.

As a huge rogue like’s and mmorpg’s genre fan, my experience in video game is full of randomness.

When I launch a game of Balatro, I don’t know which joker I’ll encounter this time. If I play Slay the Spire, I can’t predict how my build will evolve. And what did my next Minecraft world will look like? I have no idea neither.

That’s a big part of why I come back into these game (and why players on Steam love them), I'm attracted by the promise of infinite replayability with many different ways of playing the same game - which is only possible due to randomness.

Is there a magic random() function?

Does it mean game developers use a magic “random()” function in their code which make instantly item rarity drop or shuffling card looks cool and fun?

Short answer: Nope.

Long answer: There are tons of way of doing random and we’ll explore some in this article. If you loved game like Balatro, Slay the Spire, Minecraft, Dead Cells and want to learn more about how they make random fun, you’re at the right place.

In this article, we'll explore different ways of improving a game's randomness so… grab a drink, and enjoy!

Why does true random feel’s wrong?

In most video games and board games, there is always an element of randomness, and you’ve probably encountered it before. However, randomness isn’t always fun, and game designers often avoid using it without adjustments.

Far be it from me to criticize randomness—I’m a big fan of rogue-like games, so that would be quite ironic. I don’t think it is inherently bad, but there are times when it can be wrong. Let me give you three examples.

Random generate frustration

Here’s a real story every MMORPG player’s will understand.

1. The quest giver ask for 10 magic stone.

2. The drop rate for those stone is 50%.

3. You killed 100 monsters and still have not finished the quest.

Can be frustrating isn’t it? Yep. But it is what it is.

When you search the body of a freshly killed monster, the computer generates a number associated with the loot table and delivers it to you, without any additional logic.

If you are lucky enough, every monster will drop the thing you’re looking at. If not, you’ll spend hours searching thoses. The exact same way you can throw 100 times a dice and never land a 6.

Random is imprevisible

In the game I’m working on, Another Door, players face a random sequence of 2 to 7 monsters. During our playtests, we quickly experienced the same monster being played several times in a row, which was not the experience we wanted.

This immediately gives the impression that the game lacks content.

We could always increase the number of different monsters: 1, 10, 100, 1000... But there's will always be a chance, however small, that it could happen. It is completely unpredictable, and as a game designer, that's not what I'm looking for.

To be 100% precise, it’s predictable because computer use pseudo random to generate numbers, as well explained by this reddit comment.

Computers use clever math tricks to make numbers that look random. They begin with a starting point called a seed and then follow a set of rules to create a sequence of numbers. The catch is that if you use the same starting point (seed), you'll get the exact same sequence. To make things less predictable, they often use things like the current time or user actions to set the initial seed. This makes the numbers seem random enough for things like games or security.

Random can’t give feedback

Players need feedback to learn and improve, as we need it in the real world:

• If I fall, it hurts.

• If I hit the ball harder, it goes further.

• If I keep writing newsletter, subscriber growth.

• And so on…

If the outcome of their actions is too random, it becomes harder to discern which strategies are effective. And when we play a game (except in the case of Russian roulette) we expect to learn how to become stronger.

That said, it’s a bit funny because my game is based 50% on luck and 50% on bluffing. But as mentioned above, luck (or randomness) isn’t inherently bad. There are great types of games that don’t rely on the elements I’ll list below.

If you’ve heard of the game Buckshot Roulette (which has an incredible art style that I would love to explore in another article), you know its core mechanics are based on randomness. The game designer simply decided to add elements to manipulate, influence, or adjust the outcome, to trick the randomness rather than fundamentally alter how it works.

After all, being lucky is fun.

What can be done to improve randomness in game?

Here we are, now that we seen few element that can make random wrong, because random in game don’t have to be that random, let’s deep dive in techniques to not let bad luck or random generation ruin your game.

At the beginning: Scripted randomness

Definition: Random events that are pre-designed and follow a specific set of rules or conditions. These are predictable but can still produce variation in outcomes.

This. Almost every technique I’ll describe is an extension of this definition. There is always some randomness, graciously generated by your computer, but it is subject to rules, rules that we, as game designers, decide to implement based on the context.

The Marble Bag

Definition: A randomness control technique where drawn outcomes are not replaced until all possibilities have been exhausted. This ensures every option appears over time while maintaining variation in order.

Imagine a bag filled with three marbles: one blue, one green, and one red. If you draw a marble without looking, you have a 1 in 3 chance of getting a blue, green, or red marble. So far, nothing new.

When we use randomness without limitations or rules, it’s as if we put the marble we just picked back into the bag before each new draw. The odds never change.

This is where it gets interesting. We can choose a different approach and introduce a new rule to our game: once a marble has been drawn, it doesn’t return to the bag until all marbles have been picked.

This ensures that after a certain number of draws (three in our case), we will have obtained all possible outcomes: one blue, one green, and one red.

The final results will always be the same, but the order in which they appear will vary.

I’ve discovered it on this video, it’s 7min long and worth the watch.

Fixed Limit or Streak Breakers

Definition: If the same outcome occurs too often in a row, we can force a different outcome to prevent streaks of bad or good luck. This fixed limite can be a timer, a number or even a random number (inception here we go).

In a game with a critical hit chance, there is always a possibility that a critical hit never occurs during a fight, even after 100, 1,000, or even 10,000 hits. To prevent this, we can set a limit so that once the threshold is reached, the next hit is guaranteed to be a critical hit.

This is a good way to prevent bad luck streaks, but it should be used with caution.

I intentionally chose the example of critical hit chance because if players realize there is a limit on randomness (and they will), they may exploit it to their advantage, for example, by deliberately performing non-critical attacks until they reach the streak break, then boosting their character’s abilities at that precise moment, knowing the critical hit is guaranteed.

My advice would be to use this system for less "critical" mechanics than a critical hit. For example, in a loot table for common items or determining the appearance of a merchant during a run.

Hidden Rerolls

Definition: Random outcomes that are reattempted behind the scenes without the player’s knowledge, often to improve or adjust results without directly revealing the process.

Because humans struggle to understand probabilities, like our player who insists that our mechanic with a 90% success rate is broken because it didn’t fail ten times in a row, you can just… well, lie to them.

This is something I came across in the excellent video by Game Maker’s Toolkit on “The Two Types of Random in Game Design”.

Does your game feature a high probability, like a 97% chance of doing X? Just roll the random twice, take the better result, and voilà. You’re now a liar, but your players will feel better.

Design tips

One key point from the video is that players tend to grasp their chances better when dealing with physical objects, something they can hold in their hands. It’s much easier to visualize rolling a 20-sided dice and seeing the result than interpreting a "23% chance" written on a card. (Tip from Zach Gage, game designer of Tharsis)

Which means that better randomness doesn’t exist only in the developer’s code, but also in the visual representation in the game. If your players struggle to understand the odds, give them a physical representation of chance: roll a dice, draw cards, spin a wheel of fortune, flip a coin…

Adaptive Randomness or Bias Towards Progression

Definition: Randomness that adjusts based on the player's actions or game conditions to create a dynamic experience.

I've experienced this in roguelikes. Once I start using a specific item, the game adapts and offers me more upgrades related to that item.

I'm not entirely sure about this one and couldn't find confirmation online, but I suspect it happens in Balatro. When I play a specific hand type, like a pair, I seem to have a higher chance of finding upgrades for pairs in the shop.

This is not a 100% chance, but I feel really lucky to get something useful when I open the shop. On the other hand, never getting the upgrade I’m looking for is disappointing.

Weighted Random

A form of pseudo-randomness where certain outcomes are more likely than others due to weighted probabilities.

Weighted random is a simple way to add probabilities to your randomness. As I mentioned earlier in Another Door, players face a series of monsters, and I needed some to appear less frequently than others to avoid them all having the same appearance rate.

The weighted random technique makes this possible.

With this approach, each monster has its own probability of appearing. The difference from the Marble Bag technique is that, even after hundreds of draws, players wouldn’t necessarily have seen all the monsters.

If you're using Game Maker, I followed this tutorial to create a weighted random function: https://yal.cc/gamemaker-weighted-choose/

Controlled Chaos

Controlled Chaos is a system where randomness is used, but within set limits or rules, creating unpredictable yet manageable outcomes.

Let me quote the Lead Designer of Dead Cells, an amazing rogue-like in pixel art made in France.

This technique allowed the small team behind Dead Cells to create a replayable game without letting full procedural generation take over the game design direction.

Procedural Generation

Definition: Content creation based on algorithms and rules that often incorporate randomness. While it uses random elements, the results are still structured or guided by a procedural system. (e.g., levels, terrain, enemies).

I agree, it’s really close to the definition of Scripted Randomness. The main difference is that the term procedural generation is more often used to describe the creation of dynamic content, such as visual content like a level, a monster, or even a planet (hello No Man’s Sky).

If you want to visualize what "random" vs. "procedural generation" looks like, here’s a little comparison of two Minecraft world generations:

As you can see, the first one looks totally random, with no rules, no logic, just pure chaos. While the second follows some rules in its creation, decided by the game designer.

If you want to work with procedural generation, and I encourage you to do so because it’s an amazing way of creating worlds, you can take a look at Perlin Noise.

As you can see, I've generated a few numbers using a "random" algorithm and one with Perlin Noise. What’s immediately noticeable is that the numbers generated with Perlin Noise appear visually ordered. This is exactly what we want: a “random” sequence of numbers that follows a pattern.

Perlin Noise is a very powerful tool, used in many different ways in video games, such as:

• World/level generation

• Texture creation: water, wood, clouds…

• Making enemy movement

• …

I won’t go deeper into a tutorial about Perlin Noise, as there’s tons of content on the internet about it. As usual, I’m giving you the hints so you can do your own research!

Kill game randomness

One thing I hadn’t considered before writing this article is that sometimes it’s enjoyable for players to have the option to completely remove randomness.

Let’s take an example from a game I particularly love: Risk of Rain 2, a roguelike third-person shooter where players battle waves of enemies, collect powerful items, and try to survive on an alien planet.

In this game, randomness plays a major role, from the way enemies appear (their type, location, and timing) to the items players can find to upgrade their arsenal.

However, the developers offer an alternative game mode that allows players to choose their items, effectively eliminating this aspect of randomness.

I didn’t expect to enjoy this mode so much. It allowed me to test very specific builds, something quite difficult in the default mode. I also had the chance to discover all the game’s items, even the rarer ones.

Sometimes, improving randomness in your game means giving players the option to kill it.

Before I finish, let’s talk about “seed”

If you double check the screen of the Dead Cells level design, you can see this text on the top “seed=550129“.

A seed is a starting value that is used to initialize a random number generator (RNG).

The seed determines the sequence of random numbers that the game will generate. If the same seed is used, the game will produce the same "random" results every time, which ensures repeatability. Seeds are often used in procedural generation so that players can share or revisit specific game experiences by using the same seed.

For example, in Minecraft, the world generation is based on a seed: if two players enter the same seed, they will get identical worlds.

The seed is useful as a developer when you need to replay a defined session to find a bug. It’s also useful for your players to share their experience. Allowing them to share this small code is a great way to make your “random” gameplay replayable.

Conclusion

This was a really dense article, and I still have a lot to say about randomness. As always, I’m giving you a hint to encourage your own research. Randomness is a powerful tool, and there are so many ways we can refine it to improve our games.

If you need a more specific tutorial on coding or designing something, let’s discuss it in the comments. I always appreciate your feedback!

Leave a comment

Links worth visiting

• Random Tidbits: Use Chance to Enhance Fun! techniques for generating random numbers which are optimized for player-psychology and design intentionality

• The State of Video Gaming in 2025

• How a Smash Bros. Fighter is Designed by Game Maker's Toolkit

• Celeste Teams' Next Game, Earthblade, Canceled - Fans of the 2D platformer Celeste, you'll be sad to hear that the developers' next game has been canceled

• Social Media for Indie Game Devs: How to Create Content That Attracts Players

• Watch This if You Haven't Started Marketing Your Game

• 200+ tutorials & educational resources for gamedevs & machine learning enthusiasts

• l1-path-finder is a fast path planner for grids

• 10k wishlists at launch, ~2% conversion rate after one week, did we do something wrong?

• How To Market Your Indie Games For (Almost) Free

Subscribe now

As you may have noticed, I got a bit carried away with my game dev and publisher research tasks, so I didn't take the time to write more, even though I have plenty to share, like this monster from my game:

Another reason why I didn’t write much is that I feel a bit stuck with “A Good Interface”. Game interface design is an interesting subject and I love talking about it, but I felt limited when my days are made up of so many other things.

I spent a lot of time coding, doing marketing research, animating pixel art, setting up a Discord, translating the game, making trailer... and so on. Not being able to share it all here was a little frustrating.

That’s why I took this decision for 2025: I’ll write more, but not only about interface design. I'd like to share many other aspects of my adventure as an independent game developer!

I still believe in the power of sharing - that's why I'll try to create the newsletter I wish I'd read when I started developing games.

While you're here, I'd like to thank you.

I'd also like to take a moment to thank each and every one of the 857 of you who are following me on this adventure. I'm happy to share this with you, and I hope we'll learn lots of new things in 2025.

Also, thanks to the newsletter that recommand reading “A Good Interface”.

• Manettes et Chouquettes, Pixel Bento, YellowAfterlife’s Newsletter and GM Shaders

My year wouldn't have been the same without your support.

Now let's take a look back at 2024!

My top 6 video games of 2024

For the curious, here's the list of the 6 games that marked my year 2024, and I'd be delighted to hear in the comments which ones marked yours?

• Balatro - I've never played poker before, yet this poker-inspired game kept me entertained for hours. If you're a fan of rogue like and deck building, believe me, you should give it a try.

• BattleBit Remastered - As a big fan of Battlefied, I had to play this game. Although I wouldn't recommend playing it right now (player numbers are very low & dev are missing), it has a special place in my steam library heart.

• Outer Wilds - I feel so bad that I waited so long to try this game, which instantly climbed to the top of my list of favorite games.

• Core Keeper - This kind of sandbox mining adventure always appeals to me. Grab a friend and explore Core Keeper's gorgeous pixel art design.

• RoboQuest - Rogue like, FPS, Coop: those are the 3 words I needed to hear to try this game. Special mention to the incredible art direction and music.

• RavenSwatch - A roguelike action game playable solo or in online co-op? If you're looking for a dynamic fighting style with a wide range of abilities and play styles, go for it.

As you have noticed, most of them are rogues like and, above all, independent games. If the AAA video game ecosystem isn't in the best of shape at the moment (between scandals, crises & other licensings to please shareholders), I still find indie developers incredible. Every year, we're treated to new gold nuggets.

My top 3 ressources for indie game dev in 2024

Here are the sites I've visited most over the past year.

• GM Shaders - the person thanks to whom I wrote my first shaders, a thousand thanks

  • I've always been afraid of shaders, that barbaric little word and this technology that seems so complex. Xor's tutorials are really well done and I've finally got around to creating my own shaders.

• Game UI Database 2.0 - The Ultimate reference tool for game designers

  • I'm not going to present this site anymore, but if you're looking for interfaces, this is the place to go.

• How To Market A Game - Feel Confident marketing your game

  • Marketing is a sensitive subject, because few games manage to stand out without marketing to ensure revenue for their creators. This blog is a gold mine and I love reading these articles.

What I’ve achieve in 2024

It always feels good to remind what we’ve done in 2024, cause’ my brain tends to forget. And seeing it all again inevitably gives a small sense of accomplishment.

• Started the switch from Twitter to BlueSky

• Wrote 7 articles about game interface design:

  • #11 - What's behind the interface of Lethal Company

  • #12 - What you can learn from the UI Design of World of Warcraft

  • #13 - The basics of typography in game interface

  • #14 - How to fake faster loading times with design in your video games?

  • #15 - Make your game's interface clearer

  • #16 - How to make an intuitive navigation?

  • #17 - The edge case of user interfaces design

• "A Good Interface" has growth from 387 to 857 subscribers

• Finally get myself a Linktree

• I continued to work on Another Door with Suzy, our first game (to be released in 2025)

• Participated in our first event to present our game

• Opened a Discord where we’ll start our first playtest (join us, we need you)

• Received over 2,500 wishlist on steam

• Participated to the Mini-jam 166 and created My Dear Humans (check theses music made by 0ffscreen)

• Learned how to make shader with GM shaders

And what’s my goals during 2025?

• I want to release Another Door on Steam

• I want to write more than 1 newsletter by month

• I want to participate to at least 2 game jam, starting with the Global Game Jam in few weeks

• I want to read more books about game design, I’ve already read “The Art of Game Design“ and “A Theory of fun” last year

• Growth this newsletter to more than 1000+ readers

I imagine that many things will be added over the course of the year, but for now it's already a lot of work!

Conclusion

Thanks again for reading, I truly believe that sharing knowledge is one of the things that makes the internet such a special tool. I hope your plans for 2025 come to fruition, and I can't wait to see the amazing games you'll be creating.

I'm going to extend the scope of this newsletter, while keeping indie video game creation as my main topic so… You’ll see me back in your mailbox soon, with more design, more video games and more tips on how to create them!

Take care,
Indieklem.

Subscribe now

In a nutshell, this principle states that 80% of results are due to 20% of causes. If we apply this law to design, we can say that 80% of the work is due to 20% of the designs. Whether this is true or not, I like to think of this 20% as the edge cases of our game's interface.

Take a design screen we've all seen before in a game, like the talent tree.

Here is 80% of what players will see when they open their talent tree:

• The talent is active

• The talent is inactive

This is what the vast majority of the design will look like. But what about the 20% that players might see, but that we still have to create?

• The talent is disabled

• The talent is only 50% active

• The talent is loading

• The talent is hovered

• The talent has multiple choices

• The talent is pressed

…

I call these the edge cases of design, the 20% of the Pareto principle. The reality is that they are just another UI state, like any other.

In this article, we will dive deep into the conception of these little time-eaters, why we need them, when we do, and how many there are.

Grab a drink, and learn something new with me today.

Enjoy!

What are the different user interface states we need to design?

Ideal or Default state

With ideal data and perfect contact, this is what your screen or component should look like to your players. Unfortunately, many designers only design for this one state.

Look at this screen from Advance Wars 2 — this is what an ideal state looks like: clean content, no disabled items, and not a single error in sight.

Disabled state

I haven’t played Outriders myself, but just by looking at this screen displaying some skills, I can easily identify the disabled state of certain elements.

While I’m not a big fan of the "disabled button" when browsing websites—due to the lack of feedback they provide to the user—it's a totally different experience when playing a video game.

Unlocking elements is a common way to reward players, and this state is very welcome as it conveys a sense of progression.

Empty state

An empty state occurs when there is no data or content to display. Its purpose is to prevent players from feeling confused or stuck. Instead, it should:

• Inform and set expectations: clearly communicate why there is no content.

• Guide the user: offer guidance or actions to help users move forward.

Take a look at the auction house in the free medieval fantasy MMORPG Albion Online. If a search doesn’t return any items, here’s what is displayed:

Yes, but why? And how do I change that? It’s not bad, but it’s not enough.

More guidance, like a button to reset the search, or an explanation such as “No offers found for your search ‘Another Door’” would be a nice addition to help players.

One thing you should avoid is blaming the player. Instead of writing, “You made a mistake in your search” try “It looks like the search was unsuccessful”.

Small differences, big impact.

Nothing state

This one is a bit different from the empty state. Here, the lack of data is temporary, and it acts more like an idle screen.

A good example comes from the game Balatro, a poker-inspired roguelike deck builder, where you have a space for cards called “Joker.”

This space is located at the top of the screen, and referring to the screen below, you can see that there is currently nothing in it.

Unlike the previous state, users can’t change that at the moment.

Error state

Unlike an empty or nothing state, which are often neutral or expected, an error state indicates a problem that needs attention. This state is frightening, because errors are often perceived in a negative light.

Let's try to change this mindset a little. How can we do this?

• By providing information or steps to solve the problem. Not just an annoying “An error has occurred” message.

When an error occurs in Heartstone, a quick strategy card that needs no introduction, the message explains what needs to be done to solve the problem: “wait a few minutes”.

What if the error happens again and again? I don't know, but they might have a message with more information like “Try contacting support”. It would be a good addition to avoid being stuck without information.

⚠️ This state is a bit special because error have very few chance to happen is your game is playable by a single player and offline. You know, theses littles bug linked to the joys of online gaming and the Internet

Success state

The little brother of the error state. In video games, it occurs in two ways: to validate player input - it's linked to online functionality - or to signify success in the game.

Validate the player input

This first case requires less text and indications than the error state. It can be represented by a well-known and easily recognizable icon, such as the green mark.

Signify an achievement in the game

The difference is easy to see in Overcooked 2, between the level on the left with its three stars indicating success or completed progress, and the level on the right with its greyed-out star clearly indicating that it has not been started.

One, Some, Too many states

The main objective is to create a flexible, dynamic user interface that adapts seamlessly to different levels of content. This ensures that the design is clean, remains usable and provides appropriate context or guidance depending on the amount of data available.

These three states can be found in different cases such as: inventory, auction house, level selection, talent tree... Or characters selection, like this screen from Crash Team Racing.

I can link my own article for “Too many” states, where we'll often end up making a pagination, and a good one.

Hover, Pressed, Focused, Selected, Activated, Dragged states

I can't describe each of these states in such detail, or I'd have to write a novel.

They are directly linked to components or interactive elements, where player action is possible. They may one day have their own article, but in the meantime, here are a few tips to help you:

• Take a look at Twelve basic principles of animation introduced by the Disney animators Ollie Johnston and Frank Thomas

• Learn what easing is

• I’ve already write about it in this article: #8 - Better-designed buttons!

• … and if you have any questions, I'll be happy to answer them :)

Conclusion

Take this list as a checklist when you make your UI, and check item by item to make sure you've created everything you need to make your game understandable!

• Ideal or Default state

• Disabled

• Empty

• Nothing

• Error

• Success

• One

• Some

• Too many

• Hover

• Pressed

• Focused

• Selected

• Activated

• Dragged

It happened to us

Working on our upcoming game, Another Door, we have a wonderful example of this principle that I mentioned at the beginning of the article. The vast majority of monsters in the game have two distinct choices, designed as the left card and the right card.

But... some monsters, 5 out of 26 to be exact, required a specific design due to their atypical gameplay.

And do you know how many percentages 5 out of 26 represent? That's 19.23% of the encounters we have in the game... Have you heard of the Pareto principle or the “80-20 rule”? No ? Well, loop is looped.

Links worth visiting

• Tiny Glade a small diorama builder where you doodle whimsical castles, cozy cottages & romantic ruins is out! And here's a video to understand why and how it's so beautiful.

• Nintendo is patent trolling Palworld because it got too big

• I discovered the wonderful world of shaders. Special mention to Xor for his tutorials on the subject!

• I’ve participate to the Mini-jam 166, here is My Dear Humans and it’s original OST

• Shroom and Gloom is a first-person, roguelike deckbuilder that brings you mobs of monstrous mushrooms and mountains of mega-combos!

• Monito Adventures - A pixel art short film animation blender

• GMEXT-Twitch - A repository for GameMaker's Twitch Extension

• Pyrene is out! Defeat hellish monsters and rebuild your home in Pyrene, a fast paced roguelike dungeon-crawler.

• Embark on a journey across a Sci-Fi Provence-like world with Caravan SandWitch!

• Our Discord is ready to welcome future players to try out the game when we have a demo.

Subscribe now

Coincidentally, I'm currently playing Borderlands 2 with some friends. Even though Salvador the Gunzerker isn't really my style, I've decided to stick with him.

But this is not the point.

The point is: I hate the game's inventory system.

It feels so unintuitive that, even after 30 hours of gameplay, I still can't fully grasp how to use it. And it's not like I'm new to gaming—I've played plenty of games and encountered various systems. It's both frustrating and ironic, considering that loot is the core mechanic of the game, isn't it?

If you haven't played it, don't worry. In this article, I'll explain why the inventory system doesn't work and what solutions could improve it.

So, grab a drink, get comfortable, and enjoy!

Games and industry standards evolve over time

Consider that Borderlands 2 was released in 2012—that’s about 12 years ago. Feeling old yet? Don't worry, you're not alone.

To give you some context, that same year saw the release of games like Diablo 3, Hotline Miami, FTL, and Journey.

It's important to keep this in mind as we discuss the interface design of Borderlands 2. My intention isn't to criticize the game or its designers freely. I love this game, and I understand that there were likely constraints and challenges faced by the designers 12 years ago that influenced their decisions.

That's what UI design is all about—finding solutions to problems.

As a PC gamer, I might not be the primary target audience for Borderlands 2, and hardware presents a significant challenge in game design. The resources available to players can vary widely, meaning the same problem might require different solutions depending on the platform. And naturally, these decisions can also impact the budget.

What works well with the inventory system in Borderlands 2?

Loot is absolutely everywhere in the game. Kill an enemy? Get some loot. Finish a quest? Get some loot. Walk in the snow? Get some loot. Open the menu? You’re almost getting loot there too.

You get the idea, loot is a core part of the gameplay. The constant hunt for better gear keeps your curiosity at its peak, and you'll frequently swap out weapons because there's always something better around the corner.

If you're a gamer, designer, or developer, you know what this means: we need an effective inventory system, and that’s what we’re diving into today.

Overview of the inventory

Imagine yourself in a cozy chair, soft light reflecting off the walls, your gamerZ RGB keyboard glowing brightly. You press the key to open your inventory, and here's what pops up:

At first, I’m not gonna lie, it looks good:

• Plenty of white-space which give a good focus on what I’m looking for

• The primary navigation is easy to understand, and well-placed on the top

• Ammo counts are directly visible, no extra clicks needed

• A large pop-up appears to display detailed information about each weapon

• The familiar color scheme indicates item quality

• Additional icon (dollar, bullet, weapons, updown arrow, map…) make it easier to understand

• I can even see my character, showing off that new powerful weapon—pretty nice, isn’t it?

• The pop-ups are well-designed, appearing near the item they belong to (remember the law of proximity), and the information is easy to scan

A quick reminder about white space: it’s not wasted space. In fact, it’s great for your interface. It helps draw attention to key elements, reduces cognitive load, and gives the interface a cleaner look.

And hell yeah, even after a second look, it’s beautiful! And as you can see, it's not all doom and gloom - there's plenty of good stuff!

So, what’s the problem with the inventory?!

Borderlands 2's inventory problem

I still don't understand why, but have you noticed how hidden my equipped weapons are on the previous screen?

It might be a deliberate choice to add more white space and make the screen less overwhelming for the player, but it ends up making the inventory feel disjointed for no apparent reason.

The real issue is that you can't view both your equipped and non-equipped weapons at the same time. You have to switch between two panels, with one fading into the background while the other takes focus.

That's where they lost me. I absolutely NEED to see my entire inventory. Why do I need to see it? Because I always compare or change my equipped weapons with those in my bag.

First point: reduce cognitive load

If your computer is slow, you'll add more RAM. And if your user is slow? You can't add more brainpower (maybe in a few years' time, but not right now, calm down mad scientists).

This is called cognitive load.

If this action were very rare in the game, I'd be less likely to notice the friction when performing it. But the reality is different. As mentioned below, the game consists of looting new items, every time, everywhere. Which means I'll often have to open my bag.

The first thing to do is to reduce the number of actions to reduce cognitive load. Here's what the task looks like and how it can be simplified:

New solution, new problems

The search for a new solution often leads to the emergence of new problems, which must be solved.

In the game, you can have several weapons equipped at the same time, four to be precise. This means that if you want to compare items, you don't know which one or/and it's a lot of information to display at the same time: 4 tooltips of the equipped item and 1 of the one you want to compare.

I have two possible solutions in mind:

• Add a key to switch to weapon equipped we’re comparing too

• or like in World Of Warcraft, display everything at once

Second point: Interaction should be faster than 100ms

Have you noticed that I've added “Wait for panel switch” as a task in the current state? That's because that's how I feel when I use it. The delay is so long that I need to wait for this action to be executed.

When I switch from the first panel to the second, there's a “big lag” on my *not-so-old* computer.

Maybe it's a technical issue, maybe it's something else, but it just doesn't add up. It's all the more suspicious because visually, I'm simply switching from my inventory to my... inventory.

Have you heard of the 100 ms rule? If you've read the previous newsletter, I know you have. If not, here's what it's all about:

Last point: test, test and… test

I can't believe they didn't test the game, if they had they would have seen there was a problem. And if you're making a game, you should be too. Testing your game is an important and not insignificant part of its design - there are too many things that can be fixed or improved with a few tests.

If you're interested, I could write an article on how and why you should test your game - and not just your interface.

I haven't played Borderlands 3, but I'd like to know if they've fixed the inventory. What have they done? How does it feel now? If you've played it, let me know!

Conclusion

If your game is built around a main mechanism, make sure that all its aspects are well oiled. Little things can call into question the way players use and perceive your interfaces. Having a panel of players ready to test your game and applying a few design rules can save you a lot of trouble.

And of course, it's always easier to write an article about how to do things than to actually do them.

Links worth visiting

• FamiStudio is a simple music editor for the Nintendo Entertainment System or Famicom.

• Track your game, decode the market & discover your next adventure with Vania

• After two and a half years in Early Access, Core Keeper is out now in 1.0!

• I’ll join the Mini Jam 166 this week! Stay update if you want to try my game.

• As you probably know by now, LÖVE is a framework for making 2D games in the Lua programming language.

• Arco - A tactical RPG that blends turn-based and real-time combat is out!

• You can search your favorite game in Game UI Database 2.0 now

• I’ve started making game with my Playdate - here is a good video if you want to know more

You have an interesting link about video games? Let me know!

Bonus:

Here is a before/after of our interface for Another Door! After a few modifications to the way information is displayed on screen, we improved the interface available at the bottom of the page. I hope you'll like the changes :)

The game allow only few actions such as jumping, moving or pulling - but poor design choices can lead to a busy interface. How can a game convey all the information to players without overwhelming them? That's what we'll try to understand in this article.

Grab something to drink and enjoy!

Why it’s important to have a clean UI?

According to Miller's Law, the average person can only retain 7 (plus or minus 2) items in their working memory. This means that your players won't remember the quest log, the number of gold or the key on the keyboard to drink that health potion. It's simply too much for our brains.

And this is the reason User Interface design exist, isn’t it? To help us.

But... if you play a video game, you may already have that feeling that there's too much information displayed on your screen at the same time. And what should have been there to help just becomes noise.

Let's define in a few points why it is important for your user interface to be clean, once you get past the "I don't understand visually" part, it will:

• Enhances usability

• Facilitates task completion

• Give a competitive advantage

And I'd like to make it clear that a clean interface doesn't mean a minimalist one. Sometimes you can't have a minimalist interface.

Now let’s dive into the creation of a game interface that will support the player's action, not lose it.

Limite the number of option

Have you ever walked into a restaurant, opened the menu and couldn't choose something because there were too many choices? Option overload can actually lead to us not making a decision at all. It happen when I open Super Smash Bros character selection, with more than 80 choices I'm glad the game designer add the random option to save me...

I’m lying, I’ll always choose Luigi. ✊

Now look at this screen from the amazing Overwatch.

At the end of the game, you have the choice of rewarding a player based on skill, kills, assist or whatever the Overwatch designer chooses to display. What's interesting is that the number of options is limited to three. They could have put a lot more option on this screen, but they didn't.

At this moment, having fewer choices won't impact on the user experience; on the contrary, it's a smart way of keeping the interface clean, understandable and usable.

Visual hierarchy

If you're one of the 140 to 160 million monthly active users of League of Legends (don't tell me you don't know this game), you're already familiar with this screen. The fact is, the UI designers have done a great job, and the visual hierarchy is perfect.

Visual Hierarchy: Refers to the organization of the design elements on the page so that the eye is guided to consume each design element in the order of intended importance. 

The first thing you notice? A large image of your champion followed by the title "CHOOSE YOUR LOADOUT", which couldn't be clearer. Then you'll notice the skin, the skill, the allied champion and so on.

This lets users know where to focus their attention, avoiding flashiness and emphasizing the important elements.

Prioritize information

That's what an inventory is made of. When the information architecture is well designed, it's easy to find what you're looking for.

Information architecture (IA) is the discipline of making information findable and understandable. It includes searching, browsing, categorizing and presenting relevant and contextual information to help people understand their surroundings and find what they’re looking for online and in the real world.

Imagine a game where the entire inventory is visible 100% of the time. It make no sense for 99% of games. Now apply this logic to every little item of your UI Design. Does this button belong on this screen, at this precise moment? Is this text as important as it first appears? Can it be placed in a sub-menu? Should it be?

Ask your players, feedback is important

It can be hard to choose, my advice is to ask for feedback. Start an alpha, beta, demo or whatever you call it and get some.

This is the best way of understanding what your players are looking for and how you can solve their problems. And if you think you can do it alone, just a small reminder that your are not the user, which lead us to our next point: user plain language.

Use plain language

If you’ve spend time making a good game I know it take a lot of effort, and you can be proud of what you’ve made. But here is something to not forget, you know your game more than anybody and the language of your game, the one you’ve created, belong to you only.

Your game can talk about a difficult subject in a simple way

Look at this screen from Outer Wilds, the last game I’ve played (and you should play it too!) where the designers use plain language to indicate actions you can make.

Even if you didn’t played it you understand what “Put away”, “Change Frequency” or “Zoom in” does. This is simple wording, easily understandable by everybody even for a game about supernova, spaceship and black hole.

Tutorials can be obsolete in the long run

I know tutorial are here to help player (and I hate them, we will talk about it one day), but what happen if your users re-open the game one year later? Do you think they’ll know what your very specific niche wording is for? I’m not sure.

Use visual clue

A picture is worth a thousand words, this is the picture superiority effect.

The picture superiority effect refers to the phenomenon in which pictures and images are more likely to be remembered than are words. This effect has been demonstrated in numerous experiments using different methods. It is based on the notion that "human memory is extremely sensitive to the symbolic modality of presentation of event information". Wikipédia

That's why it's a good idea to use images whenever possible. A map, for example, is where you can use them. Looking at the Animal Crossing map, I know directly where my character and the airport are, without needing words.

While adding an image to support your text is a good solution, the image alone can be difficult to understand. If you look at the other icons on the map, you can't be sure exactly what they're for. To use with caution.

Challenge your interface

May sound stupid but… take a step back and challenge your own interface.

Is every element on the screen essential? Chances are the answer is no. Examine each element of your interface to assess its relevance to the user. As indicated below, you should conduct user tests and consider installing behavior analysis software.

And remember:

• If you can’t justify an item’s prominence, shrink it

• If you can’t justify its existence, kill it

Yep, it’s brutal.

Now let me give you a quote from writer, poet, journalist and aviator Antoine de Saint-Exupéry (cocorico 🇫🇷), this is what I’m trying to achieve everytime I make an interface.

Conclusion

You have the power to change the way people perceive your game's interface, from noisy to clean and efficient. The best advice you can give is not to rely solely on your own judgment, but to listen to your players' feedback. Try, send, improve and try again - don't wait too long to test your game interface!

Links worth visiting

• Figma defaults to train AI models on personal data

• 400+ Sprites, Sound effects and new tilesets, the first collaboration between gamemaker.io and kenney.nl

• 68% of players won’t see the end of your game, so make it shorter

• From concept to 4k wishlist in less than 2 months

• I’ve tried Dark and Darker and I’ve so many thing to say on the UI

• The cozy game SUMMERHOUSE sold 200k units

• Make the Trailer Before the Game: A Marketing First Way to Prototype

• The Art of Hades II with Supergiant Games' Jen Zee

• Escape From Tarkov Puts Bounties On Cheaters, Rewards Players For Reporting Them

You have an interesting link about video games? Let me know!

Bonus

We've been working on the music for our game, Another Door, which has surpassed 2,000 wishes 🎉. And since I can share a bit of audio in this newsletter, here's "Black Dawn", one of the very first songs from the game, produced by Guillaume Mourier.

If you like 8bit video game songs, this one's for you.

Damn. I love Skyrim and I'm sad that this makes the gaming experience less enjoyable. While I don't think the game itself is the problem - the hardware plays a big part here - I want to show you how we, as designers, can fake faster loading times. Like this story about mirrors that reduce the perceived waiting time in elevator.

Why fast loading time is important?

First of all, let me say it again, as UI designers we have little impact on the code itself, sometimes there's nothing we can do about it. Do you know the story of a gamer who reduced GTA's loading time by 70%? Looking at the reactions of others players, you can see how painful it is to wait when you just want to play the damn game.

4 years ago, I’ve given a talk about it (in French, sorry for those who don't speak baguette) explaining that 11% of people would scream on their phone and 23% would throw them if they had a performance problem.

Oh and, did you know that back in 2006, Amazon found that every 100ms in added page load time cost them 1% in sales?

Also, I remember playing Little Nightmare on my Nintendo Switch and the loading times were... a little nightmare. I think I was the only one who thought that, check out this review I found on the internet.

Finally, according to one statistic, a person who has been driving for 50 years will have spent nearly 20% of that time waiting at a red light. Real-life loading screen seems crazy, doesn't it?

OK, you've got it, better performance generates more revenue, offers a better experience, produces positive feedback and includes faster loading times. That's why it's important.

What can designers do about loading times?

We don’t have hand on the code, but we have mouse on the pixel, which mean we can affect load time by:

• Reducing polygon count of your models

• Minimizing texture resolution

• Using the same object multiple times

And many other solutions, which are just as important as optimising the code that runs the game. But that's not what I want to write about today. No, in this article I'm going to explain how to fake a better loading time.

Help players to stay or go in active mode

Do you know how players perceive time? According to The New York Times : “People in waiting mode overestimate waiting time by 36%”. Remember the mirror in the elevator? Our goal is to help players to stay or go in active mode.

First, you can follow theses few rules for our waiting screen depending the expected loading time:

• Less than 0.1 second, this is considered instantaneous, just display the result

• Between 0.1 and 1 second, do not try to “fill that time”

• For waits longer than 2 seconds, use a looped animation

• For waits longer than 10 seconds, use a progress bar

• Don’t use static loading messages, make sure they are dynamic and contextual

Knowing that, let’s deep dive into each elements.

The spinner

I love how Dead Cells designed their spinner, the game's pixel art style is so compelling and beautiful that it would have been a shame not to take advantage of it for the UI assets.

The progress bar

I did some research about progress bar and... did you know that its design has an impact on how time is perceived? Yep, I’m not the one saying it, this study does.

It's up to you to rework your progress bar, that's the kind of work UI Design does, I suppose, reworking things.

The waiting message

A good example of a message are thoses I’ve read back in the day in World Of Warcraft. According to this post on reddit, it looks like some users benefited from them, which means they read them, and therefore spent less time waiting for the game to load... Goal achieved, right?

Oh! Do you remember the last article? Be consistent. Give me good looking elements that match the aestetic of your game. Make it memorable! You know… devil is in the details.

The artwork

I’m a huge fan of Guild Wars 1, and one thing that stood out for me was the artwork from the loading screens. These artworks were magnificent and I spent a lot of time looking at the details.

Instead of just a plain black screen, you can display an artwork or a beautiful screen from the game. You're just one image away from inspiring people, so… do it.

Thanks to these elements, you have a number of ways of ensuring that the user remains in active mode, giving the impression that loading times are faster.

Understand user flow to enhance experience

Have you ever played Battlefield 1? At the end of the game, you'll see the leaderboard screen. With up to 64 players in the same battle, depending your internet back in time it can take a while for the full list to load.

That the typical moment you can use a skeleton screen.

Thanks to their knowledge of the user and the flow of the game, you can use a screen skeleton before displaying information. You'll be able to display the page you want instantly without a loader.

Conclusion

That’s it! With this article you’ve learn how players perceive time and what you can do as an UI designers to create a better experience.

I hope this article has been useful for you, there's bound to be lots more to say on the subject, and if you know anything about it I strongly encourage you to share it in the comments!

Links worth visiting

• Cairn - Reach a summit never climbed before in this survival-climber

• Dire Deck, or when your game is stolen…

• Meta is about to start scraping your images to train its AI, that’s why I’m on Cara

• Are you planning to take part in GMTK Game Jam 2024?!

• Older gamers are a growth opportunity for AA(A) publishers

• Story time - “We got over 60k wishlists in 6 months. This is how.”

• While my game almost reach 2k whishlist, but I’m more than happy

• asobu Indie Showcase, two hours of discoveries of mainly Asian independent games

• Seven great tips for marketing your indie game on Tiktok

You have an interesting link about video games? Let me know!

Subscribe now

I know you’ve read this “FINISH HIM” from the famous Mortal Kombat series with a loud, aggresif voice.

Chances are you’ve been impacted by your memories but if you never played this game, just by looking at the font, color, size and style of the typography you have understand that this sentence isn’t a message of peace and love.

In this newsletter, we're going to talk about an essential element of video games interface, something that almost every game has, please have a round of applause for our special guest: the typography!

The basic rules of typography

I'm going to skip the definitions and terms of typography, as many articles on the internet have done it better than I could.

Writing a bunch of text is easy, you just have to press a random key and voilà. Even a monkey can do it. Conveying emotions trought typography is something that require more attention, as well as making it readable.

In this article, we will learn:

• How to design text so that it is accessible

• What is typography hierarchy and why it’s important

• How font design affect players

How do you design a text to be accessible?

Easy, here is our checklist:

• The WGCA recommends that a line of text should not exceed 80 characters

• Rule of thumb: text should be at least 16px

• Line spacing of 130%-150% is ideal for readability

• Pay attention to the text/background color ratio

This will solve most text accessibility problems.

For the rules about font size, paragraph length and line-height, I’ve already talked about it in this article: What’s the right size.

Don’t write more than 80 character by line

The optimal line length for body text is 50–80 characters, shorter or longer line lengths can hurt readability.

As we can see below, God of War objective informations screen use this rule. It would have been possible to increase the width of the book, but this would have made the text less legible.

Remember to that people read word-by-word when they are interested in the content.

Display a 5-line text explaining how your shop works before the player has even played your game and they'll skip it.

Display the same 5 lines when users have to make their first purchase, and you're more likely to be read.

The contrast between text and background is important

I may have share this link more than once but here we go again: Color.review is an awesome and simple tool for checking the contrast bewteen our text and background.

It’s common in video game to find text behind an image, but we should always take care that it stays accessible. As you can guess from this screen of “the first society survival game: Frost Punk”, the right-hand side of the text is accessible, while the left-hand side is not.

The first way to fix this problem is to add a background with opacity under the text, which will improve the contrast ratio and leave the image visible at the same time.

Seond way to fix it is by adding a shadow behind the text, while I find it less efficient than the previous solution, it also works.

What is typography hierarchy and why it’s important

Have you ever tried to read a large block of text with no headings or subheadings, where everything is the same size? It's difficult and you want to skip it. That's what hierarchy is all about.

Why typography hierarchy is important

Just like the computer I’m typing on right now, human brains have a limited amount of processing power. Don't take it as an insult, I know that truth can hurt.

By avoiding visual clutter, the typographic hierarchy will help our players understand what they need to look at, minimising cognitive load and optimising response time.

How to create typography hierarchy

As you can see in the screen below, from Destiny 2, the bigger text “A NEW FRONTIER” is the one you’ll read first. This is followed by the quest description, due to the natural reading order, and lastly by the ammo count.

You’ll have 3 super power as a designer when you play with text hierarchy:

1. Font size

2. Contrast

3. Reading order

You can use them to emphasise certain elements, but the first thing is to ask ourself: what informations is important at the moment?

How font design affect player

I haven’t played Red Dead Redemption 2 from Rockstar, but the first one was truly an immersive experience. I remember leaving the saloon being drunk in a dirty city and falling in the dust. That’s the cowboy experience I was hoping for.

All joking aside, take a look at the screen below and you'll notice two things:

• firstly, the RDR2 designers use the 2 tricks we've just talked about, a black shape with opacity or a text shadow to make the text readable whatever it's underneath

• secondly, the font style matches the game, which takes place in 1899.

And that’s the point.

User interface design in video games is all about accessibility and simplicity.

It’s also about how it look.

The appearance of text is important in games, and the type of font used can influence how players feel. By choosing emotional or strong fonts, designers can get players to react differently to a game. This is what they've done in RDR2, which allows me to immerse myself in the world of the game.

As always, design consistency is key

One piece of advice I get from web design, where I come from, is to keep the number of fonts used to a minimum. It's a bit different for video games, let me show you an example.

I’ve recently played Robo Quest, a fast FPS Roguelite in a scorched futureworld made by the French studio RyseUp. In the game you have tons (73 in fact) of differents weapon, each with their own gameplay, rarity (remember the concept of color-coded loot rarity?), design and… typeface!

How they make it look good? Consistency and context.

The font changes according to the sound of the weapon, and is only visible for a very short time - it's contextual.

Next, the text is always bordered by a black border, which improves legibility and uses a colour that matches the overall design of the game, it's consistent throughout the design.

What's more, the typography remains very modern, with rather bright colours, a style that helps to anchor us in the game's universe. After all, we're talking about an armed robot - that's the future.

That’s it for the basics of typography in game interface

I've got so much to write about but as usual I'm trying to keep it short and digestible. My aim is to give you a few pointers to follow - it's up to you to explore them in your own way :)

Oh! Also I’ve recently received some message of encouragement on my reddit and twitter, thank you for the kind words, it means a lot to me.

Links worth visiting

• The Futur of game development by Brackeys

• Goodbye Unity - Slay the Spire 2 being made in Godot

• The developers of Dead Cells, Darkest Dungeon and Slay The Spire are launching their own "triple-I" Game Awards

• Story time: “How I went from a solo dev to having a top 50 most wishlisted game”

• Ending the practice of publishers destroying videogames they have sold

• Minami Lane - Build your own street in this tiny cozy, casual management sim!

• How Nintendo did the impossible with Tears of the Kingdom's physics system

• How much money do Steam games make?

• I’ve recently played Balatro and Papers Please!, you should try them

• Here is my very first interview as an indie game dev

You have an interesting link about video games? Let me know!

Subscribe now

Previously, we delved into the design of the amazing game Lethal Company: how the interface matches the genre, which colors the creator picked, and how established conventions help your players understand what you did. Additionally, I wrote about the amazing bicycle from Pokémon, and yes, it's overpriced.

That said, let me introduce the game UI we will analyse today: World of Warcraft.

About World Of Warcraft

The MMORPG released in 2004 by Blizzard, also known for games like Warcraft, Diablo, Overwatch, and Hearthstone, is strong of 9 expansions (nope, I don't have enough space to list them all here) and played by millions of players around the world: WoW is a monument in our industry.

As you know, I'm a fan of this game; it shaped my childhood, and I've continued playing it up to now, twenty years later. I feel like I'm here today because one day I encountered video games like this one, which transcend me.

That's why today I'm going to give you a list of 6 things World of Warcraft did very well in its UI Design. Take a seat, grab a coffee or whatever hot-sweet beverage you like, and enjoy!

The concept of color-coded loot rarity

A lot of articles have been written about the role, psychology, or impact of color in design. Give it a try, ask your favorite search engine about "UX color", and you'll end up with millions of results. And if you've ever played a video game with loot, you may be familiar with the concept of color-coded loot rarity.

The fact that so many game like Borderlands, Torchlight or Guild Wards 2 used the same design pattern, which is widely adopted by players, demonstrates that one of the best ways to help users understand your design is by reusing things that have already shown their value.

When a monster drops an item in World of Warcraft, you'll directly know its rarity by the name's color. Legendary items are orange, Epic items are purple, Rare items are blue, Uncommon items are green, Common items are white, and Poor items are grey.

Oh and while I’m talking about rare item… please, if you have ever looted the famous Thunderfury, Blessed Blade of the Windseeker let me know.

The “Silver Dragon Effect”

I've slain thousands of mobs in the game, and besides orange loot, there is one type of enemy that gives me a dopamine shot: the rare elite.

Rare elite monsters are uncommon and often give rare (and valuable) items as their name suggests. This is not a normal encounter; you don't find a rare every day back in the heyday of WoW. One thing I love in the UI is that they used this design, called the "Silver Dragon," to beautify the frame when you focus on a rare elite.

They could have just written "Elite" or added a basic star to indicate the type (which they did in the last expansion, and I really don’t get why). Instead, they kept the story and genre of the game in mind and used a wonderful silver drake.

Player senses will be triggered the first time they see this, and once one of these big boys kicks your ass, you'll understand what that means - a stronger enemy, which means stronger rewards.

This is a simple and beautiful way to keep players engaged in your universe, if you want my opinion. And when your univers is Warcraft, you have a loot of thing to inspire from.

Text with custom color and size for faster recognition

In an MMORPG where the main gameplay involves fighting using various spells, there are many moments where you'll receive damage, heals, critical hits, or spells all within a short time frame. The game designer handles the display of theses informations as follows:

• Yellow for skills

• Red for ennemy damage

• Green for healing

• Bigger font size for critic

• …

This will visually help your players understand what is happening. By seeing a lot of red color on the screen, which is often associated with danger in color psychology design, your users will know that something serious is occurring.

Display skill-related information in the right place

On the next screen, you'll see how the designers have chosen to display certain skill-related information, such as:

• Skill is loading

• Skill is disabled

• Skill triggers something special

• Skill is available

Watch how each of these elements conveys something different while maintaining the same look and feel. You can play with color, shape, text, overlay to change the meaning of an asset.

Most importantly to me is that they chose to display it right on top of the current skill. Remember that an important rule when designing your game interface: proximity matters.

Don’t make users search the entire screen for information that should be displayed right in front of their eyes.

Custom interface settings

This is not a common option in video games because designing and developing different settings takes a lot of time, but it's a really good feature. Allowing players to choose their favorite way of displaying things while maintaining control over how the final result looks is a nice addition to your game.

Look at how I can switch between these four options: numbers, percentage, nothing, or both.

UI architecture

This tip, in my opinion, is fundamental to UI design. Information architecture is a crucial and often underestimated aspect when designing interfaces.

Believe me, you don't need bold, bright text blinking everywhere. Keep your screen clean.

First, WoW designers display spell information only when the user hovers over it. Then, they present them in the right order: Name (1), Important detail (2), Description (3), Less important detail (4). How did they achieve this? Colour, contrast, font size and position, that's all.

As a French player, I read from top-left to bottom-right, something that the designer kept in mind while making this tooltip. Also, you can see how "Bronze Timelock" is brighter than everything else and how "Dragonriding" is darker than the rest of the screen. I suppose this is the first and last information the designer wanted to show me at this moment.

Thanks for reading; I hope you'll find these tips useful for your own game. If you want to keep them forever with you, grab this image I've made specially for you.

Links worth visiting

• 100k Wishlists in 2 weeks after Steam Page went online - the story of Outbound

• Designing Games for Gamers with Disabilities by Game Maker

• How to make money with your indie game? - A french video by Game Dev Alliance

• Any fan of Pokemon here? Yes? Then admire this poster.

• AMA from localthunk developer and artist for Balatro

• This page helps you choose the right easing function

• Stardew Valley 1.6 Changelog

• Looking for a publisher? Follow this Publisher Database link

You have an interesting link about video games? Let me know!

Subscribe now

What makes the UI of Lethal Company good?

After playing for 10 hours to the game, three aspects come to mind to answer this question:

• It perfectly match the genre and ambiant of the game itself

• It display the right amount of information

• It’s easily understandable

Let me elaborate on how these three elements are executed flawlessly.

It match the genre and ambiant of the game

First, choose your colors carrefully

It might seem trivial at first, but the initial impression a player gets from a game can significantly impact their experience. Picture yourself as a valiant knight adorned in heavy plate armor, only to be greeted by a user interface straight out of a science fiction film—it's bound to be a tad confusing, isn't it?

In Lethal Company you’re travelling in a spaceship from abandoned moons to abandoned moons in order to find scrap to sell. Meaning that the game take place in a (not that) bright futur.

If we scour internet for sci-fi movies, in the collective imaginary color are flashy without gradient, from blue & green for diverse screen informations, to red or orange for scary alert message (those who often appear when the ship is going to crash).

And it's precisely this type of color scheme that permeates throughout the UI of Lethal Company.

Then, use shapes and ornament

Shape and ornamentation are crucial considerations when aligning the interface with the game's ambiance. Sure, your interface could be packed with icons in bordered squares, and it might work, but what emotional resonance does it convey? Likely, it imparts the impression of an unfinished game.

Instead, consider incorporating pillars to frame your interface, utilizing colors reminiscent of the travertine used in ancient Rome's construction, and adding foliage to liven things up. By doing so, you'll craft an interface that harmonizes seamlessly with the essence of your game.

Now look at this colorful interface from Alba: A Wildlife Adventure. I’m French, I live near the Mediterranean Sea and when I see this map I just feel like it’s summer. Instead of opting for a standard full-screen map, the developers decided to incorporate a tangible element—a genuine card crafted from paper, adorned with a radiant blue hue and a contemporary font.

Returning to our primary focus, let's examine the interface of Lethal Company. The developer has opted for straightforward shapes such as circles and squares, alongside a modern font akin to what you might encounter in a code editor. Additionally, transparency has been integrated into elements, evoking a sense of holographic or screen-projected components.

In contrast to interfaces designed for games set in the past, those depicting futuristic settings tend to lean towards minimalism, and this is also the case here.

Display the right amount of information

Now, onto the second point of this newsletter: it's crucial not to inundate the player with excessive information. Remember, at its core, Lethal Company is a horror game. To ensure that players remain immersed and maintain a heightened level of stress, it's imperative to keep the interface as unobtrusive as possible. While the size and color of interface elements are vital in reducing their visibility, it's equally important to discern when to display specific information.

If you have played the game you know that it’s a relativly easy one to understand. Your character's actions are limited to simple maneuvers like walking, jumping, carrying, and activating objects. This simplicity is effectively mirrored in the UI design.

A ladder right in front of you? What better moment to reveal the button prompt for climbing to its very top. While it may seem straightforward, mastering the timing of displaying pertinent information is paramount.

Make it easily understandable

Of course, you don't want your interface to be difficult to understand. And while we've touched on this aspect before, let me say it again: utilize common icons and patterns.

Have you seen how the torch battery is represented? Yes, by a battery with a lightning bolt on top, all in yellow like the colour of electricity. It doesn't get much more cliché than that, does it? Unlike the rounded orange bar that indicates how much sprinting time the character has left, well, I didn't hear anyone ask what this yellow resource was for - surprisingly, everyone instantly understood its purpose.

Introducing a new resource often poses the challenge of ensuring players understand its function. While Lethal Company opts for familiar elements, let's consider another scenario—when a game invents a currency, for example. Yes, I'm referring to Pokémon.

Invent based on what already exists

If you've ever played the original Pokémon games, you might recall that a bicycle costs a staggering 1,000,000... pokedollars? Indeed, this currency exists solely within the fantastical world crafted by our Japanese friends. To facilitate the understanding of this new resource, you'll notice that the symbol utilized is a "P" with two bars at the end of its vertical stroke. This pattern bears a striking resemblance to real-world currencies such as the Dollar, Euro, and Yen.

By leveraging established conventions, you not only streamline your own processes but also minimize the learning curve for your players.

TLDR

From shapes, colors, ornaments to patterns, the user interface of Lethal Company seamlessly complements the game's genre and ambiance. It strikes a balance between ease of understanding and unobtrusiveness, allowing players to remain immersed in the atmospheric horror experience.

If you haven't already, I highly recommend grabbing a friend and diving into this game. Lethal Company's appeal extends far beyond its UI—it's an unforgettable experience that demands to be played.

About my game

We’ve been busy making the very first demo version of our game Another Door for the Indie Game Lyon a showcase in France.

Everything went smoothly; we had over 75 players testing the game while also connecting with numerous other game developers, artists, sound designers, and publishers. We're thrilled with the reception—it was evident that people truly enjoyed the betrayal concept of the game. This positive feedback has only bolstered our motivation for what lies ahead.

Links worth visiting

• The complete guide to creating Visual Effect within League of Legends

• A quick pixel art tutorial introduction

• From putting a prototype on itch to over 30.000 copies sold in the first month after Steam release

• What happen when you mix holographic stuff with pixel art card

• Meet Celestialmaze an artist making node based animation

• Face the supernatural dangers of the Olympic Exclusion Zone with a car as your only lifeline in this driving survival adventure!

• GMPulse is a GameMaker extension that makes it possible to manipulate information about your game while it's running.

• Glaze is a system designed to protect human artists by disrupting style mimicry.

You have an interesting link about video games? Let me know!

Subscribe now

The beginning of this newsletter

In 2022, I quit my job, sold my car, gave up my flat and bought a plane ticket to South Korea. I had two things in mind: I wanted to create my own game and travel the world.

And I did it.

I visited 6 different countries between 2022 and 2023, it was an extraordinary experience and I'd do it again without hesitation.

And as you should know I’m still working on my first game, where everything is going fine.

Also, I was looking for a way to share my knowledge. I’ve been UI Designer for the last years of my life and I had shit ton of things to say about it. I did try to write post on Medium, my own blog or post random tweet at 2am about User Interface Design. But it didn’t worked well, because of the lack of consistency and vision.

In 2023, right after my trip it became clear: I had to specialize, write about what I know and what I love: Design x Video Game.

And I did it.

By chance I was following some newsletter on substack and I felt in love with this tool. Exit MailChimp and the too high pricing few for a small writer like I was (20$/month was too much for me). Welcome substack and it’s community!

What happened in 2023

Here is the list of every single newsletter I wrote in 2023:

• #1 - How to make our game colors accessible to everyone

• #2 - How to make a good text field

• #3 - The benefits of white space

• #4 - Build a powerful pagination

• #5 - Best practices for modals in video games

• #6 - What's the right size?

• #7 - How to keep your interface consistent

• #8 - Better-designed buttons

• #9 - Creating an intuitive in-game menu

• #10 - UI/UX tips about password design in video games

That’s 10 articles in 6 months, almost 2 articles by month which was my initial objectif. I spend about 1 day writing every 2 week for about 1000 words, which isn't bad. English is not my main language and I hope I'm not too difficult to read (yep, I’m a frog eater! 🇫🇷).

"A Good Interface" has growth from 0 to 387 subscribers. That's 2 a day since I started. And from the bottom of my heart, thanks for reading, I really hope you enjoy these articles.

As you can see below, habits are important are an important part of what I do. The more I publish, the more subscribers I get and the greater the reach of my articles. I was a bit underwater at the end of 2023, between the holidays and the steam page coming up for my game, so I didn't have much time to write.

What will happen in 2024 ?

If you like want to learn and discover more about design in video game, you’ll be happy because I will continue to write. I want to keep the same ratio as the previous year.

I don't want to set myself a target in terms of the number of subscribers, because that will stress me out and I won't write like I used to.

To be honest, the only thing I miss is interacting with you. Perhaps you'd like more personal stories? More metrics? More quote from designers? More screen from games? Or do you just want to know more about my game (I wish you did)?

Because I’m writing these newsletter for myself but also for you, I want to know what you are waiting when you subscribed. If you have a moment, tell me in the comment what are you waiting from “A Good Interface”?

Leave a comment

About my other project

I'm still working towards my goal of developing, designing and publishing my first game in 2024.

We've done the first playtest of the game and... things are going well! We've had fun playing, the concept has been validated and players have had lots of questions and ideas about what should be in the game or how things should work.

And a small but very important point... we have a steam page, which I'm very happy to share with you today! If you are into indie, roguelike, pixelart & multiplayer game, you should definitivly check it out!

🎮 Wishlist the game here 🎮

Another Door is a semi-cooperative game that combines board game and roguelike elements, for an adventure between betrayal and forced friendship. Confront cursed creatures, hide your intentions and be the smartest if you want to save your soul...

Conclusion

You’ll see me back in your mailbox soon, with more design, more video games and more advice on how to make the most of your game's user interface design!

Take care,
Clément “Indieklem”.

If you are making a multiplayer game, there are chance you’ll design a password field for private game. If this one work in appareance like a basic text field, but you have in really much more work to do if you want to make it (almost) perfect for your players.

Users who try to log in, create a new password or reset their password will be eternally grateful.

Show the input

The first thing to do is to give your players the opportunity to check what they have just typed into the password field. This function is often represented by an "eye" icon to the right of the field.

When the letters are hidden, users can click on this icon and the visibility of the field changes from one state to another.

It’s simple, basic, as my favorite singer would say but it’s not always done.

Indicate whether the caps lock key is enabled

If you're a PC gamer, you know it can happen: a missed click. And that missed click can lead to the Caps Lock key being forgotten.

Tell your users if the 'Caps Lock' key is activated when they type their password, and you'll be giving them a helping hand and saving them time, believe me.

Also, there's no need to display the text 'Caps Lock is Off', as this is the default state and won't help that much.If you restrict your players to certain conditions when creating a password, you need to show them what happens when they try to type in the password.

Indicate whether the num lock key is enabled

The same design tips can be applied with the Num Lock key.

Display the conditions required

If you restrict your players to certain conditions when creating a password, you need to show them what happens when they try to type in the password.

Remember… It was 6 months ago, to create his password you asked your user to add:

• At least 1 uppercase

• At least 1 number

• At least 8 character

• And the last 3 digits of his credit card (Wait, what? Did you really ask that?)

A security measure, a fashion effect, a copy cat because your favorite game was doing the same or a useless waste of time? It doesn’t matter, you did it.

And today, he no longer remembers the constraints you imposed on him. So if they make an error, make life easier for them and remind them. Remind them of the conditions they had to meet days, weeks, months or years ago. And not just when they make a mistake.

Limit the number of conditions

If you’re using the previous method to make your password more secure, limit the number of conditions. The more you’ll have, the hardest it will be to remember the password.

Remind, the password issue I’m writing about here are not new, since there are password they exist. I don't have the pretension to fix it, I just try to make the experience of video games players easier. As said by Sarah Robinson, Lead UI Designer at Behaviour Interactive:

Delete the password confirmation field

If you follow the above steps, especially the one that allows the user to see what he's typing, the password confirmation field, which was a security feature (a long time ago in a galaxy far, far away) to prevent mistakes, becomes obsolete. It's bad enough typing the password once, don't do it twice.

Fill the pseudo/email on the forgot password page

The process when your user realizes he have forgotten their password often looks like this:

• Comes to the login page

• Types in his credentials

• Receives an error message

• Realizes that he does not remember his login information

• Clicks on the link « Forgot your password »

And that’s where the magic happens, because at this point in the user’s journey, you already know their email address or pseudo in game. Yep. They just typed it in a few seconds ago, in the previous page. All you need do to is to fill it on the present page so that they don’t have to write the same things over and over again.

Give visual feedback

The worst thing about the Star Wars Battlefront password field is that there's no hover state or active state! I don't know what I'm focusing on or where I'm typing or anything. A good interface gives visual feedback, your password field should too.

I remember when I used to play LOL, from the website to the games, they always had nice UI animations and visual states.

TLDR

Here is the UI design tips to make the life of your user easier on your login and password lost pages. Remember, less friction is more conversion. You don’t want to spend time fighting with bad interface, neither does your user.

• Show the input

• Indicate whether the caps lock key is enabled

• Indicate whether the num lock key is enabled

• Display the conditions required

• Limit the number of conditions

• Delete the password confirmation field

• Fill the pseudo/email on the forgot password page

• Give visual feedback

Links worth visiting

• Game Maker is free! - GameMaker is growing, celebrate with more free options this thanksgiving

• The Roguelike - High quality pixel art with unique artstyle and palette

• UI inspiration - from Twitter

• What Mario teach us? - even is something is essentially the same, psychologically it can be completly different

• Mistward - the last game from the amazing collective Sockpop

• More date are coming - for the Stardew valley concert I was talking about in the previous newsletter

• We’ve been busy - trying to participating to Indie Game Lyon show, I will keep you updated

• Soulash 2 - sandbox RPG roguelike with a procedurally generated open world, is coming soon

You have an interesting link about video games? Let me know!

This tutorial will explore best practices for designing a menu that enhances the overall player experience.

Understanding player expectations

Players who press the 'menu' button in a game have certain expectations regarding content and structure. By searching the internet, here's a list of recurring elements I've come across in menus:

• Settings

• Save / Load

• Achievement

• Help

• Credit

• Exit

What's more, opening the menu is also the easiest way to pause the game (no mum, it still doesn't work online).

These are two well etablished convention, even if some video games don't pause in order to reinforce the atmosphere (like horror genre) or just because they can’t (as said above). Deviating from these conventions can generate frustration and worsen the player experience.

Menu navigation and flow

The menu is a part of your creation players will see a lot more than you can expect. But not because they like it. Because they have to. And that's the whole point.

Imagine the viewers of a streamer asking to lower the volume, you don’t want to make him lose is mind searching for it? He should browse the menu to find where you put this option.That's why it's important to design clear navigation paths in the menu, and here are some tips on how to do that.

Group similar items

Group related menu items together to create a clear structure and reduce the time it takes to scan elements. Try to get to fewer than 6 or 7 items even if the right number of items in your menu depends on a few things, like the type or complexity of your game.

Example: In the main menu, group options like "Settings," "Controls," and "Audio" under a single category called "Options" for easy navigation.

Prioritizing important actions

Highlight frequently used or critical actions for immediate access. You have to choose which will be displayed and which will be hide in a sub-category.

If you don't know how to choose, the best solution is to let players decide for you. How? In your game demo, track clicks for each element and analyse the most frequently used.

Example: Place "Continue" or "Resume" prominently at the top. The same way you’ll put “Exit” at the bottom. 100% of gamers want to exit your menu, this is a critical action.

Use of icons and visual cues

Enhance visual recognition with icons representing different categories. Not sure which icon is the best? Google: “settings icons”, go to images, there's certainly one that's going to come back more than the others, choose this one.

Example: Include a gear icon for settings, a controller icon for controls (captain obvious), and a speaker icon for audio, making it easier for players to associate icons with specific actions.

Consistent iconography and terminology

Maintain consistency in the use of icons and terminology throughout the menu.

Example: If you use a wrench icon for settings, continue using it consistently across all settings-related options. Also, keep using the same size and style for icon with the same level of hierarchy.

Progressive disclosure

Gradually reveal more advanced or less commonly used options to avoid overwhelming the player initially. You can also offer your players "recommended" settings by default, based on the most commonly used.

Example: In an options menu, have a "Basic Settings" section visible by default, with an option to expand into "Advanced Settings" for more customization.

Consistency across platforms

If your game is designed to be played on several platforms (PC, console, mobile), you need to ensure that it is consistent from one to another.

You’ll have to face variable screen sizes and resolutions, diverse input devices, touch-Based Input, variable device orientations and so on…

Depending where your game is played, look at the best practices and follow them:

• Android guideline

• Apple iOS guideline

• Mouse vs Finger

• Mouse is king

Feedback and responsiveness

Use animation to reinforces the visual feedback and provides a response to players actions. In the previous tutorial I’ve used some design animation to show you how I do it. With an immediate feedback you’ll assures your players that their input has been registered and make them feel in control of the interface.

Search or filter functionality (for large menus)

Big hit can have tons of options, help players fasten their workflow by creating a way to search for a specific setting. Looking at this screen from Battlefield 2042, I guess how it might help.

Testing and iteration

No matter how many times I write it, there it is again: playtesting with real players is an essential aspect of UI/UX design.

The user will help you to improve the visual style, the content, the sound design, the emotional impact... do it as soon as you can!

Conclusion

It's easier to design a beautiful interface than a usable one, which is why I'm giving you these tips. I encourage you to continually refine and improve your interface, based on trends, personal preferences and player feedback.

The last word: don't forget your game's identity. Take a look at this original menu from Unrailed, they've chosen to make it work like any other part of the game, and it works so well!

Links worth visiting

• Pixel art environments - every fan of the old pixel art pokémon should click

• A Novel Approach to Calculating Global Illumination - if you love maths and stuff

• Poisson Disk Sampling - what is Poisson Disk Sampling and why should you care?

• The Game Awards - where the “best independent game” nomination is fucked up

• Beautiful pixel art - if you want to support the artist follow this link

• Crafting a Better Shader for Pixel Art Upscaling - maybe the best video I’ve seen this month, what a quality!

• Original songs - composed by Steven Wahl a young composer

• Retronator - daily pixel art and gaming news

• Pixel joint - the internet pixel art gallery

You have an interesting link about video games? Let me know!

Subscribe now

This article will be more tutorial-oriented than the previous one. I'll show you how to make buttons stand out through design and I'll focus on a style I really like: pixel art design.

Make a simple shape

Let’s start by shaping the button, which will be a 48px by 16px colored rectangle with a simple “Go” label:

Across our interfaces, buttons don't have the same importance. There's often one main button, and it's recommended to have only one at a time. One screen, one main action. It must have a stronger visual appeal than the secondary and tertiary buttons that can be found on the screen.

Look at how, with the same text and the same color, we can make the buttons have a different reading order:

Add a clear label

Imagine your game's menu screen, where the main action is to launch the game, and the button simply says "Go". Good button wording invites users to take action, which they do by using task-specific words and verbs. Instead of confusing formulations, we can use clear wording like "Play".

Also, consistency works for wording too. If you use verbs and simple words in your buttons, keep them in your game interface.

Let’s add this to our button:

Borders to help users stay focused

To make it more attractive, we'll add a border. They reinforce the feel of a traditional button and create an eye-catching target for the user. You know, UI buttons are inspired by real buttons - those on radios, switches or airplanes... That's why they have borders, shadows and also states, which we're going to draw below.

Without a border, the UI element looks more like a link than a button, and the distinction between buttons and links is an important one:

• Links are used when you’re navigating to another place, such as a ranking page

• Buttons are used when you perform an action, such as: “play” “delete“ “save”, etc…

That's why, if you have a choice, it's safer to use a visible border.

Border radius to make it more friendly

In design, psychology is almost everywhere. Even in border radius.

The use of curved edges in design can create a soft, friendly feel, enhancing the user’s comfort and relaxation.

Conversely, angular corners can give an impression of harshness and hostility, while rounded corners can make a design more approachable and welcoming.

This is why designers often use rounded corners in products aimed at families or children, to promote a friendly, welcoming aesthetic.

Depending on the category your game fits into, you should consider making it more user-friendly like Animal Crossing, or using a sharper form like Silent Hill.

Let’s add some border radius to our pixel art button to make it more friendly:

Shadows to add depth

Now, as we said before, buttons have a state and are inspired by the real world. Real buttons can be pushed; to reproduce this effect, we need to add shadows:

States to make them functionnal

Now that our buttons are looking better, let's take a closer look at the 4 essential states that need to be conceived when working on UI design. Each state has its own purpose:

• Normal - indicates that the component is interactive and enabled

• Focus - indicates that the user has highlighted an element, using a keyboard or other input method

• Hover - indicates when the user has placed a cursor above an interactive element

• Active - indicates that the user has pressed the button

Here’s how we can design and animate (with the 12 principles of animations) each of the states to match:

What about the disabled state?

You may encounter the "Disabled" state, which I don't recommend at all. It's an easy solution that may seem good at first, but you have to understand that a disabled button doesn't give your players any feedback.

“Don’t make the user think” is the most important usability rule. When you disable the CTA button, you make the user think about how to activate them. Instead of clicking a button and seeing a specific error message, users will scan the form up and down in order to find what keeps the CTA disabled. It is especially true for long, complex forms — imagine a situation when you fill out a long-form on mobile, and only a fraction of the form is visible in a viewport.

Nick Babich

Example of pixel art buttons

This little tutorial is coming to an end. I've obviously designed a very simple button, but keep in mind that they're part of your game and therefore part of your brand image. You can fully express your creativity with button design, while keeping accessibility in mind (color contrast, states, interactivity, size...).

Here are a few examples of what you can do with pixel art buttons:

Conclusion

To improve the appearance of your pixel art buttons, a few steps are required. The aim is not only to make them more beautiful, but also more functional.

Thank you for reading this short tutorial on user interface design in video games. It was a bit different from what I've done before, more focused on tutorials with little tricks, I hope you enjoyed it.

Links worth visiting

• Might of Merchants - Experience a unique and lovingly hand-drawn world in which you have to prove your skills as a merchant

• Mosa Lina - a hostile interpretation of the immersive sim, where nothing is planned, and everything works

• Gaijin Entertainment - open-sourced their War Thunder engine

• Cities Skylines 2 - The developer and publisher of Cities: Skylines 2 have admitted the game's performance isn't up to scratch

• Picosynth - is a playful way to create simple loops and beats

• Juice FX - allows you to easily create in a matter of minutes (usually even seconds) beautiful animations for your sprites

• What makes a good super move - They're almost by definition the best moves that a game will give you, but they can't be TOO good

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

Subscribe now

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.

Enjoy!

What is consistency in design?

Let's start by defining the word "Consistency":

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

Uxplanet

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.

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?

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.

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.

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:

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.

Radiant

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.

Conclusion

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

• Game dev story - how my 1-year passion project with 0$ budget grossed 200 000$ and opened the door to full-time indie dev

• Color tutorial - from @theartistjulian

• I’m a bluesky now - game dev friend, say hi

• Stardew Valley: Festival of Seasons - is an intimate, immersive live concert featuring fresh arrangements of the most cherished songs from the game's mesmerizing soundtrack

• New look for PS5 console - Smaller PS5 design comes with 1TB storage for PS5

• Summerhouse - is a tiny, atmospheric building toy

• An introduction to shader art coding - explore the fascinating realm of shader

• Roboquest - is a Roguelite fast-FPS that can be played alone or by two players in co-op. This game was made by some old friends of mine, so you should definitely check it out.

• Training AI to Play Pokemon - with Reinforcement Learning

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

Subscribe now

But by accident, you press the wrong button and sell this very rare item with no way of getting it back. It's gone. Forever.

You know there are mistakes, but why on earth was this button so small? And why was the text so hard to read? Frustrating, isn't it?

Let me be clear, there is no way of eliminating 100% of player errors. I mean, their controller could be lag jumping, they could have misunderstood the label or they've just been playing drunk, haven't they? But fortunately, in our over-connected digital world, we have a standard that will help us prevent them. The first thing to do is to adapt the size of the UI elements.

From buttons to text, let's look at the right size for UI design elements.

Size your buttons the right way

Let’s talk about the size of one of the most common element in video games, and I'm not talking about RPG element (well, I could actually), but buttons. Do you know of a single game without buttons? I don't.

If you are working on a mobile game, there’s one famous (well, in the design world) study by the MIT Touch Lab that suggests 10mm × 10mm is the best minimum size for buttons because of the average size of fingertips.

For non-touch screen user, we’ll take two other studies, one from the WGCA (we talked about it in the first article about color accessibility ), and the other from Google, which state that 44px / 48px is a good size.

Take note: to produce a more accessible UI design, the first study indicates that if two buttons are placed next to each other, they should be separated by at least 8 px.

A rule that also works with the last article I wrote on modal design. For example, adding a padding between the button and the border of the modal prevents the modal from being closed by clicking outside.

An unconventional design style

I know that video game design tends to be less 'conventional' than website design, if you take the Persona user interface as an example.

So should we be concerned about the rule below?

• Buttons are generally menu items that cannot be clicked with the cursor

• The height, width and size of the button/text are correct

• There is a visual state for the selected element (based solely on colour, please note)

• A missed click won't frustrate the player, thanks to the action behind each button

Yes, this interface doesn't respect all the rules I've described, but as always in design, decisions are based on the situation and user feedback.

What about text size?

Let’s do a 3 in 1 and learn about the right size of text, paragraphs and line spacing. Because if the buttons are important, so is the text. I suppose it happened to you too, that moment when you became that meme.

It's weird enough for players who don't have eyesight problems, now imagine for those who do.

Rule of thumb

Rule of thumb: text should be at least 16px. As I said, it depends on the situation, if you're playing away from a large TV screen in a multiplayer game, you should obviously increase this value.

I've seen many designers use a font size of 12 px, because "it looks better". Yes, that may be the case. But, please, don’t. 12px text is reserved for dark pattern, like the text you want to hide as abusive terms of service.

As for the all-too-often-repeated argument that "if I can read it, it's OK", don't forget that you are not your user. This is the False-Consensus Effect.

In psychology, the false consensus effect, also known as consensus bias, is a pervasive cognitive bias that causes people assume that their personal qualities, characteristics, beliefs, and actions are relatively widespread through the general population.

Wikipedia

Take care of your paragraph length

Let me give you a hint about paragraph size. The WGCA recommends that a line of text should not exceed 80 characters, between 50 to 75 characters, if we take this article for reference.

Take the first book in your library and count the number of letters on a line. I'll bet it respects this rule. Look at this screen from Disco Elysium, a game full of text, where the designers have respected this rule.

Line spacing is also important

The third and final piece of advice on user interface design will be about line height or line spacing. This is the vertical distance between lines of text. For optimum legibility, we recommend multiplying the font size by at least 1.5.

With these three tips, the size of the paragraph and the height of the line, you have the right weapons to make the user interface pleasant for your players.

Let players use their favourite settings

An important point to mention is to give your users a choice. 10 players will have 10 different preferences, let them make their own choice, add an option in your configuration menu to change the font size.

What should I do if the error persists?

I know it's not easy to develop, but what better way to help the user than to undo their last action? Take inspiration from Into The Breach, a turn based game in pixel art.

Conclusion

Size matters. Bigger buttons and text are often appreciated. A good user interface in a game should be as accessible and easy to use as possible.

Don't expect everyone to read like you, refer to studies, follow guidelines, keep an open mind about the situation and you'll be fine.

Links worth visiting

• Pixel art inspiration - colorfull as I like it

• How To Make Sound Effects For Games - a video tutorial for indie game dev

• Automatically updates sprites - in your GameMaker Studio

• Picocad - is a program to build and texture lowpoly 3D models

• Do you know this game ? I would love to play it in co-op

• Game next door - where we talk about video games the way we'd like to be talked about

• ModdingMarius - Modding, Restoration and Repair of Retro Consoles

• PixelOver - is a software package that transforms your assets into pixel art

• Stardew Valley - 1.6 content sneak peek

• Islands & Trains - islands & Trains is a relaxing sandbox building game.

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

Subscribe now

In this article, we’ll look at what a modal is, when to use it and what you can do to improve it.

What is a modal?

As I like to do, let's start by defining what is a modal in UI design:

A modal window creates a mode that disables user interaction with the main window but keeps it visible, with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent window. This avoids interrupting the workflow on the main window.

Wikipedia

All too often used on the web to steal your email, they tend to streamline the player’s workflow by highlighting new elements while relegating the task in hand to the background.

When should a modal window be displayed?

I've tried to group use cases into categories, and have come up with four:

• Highlight essential informations, as in the case of an app tutorial, where we come across an impressive number of pop-up dialog boxes, leading us to get into the habit of instinctively selecting "Close," "Cancel," or "OK" without actually reading.

• Block the application's progress until the necessary information, such as a password, is provided.

• Warning that the consequences of the current action cannot be undone. With regard to the first point, this can be considered ineffective, as the user gets used to it. Instead, it’s suggested to propose a reversible action with an "undo" option.

• Collect new settings: access to the application is temporarily restricted while adjustments are made, just like the game “The Ascent” did below.

Use modals very sparingly

Modal will shout “look at me”, just as Navi did in Ocarina of time: "Hey! Listen!". In fact, she has been widely criticized by players for her repetitive interruptions in gameplay, especially with this prompt.

The user will have to process them before returning to the initial state. Sometimes, this can be useful, especially when users need to check a crucial action. Most of the time, however, it's unnecessary and simply annoying.

Modals must be initiated by the user

Best web practices recommend letting a user action, such as clicking on a button, following a link or selecting an option, trigger the modal window.

But, we create games, not web page. If you’ve played Vampire Survivor, you'll know that for every new level reached, a modal window with various enhancements suddenly appears.

This is not a direct action by the user, such as pressing a button, but an indirect action: the accumulation of a sufficient number of experiences resulting from numerous actions in the game.

This means we can suddenly open a modal window if it suits the gameplay.

Anatomy of a modal window

Now that we know when to use them, let's take a closer look at their essential components.

1. Emergency exit

Remember, a modal window is designed to attract attention. That why, if the action isn’t mandatory, we need to provide users with a means of escape by giving them the option of closing the modal window. This can be done in 4 different ways:

• Add a close button on the top right, often a cross icon

• For keyboard user, push the escape key

• By clicking outside the window

• Add a cancel button

2. Descriptive title

Give your player context - this is the most important information to display. At the top of the modal, use a short, concise title.

3. Call to action

This element represents the objective of your modal. What the user should do. It usually takes the shape of a button, with an understandable verb for the wording, like “Claim” or “Buy”. Yes, it's a cliché, but… “make it pop”. Make it big enough, add some color, give it a clickable element design by adding a shadow, a border, a hover effect, etc.

4. Sizing

We know that gamers use a lot of different screen resolutions, and it won’t be easy for us to design a modal of ideal size.

If the modal is too small, it will be hard to read and get the focus you need. If it’s too large, you’ll lose the context of the current state. A modal window shouldn’t take up the whole screen, and if you need to scroll, you might want to consider creating a new page.

Taking my favourite game as an example, the modal window looks too small. What's more, the background is not covered, making it difficult to highlight our new element.

We've finished with the most important elements! If your modal catches them all, your players shouldn't be at risk.

Conclusion

Modal windows can be frustrating, stopping your players in their current tracks and hungry for attention. Used wisely, they can provide or elicit valuable information from users, while respecting best practices in content hierarchy and offering an easy way out.

Source : UX republic, NNgroup, Ux planet & Logrocket

Links worth visiting

• ChipTone - a free tool for generating sound effects

• Maple Forest - explore, make new friends, and face deadly foes in this action RPG!

• The Book of Shaders - a gentle step-by-step guide to the abstract and complex universe of Shaders

• Cool pixel art - Found on a cabinet made over 140 years ago

• The Death of Unity - you should have heard about the scandal

• Dear Unity, You've Betrayed Us - if you're more interested in video

• Slimes fonts - free collection of 6 hand-crafted 2-shade pixel-art bitmap fonts

• Scribble - did I talk about this modern text renderer for GameMaker 2022?

• Pixel art inspiration - teapot house and background in pixel art

• How to pick colors - small color tutorial for pixel artist

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

Subscribe now