Playtesting graphic design

I’m a big fan of awful prototypes. It’s very much my preference to translate an idea into physical form and start playing with it as fast as possible and I really don’t spend much time agonising over how to lay things out neatly before creating *something* that will do. Generally this approach is great, ideas can get a “reality check” pretty quickly and there’s always time to refine later. It’s also pretty quick because every card that I design is essentially the same.


You may remember this layout from such prototypes as “every prototype that I’ve ever worked on.” The original 404 directives were laid out this way (minus the keyword bit in the middle), the original Wizard’s Academy spells were the same (before I decided they needed twice as many wordy bits) and the cards for genesis and nightmare follow the same pattern.

It’s a good pattern. The most important number is such that the cards can be fanned and that number can be seen, the title gets to be at the top and be in the biggest text, everything is around where a player expects it to be so it tends to be seen as pretty intuitive.

However, recently I’ve been noticing times that this approach to prototype graphic design can be an impediment to gameplay. In the orchestra game (slightly naughty talking about it in a 3DTotal post but it’s a favourable comparison to the work here so I can probably get away with it) there isn’t a single fantastically important icon or number. The only number needed is the one which indicates how many players the card is for so it winds up occupying that top right spot. This makes players attend to something that is literally entirely irrelevant once the game has started, which isn’t a good attribute.

Consider how this is handled in 7 Wonders, which has consistently lovely graphic design:

circusThe number is near a corner which makes it quick to scan through cards and pick out all of the cards with a particular number, but is in a position that you’d rarely focus on in play so it’s easily ignored once the game has started. They also break the convention of placing costs on the top right of a card in favour of taking advantage of the fact that most people read from left to right. The top of a card essentially reads “You pay this THEN you get this effect THEN you have this for free in the future” which feels really natural. The funniest thing about this is before googling up an image of one of their cards I didn’t even remember that they place the title of the card in a really unconventional place, but it works.

It’s worth considering how best to break the rules in order to improve a game, which I’ve had no problem doing at the graphic design stage, in which I’m hiring a graphic designer to make my games look lovely, but I don’t do such a good job of considering it at the prototype stage.

This has been really noticeable in the development of Nightmare. In principle a player gets a card and has to perform the action on the card, then can trade again, which sounds straightforward. In practice, in a worst case scenario, a player has to get a card, look at it to determine its type, read it to determine its effect, carry out its effect, carry out a relevant warden effect, listen to what the other players are saying, choose a card to trade and execute a trade within a ten(ish) second window.

Generally if that’s required someone’s doing pretty badly, but the point is that sometimes they can’t allocate a lot of time to reading the card and even at the playtest level the graphic design needs to support that for the playtest feedback to be valid and useful. Consider these two cards from the first and fourth editions of the prototype:









Players needing to ascertain things quickly has informed each change as it has occurred, normally I keep my rules text smaller than the title text because that seems standard in some way – but larger text is easy to read in a hurry. There’s also a move towards removing superfluous text, we don’t need to write that it’s a doom card because there’s an easy to remember icon for it. There’s no need to write that the consequence for failure is doom because that’s the only consequence that failure to follow a card ever has.

Oddly one seemingly superfluous addition that’s tested very well is that inclusion of an icon to mean delirium, placed right next to the word “delirium”. Players are trying to collect sets of cards, as a core objective the set that a card is in is the most important thing. Where card type had an icon and set did not some players would accidentally collect card types instead. Where the card type icon was removed players would miss it, because it’s the second most important piece of information in choosing what to trade. So far the optimal solution seems to be to have icons for both and try to make the type icons as clear as possible in order to disambiguate.

The effectiveness of the graphic design for the new prototypes has modified the win rate for first time players from something like 10% to something like 70%, which besides being a ridiculously large impact for a graphic design change, obviously has a knock on impact upon how cards in the set are balanced. This cements in my mind the importance of paying stricter attention to the graphic design of the cards earlier in the playtesting process rather than having an explicitly separate graphic design development series of playtests.

I’d like to close up with a few words on the physicality of cards (which applies equally to all components). Players are generally human and moderately physically similar and objects have affordances which cause people to handle them in particular ways. These affordances need to inspire graphic design (even at the prototype stage) to create the most usable components possible.

tworoomsandaboom(A quick edit before we get into the next bit, the game I’m discussing has been updated since I came into contact with it resolving many of the graphic design problems. I loved the gameplay and hated the design, so take a look at the new design, if it looks great then I wouldn’t want to scare you off buying what is an amazing game)

I backed Two Rooms and a Boom at the print and play level. I would have backed at the game level if it had better graphic design because I think that it’s a wonderful game that’s got loads of really neat ideas in it. Unfortunately it’s let down by graphic design that didn’t consider the way in which players will most commonly use the cards so I realised that I’d replace the cards with ones I’d made myself even if I did have a physical version.

One of the core mechanics of the game is that players reveal their cards to each others, in a room containing other players, supposedly in secret and with some cards having an effect when revealed.

The first thing this approach does is fail to leave enough space on the card to list its effects. This obliges everyone to memorise the effects of every possible card or to be stuck in a position of explaining something to an opponent that shouldn’t be said out loud and that will give away to everyone that you have one of the “effect if revealed” cards. There’s plenty of space on the card for a brief description of effects, but it doesn’t get used.

The other problem that it creates is due to the requirement to reveal the colour of a card without revealing its identity. By putting identifying information in the corners of the cards (either a partial quote or partial image) it makes that reveal unnecessarily awkward. A few minutes spent picking up cards and trying to selectively hide parts of them with the average human hand could have generated a much more effective graphic design.

witnessCompare this to this draft of Witness Protection Program. Here the cards clearly indicate their allegiance making them easy to sort, have more room for art and have space for not only the effect of the card but a whole bunch of extra information. They have a smaller font, but font choice depends on context. In Nightmare I had to increase the font size because players needed to read it very quickly having just been handed it (possibly awkwardly by someone in a hurry). In Witness you typically have a wait while the witness goes to hide so have plenty of time to read the text and then conceal the card for the rest of the round.

The takeaway message for game designers is that while there are graphic design traditions that provide a host of benefits it’s worth thinking about when to step away from them and considering how the affordances that your physical components offer interact with your graphic design choices. You may end up significantly refining your gameplay as a result of a graphics change.

To try the latest version of Nightmare click here.
To read a paper by my PhD supervisor on how to train computers to visually recognise the best way to grasp objects with a human hand click here.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.