An Unexpected Problem

Making my Nightfall game, one of the first things to do is to design a grid for the databattles. I’m going for 256 x 256 pixel dark blue squares on a light grey background. However, after making a mock-up in GIMP, I faced an unexpected usability problem. Can you see it?

It might not be visible to everyone, but when looking at that grid, I see light grey dots between the corners of the tiles. (it might help if you zoom in) It’s a Hermann grid illusion. It’s very distracting and not intentional, so I have to get rid of it.

I found this question on UX Stack Exchange. I tried several of the things suggested in the answers. Moving the squares closer together made the gaps between squares less obvious. Moving them further apart, I had to move them a large distance to get rid of the illusion, and that ruined the look of the grid. I couldn’t offset them, I have to keep them in line because of the format of the game. When I tried changing the colours, I couldn’t find a combination that worked well and didn’t have the illusion. Any combination with enough contrast to make the grid easily visible also produced the illusion.

I looked at how the original game does it. I don’t know if it’s deliberate, but it looks like it uses a combination of a patterned background and varying the colour of the squares to break up the illusion. It’s still visible to me if I look closely.

Varying the colour of the squares would make it harder to build levels, and I don’t really want to add a patterned background. I eventually found a different solution. I put another grid of small squares underneath, so that they fill the area between the corners:

This eliminates the illusion, and has another advantage: Bit-Men. In The Nightfall Incident, the Bit-Man is a program you can use to add and remove squares from the grid. The small sub-grid makes it easier to see where Bit-Men will place new squares. This is my favourite solution by far.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s