Welcome to my new series on UX in games. If you want to jump straight into the analysis, scroll down to “The good”. This article has three parts. You can find the second here and third part here.

I want to answer a question: why is Clash Royale so popular, and how much of that comes from its UX? My personal goal is to get into the habit of analysing games and explain what I find in a way anyone can follow. I also want to encourage more appreciation for UX in games and art. I think it’s neglected in many areas of game development. As artists, we can be possessive of our own “kids”—our artwork—and feel threatened by anything that influences it. I’m sure other disciplines feel the same. That’s part of why UX experts can struggle to get people to listen.

I’d love readers to comment and tell me how I can improve future articles. Ideally, this becomes a discussion. UX matters because it saves people time. Even a small change can save hours across an entire audience.

Why UX? Because I care about players and I want them to enjoy products that I make.

UX takes on particular importance on mobile because of the devices and the way people use them. Casual games, short sessions and social interaction are common. The interface needs to be simple, gameplay needs to be readable, and the game needs to work out in the real world.

I see UX as a design philosophy that combines science with empathy for users. Generosity is part of that, but it doesn’t mean making a game easy. It means understanding the audience and designing for them. That’s why I’m starting with a game that cares about players in an interesting way.

Clash Royale

Supercell released Clash Royale in March 2016. By the time I wrote this, it had earned more than a billion dollars. It’s a competitive arena card battler with a small scope, great UX, deep gameplay and high-quality graphics. I’m mainly interested in the UX, but because it touches everything, we’ll explore several disciplines.

Clash Royale isn’t perfect, but it does a pretty good job with UX. It faces familiar problems for a live game: players expect new features and content, so the game grows more complex, and the experience can suffer. But I’d like to start with the basics.

Clash Royale

The good

Simplicity and minimalism

Restraint is hard in game development. We always want to add more features. Minimalism and simplicity can be mistaken for doing less, yet they’re often essential to a fantastic experience. I’m going to try to defend that statement, so bear with me.

A one-handed interface

A one-handed interface isn’t a must-have for every game, but it can improve the experience. It lets people play in more situations and places, which can help retention.

Imagine someone playing on the bus home, standing up and holding a handrail.

Phones fit into everyday life, so making interaction less demanding helps. Clash Royale puts key controls within reach when using a phone with one hand. I’m leaving out the iOS Reachability feature, which helps users reach the top of the screen: it’s part of the operating system rather than the game.

I’ve outlined the key controls in red. They’re all in the lower half of the screen.

The main actions are available with one hand.

  1. The menu bar sits at the bottom.
  2. Card donation is at the bottom.
  3. In battle, the card deck is at the bottom, where dragging or tapping begins.
  4. The chest area sits at the bottom.
  5. Pop-ups don’t fill the screen, and tapping the background closes them.

Tapping the highlighted area closes the window.

UI depth

There’s something interesting about Clash Royale’s interface: it rarely goes more than one level deep. When it does, that depth is cleverly presented to feel like a single level. Most pop-ups also leave the background visible. Why does this matter?

People can get confused when navigating several windows. They forget how to get back, lose their place and feel overwhelmed. That frustration hurts the experience.

A mental model is a person’s understanding of how something works. We need interfaces that match those expectations. A pop-up rather than a full-screen window helps people stay oriented because they can still see the previous screen behind it. It’s a small detail, but with UX, details matter.

The different types of window in Clash Royale.

One menu to rule them all

The main menu has shortcuts along the bottom for moving between screens. Keeping them visible makes navigation convenient. Players know where they are and feel in control because they can return to the screen they need. The categories are intuitive because they follow different player needs:

  • Social: communicating and interacting with other players.
  • Battle: core gameplay.
  • Shop: items and currencies available to buy.
  • Cards: the deck builder, cards and upgrades.
  • Events: tournaments and special events.

Main screen.

Cognitive Load

This section is about the brain’s limitations. We can only process so much information at once. Beyond that, we start to feel overwhelmed and confused. Interfaces need to respect this.

In-game shop

The in-game shop is very minimal. Usually, there are no more than six items on screen.

The paradox of choice describes how too many options can make decisions harder and create anxiety. Our short-term memory is limited too. Asking people to remember a lot of information or calculate things in their heads can create a really bad experience.

Together, these ideas show why we should be careful about how much information we put in front of players. Clash Royale’s shop is a good example:

  • A small number of items to choose from.
  • Clear distinctions between items.
  • Clearly highlighted special offers.
  • Discounts explained in a single line.

Some might argue that a better shopping experience doesn’t make the player experience better: it could lead people to spend more than they want. I believe players deserve respect and freedom of choice. Giving them the information they need, without creating anxiety, puts them in a better position to decide for themselves.

Personally, I prefer the previous version of the shop. It was simpler, with less information on screen. I also understand the reasons for the change, which are tied to the game’s economy. Even so, it remains one of the simpler shops in mobile games.

Old shop, new shop and special offer.

Restraint with notifications

I’m passionate—and a little emotional—about this one. Every game that opens a session with more than one pop-up should burn in hell. Mobile sessions can be only two to five minutes long. Making players work through several pop-ups, even two, wastes their time. They usually enter with a goal, so they’re unlikely to focus on those messages anyway. A better option is one pop-up at most, or a notification bubble in the UI. Clash Royale uses both with respect for players. I think players appreciate it, even if they don’t consciously notice.

The notification screen shown at the start of the game.

Key UI elements need special treatment

Games often use distinctive, bright colours for important controls. Clash Royale is no different. It uses yellow for actions such as Enter Battle, Request Cards, Use Card and Invite Friend. These controls often have an extra effect too, such as an animated highlight.

Green highlights secondary actions, including Donate, Buy and Upgrade Card.

Red is used for notifications. Blue dominates the backgrounds and less important elements.

I blurred the main screen slightly to show which elements remain clearly visible.

That’s all for now. Stay tuned for part two, where I’ll talk about empathetic design, gameplay and more…