I’m going to state something entirely predictable here – people care about image. Image is everything and if your website doesn’t follow suit you are, at the very least, in for some flatulent traffic with a bounce rate that makes Tigger look like a couch dweller.
Your visitor finds your website visually appealing due to two key factors. It’s a combination; not one or the other. Appearance and structure.
Eye Tracking Studies By Jacob Neilsen
There’s a huge amount of science behind how a visitors eyes track a website and bigger advertising minds than yours or mine have come up with, if not a winning formula, a guide on how things should be done. In fact, this sin’t solely the preserve of the internet; the same principles apply across print media.
The science of eye tracking studies
The average human being follows information by tracking the letter ‘F”. A researcher named Jakob Neilsen made in-depth eye tracking studies and discovered that we follow the content of a typical web page in an F shape, which when you think about it, makes perfect sense. It’s the way we read a book.
He produced heat maps that show this process in action (not sure how – probably gaffer-taped thermal cameras to their eyeballs) and although not pixel perfect, it describes this shape.
What does this tell us about how WE should build a websites? Thinking logically, here we go:
The most pertinent information needs to go across the top. This is the first point of contact for the eyeballs. Coupled up with the internets attention span of a child, this is where you’re going to get your message in – enticing headlines, a reason to keep reading. Sumptuous headlines and tag lines.
Reading across the page, the right hand side would be the best place for your call to action – which kind of makes you wonder, how well do relatively spartan web pages do in regards to this? I’m as guilty as anybody – we’re maybe a little too minimalist on our front page. Rethink time!
Above or beyond the fold?
Personally speaking, I think everyone takes ‘must be above the fold’ a little too seriously – after all, the fold is a damn sight shorter across a mobile device and people DO scroll; it’s one of the first learned behaviours for a web newbie. But regardless, your most important information needs to be at the top, and you don’t need me to be telling you that. At the same time, don’t cause clutter; retain whitespace wherever possible.
Think back (just a few weeks!) to when Google Authorship was still alive and kicking. Go look at google, and imagine all those thumbnails down the spine of the imaginary ‘F’. Now imagine being the first in the row; think how much extra traffic they were getting.
A unique, beautiful image will grab the visitors attention and drag it out of this F shape. This is where user testing comes in – do you want it dragged out, or will you gain more CTR if you readopt the layout to the eye tracking? Jury’s out!
Steering the user
What separates us from the apes? Other than society and civilisation, not a great deal! Body language pays a HUGE part in influencing our reactions to each other. If the person sat in front of you looks to his right, your eyes will follow his gaze. Here’s a great example of this – we instantly look at the same place the baby is. Wouldn’t this be a FANTASTIC place to sit your headline and a short, snappy paragraph?
Unique layouts may be damaging your bounce rate
In particular, I’m thinking of those odd little examples of horizontal scrolling and the more extreme examples of parallax scrolling. How can you describe the eye tracking shape with extreme layouts? Couple that up with the attention span issue and you’ve got a fairly good chance of putting people off.
Testing your own website for eye tracking
Lots of expensive eye tracking solutions exist, well out of the budget of the average small business or blogger. However, a rudimentary solution does exist in the form of Google Analytics. In-Page analytics (an option to be found under ‘behaviour’) builds a live click map of your website. It’ll show you the places within a particular page that people are clicking. Use this and if you see any odd behaviours, adjust to suit!
How your eyes move on a web page
A fantastically detailed infographic that shows the in’s and outs of eye tracking on a website.
Why not try out some of our other articles?
Beating the Google mobile search results algorithm update
Why the shift in emphasis on mobile search results? In the old days, you had ...read more
Change the Foundation Topbar Breakpoint in SASS
As standard, vanilla Zurb Foundation runs out of the box at a breakpoint of 741px ...read more
6 Reasons Multiple Websites Are Killing Your Business
I was recently approached by a potential client, very much of the ‘old school’ who ...read more
Redesign Your Website
When it comes time to redesign your website, it can seem like a daunting task, ...read more