Monday, 10 January 2011

The Gutenberg Rule

Recently a couple of people have reminded me about how we'd used this design principle during MVT testing and yielded some good results and insights as a result. So I thought I'd commit some learnings to a post on the subject .

The Gutenberg Rule is a design philosophy named after the designer of the printing press Johannes Gutenberg. This principle suggests that people read content top to bottom and left to right.  You can therefore split a page into four quadrants, the “Primary Optical Area” in top-left, the “Strong Fallow Area” in top-right, the “Weak Fallow Area” in the bottom-left and a “Terminal Area” in bottom-right. Splitting a web page into four quadrants as illustrated below we tested the various positions of a product offer by rotating it through these 4 positions (in more than 1 test). 

This testing confirmed that
  • position 1 yielded the highest uplift
  • position 2 the second highest
  • position 3 the third most profitable position
  • position 4 the least uplift
  • Additionally, just below position 2 proves to be the ideal location to place a Call To Action in numerous optimisation exercises
Horizontal Positioning

Extending on from this principle it's also worth noting that horizontal positioning is of equal significance, born out with the following test example. On a landing page we rotated three product benefits through a horizontal layout as follows and monitored the effects on click to apply rate. Swapping the 'Great rate' benefit to second position after a cash back offer yielded a 3.24% uplift.

Again, swapping the Overdraft benefit with the Cash back tile yielded an even greater uplift of 3.69%. I guess you could call this the "Gutenberg Horizontal Positioning rule".

So in conclusion, positioning of message and offers can be absolutely crucial to the success or failure of a web design based upon some highly established design principles.