Putting the Gutenberg Principle to the test: Evidence based design

What is the The Gutenberg Principle?

The Gutenberg Principle describes the general movement of the eyes when looking at a design in which elements are evenly distributed, in a z shaped pathway as illustrated below:

Web.png
Print.png

When we see something for the first time, our eyes are not static but constantly scanning, looking for visual pathways, patterns, and resting points. Things which are bolder, larger, or very different to their surroundings naturally draw the eye’s attention.

Assuming most of the objects are of similar size and distribution, the path our eyes take is generally a Z shape. The viewers gaze starts in the top left area, passively through top right, down to bottom left, and then finally into bottom right. It’s the way we are trained to consume visual content*, especially when there is a combination of words and images.

As a designer, knowing this means I can make decisions that control how information is received; I can strategically make certain elements “pop” or encourage the viewer to linger on a page by creating a visual pathway. This works for print, web, and motion.

This might sound fairly straightforward, but as always, it’s great to be able to test these theories in the wild, which is what I did!

Putting it to the test in logo design

I reworked the logo for Vets: Stay, Go, Diversify (abbreviated to VSGD) to fit in with their mission statement “Your passport to incredible veterinary careers”. Their vision is that all vets can have multiple, fulfilling careers that use their unique skills, and that being a vet is a passport of opportunity. As such the client wanted something with a passport stamp feel.

The client and I narrowed it down to 4 very similar options. The only difference being the arrowheads vs without, and the direction of the letters.

Which would people prefer? Which was easier to read?

Two versions of a logo design for VSGD showing the paths to read the letters

Two versions of a logo design for VSGD showing the paths to read the letters

Knowing about the Gutenberg principle I was curious to know what people thought about the natural way to read the letters in the correct order. Although the version on the left had the letters in a clockwise pattern, which reads naturally like a clock, the version on the right leans closer to the Gutenberg Principle of “top to bottom, left to right”. I didn’t have any particular preference but I kind of assumed that the one on the right would be more popular, as that is what has been generally shown to be a more natural way to read.

Testing it with the users

We asked the facebook group (around 10k active members) what their favourite one was by commenting with the respective number.

Version A: No arrows, letters read clockwise

Version A: No arrows, letters read clockwise

Version C: Arrows, letters read clockwise

Version C: Arrows, letters read clockwise

Version B: No arrows, letters read top, left, right, bottom

Version B: No arrows, letters read top, left, right, bottom

Version D: Arrows, letters read top, left, right, bottom

Version D: Arrows, letters read top, left, right, bottom

The results

Version A: 4% (No arrows, letters read clockwise)

Version B: 5% (No arrows, letters read top, left, right, bottom)

Version C: 33% (Arrows, letters read clockwise)

Version D: 54% (Arrows, letters read top, left, right, bottom)

E (none of the above/other suggestions) 4%

In the end we had nearly 400 votes and the design which won by an absolute landslide (54% of the vote) was version D which contained arrows and the letters reading “top to bottom and left to right“. The runner up was version C (33% of the vote) so clearly some people did read in the clockwise manner.

I found it really interesting to read the comments as to why people had picked their favourite design (the arrows were really popular since people felt it was reflective of “direction”, a key mission of the group).

Key take-away: the importance of evidence based design!

It just goes to show that there is a degree of art and science when it comes to design, and although its easy to assume things based on prior experience and knowledge, there isn’t always a one-style-fits-all solution, and you often won’t know the answer until you test it out.

In this case my gut instinct was actually right here, but I’m glad we did this test so that we could get the best version of the logo out there!

Final logo design:


*This will differ in countries which use a right to left reading style, in which case, you get the same pattern in reverse. But in both cases, starting at the top and working to the bottom is a given.