What Mondrian can teach you about A/B testing your landing pages

Some web designers fret when confronted with the iterative optimization of websites, a metrics-driven approach that relies heavily on A/B testing and other analytical insights that seemingly go against their creative intuitions.

Maybe it helps to shed some light on how the greatest artists in art history understood how important A/B testing is.

You know Piet Mondrian’s (1872-1944) work. He made those paintings of intersecting lines in black and grey intermittently filled with blocks of white and primary colors, which have been printed on everything from carpets to coffee mugs.

But when you get close to an actual painting by Mondrian, so close that a museum security guard walks purposefully toward you with a walkie-talkie in hand, you start to notice something: His lines aren’t perfectly straight. White paint has been thickly applied with visible brush-strokes, and it is cracking at the weight of its application.

From X-rays made of several Mondrian paintings, we can see that black lines have been shifted left to right and up to down, layers of a blue, red, or yellow -each in a slightly different hue – have been applied and reapplied. In other words, his painting process was a lengthy one, full of trial-and-error.

Mondrian ran A/B tests and discovered the importance of… white space (sound familiar?)

Mondrian’s long road to innovation was surely influenced by balancing the opinions of his friends, his audience, his gallerists, his patrons, and his own self-criticism. From painting to painting, he learned by juxtaposing combinations of elements and various versions of essentially the same theme until increasingly complex and refined patterns emerged.

During his time in pre-war Paris, for example, this resulted in the gradual understanding that an augmentation of white spacewould not only render colorful elements more salient, but would also create a more harmonious and fluid experience for the viewer.

Sound familiar? This might be because web designers follow essentially the same process.

Why artists ‘copied’ themselves

We often think of great works of art as a singular stroke of genius – work that is begotten and finished in a one grand, divinely inspired gesture. But some of the world’s greatest artists are and were extremely process-driven, and tend to use their own form of “A/B testing” as a way both to evolve their practices and to please their clients by testing and comparing each iteration of their work.

As early as the Renaissance – in fact, especially during the Renaissance – artists made multiple versions of the exact same painting. There are endless examples of this peculiar tendency, but notable ones include Pieter Bruegel the Elder, who painted three versions of his Tower of Babel (1563), each slightly different in size, color, and composition; Michelangelo Caravaggio, who executed two versions of his Supper at Emmaus (1601 and 1606); and Leonardo Da Vinci, whose Madonna of the Rocks (1483-1486 and 1495-1508) famously has two versions.

a/b testing web design

Two versions of Madonna of the Rocks, by Leonardo Da Vinci

Two dominant reasons usually surface for this habit of A/B testing.

First, as we know, artists develop their work through comparison and contrast, improving on the second revision of a painting by learning what doesn’t work in the first.

Secondly, just like other entrepreneurs, artists too must sometimes oblige the whims of patrons who often want the latest and improved version of a painting they may have seen or just heard about – all for themselves. 

When the Neuroscientist Becomes the Artist

Artists may have been A/B testing their work for generations, but with the emergence and availability of photo-editing and eye-tracking technology as an analytic tool, neuroscientists realized that they could study what compositional elements make a work of art great by studying the way people look at it in an actual A/B test.

A study published in 2011 by University of Leicester professor Rodgrigo Quian Quiroga and his team set out to quantify the spatial and luminance balance in paintings by conducting A/B tests on original and modified versions of four abstract and figurative masterpieces, including two works by Piet Mondrian: Composition II in Red, Blue, and Yellow (1930) and his later, more visually complex Composition No. 8 (1939-42).

Quiroga and his team altered the two Mondrian’s by simply moving around their regions of color: A dominant square at the top right corner of Composition II in Red, Blue, and Yellow was switched from red to blue, while its smaller square in the bottom left switched from blue to red.

In Composition No. 8, the small red square in the top left corner was moved to a region in the bottom right corner. Ten subjects were asked to look at high resolution images of the two versions of these and other paintings at their leisure as the paths their eyes took around the paintings were monitored using eye-tracking technology.

a/b testing a/b testing

Piet Mondrian, Composition II (…) Before (left) and After (right)

Their findings are fascinating: In the modified version of Composition II in Red, Blue, and Yellow, viewers couldn’t move their vision away from the large, now blue square. Their gaze was essentially trapped there, and the harmony of the composition was compromised.

The modifications to Composition No. 8 had a similar effect: When the red square was moved to a position that was normally filled with white, the viewers’ gaze was immediately drawn down (and stayed there). Once again the path they would normally follow to visually explore the painting was corrupted.

Seemingly simple tweaks created compositional quagmires in the maze of lines, complicating the system through which the artist intended to guide his viewers through the painting to safety.

Piet Mondrian, Composition No. 8, Before (left) and After (right)

The reasons for these reactions to the modified versions lie in Mondrian’s uncanny aptitude for luminance and space. He may have understood that a highly salient color pattern such as a deep cool blue against a warm white surface would trump even a large area of red in drawing a viewer’s attention.

Quiroga and his team were able to quantify the success of Mondrian’s compositional skills. Which may have the artist himself rolling in his grave. Mondrian was known for equating his painting process to spirituality.

The chasms between aesthetics and analytics are deep. Many artists and designers have been known to eschew the way in which their work is analyzed by scientists because it tends to negate intuition, historical and cultural context, and subjectivity.

The recent popularity of eye-tracking studies – whether it be applied to a modernist masterpiece or a landing page – is often met with a raised eyebrow and a stern warning that science cannot quantify art and design. In many ways they’re right. No matter how much scientists delve into the analytics of composition, colour, and form, they will be hard-pressed to say exactly why certain art and design simply ‘works’.

And while design is more practical than art, designers often do like to think of themselves more as artists than as engineers, exempt from analysis and comparative testing because of their honed intuition for what makes for ‘good design’. But working on the Internet does mean that a design’s effectiveness becomes measurable: the internet enables analytics, and analytics breeds accountability.

What this means for conversion optimization 

What the Mondrian example shows, is that clearly iterative optimization and creativity are not mutually exclusive concepts and processes.

As cheesy as it might sound though, the same is true for conversion rate optimization. A successful conversion rate optimization strategy requires you to work with both mindsets, embracing both creative and analytical tools and concepts.

Photo: daquellamanera, Flickr

Powered by Facebook Comments

About the author

Bitsy Knox

Bitsy Knox is EyeQuant’s Communications Director, and is fascinated by the intersection between art, design and analytics. EyeQuant is a neuroscience AI that helps companies test and optimize their web design for a better user experience and higher conversion rates quicker than ever before. Users simply upload screenshots and EyeQuant delivers predictive eye-tracking results within seconds, showing you what users will see or miss on your website in the first 3 seconds. If you have never tried eyetracking solutions, you must sign up for a quick, free test.

Related Posts