How website design can help an event marketer capitalise on basic instinct
Before working in events, the name ‘Guttenberg’ would only cast my mind back to a certain Hollywood actor who rose to fame in cult classics including; Three Men and a Baby, Cocoon, Short Circuit and of course the Police Academy franchise.
Nowadays, Gutenberg makes me think of cereal packets, the letter ‘Z’ and about how utilising human instinct should be in the weaponry of every savvy event marketer. Here’s why.
We all are hardwired to do things without thinking. Take stepping back out of the road for example when we suddenly see a speeding car approaching. There was no deliberation, stepping back was instinct. Our instincts not only stop us from becoming roadkill, they also help people process everyday information without thinking about it - and this is where the Gutenberg Principle is a marketers best friend.
The theory is that on average, most of us start looking at a website page from the top left and move right and then zig zag down the page furniture in a ‘Z’ shape, which is an instinctive path called ‘reading gravity’.
This Z shape creates an uneven distribution of attention on certain parts of a webpage, meaning some areas hold more value. So when designing your website following the Gutenberg Principle is a great way of capturing your visitor’s attention.
Gutenberg divides the page into quadrants. Readers spend the most time looking at the top-left (the primary optical area) and bottom-right (terminal area). We recommend putting your logo and key information in the top left of the page and then using the top or bottom right for your CTA.
The Four Gutenberg Quadrants
Primary Optical Area
The higher left portion of the page is where the user’s key focus will be. This is why a cereal brand will usually have their logo in the top left of the package. This is where eyes will
automatically focus regardless if the user is scanning for something or wanting to read.
Strong Fallow Area
The reader will then move from left to right across the top of the Z, making the right hand corner of the page a strong visual area, although not as strong as the primary optical area.
Weak Fallow Area
The lower left portion is the blind portion of the Gutenberg Diagram - the weakest selling point of your webpage. Although readable, the user will not give much importance to content in this area of the page.
A reader's instinctive scanning rhythm will usually take them to the bottom right quadrant of a page. This is why it’s perfect for call to actions to be in this area because they’re the last thing users need to see to take action. This makes the fourth quadrant area the best place for call-to-action such as buttons, links, forms, video, etc.
Remember, if your show is based in the Middle-East, your audience may mostly speak one of Hebrew, Arabic or Urdu where they read right to left, so the Gutenberg Diagram is reversed.
When Gutenberg Principle is a BAD idea
If you have a website page that is very text heavy with big blocks of written content, the Gutenberg pattern will fall flat as visitors will get lost in the content and could lose interest in what you are trying to say or sell before they reach your CTA. If you need lots of written content on your CTA page then the F Pattern is for you.
The F Pattern
Most of us are time poor and because of this, we have become accustomed to speed reading an article to see if it is of interest to us. While lots of copy makes the Gutenberg ‘Z’ pattern ineffective, the F (for fast) Pattern is the perfect design theory to follow.
The F-Pattern theory is based on the way our eyes move when we read an article online. In only seconds, our eyes move at speeds across website copy scanning the page in an F shape order. First of all, a web page visitor will first read across the page (left to right) - the top of the F, making your opening line of messaging all important.
Next, a viewer of your webpage will scan down the left side of the screen, looking for points of interest in the copy. When they find something of interest, the reader will scan across in a second horizontal movement that typically covers a shorter area than the previous movement. This is the lower horizontal bar of the F Pattern.
Finally, users scan down the content’s left side which is a good place for your CTA.
Not sure if you are a Z or a F type of website? Then like Steve Guttenberg assisting citizens in Police Academy, we are here to help. Take a look at our Attendee Growth Services for more info on how we can help or email us at firstname.lastname@example.org and we'll chat it through with you.