Left or Right?
Using the Gutenberg principle to decide layout and increase conversion
I was recently asked to spend a couple of hours providing a top line review of one of our clients’ websites to identify any ‘quick wins’. Without access to analytics or time and budget for testing, this was very much an ‘Expert Review’ based on best practice i.e. “what does the UXer think about this?”
During the review, I believe I discovered an opportunity to increase the conversion of a sign up page through layout alone.
The page in question was extremely lightweight, simply containing an emotive image, a basic form consisting of a few fields, and a submit button.
After correcting a few usability issues in the form, I was left with the question as to whether the layout was correct; should the form appear on the left and the image on the right (as it currently does), or should the image be on the left and the form on the right?
Now, if I wasn't a User Experience Designer, I imagine I may simply have a subjective opinion of which looks best. As a creative or web designer with years of experience, I may have a gut feeling or instinct as to which feels best; I may even turn to PhotoShop to explore what the design looks like if the two elements (form and image) were reversed. If I were a web developer, I guess I’d just alter a few lines of code and make the decision in the browser — but that’s a blog post for another day.
However, as a User Experience designer interested in psychology, neuroscience, and human-computer interaction, I am able to turn to the science of how we read screens to make an informed decision about layout — and this is why I love UX.
In this particular scenario, I believe we can use the Gutenberg principle to understand the reading gravity of the page and ultimately determine that a reversed layout is likely to be more effective.
The Gutenberg principle tells us that we scan evenly distributed homogeneous information through four quadrants, starting top left in the primary optical area, moving to the top right (the strong fallow area), to the bottom left (the weak fallow area) and finally to the bottom right — the terminal area.
This principle was brought about from the way in which we read columns of evenly distributed text from the days of newspapers. But the layout of the page in question clearly isn't a block of evenly distributed text.
However, whilst the emotive image, visual hierarchy, and colour are all effecting the reading pattern, I still believe the underlying principle of reading gravity from top left to bottom right is still applicable.
On a neuroscience note (why not?) the primitive part of our brain that deals with the easier and faster system one thinking, really favours emotive imagery over complex system two thinking stuff (such as reading and working out.) This means we can make an educated guess that the user will focus on the image first, which we know is true from numerous heat mapping studies.
It just so happens that in my revised design, the emotive region of the screen (the image) now appears in the primary optical area of the Gutenberg quadrant. This means we are now gently guiding users into the page, where they are most likely to be looking, and appealing to the emotive part of the brain before asking them to exert effort and switch over to system two thinking to read and operate the form.
I propose that in the current design, due to the Gutenberg principle, it will be more uncomfortable for the user (and more difficult) to get their attention away from the emotive image on the right, back to the form on the left — it is for this reason, that I believe the revised layout will be more effective.
Found this useful?
Please ❤ Recommend for others to see.
Thank you : )
