Extending the DDM modules in Liferay with custom field types isn’t that easy. This blog post is the result of our attempts...
How to write scannable web content for online readersStijn Schutyser
Click here to get to the checklist right away!
People don’t really read online. Instead, readers ‘scan’ web content for useful bits and pieces. If you truly want to cater to your website’s visitors, you should make their lives as easy as possible. How? By making your texts as scannable as possible and making it easy for your readers to find the information they are looking for. In this blog post, I’ll
- tell you the best ways to do that,
- give you some concrete tips from our own web designers and copywriters,
- and give you a checklist to see whether your website is as scannable as possible.
Paper vs. screen
If you write texts for websites, you should probably take into account that your reader reads very differently on a screen compared to on paper. Like I said, readers scan a lot more on tablet, smartphone and pc screens. If they do decide to really read something, they do so 25% slower compared to reading on paper. Reading tests also revealed that reading on a screen is more tiring and that readers tend to remember less from what they’ve read.
Use screen fonts
Screens and paper handle the legibility of letters differently. Microsoft fonts such as Verdana (instead of Arial) and Georgia (instead of Times New Roman) are designed specifically for screens by Matthew Carter. The Dutch Lucas de Groot designed the Calibri screen font for Windows Vista. For your online writing, it’s best to choose a font that has been designed for screens instead of paper.
Define what the most important information or task is
Why do people visit your website? Check your website statistics (through Google Analytics, for example) or log files and think about the following questions:
- How do people navigate to your website? Referral, organic search, social media, …?
- What are your most popular pages?
- From what pages do people leave your website? Where do they stop reading?
Find out what the most common pieces of information are that visitors are looking for on your website and make that information easiest to find. For example, people usually call a school to tell them their kid feels sick. The school’s homepage might include something like this to cater towards their audience then:
This is much more informative than a homepage that starts with ‘Welcome’, which doesn’t really help out with your SEO (Search Engine Optimization) either. It’s important that every single one of your web pages displays the call to action as clearly as possible, e.g. click a button. Visitors want to get started immediately, so make the most important information or task stand out.
Make your web content as scannable as possible
The internet is a quick search medium, pretty neat for whoever needs to look something up quickly. But ill-considered web content gets lost quickly, both in search engines and in the reader’s mind. More than on paper, the reader needs short pieces of text, titles and white space.
A title summarizes a whole paragraph in just a couple of words. Your titles should be informative and include the most important information. Something important is of course what the reader thinks is important or what they are looking for, not necessarily what you think is important. This provides the reader with structure and makes your text much more scannable.
Other significant information should be in
- photos and captions,
- short paragraphs,
- buttons and links.
You can also use bullet lists like the one above. Arrows are particularly useful for highlighting something important.
Numbers in digits work better than numbers in words. To make your web content more scannable, write 100% instead of one hundred percent. Numbers are more striking than words.
7 tips from the ACA web designers and copywriters
- Limit your web page length to 3-5 screen lengths
If your web content is longer and all information is relevant, consider altering your website’s structure and adding more web pages.
Web surfers look at the left side of their screen for 70% of the time. A visitor glances over your web page roughly in the shape of an ‘F’: they start at the top left, then look at the top right, go down from the left and next glance at the right again somewhere in the middle (see heat map to the right). It’s worthwhile to put the most important information at the top left of the page and less important information towards the bottom right of the page.
- Write your web text from short to lengthy
The first paragraph should be the shortest. The reader will only continue to read the other, longer paragraphs if this one is interesting enough.
- Mind the imagery
Pictures, hyperlinks, bullets, … Provide one absolute eye-catcher and at most 7 visual accents per web page. Take the text-to-imagery ratio into account and the fact that text to the right or under a picture gets read much more than other texts.
For paper, it’s black on a white background. On a screen, however, this is too taxing for your eyes. Dark grey on a white background is a much better option.
- One line should include 75 symbols or less, including spaces
A sentence should never be smeared over more than 2 lines. The amount of lines per screen length should be 23 or less. A line should contain about 75 symbols or less, which comes down to about 12 words per line.
- Links should tell readers what they do
Don’t use ‘Click here’ links, but rather use ‘Click here to learn how to write reader-friendly emails’. Use buttons for actions like searching and registering, and hyperlinks to navigate to other pages.
This is a lot of information to take in at once. That’s why we’ve provided a checklist below, so you can easily see if you’ve taken all the steps to make your web content as scannable as possible.
If you’d like to read more about writing (and designing) for the web, I recommend Steve Krug’s Don’t make me think! A Common Sense Approach to Web Usability.