Hearthstone is a virtual collectible card game from Blizzard. It has a very polished interface, but that doesn’t stop there being some gremlins amid the goblins. This post is an in-depth look at the interface design of the PC/Mac version.
The state of a Hearthstone game is completely visible from a single screen — you can see your hand, your minions, and a few other pieces of information:
The display of your opponent, in the top half of the screen, is the same as your own, just mirrored vertically, and with their cards hidden.
There are already several interesting details here. There is no text on the screen besides the tiny titles in the middle of the cards. This makes the display feel less busy, even though it has a decent amount of information. All the deployed minions are recognised by picture, not name. after you’ve played for a while, the picture is enough for recognition, so showing the name is unnecessary. They key information about a minion is its stats and powers. Attack and health of minions are shown by the small icons on the minions (attack bottom left, health bottom right). Any further information on minions or cards is available with a mouse-over, which also gives small pop-up hints reminding you what a term (e.g. “Windfury”) means, which I found very useful while learning the game:
The only thing I’ve found that isn’t easily displayed is the current maximum health of a minion. You are left to infer it by looking at the original card on mouse-over, and calculate it from the buffs that have been applied to the card. This is a little irritating — especially as the Priest, who has several health-restoring and health-buffing spells — and could easily be solved by displaying one more number on the card during mouse-over display.
The other piece of information which is not easily available is what cards are left in your deck to draw. This is somewhere between an interface and game design issue. I’m generally not a fan of mechanisms where you could keep track of a piece of information manually if you bothered to take the time, but a game unnecessarily obscures this information. You know which 30 cards are in your own deck; you could keep track of which ones you’d drawn and thus figure out what is left to draw. Since the game doesn’t show you, it’s just punishing you for not taking the time to tediously tick off the cards as you draw them. It would be fairly straightforward to allow you to click on your deck and see a list or grid of cards left to play, maybe with the mana bar chart distribution shown as well.
The mana crystal display is in the very bottom right of the screen. At first, it seemed odd to bury away one of the most important pieces of information in the game in the corner of the screen, especially when there could be room in the very centre of the screen (on the dividing line between the two sets of minions) to have the same long thin display. Here’s a mockup of that idea:
I think this reveals the disadvantage: having the mana display in the corner, adjacent to your hand, does enable easier flicking of the eyes between the cards available and the total mana. Having the mana in the centre means that it’s further away from the things it corresponds to: the cards in your hand. However, I think the central display does make more sense on your opponent’s turn, when their remaining mana gives an idea of how much more punishment is to come.
Hearthstone is very pretty, which is never a bad thing in an interface: all the cards are professionally illustrated (if often quite cliché). What really makes the game excellent, though, are the animations. The animations serve three main purposes.
Firstly, they stop the game appearing static or frozen/crashed. It’s interesting that most application interfaces (think Word, Excel, etc) are generally static when you are not doing anything, except possibly for a blinking cursor. In contrast, modern games — even strategy games that are awaiting your input — always have something subtly moving around, and never show you a purely static display.
Secondly, the animations provide satisfaction: much of the satisfaction in the game comes from the animations you see as your moves are carried out and enemies shatter and explode before you. As in games like Diablo and Torchlight, satisfying animations are part of the game’s feedback mechanisms.
Thirdly, and most importantly, animations tell you about the transitions within the game. One minion attacking another is shown by an animation. Attack and health increases have a noticeable animation. Cards being drawn, discarded and played, are all animated. If you put a novice player down in front of the game, they may not win, but they’ll fairly easily understand the actions that caused them to lose. Information displays explain game state; animations explain game state transitions.
The only animation that I can think of which is annoying is the one during card selection. Three or four cards pop out of the deck and are shown before spreading out slightly, ready for you to pick which ones you want to redraw:
When the cards pop out, you often instantly see one you want to get rid of, but if you get ready to click the card, it then moves before you can click it. It’s irritating, and so needless — why not make the cards pop up already spaced out?
One glaring omission in Hearthstone is the lack of keyboard shortcuts. At an absolute minimum, why is there no keyboard shortcut for end turn? On my Mac laptop, space bar is just above the trackpad and would save a lot of mousing around. (If you want to go further, you could probably provide a few more shortcuts: numbers 1 through N highlight a card from your hand, pressing again plays the card, and then rely on mouse usage again to select the target.)
One nice feature of the interface is that you can quickly queue up several actions without having to wait for the attack animations to finish. This allows the game to have attack animations (which visibly confirm your actions) without letting them get in the way of user input. However, there is one time when this feature could be more helpful: secrets. Secrets are a hidden status of your enemy that are only revealed when a secret condition is triggered. You may queue up several attacks and then the first one triggers a secret which might have changed your mind about the other attacks (e.g. targeting a minion that the secret just summoned). But too late! All your attacks happen anyway. It would be trivial to cancel queued actions when a secret appears and thus avoid aggravating players.
The deck viewing screen is very polished:
Down the right is a complete list of cards in the deck, sorted by mana order. The distribution of cards of different mana costs is quite important in Hearthstone, so a little frequency chart is available (either bottom left in arena mode, or on mouse-over top right in standard mode) to see this, which is a nice touch. Details of the cards available are shown in the main panel. The interface is very nice — one click on the left to add a card to the deck, one click on the right to remove it. There’s just a few things that are wrong with this interface.
Firstly: a Hearthstone deck always has 30 deck cards in it, picked from some larger set of card faces. Each card face can be used only once or twice in a deck, so a deck can be made up of somewhere between 15 and 30 distinct cards. The Hearthstone deck viewing screen displays the distinct cards on the right, and has enough space to see 21 of them, which means you usually have to scroll just slightly to see the last few cards — which is annoying and surely avoidable. One possible solution is to shrink the height of the card names slightly, to fit without needing a scroll bar . Alternatively, there is surely enough room to have a second column — look at the wasted wood-effect margins in the above screenshot. Here’s a mockup of a two column mode:
Secondly: you can’t overfill a deck, even temporarily. When you build a deck, you select cards up to 30, swapping in and out, and you’re done. Then you play a game with it, lose horribly, and come back to tweak it. It needs more 2-mana cards. So you click your Acidic Swamp Ooze to add it, ready to then work out what to lose in its place. But you can’t add the Ooze because your deck is full. So you must always pick what to remove before you pick what to add. But this is counter to how I usually want to tweak: I start by knowing what I want to add, then slowly pick what I must remove. It would be easy to let you go over 30 cards, and disable the Done button until you hit 30 again (or just not let you play until you have 30, as they do when you have under 30 cards).
A third restriction which is totally arbitrary is that you can only have 9 decks. With only 9 heroes available, that doesn’t leave much room for experimenting. This will clearly frustrate advanced users, and has no obvious reason: it takes less than 1KB to store a deck, so storage is not a problem. They might do it to save a scroll bar on the deck selection scheme but that’s a pretty weak reason — it will only affect users with more than 9 decks. And that reason didn’t stop them scrolling the cards on the deck screen!
I think there is still some room for improvement on the deck selection screen. Those blue numbers next to the card titles are quite heavy, but are also duplicated. They might be better farmed out into section headers (with frequencies shown). Additionally, that yellow border for my gold cards is way too much when gold cards are just a cosmetic detail. A small star, as for legendaries, would do. Here’s a mockup with some of those suggestions:
When designing a series of menu screens, you must take care that any related actions do not require crossing too many screens to get between them. And in one particular case, Hearthstone fails on this. You play a ranked match, you lose, and you end up back on the deck-choosing screen, with one button to play again. That’s good — just one button to get back into the action. But what if you lost and you’ve decided that the 8-cost minion you drew from your first mulligan clogs up your deck more often that not? You want to tweak your deck. Even though the decks are displayed on that very screen, to edit them you must go back to the main menu (one click), go to my collection (another click), then select the deck in question (a third click) to begin editing. Allowing a right-click or double click to begin editing the deck from the play screen would save a couple of clicks. And when you’re initially building a deck, you may want to edit it almost every game, so this does wear on you after a while. It is surprising how grating small things like this can quickly become for a player.
And As For The Game…
Hearthstone is very addictive (and don’t underestimate the role of the interface in that) and I’ve ploughed lots of hours into it. Like many deck-builders, half the action takes place before the game, selecting your deck, and the other half during the actual battle. The rules are relatively straightforward, but like many good card games, the strategy arises from the different combinations of mechanics that are possible. The only thing I think Blizzard pitched wrong was the cost. I don’t begrudge them needing to make money from the game, but 1 pound for five cards, only one of which is definitely rare, is much too high, as is 1.50 GBP for an arena match. For about a fifth of that I would probably have been tempted to spend some real money, but as it is, I’ll stick with free-to-play.
Review note: I played Hearthstone versions v188.8.131.5234 through v184.108.40.20636 on PC and Mac in Jan/Feb 2015.