Here’s a massive not-so-secret secret about how we observe content online: it’s just a big-ass F. Us humans may be messy bitches, but we are also predicable. That principle applies to how we look at, and interact with, websites.
Side note: This article is part of our September 2018 challenge: 30 five-minute tasks for marketing a small brand. Studio Cotton’s lovely assistant Gaby put together our project plan for the month, which I totally missed when writing this post. Turns out, Gaby had already written a lovely post on the F-Shape, so we’ve combined the best of both worlds in this ultra-spectacular F-ing article.
Take a second to think about how you (yes you, hey grrrrrl) personally navigate online, and how little thought you put into your individual actions. Need to go back to a homepage? Click that logo. Want to find help pages? Scroll right down to the bottom. On a budget and looking for a sale section? Your eyes are heading straight for that last menu link.
For decades, eye-tracking and click-tracking software have been used to monitor how we use the web. Be this out of curiosity, the pursuit of innovation, or just brands leveraging your native behaviour to get more dolla dolla, one trend remains. The F is here to stay.
What the F?
If your small brand has its own website, you need to know what the F Shape is. No, not The F Word (2005-10), the F Shape. Although, just like Gordon Ramsay, I’m here to critique your culinary website masterpiece and tell you how to make it BETTER.
For individuals whose native language reads left to right, it’s unsurprising that the most observed part of a website is near the top, on the left.
Our collective, average eyes then scan across to the right, consciously and unconsciously assessing content to make a decision.
We then jump back to the left, head a little further down, and start scanning right again. This time though, us lazy, messy, predicable humans stop around the centre of the page.
Then where are we off to? Back to that familiar left hand side. We just drew that big ass F with our eyes.
Why the F?
Remember in art or maths class when you learned about the Golden Ratio? (Don’t worry: there’s no maths required to understand this.) The Golden Ratio was employed by countless painters to plan the format of their paintings. Following this rule, they finished with extremely aesthetically pleasing images with an unconscious, almost instinctive flow.
The painters have painted shapes with lines that flow, establishing an eyeline in the picture the observer follows as their gaze is guided across the canvas.
This means the observer takes in a lot of the painting as their eyes sweep the image to the key elements of the painting, they stand in front of it for longer, and appreciate the time they have spent due to how darn aesthetically pleasing and easy-to-view it is.
Well, just like the clever painter, as an intelligent website designer, you can figure out the most pleasing, native lines viewers follow on websites and build it into your site.
I’m going to emphasise that the F-Shape is an average of all eyes, on all websites. That means a specific pair of eyes on a specific website but have entirely different focus spots, like you can see in this super sexy heatmaps from Eyequant: Does the famous F-shape pattern in eye tracking really exist?.
Not a rule, more of a guidance
The F is the most common scanning pattern. When we bear this in mind, we can choose to place our content where most eyes and more likely to see it.
Calling back to Gaby’s awesome analogy – for every artist with a great golden flow, there are 100 Pollocks farting all over the system.
I feel I need to brand myself as the lazy marketer, because working with (or against – we’ll get into this soon) the F is the simplest way to benefit from what our users are already doing, meaning we don’t need to try as hard. And I love not trying as hard.
Working with your F
Working with your F involves putting your best, most seductive, and most valuable content where eyes will already be scanning, thus maximising attention, clicks, and conversion.
If you’re reading this and run a small business website, I want you to open the homepage in a new tab (don’t close this bad boy, I need the stats). Now check out the top of your F.
This is your prime real-estate. It’s not uncommon for 30% or more of the total homepage clicks to spent on this one space, so that pish needs to be real, real good. If you have an ecommerce website, this should be your very best, most seductive promotion.
It probably shouldn’t be a slider. Now I could write a whole article about why I could happily ban website sliders. I literally just checked through our blog archive to make sure I hadn’t already done that. But simply put, if a message is important enough to occupy this sickenin’ insanely important spot, someone should not need to click to see it, or risk it just sliding away mid-read.
Now there are exceptions, but this isn’t the Sliders Suck blog post, so I’ll just add that onto the blogging to-do list.
Studio Cotton is a service provider. I want our visitors to slow down and really absorb our content. This is why our big-ass banner at the top of our big-ass F is buttonless and linkless.
At this point in the journey, it’s more important that our website visitor understands our proposition than moves on to another page.
You can follow the natural progression of your F by placing your best content on the left hand side as you scroll down. Bear in mind that the lower and right-er the content is placed, the less likely it is to be absorbed.
Consciously playing against your F
I hope that after this post is published, I don’t see a flurry of literal F-shaped websites. The biggest takeaway should be F-awareness, as there’s plenty you can do to fight against this natural scanning pattern and manipulate how your visitors focus on and interact with your content.
Take that second row of F-ness, the one where our lazy eyes can’t even make it all the way across the page. If you only place content on the right hand side, then your visitors’ fields of visions are forced to expand to take in this information.
There’s a reason why the second row of content on our homepage starts with an image on the right and text on the left. I want to keep our visitors’ peripheries wide and slow, making it more likely that they’ll take in more content.
Another phenomenal example, and one of my favourite brands & websites comes from fashion retailer Monki.
Now I don’t work with or for Monki (but at least 90% of my clothing is from their shop) but I adore how they’ve f’d up the F right here. In their second row of content, they’ve first forced the eye straight to the centre of the page with a great sales message in small text. This pinpoints the vision to a somewhat unnatural space, and then it goes all out and throws a buttload of departments that expand the width of the screen.
What kind of F is this?!? It’s no F at all, instead it’s completely breaking up our lazy scanning pattern and our eyes are scattered about the page, meaning we’re more likely to take in a variety of content.
What’s more, it’s throwing us off with sexy keywords. We’re consciously and unconsciously taking in all the clothing and accessory options and Aime is now thinking about how she definitely needs more accessories for the winter season.
Now go forth and take a look at your website. Now that you know the super scientific study results behind viewer eyeline, you should be able to tell if your site is perfect .. or if it needs a little re-formatting to create an amazing, Renaissance-painting-quality site.
Anyone with a dull, text-heavy site that ignores the F-shape is simply an idiot sandwich.