The surprising effects of using the 8px grid system

I assume you already know something about ‘pixel-perfect designs’, the ‘8px grid system’ or ‘rhythm’ in visual design. But are you also aware of the effects of using the 8px grid system?

8px grid system in short: you repeat certain sizes (whitespaces, icons, font-sizes, and so on) in your design, which are supposed to create rhythm, which is supposed to make a design more pleasing to look at, easier to scan, and ultimately convert better.

I’m saying suppose to because I’m not sure this has been tested,* Of course, using repetitive sizes rather than completely arbitrary measurements is nothing new.

Using a grid in your designs was especially popular in Dutch and Swiss design since the 30s. But I was just curious what a simple AB test would prove.

*To be clear: I don’t think we actually needed to prove the benefit of rhythm and repetition, I was completely convinced about it. Just thought it’d be fun to see what the data would say 🙂

How to test the effect of the 8px grid system?

I needed a set of different designs, at least 10 or so.
All versions needed a slightly different version. One version on a 8px grid, the other slightly off.
The two different versions needed to appear visually the same. To avoid people choosing A or B for rational reasons rather than a subconscious choice.

Creating a bunch of designs with the 8px grid system

To be honest, this entire series started out as an experiment with different styles, with the challenge for myself: in how many styles can I design the same interface? Think classy, bold, young, conventional, modern, New York Subway, minimal, and so on.

I ended up with 11 as you can see below. Great material to do this test, I’d say.

All designs were built on the 8px grid system, meaning that each space between elements and the elements themselves is 8px or a multitude of 8px.

The B version was completely random, with measures such as 3, 5, 6, 7, 9, 11, 13, 19px, and so on. I kept the difference between A and B to a minimum, to avoid people preferring one version over the other because of a better composition, balance, or any other rational reason. The difference had to be barely noticeable.

Setting up the test

I used Usabillityhub to create this test. I mixed up the A and B version, to make sure B was not always the “ugly” version. The user could look at both versions as long as they could, and had to answer the simple questions: “Which version looks better?”, 11 times.

The responses

I got a total of 53 replies.
In 3 / 11 (28%) cases the “ugliest” design was chosen as a preference.
In 8 / 11 cases (72%) the correct design was chosen.

So, pretty good results I’d say.

A bit more in-depth results

Usabillityhub also tells me if the difference in votes between A & B is statistically significant. In other words: is the difference large enough to actually draw any conclusions from it.

If we remove all cases with a difference that is too small (statistically insignificant), we are left with 6 test, where 4 out of 6 answers is correct. 66,67%. Also good enough

If we only look at the tests where the difference is 95% (or higher) likely to be statistically significant, we are left with 4 accurate tests. Where all answers are correct.

Conclusions and next steps

Overall, I think it’s a win for the 8px grid system. We did discover that designs with repetition are perceived as more beautiful, but what is the effect of this? More trustworthy products? More conversion and leads? Higher loyalty?

Curious about how to implement this 8px grid: this is a pretty good extensive guide: https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179