Today it’s all about text meeting visuals. Not illustrations – we’ll have another article on that topic soon – but how to use structuring and highlighting to guide the eye, to make text easier to skim, read, understand, and remember.
Give an overview
To start, consider an overview, like the one you’ve read just now. For some subjects and content, an overview can seem like wasted space, but think twice on whether you might need one:
- It helps your readers find out whether the page or section even holds the information they are looking for and, if yes, where.
- It also helps them prepare for the upcoming information. E.g., if they know that instructions for a specific app are coming up, they can start up the app and re-familiarize themselves with the interface before moving on.
So, for your knowledge articles and instructions, consider this:
- If your article is a little longer, include a table of contents. Ideally, this is created automatically and links to the respective headings.
- Judge whether a summary is helpful. Sometimes summaries don’t yield helpful information, e.g., on pages with a lot of data. Other times, a brief summary in the beginning of each longer group of steps can help greatly to understand what you’re about to do before following the next part of the instruction.
Break up text
Next, let’s move on to the body, the bulk of your content. This, too, can be tweaked in many ways to help guide the eye. Eye-tracking studies show how users’ gazes and attention skip along different elements of a page (typically following an F pattern). And you can help direct these skipping patterns in more purposeful ways along your content, so that readers have an easier time skimming it and keeping track of where they are.
Try to keep your paragraphs short.
Long paragraphs require more attention to read thoroughly, completely and without accidentally skipping anything. As a result, readers get tired out with longer instructions, which can lead to errors when information is missed.
Instead, try to stick to short paragraphs. This makes them easier to skim and read. There’s no single ideal length, but for anything with more than 5-8 lines on the target device, consider if you can break it up to help better guide the eye.
Relatedly, keep in mind your screen might be wider than that of some of your readers. Therefore, for you, a paragraph might not look too long; but on some readers’ slimmer devices, it might fill the entire screen height.
You can further break down long texts by not skimping on headings. They’re doubly great: They break up text for better orientation and they act as a mini-summary.
Additionally, they can be helpful as an anchor to link to, not just from the table of contents.
Lists and tables
Lists and tables also are great for breaking down longer texts, as their very format is about splitting information into smaller bits. Of course, not every information is suited to being a list or table; but if you find you’re writing a paragraph with things such as…
- Multiple conditions
- Comparable data
…try out if a list or table also works. They’re much faster to skim than paragraphs.
Not only the way a text is broken up can help guide the eye, but also the way the text itself looks. Not every writer can influence how their knowledge articles or other content will be displayed on various mediums. But if you do have control over the styling, consider these tips:
Make sure the contrast between colors, e.g., for font and background, is big enough. That ensures the text is readable without tiring out the eye and costing the reader unnecessary concentration.
You can use an online tool like Contrast Checker by WebAIM to verify. Using a tool is especially helpful as not every reader has the best possible eyesight. So don’t just judge by your own measure but use some objective input.
Next, to make your content look less cluttered and easy to read, pay attention to these points when it comes to fonts:
- Make sure fonts are easy to read in long text blocks (try not to get too wild with cursives etc. 😉 ).
- Stick to a small number of fonts overall (e.g., one for headings, one for text, one for special text such as code blocks).
Also, make sure the text and line spacing are big enough for most readers to easily read. Current recommendations for size and spacing are:
- Size: At least 16px for text-heavy pages
- Line spacing: 130% – 150%
Further, you can work with spacing between paragraphs and other elements to help guide the eye better. It’s hard to give a single recommendation for the ideal space between any sort of elements. But if a page looks a little full and cluttered, try increasing the spacing.
And don’t limit yourself to vertical spacing. It can also be very helpful to create larger margins on the sides. The whitespace makes the page less overloaded, and you are slimming down the line width of your text. As a result, you make it easier for the eye to skip from line to line fluently. The ideal value is 50-60 characters per line.
At times you also want to make important or special information stand out and thus help your readers to find it more quickly. What types of highlighting to use depends on your content, of course. Here’s a few suggestions to get you started:
|When to use||Highlight suggestions|
|The most important key words||Bold text|
|Code||E.g., typewriter font, separate paragraphs and optionally a different color|
|Right and wrong / recommended and not recommended ways||Green and red font color or small icons (like green check mark and red cross)|
|Warnings of possible errors||A warning icon or colored background (like yellow or red)|
However, make sure you and your colleagues use consistent highlighting to build trust. If different articles in a knowledge base use different highlighting, it can be confusing to the readers and it stops them from adapting your highlighting system.
And finally, consider giving a summary of the most important points. Like the overview, this isn’t suitable for every type of information. But it’s great as a final checklist and for quickly reading up on.
So, to help guide the eye in your knowledge articles, keep in mind:
- Consider a table of contents and overview
- Break up text with shorter paragraphs, headings, lists and tables
- Increase visibility with contrast, readable fonts and spacing
- Highlight important points consistently
- And consider a final summary
Is there something you’d like to add to the list? Let us know in the comments!
Date: October 2021
Author: Kris Schmidt
© 2021 avato consulting ag
All Rights Reserved.