If readers do not so well receive articles and blog posts, it does not have to do with the content alone: many websites neglect the reader-friendly design of their jobs. Sometimes internal constraints play a role. Sometimes awareness is simply not there.
“”Web design is 95% typography”” – Oliver Reichenstein, Information Architects ( source )
Why is that important?
And that’s important because readers are almost always on the go in some form online. Either you don’t have time to read the post. You may have spotted him on the social web by accident while doing something else. Or they are sceptical at first whether the effort is worthwhile at all.
Also, the next distraction is just a click away. Sometimes it doesn’t even make a click when a new notification comes in, or the colleague wants something. Already the attention is gone.
In this respect, you fight for the attention of your readers with every sentence, with every paragraph, with every text element. If this does not work, then they have called your contribution, which means you can credit a page view. But these users may not subscribe to the newsletter, download a white paper or recommend your post on the social web as hoped.
In the following, we will now look at how you can ensure that your content is happy to be read and that it is more successful all-round just using a reader-friendly design.
This contribution is the third part of an unofficial series.
Enough the preface:
Point 1: improve legibility
contrast
One reason why texts can sometimes be difficult to read is the lack of difference between the writing and the background. In return, however, this should not tempt you to bet on a full black and a pure white. Then that’s too much of a good thing. Accordingly, many pages rely on a dark grey font and sometimes on a very light grey background. That reads well and also looks elegant. If you want to know more, you can read a W3C document here.
Please note with these and other tips: Not everyone sees your website as you do. Your users have different devices, different displays. And the differences can often be enormous here. So always plan a specific scope for this.
Font size, line spacing, line length, sentence
If your designer has done everything correctly, the font size should be individually adjustable by the user and aligned on the screen. Therefore, the standard size of the font should be chosen so that most people immediately find it pleasant. Sixteen pixels are often used as the starting point.
The line spacing, in turn, largely determines how easily the eye can find the next line when reading. If it is too tight, it can easily slip and then become irritated. Also, the text then looks like the famous lead desert, and some may get out before your article even gets a chance. If the distance is too far, it is also unconsciously tedious and simply does not look good.
As a rule of thumb, the line spacing = font size x 1.5. You have found a good measure for the body text. However, this value can also vary depending on the font! It will usually be between 1.2x and 1.8x. Another rule of thumb for this: put an “E” on top of another if it fits in the space between the line above it.
Different rules apply to paragraphs, sub-headings and other elements: Ideally, they should be given more freedom to support the visual structure of the text. At the same time, make sure that the context is still clear: a subheading should usually identify the next section of document. Accordingly, it should be a little closer to the following text and keep a little more distance upwards.
Another frequently mentioned adjustment screw is the line length. Björn Rohles writes in his standard work “Basic Course Good Web Design” (affiliate link):
If the line lengths are too short, as is often found in tabloids, our eyes continuously jump back and forth – there is no reading pause. An optimal line contains between 50 and 80 characters. A good rule of thumb is to start with about ten words per line. In lines that are too long, the eye quickly loses its grip when reading, and the reading experience becomes worse.
It should also be borne in mind that the line length also adjusts depending on the screen size of the device.
In the “sentence” of the text, the “left-aligned fluttering sentence” is usually selected digitally. In other words, the lines on the left all start in the same place, but the right side is uneven. The “justification” is often used in letterpress printing and in general in print. Both the left and right edges are even. That looks nicer but can cause problems online. Because especially when long words are not automatically separated, significant gaps between the words arise instead. These holes not only look ugly but also make reading difficult.
This problem applies especially to German-language texts with their sometimes extra-long words …
font
Another important choice is the font. Nowadays you can find a large number of free fonts that you can embed and use on your website. That can give your side a distinctive face. However, you can also go wrong very quickly here.
Because fonts are often intended for specific fields of application, some are suitable for posters and headings. Others for running texts. Still others for footnotes. Some are optimized for paper printing, others for the screen. And all of these differences have very concrete effects.
Attention: If there is talk of a “display font”, this does not mean a monitor. These are fonts or font variants for broad headings and posters!
Typefaces with “serifs” are often used in traditional letterpress printing. Then the letters have small decorative elements at the end of the lines, which are also intended to increase legibility. We here at SwaCash use such a serif font because we like the classic look and we want to remind us of printed magazines and books visually.
However, sans-serif fonts are used on the web, since they are often displayed better on monitors. The small serifs were often blurry, at least in the past, because the displays were so blurred. That has changed in the meantime, and the resolutions are getting higher and with it, the picture ever sharper.
It is generally recommended not to use more than three fonts at a time. And these should also be coordinated. Otherwise, this alone makes your site look unprofessional and restless. Björn Rohles (“Basic course on good web design”), already cited above, considers two to be sufficient and advises: “You can create variety through different variants of a font, for example, italic or bold font styles.”
On the web, there is another reason to limit the number of fonts: they have to be loaded first. If this happens from an external source, this can extend the loading time of your page. And here, as is well known, every (micro) second count. In other cases, the page may already be displayed, but the fonts are not yet loaded. Instead, one of the standard fonts is used.
Without going too deep into the topic of loading times: not only the number of fonts but also the number of variants of the same font have a definite impact.
By the way, skewed fonts look good depending on the type, if they are designed as “italic”. Long texts are often difficult to read. We use this, for example, for the book in our info boxes to make them stand out even more clearly from the rest of the article. Since the documents in these boxes are usually only short, the slanted font is generally excellent. However, there are always borderline cases.
Text elements
Readability also means that different text elements are recognizable, and the relationship to one another is evident. Specifically, this applies to the heading and the subheadings, for example.
The size of the headline should stand out clearly. The intermediate lines, in turn, serve to structure the text. Accordingly, they should still be significantly more significant than the version, but also visibly smaller than the main heading.
Remember that the “weight” of the font also plays a role in how important we perceive it: A bold subheading catches the eye much faster than one in a slim (light) font style. Use both means to make the hierarchy of subheading sizes clear to each other. For example, the difference between the h2 and the h3 can be primarily the font-weight, while the h4 is then significantly smaller.
A special feature of our site is that we highlight the first paragraph with a larger font. We use this beginning as something known in journalists as “”lead””, “”scriber”” or “”leader””. This is also an element that we adopt from printed magazines. This paragraph gives you an overview of the topic of the article and should ideally make you curious. As it can be read separately from the rest of the text, it is emphasized by the font size and also separated by the article image.
I describe below that this article image can also be a bad idea.
Accessibility
When making your decisions, you should also consider the barrier-free design of your text. For example, users should be able to adjust the font size themselves, because this is important for people with visual impairments. High contrast also helps.
Also, do not rely too much on colour effects in order not to disadvantage colour-blind people. For example, it has become common practice to no longer underline link texts. It looks more beautiful, but at the same time, the links are not always quickly recognizable.
You should only be aware of the effects of such decisions at all times. And of course, the topic of accessibility is much bigger, but it would go beyond the scope of this article.
Point 2: Avoid distractions
As mentioned at the beginning: For most readers, a brief irritation is enough to tear them out of the text. Therefore, you should avoid distractions and disturbances as far as possible.
Sidebars
As you can see to the left and right of this text on the website, you see nothing. We deliberately do without sidebars. A few years ago we had a column on the right, which, for example, drew attention to our social media channels, as well as the newsletter, the new edition, the latest posts, latest comments and, and, and …
Many users have now gotten used to ignoring these sidebars. They have learned over time that they have nothing to do with the content of the article. In this respect, you can only warn against placing important information such as navigation there!
This ignoring, however, requires a specific mental effort, which is lost when reading the text. This has increased the likelihood that the person will jump off. Also, something interesting may be discovered with a quick look in the sidebar – the user has already clicked away. But was that your goal?
Of course, we are in a luxurious and rare position that we can view the satisfaction of our readers as the most important goal. We don’t need the sidebar, for example, to place advertising there, because we earn our money primarily through our subscription.
But we also have foregone something: After we removed our right column with the redesign, the number of clicks per visit initially fell significantly. We experiment with balancing with other elements, e.g. under the articles. And in general, we have a very long-term view of this website. We accept disadvantages in the short and medium-term.
Animations and advertising
Another problem is rooted in one of the oldest parts of our brain: we humans are conditioned to recognize movements and to react to them. And right out of the corner of your eye! While this was useful in the past to discover the sabre-toothed tiger creeping up on us, today we see one thing above all on the web: advertising.
Perhaps you have already experienced that you wanted to read an article. Still, this one blinking, twitching, animated element somewhere else on the page (or even in the middle of the text!) Made this almost impossible for you. I had to cover such ads by hand …
Of course, your site may not survive without such annoying ads. In return, you should not be surprised if the number of ad blocker users increases as well as the bounce rate.
And at this point, we certainly don’t need to say anything about automatically playing and clearing videos. So far, it should be clear that they are a plague. Some browsers now deactivate them by default.
Another fashion phenomenon is small notes that are flown into the browser window at the bottom when we near the end of the text. It is more critical to the website operator that we click there than that we read the article to the end. Because our concentration is naturally disturbed and the reading flow is interrupted.
But it doesn’t have to move at all to bother us and tear down the reading experience: full-surface advertising formats can be found even on high-quality pages. The entire background of a post is misused as an advertising space. Screaming colours, urgent calls for action, pretty faces: all this may help your advertisers, but not your article.
Overlays
Another bad habit of the web is elements that overlay the text. Sometimes they do the same thing when you go to the page. Others are nastier: they wait until you start reading to push yourself to the fore.
Because a simple overlay window is not bad enough, some pages hide the entire post! At that moment, you are not only out of context, but it also is often not clear what happened at all. Did you accidentally click a link? Have you landed on a scam site that wants to put malware on you? Is the browser broken?
And because these site operators are only concerned with their success figures and not with the users of their site, “dark patterns” are also used in the design. In essence, it is deliberately obscured how to get rid of the overlay without performing the desired action. The “X” for closing is then placed as small and inconspicuous as possible outside the field of vision. Or you have to click on a passive-aggressive link à la: “No thanks, I don’t want to be more successful than my competition”.
Do these overlays and dark patterns “work” in design? Definitely. They even use great role models like Amazon on their website. Are they easy to read? Are you positioning yourself as a high-quality provider? Is your reputation increasing among readers? Certainly not.
Point 3: optimize the reading flow
But even if you have a perfectly readable layout and altogether avoid distractions, the danger is not yet averted. Other elements belong to every text and can lead to a jump.
Photos and illustrations
One can undoubtedly accuse the SwaCash blog that it is sometimes too dull and very text-heavy. Just look at this post! But that is undoubtedly true: because every picture, every illustration can pull a reader out of the context of the text. In this respect, we entirely dispense with decorative prints that have no relevance in terms of content. The only exception here is the supporting article image.
In general, it is also recommended not to interrupt the text with pictures. How we handle it at the beginning of a post, for example, is therefore wrong. We do this for other reasons anyway: First, we want to optically separate the “marker” from the rest of the text. On the other hand, we want to give an excellent first impression.
Some pages go so far with the first impression that you only see the article image and the heading and have to scroll down for the actual text. It can look beautiful if you have lovely pictures. However, this can irritate and discourage users. If you then have a conspicuous advertisement above this element, the whole thing often turns into a search game: Where is the article that I wanted to call …?
If we have images in the text at SwaCash, they are often column-wide. However, we make sure that the pictures are placed where they make sense. Ideally, the writing itself leads over to the photo or illustration. This makes this element part of the total contribution and is not a foreign body that interrupts the flow of reading.
Nevertheless, I don’t want to hide the fact that the first impression of an article is often essential. And if you then see a lot of text and hardly any pictures, this will put some readers off. In this respect, we certainly lose potential because we are very minimalistic here.
On the other hand, our posts are read differently than others. For example, our subscribers can download the issues in three e-book formats and then read them on a device of their choice. We also assume that our articles are stored in services such as Pocket so that they can be read later in peace. Anyway, you rarely read 2,000 words or more between two clicks.
Text design
At this point I have bad news for you: very few users read your texts word for word like a novel. That may hurt your pride now. But you should still consider that. By the way, many people don’t even read books like novels and skip boring or seemingly irrelevant sections …
And this affects even more users than you might think: Because with longer contributions, many have made it a habit to skim through the “complete work” in advance. This first, fleeting impression is used to decide whether the effort is worth it.
To do this, scan the text for exciting elements:
- Subheadings,
- Captions,
- Text highlighting,
- the first few words of the paragraphs
- and the links.
They should all convey the content of the article as well as the material itself – in a condensed form for hurried readers. They should also encourage everyone to step into the text. This can be in place, or maybe it is so convincing that the person scrolls up and starts at the beginning.
Of course, it is not.
So make sure that sub-headings reveal something about what it is. Remember, at the same time that an intermediate line is not part of the body text. They serve as an orientation but are not necessarily read along. Unclear headings that only become apparent after reading the book can be exciting. It depends on your readership and what you want to convey. With a guidebook contribution, you should see it more like an outline and not as an element of your artistic-intellectual self-realization.
Paragraphs in turn also serve to structure the content. You take a mental break when a new article comes. And, as mentioned, it also serves as a potential entry point.
Since the attention span is supposedly so short nowadays, some go over to dividing each sentence into its paragraph. This may be very interesting as a stylistic device from time to time. And there are certainly text forms, topics and target groups where this works well. In general, I think that’s far too extreme.
A related form is a list – ordered with numbers or unordered with neutral list items. They serve, for example, to explain several points in an orderly manner. They can also contain work steps. Or you can use it to describe and compare terms.
Lists are also very noticeable and are taken into account when skimming over the text. They are mostly indented and have some space up and down to differentiate themselves from the rest of the document.
It is highlighting remains. For example, the word “emphasis” in the previous sentence is “bold” so that it is also noticeable when it is scanned. And it also signals to you as a reader that a new topic is following.
Another highlight is slanted, which is usually used for emphasis. Some use it to identify technical terms or foreign words.
Ideally, orient yourself on how other media in your area handle this.
Underlining is instead not a highlight, because it is still associated with “link”, even if that hardly happens today.
Left
Speaking of links: they are a fundamental element of the WWW. They provide additional information, link content and are very important for both users and search engines.
At the same time, you have to be aware that every link is a potential-jump point. As soon as a link appears, the reader must decide at the moment whether it should be clicked or not. Among other things, it must be clear what is actually behind the link: where do I land after the click and what do I find there?
Only then can you decide whether the click is worthwhile now, whether you will return to it later or whether you will ignore the link altogether. This decision takes place in a split second. But of course, it distracts us from reading. It interrupts our reading flow. And that can lead to losing the personal context of the text that you have just read – and possibly taking this moment as an opportunity to close the browser window. Or you click on the link and completely forget what you wanted to read …
There is the bad habit of linking individual words on the net without the meaning or purpose of the link becoming clear. Sometimes it happens out of ignorance. Sometimes the authors find it funny or smart – because after the click you (hopefully) understand what it meant.
It can be exciting and entertaining, or it can be downright confusing and annoying. I generally prefer clarity wherever possible. But that also depends on the style of the page and the target audience.
Also keep in mind that as already mentioned, many users only skim your articles! Words that are linked individually catch your eye, but do not give you any help regarding the content.
Here at SwaCash, we try to make all links as possible to “speaking links”: Even if you look only briefly, the purpose and purpose of the link should be clear. It doesn’t always work. But that’s our goal.
Infoboxes
In specialist books, you will often find boxes in the text or next to the text that gives tips, explain terms or keep an anecdote ready. This loosens up the version and provides exciting scraps of information when browsing quickly.
However, books have it a little easier than online texts: We usually buy them consciously and also consciously pick them up. Perhaps we only discovered an article on the web by accident. In this respect, what is mentioned here comes into play again: Such information boxes can cause readers to jump off.
In this respect, you individually decide which information you want to convey in this way. They should not be necessary to understand the body text. Also, these boxes should be designed so that their character is evident. At that moment, the reader can quickly decide whether to pay attention to the table or ignore it and skip it.
We use such boxes, for example, to draw attention to our newsletter. For us, this is a compromise: we know that we are interrupting the flow of reading. Perhaps some will even think that the contribution has already ended. We take this risk because it is essential for us to win a readership for our Monday newsletter.
At the same time, the newsletter is not essential enough to annoy our users with an overlay.
Final word
As mentioned at the beginning, we at SwaCash are in a particular situation in many ways. We don’t have many constraints that have other sides. In this way, we deliberately do without classic online advertising. This gives us a lot of freedom in the design of the page, and at the same time, it reduces the number of distractions enormously.
Of course, others are different. Since money has to come in through advertising, or everyone in the company would like to place their offers in the sidebar, which seems indispensable.
There is a compromise to be found. And as mentioned in this post: We are not free from it either. It should only be clear to everyone involved that many additional elements have a price. And that is paid for by the contribution on the page.
