Hearthstone’s UI

As you may have picked up on in my Hearthstone Impression post, I am a huge fan of its UI. In fact, it is one of the best UIs I have ever seen in a videogame. Which is… kind of an unusual thing to say about videogames in general, right? Who cares about UI anyway?

Well, technically everyone. A game’s UI is how you interact with the game itself, or glean useful information about the game state. Sometimes you can get away without having an UI at all, like with LIMBO. Other times the designers might get all fancy and try to integrate the UI into the game world itself, like with Dead Space. Most times though, a game’s UI is simply there, and the most you can hope from it is to get the hell out of your way (Skyrim).

It is an extremely rare game that features a UI that actually makes the game itself better. Hearthstone is pretty much the only example I can think of. But why? Let’s break it down:

Emulates the Warcraft Experience

This might sound obvious, but Hearthstone: Heroes of Azeroth is derived from the Warcraft franchise and prominently features characters from said game world. It is one thing to use the likenesses though, and a completely different thing to emulate the color palette, the visuals, and the ineffable mood of the game as well. Everything from the menus to the animations to the sounds feels like it could have been pulled straight out of either WoW or Warcraft 3. In fact, I am pretty sure they did outright copy/paste a lot of the sound effects, at a minimum.

Not all of the iconic cards are good, mind you.

Not all of the iconic cards are good, mind you.

The result of this is that an otherwise completely new gameplay experience will instantly feel familiar to someone who may not have ever played a CCG before. And more subtly, assuming you still have fond memories of the other games, some of those are likely to bleed through via nostalgia.

UI Elegantly Informs the Gameplay

Digital card games differ from regular video games in that their UI essentially is the entire game; beyond the cards themselves, the rest of a CCG match takes place in each player’s head. Hearthstone is literally the first CCG I have played that has attempted to – and successfully accomplished – bring(ing) the mental game back into the visual realm.

For example, when your hero plays a Weapon card, it clanks and rattles next to your hero, while the hero tile itself lifts off the board and goes smashing into your intended target. Then, at the end of your turn, the weapon card (which has long since ceased being a rectangular object) gets hidden behind an oval sheet of iron, which sounds and looks like a full-plate helm shutting. You don’t have to know anything about the specific rules of Hearthstone to know intuitively, from this very UI design, that A) weapon cards let your hero attack, and B) your hero can’t use the weapon during an opponent’s turn.

There are “little” touches like this all over the place in Hearthstone. Creatures with Taunt have a different shape on the battlefield to distinguish them. Creature with Death-rattle (an ability that triggers on their death) has a little skull and crossbones icon on them, whereas a creature with a normal triggered ability has a lightning bolt. Even if you did not know what those icons meant at a glance, hovering your cursor over the creature quickly brings up an unobtrusive cheat sheet description. This is a UI scheme that both enables and enhances your ability to “grok” all the moving pieces extremely quickly.

3) Genre Game-Changing Innovation

Seriously guys, this screenshot has pretty much ruined all other CCGs for me:

We can never go back.

We can never go back.

If you are not quite sure what you are looking at, it is pretty simple conceptually: you can see what your opponent is looking at. If your opponent is hovering their cursor over your creature (to perhaps read its text), the creature glows. If they then cycle through their hand looking for a way to turn the game around, you see their cards glow one at a time. If they decide to target you with a creature or spell, a huge arrow appears where their cursor is, and you can watch as they debate with themselves as to which would be the better move.

This sort of thing is simply unprecedented in a digital CCG. And mandatory from now on, IMO.

Not convinced? Think about playing Chess in person versus playing against someone online. The pieces are all the same, the board is the same, everything is the same… except for the feedback. When you are face-to-face with someone, you can see where they are looking on the board, you can see them pick up a piece and start to move it before putting it back again. Aside from the mind games this opens up, at a minimum it might give you pause to consider that Bishop over in the corner that you had forgotten about until your opponent had briefly considered moving it.

Like I mentioned earlier, CCG battles always took place in the theater of the mind. You never really knew what your opponent was thinking or about to do… unless you happened to be lucky enough to be dueling them in-person. Can you imagine other games operating with this lack of feedback? Think about playing a FPS in which you could not hear another player walking or even which way they were facing when you did see them. An incredible amount of nuance would be lost.

Finally, at the bare minimum, consider the benefits of knowing that your opponent is actually at their chair and not AFK. I’m more than willing to wait a few minutes for someone to make their move as long as I know they are actually in the process of determining what move to make. Compare that to most other CCGs like Scrolls or SolForge or Magic Online where you are basically left watching the round timer count down.

4) Evokes the Physical Space

This last one is a lot more subtle than the others, but welcome nonetheless. Essentially, everything in Hearthstone feels… real. Like a three-dimensional object, with heft and contours and such. You don’t play cards by just clicking on them and then clicking on a target, you actually have to drag them from your hand and drop them on the target (assuming the card doesn’t automatically turn into a ball of flame or whatever midway through the action).

