Websites should be designed well to attract users – that’s probably something everyone would agree with. They need to present information sensibly, be intuitive to use and well-structured: these are the aspects which play a major role when optimising a website to reach higher conversions. If you can get the individual elements to work together harmoniously, this creates a more user-friendly image, and you can convert more of your existing traffic. That’s the theory anyway.
But what do people actually regard as attractive and enticing? A sense of successful design and pondering about aesthetics are not something that was invented yesterday. Perception is not entirely subjective: whether we see something as ‘beautiful’ or not is also influenced by an interaction between zeitgeist and individual taste. It’s also governed by certain aesthetic rules which are sometimes anything but modern creations. One of these rules is what’s known as the golden section: this means a quite specific proportion ratio of 61.8% to 38.2% – or call it 3:5.
This principle can be applied to a whole host of different disciplines, and was used as far back as the late Middle Ages and in the Renaissance. This phenomenon was used and discussed in philosophy, art, architecture and biology; and artists like Raphael, Leonardo da Vinci and Albrecht Dürer used the golden section in their famous works. Why do we see this precise ratio as something beautiful, though? Mainly because it occurs so often in nature. There is no such thing as perfect symmetry, so the human eye sees slight asymmetry as natural and attractive, and graphics which use the golden section appear exciting and attractive. Even today, perceptual psychologists say the golden section has a particular aesthetic we humans find harmonic. What is particularly attractive to the perceiver was not something only the major artists of the past recognised: even today, many disciplines agree that the golden section has a persistently positive effect. What can we learn from this when it comes to conversion optimisation, though?
As a relatively simple design rule, the golden section is also a way of structuring a website to make it visually more attractive and of making visitors want to stay longer. If users regard a site as attractive and beautiful, that might have a positive effect on the products placed and advertised there, too. It awakens the visitors’ interest, they feel like they know the site intuitively. But this is also very much something we can take into account when adding individual elements, such as navigation bars and buttons. And images as well can attract more attention by being designed right.
By way of example, Zalando shows that the individual elements of a website can be guided by design rules. In the navigation bar, for example, the individual options are left-aligned and the column is made a bit wider to create a harmonic composition. And the teaser image leads the eye along the golden section, emphasising both the model and the text and making them look balanced.
Zalando’s product pages are also slightly asymmetrical: here, it is not the individual elements themselves, but the fundamental division of the page which follows the golden section. The benefits to the customer are listed in a box in the visible area on the left, while the rather wider section on the right focuses on product images, prices and the call-to-action button.
Nike is another example of how a website was successfully designed using the golden section. This combines both aspects: we can see the rule working, both in the way the individual elements are structured and in how the different components affect each other. The text and both call-to-action buttons are laid out precisely in accordance with those proportions within the teaser which people perceive as particularly attractive. The product image is also placed skillfully, too. Combined with the suggestions for the new Nike products below the teaser, this makes an attractive composition, presenting information to the user clearly, with the teaser setting the desired focus.
There is no patent design recipe for this rule, as our examples show. What matters is not to see the golden section as an end in itself, but as a way of making major elements on a website stand out to the user and of structuring them clearly in aesthetic terms. Because that’s the only way using the golden section in design can speak to the customer and get them to buy. If you want to analyse a website according to this principle, there are a number of tools you can employ easily to use the golden section in your day to day design work, like the Golden Section tool by Atrise.
The golden section is an interesting way of optimising the conversions on your site. It can be particularly useful and promising when it comes to producing beta test versions.