GAME UI: How to win every player

Hey there!

In this newsletter, we'll explore the innovative and awe-inspiring game designs of great user interface (UI) and the ones that missed the mark. The good and the not-so-great ones. We can tell because we work with game design.

It's never you, it's always them.

UI should be intuitive, it doesn't require any explanation. It should be seamless, enjoyable and make your gaming experience better.

So if you ever felt frustrated by a user interface, it was bad design. You know, searching for menus, not knowing where to click, confusing buttons, information all over the place.

Let's discover what makes UI design so essential to the gaming experience!

IN THIS EDITION:

• UI vs UX and why it matters
• UI in gaming
• Useful game UI tools
• 3 great and 3 not so great examples

“A user interface is like a joke. If you have to explain it, it’s not that good.”?

- Martin LeBlanc

UI vs UX

UI and UX are the dynamic duo of technology. Although people often use these terms interchangeably, they're not the same.

User interface (UI)

UI design creates a visually appealing and user-friendly interface, including buttons, menus, and visual elements.

User experience (UX)

UX design ensures that the interface is easy to navigate and provides a seamless experience for the user.

UI IN GAMING

In today's competitive gaming market, a seamless UI design can make the difference between a successful game and a flop.

Therefore, game designers need to be acutely aware of their UI to prevent players from feeling overwhelmed and disengaged.

TIP

Learn it from the greats! Check out this video where Shigeru Miyamoto, the inventor of Mario, also called “the father of modern video games,” shares his game design philosophy.

How easily a user finds a UI to use is directly related to how functional it is. A UI should make it simple for users to locate information, and it should be easy to learn without a long learning curve. The design of the UI should be intuitive and straightforward enough for new users to understand the features and make use of common knowledge to work out how they function.

Designing a good UI requires an in-depth understanding of human psychology and physiology. The colors, shapes and how the program is used are all factors that contribute to the design of a UI. After all, user-friendly UI not only allows users to complete tasks with ease but also makes their experience fun!

3 GREAT AND 3 NOT-SO-GREAT EXAMPLES

We asked Michal Ocilka , our game designer, to pick out some of the most interesting examples from relatively recent game releases.

3 GREAT EXAMPLES

1. Hades

This game has taken the gaming world by storm and has won multiple awards for its game mechanics, replayability, unique art style, and music. The game icons and infographics are seamlessly integrated into the game and the game menus are a perfect example of diegetic design (elements in a game that fit naturally into the fictional world and the player can interact with). Every menu is an integral part of the game world, resulting in a seamless experience that never feels like you leave the world to enter a menu.

2. Persona 5

The menu in Persona 5 is entirely different from the one in Hades, but in the best way possible! It perfectly suits the game's bold and completely bonkers art style, featuring dancing typography, excessive use of red color, and sharp vector shapes. The UI significantly influences the overall style and tone of the game and it would be impossible to imagine the game without it.

3. Riot games

Some games have been updated so much over the years that they hardly resemble their initial state. There's no better example than Riot Games with titles like League of Legends, Legends of Runeterra and Teamfight Tactics. Their UI design has kept pace with the mechanics of the game and each iteration is more refined and visually appealing than the last. Navigating through the menus in these games is just as enjoyable as playing them.

3 NOT SO GREAT EXAMPLES

1. God of War: Ragnar?k

The game has been widely praised for its gripping story, amazing gameplay, beautiful art style and my personal favorite – its original soundtrack. But there's one aspect that seems to have fallen short and it's user interface (UI). When you enter one of the menus, it feels like something from 20 years ago. You're overwhelmed with information and different lists. All of it rips you away from the immersive world of the game. The UI is visually unappealing with everything screaming for your attention. It's hard to orient yourself and it feels like it was hastily thrown together before the release.

2. Modern Warfare 2

Perhaps the most popular game franchise of all time tried to innovate with its UI but missed the mark. The main menus resemble streaming services. You have to scroll like crazy to get where you want to be. The terrible design sparked a lot of stir in the gaming community. Some players even came up with ideas for redesigned UI. Although Activision tried to improve the design, the menus remain inefficient. Additionally, everything is blocky, but we'll get into that with our last game.

3. Gears Tactics

Blocks, blocks and more blocks. This is, unfortunately, a common design trend in many modern games. In order to make some information stand out, designers put them into blocks. Need something more important within? Just make a block within a block. Need an even bigger highlight? Make a white border on your block. The result of such an approach is a visual mess where every piece of information shouts at you. There is hardly any immersion. Gears Tactics is not the only example, nor the worst offender of this practice, but it demonstrates the problem well.

No magical formula

There is no one magical formula for making a great game UI. But there are rules and ideas designers can follow to achieve greatness or absolute visual hell. It doesn’t matter how big the studio is. Great or bad design can be achieved by one designer or by one hundred.

3 GAME UI TOOLS TO CHECK OUT:

1. Game UI Database – great source of inspiration for game UI design.

2. Rive – revolutionary animation tool currently in beta, but already making waves in the gaming industry. It can be used for lightweight web animations or animations for Unity.

3. League of Legends Universe – for a deep dive into the LOL universe or just to see how well games can expand into the web, there is no better example.