The way creatures are handled is similarly finely detailed. You might have noticed how creatures are sort of oval shaped, right? Well look at an unplayed creature card:

Clever girl.

Clever girl.

That’s right, the creature oval “breaks off” from the card when you play it. When a huge creature is played, the oval crashes onto the playing surface, creating shock waves and a small crater. Attacking with said creature involves the oval flying towards the enemy hero, smashing into them and shaking the screen. You start to forget you are playing a CCG at all as it feels sorta like a miniature game at this point. And yet there is still a connection between the cards and their products. Compare that to Scrolls, which also summons creatures but has no real tie between the product (parchment scroll) and the result (animated sprite).

And let’s not forget how this oval thing also solves the problem in CCGs when it’s not easy to distinguish between creatures, enchantments, spells, and so on. Cards are generally of uniform size, and the artwork (which usually takes up 50% of the real estate) can sometimes work against your quick assumptions by having a bunch of dragons or whatever on a “Deal 5 damage” spell. This is not a problem in Hearthstone, as all creature cards have ovals inside them.

Seriously, this is like goddamn paperclip levels of elegance here.


As I mentioned in my Impression post, Hearthstone feels both visceral and whimsical simultaneously. The further pillow fight analogy comes from the sense of “slamming” the cards down on the table, almost feeling the creatures smash into your opponent’s face. Then there are the spell effects like Consecrate that could have easily gotten away with simply dealing 2 damage to all enemies and been done with it. Nope: all your opponent’s creatures and hero tile are lifted high off the table as cracks of golden light bleed through, and then everything slams down at once.

The whole thing reminds me of how it feels to roll dice in D&D campaign – the physicality of the action imparts a gravitas completely independent of the otherwise unremarkable generation of a random number. For Hearthstone to evoke this feeling using just sounds and what could be Flash animation is pretty amazing.

If CCGs are not your proverbial cup of tea, it’s unlikely that even an amazing UI is going to change your mind. If you enjoy the genre at all though, or are merely ambivalent, then suggest you give Hearthstone a try at release. Watching Youtube videos of other people playing does not replicate the experience dropping late-game bombs on your opponent and watching them futilely cycling through their hand trying to come up with a response.

Posted on August 29, 2013, in Hearthstone, Impressions and tagged , , , , , . Bookmark the permalink. 6 Comments.

  1. Excellent review of the UI. This is why you deserved that Press™ Beta key! This article just amplifies my excitement about this game, I can’t wait to play.


  2. Point 3 definitely sounds interesting but I feel it might go too far. Guess it will take time getting used too. Also, seems like after a little bit everyone will just start randomly mousing things in an attempt to be misleading, prob leading to a waste of time. Hope this is an optional feature.


    • Since you cannot really “respond” to anything on the opponent’s turn, it’s hard to imagine a scenario in which this can be abused. I mean, it might possibly become annoying if the other guy is just spastically moving the mouse around (you don’t see the cursor, just the highlights around cards/objects), but the rounds and games themselves are over pretty quickly regardless.

      I don’t see any reason why the highlighting couldn’t be turned off in the settings eventually though.


  3. I have to admit that I am one of those people who simply do not get digital card games, and this UI review helped me identify one of the problems with the idea.

    If animating elements of the cards and offering more visual theatre improves the digital CCG, then why remain with the abstraction of cards at all? Even allowing that less can be more, the same set of numbers, rules and tactics can surely be skinned in some more video-gamey way (something similar to HOMM/Eador tactical combat, perhaps) and retain the option of working in considerations of terrain, etc.

    I am obviously missing something big, as several of these games are successful, more are being made, and Blizzard does not wager on lame horses. Is it simply nostalgia for the physical version of the experience?


    • Well, part of it is nostalgia, surely. But I also don’t think CCGs can be presented in a more “video-gamey” way.

      I mean, yes, Hearthstone is doing a lot to make things more visual and non-card-like. But think about the underlying mechanics going on. You are customizing a pool of abilities of which you only see a random amount of in a given game. Can you imagine GW2 or WoW in which some of your attacks aren’t available for X “turns”? Would you play a strategy game like Eador in which you couldn’t necessarily plan out attacks in advanced because you might not draw an attack card?

      About the most advanced form I have seen CCGs take is Card Hunter, which sounds a lot more like what you’re suggesting (terrain, non-card movement, etc). Then again, Card Hunter is about collecting specific items which have cards associated with them, rather than cards themselves. It’s similar, but not really the same.

      To be honest though, I’m not entirely sure whether people such as yourself don’t “get” CCGs because you played them and didn’t like them, or simply believe you wouldn’t be interested. If it’s the latter, I have to ask whether you have played Dominion or Texas Hold’Em or regular Poker or Uno or any card game, really.


  1. Pingback: Link Dead Radio: Final Fantasy, Fun, and interviews with the Fem Devs | Healing the masses

%d bloggers like this: