I had an interesting experience working on Genesis the last couple of weeks. It involved spending money on things we turned out not to need and making changes then reversing them and did something to make me think of icons differently. I thought I’d share it in the hopes of preventing other people from making similar mistakes.

In this game the players are gods, each god has several purviews (Like mastery over water, death and animals or whatever) and each purview has a champion. Here’s Ripple, the champion of water, as her card appeared at the start of that time:

Obviously this is prototype time. The final thing won’t look like this and that’s not our art. It’s getting nowhere near a finished product. Just something to fill the space till we’ve paid an artist to draw something specially for the game.

I want to draw your attention to the icon at the bottom left. That’s a free icon from game-icons.net  which is a fantastic resource for any designer in the process of prototyping a game. The icons can even be freely used on a finished commercial product if you like, though generally I try not to.

Anyway do you see how its flecks are escaping the boundaries of the icon? That’s because it’s an icon that’s designed to go onto a square that I’ve put onto a circle. A lot of the games icons are like that, they annoy me every time I look at them.

It also looks bigger than the circle next to it. That’s an optical illusion, you can print the card and cut it in half and match up the circles to prove it to yourself if you like 😉 That they’re different styles makes them look different sizes which is all kinds of messy.

So I asked a designer to get an icon together for me that would fit the imagery of the rest of the card, looking to improve it with some more consistency. This is where I ended up:

Well not quite here – this time the left circle actually is smaller, but that’s my mistake. I don’t seem to have an image from after it was fixed but fixed it was and I got it in front of playtesters.

The feedback was immediate “The old version was better” “We actively liked it that the icon overspilled its bounds”. I figured maybe people liked what they were familiar with so tried playing it with some brand new people showing both sets of cards and saying “We’ve not settled on a direction”. It was unanimous – the coloured icons were preferred.

There was other feedback too and I continue to work on the game, changing the design in accordance with things people suggest and working on balance tweaks here and there. Here’s Ripple in the version I’m testing at the moment:

So what did I learn from all of this?

Well firstly that I need to be aware of my own perceptions. A lot of designers get games wrong for colourblind people because they’re not colourblind.

Conversely I am colourblind and pay little attention to it as a signifier. Moving all of the icons into the same palette significantly increased the time it took players to figure what did what. Only by seconds, but an increase in seconds for a task that’s done a lot of time in a game can be the difference between something which plays smoothly and something which feels juddery and uncertain.

Just because I recognise icons by shape first doesn’t mean other people aren’t seeing colour first and having them all be different colours makes it easier and faster for players to recognise them and make judgements.

Secondly I would never in a million years have asked a designer to draw me an icon using an instruction like “I need a 15mm circle with an icon inside it, but the icon should overflow the limits of the circle going up to 3mm over the line” but the proportion of players who thought that was a deliberate design choice and liked it is somewhat mindboggling. I’m sure someone drawing to make that an interesting style on purpose can do a better job than I did by just putting a square peg in a round hole – but I’ll get someone to knock together some icons like that deliberately drawn and see if we can’t improve the process while taking advantage of a happy accident.

I’m still not sure how to face the “optical illusion makes coloured icon next to the other icon look bigger” thing, especially if the icon overlapping its bonds is part of that, but I’m going to try a bunch of stuff.

When we test something we don’t always wind up testing what we intended to, but I think it’s good to be open to new ideas.