How to layout text on your website in 2021 so that humans might even read it
Pssst… I’ve got a secret for you…
You know that webpage full of beautifully crafted linguistic genius that you spent weeks creating? People aren’t reading it.
How do I know? Eye-tracking studies.
One particular study estimated that people only read about 28% of the text on a page. But we don’t need official study results to teach us this. In fact, we need not look any further than ourselves and our own behaviour. You and I don’t read all web content word for word and I’m also predicting that you won’t read every word of this article either. On our phones and computers we are bombarded with so much content every day that we have honed our scanning skills to make a quick assessment of text before committing to reading in more detail.
So why do we fill our webpages with so much text? I like to call this approach to online content creation a build-it-and-they-will-come approach, otherwise known as write-it-and-they-will-read-it.
The good news is that some people will read most of your text and at the very least, many people will read some of it.
Segmenting our website visitors
What if we were to plot our webpage visitors on a spectrum:
Let’s imagine 3 different people. Person A reads 100 words, person B reads 50 words and person C reads 75 words? How might we build a page that is optimised for the attention-span of all 3 people?
We can create personas, or alternatively there is the jobs to be done model (JTBD). Three website personas might look like this:
- Oops: “I came here by accident, oh, that’s interesting…”
- Maybe: “Kind of looking around, but not committed.”
- Scientist: “I’ve made a cup of tea, and I’m ready to study this page”
As users of a website, we may be in control of what we choose to read, but our actions are heavily influenced by the way the creator has designed the page.
This is where content hierarchy comes into play.
Newspaper journalists learn to craft ‘the lead’, the first sentence of their story that contains the most engaging content to encourage people to continue reading. The lead forms the top of the ‘inverted period’, which consists of the lead, the body and finally the tail of the story.
Similar to the way journalists structure a story, webpage content should be structured in such a way that the most important content is displayed first and the finer details are placed at the end.
Laying out your content — in 5 easy steps
Here is my 5-step guide for creating a strong text hierarchy:
1. Start with the F
Studies time and again show that people scan content in an F pattern. Structure your content with the assumption that people will consume it in this order.
2. Use visuals first to grab attention
The pulling-power of the image will determine whether your users will view the text in proximity to that image.
3. Use no more than 7 words as a headline
People start to switch off at 7 words. Think of it as your super-mini-elevator pitch.
4. Include a precis with only a couple of sentences
If you’ve convinced people to read past the headline, you are given the privilege to provide a few more words that they will read. Don’t abuse this privilege and keep it to the point.
5. Then finally the longer form content, perhaps a couple of paragraphs
You’ve convinced your reader to dig deeper and here’s where you can provide more detail. This content should be mostly hidden by default as not to clutter the page.
So how might we use image and text hierarchy to put these 5 steps into practice?
In the below example I’ve mocked up a wireframe to show how position, text size and weight dictates the hierarchy of the text.
Have I been wasting my time writing so much content?
Not at all! In fact, this article is not about telling you to delete ¾ of your precisely-crafted copy. Rather, it should be organised in a hierarchy that better suits the medium where it is being consumed. If you are able to effectively adapt your content for the web, then it should result in people reading more of your content than they did previously. You could use ‘time spent on page’ as a metric to measure if people are reading more of your text.
