What’s the difference between writing for the web and writing for a magazine? There’s at least five main differences. Two of the most critical relate to scanning and heatmaps.
Why readers scan (not read) webpages?
On the web, we scan pages, posts, and tweets.
We don’t read every line word by word, unless the writer is clever and breaks up the text fast – like I’m going to do:)
We scan text for three reasons:
- Find what’s we’re after
- See if it’s interesting
- Decide where to go next
Let’s take a second look at this, because it’s worth examining.
When people come to your webpage, what do they want to do?
I’d say they want to:
- Scan the main sections, (e.g. hierarchy, menus, images etc) and determine what it’s about
- Research shows they stay for as little as three seconds before deciding where to go next. In other words, you have less than a heartbeat to persuade them to stay and continue browing.
- If they decide to stay, it’s the content on the top (usually left) part of the screen they read first.
Because westerners (people, not the movies) are trained to read from…
- …left to right and
- top to bottom
Designing content to be scanned and read
So, how can you encourage readers to stay on your site that little bit longer?
Here’s a tactic that works:
- Write headlines that combines a benefit with an emotional response. Don’t focus on either heart or heart. Try to appeal to both.
- Keep the headline under six words.
- Add a summary under the headline. This helps the reader understand the context of the article, i.e. where am i?, and hopefully to read onwards.
- Use transitions to carry the reader from the summary into the body of the article. How? Ask questions, make a statement, suggest what’s next or create a little controversy.
Developing Content based on Heatmaps
This brings us to ‘heatmaps’. In simple english, this refers to a ‘map’ which shows where readers look most on pages.
The areas they read most appear in Red.
For you, when developing web content, this means placing the most critical pieces of content…
- Call to Actions
- Primary Links
…in the red zones of the heat map.
If 90% of your readers are focussed here, why place these links elsewhere? You’ll get no clicks anyway.
- In sidebars, e.g. banner ads
- In large blocks of text and
- Below the fold, i.e. you have to scroll down to see it
…are rarely examined.
The Two Second Eye Tracking Test
The good news is that you don’t need expensive software to test your site’s content. Here’s a low tech way to see your content the way new visitors to your site do:
- Open your website on a laptop, not a large monitor.
- Sit back (don’t lean in, they don’t).
- Squint your eyes and look at the page.
What do you see?
If you’re honest, you’ll see a banner, your logo, and maybe the title of today’s article.
Now, keep squinting… and find the most important call to acton on the page.
- Can you see it?
- Does it stand out?
- Do you feel like clicking on it?
How to write content reader want to click
That’s the bottom line, right?
Ok, here’s how to do it.
- Write short headlines.
- Use plain english. Avoid puns.
- Lead with a benefit, such as How To Reduce…
- Include a short summary.
- Use bullet lists to break up the text.
- Use sub heads, e.g. H2, to format the page.
- Use images sparingly. If so, add a caption.
- White space helps text breath.
- Avoid cool fonts – use industry standard fonts
- Use slightly larger than normal font sizes.
- Use a limited color palate.
Don’t be too hard on yourself. Developing web content looks easy until you test its performance. Try and optimize it by 1%. Tricky, isn’t it.
The key to developing clickable web content is to 1) first understand how people read on the web and 2) develop scannable content based on these behaviors.
What have you found?
Have you noticed that readers scan pages faster than they used to? What type of content gets the most clicks? Where do you position images?