Successful self-service requires removing any friction that might get in your customer’s way. We work hard to make our knowledge bases easy to search and highly accessible so people can land right on the article that answers their question.
At that point, our job is to help them read, understand, and apply the answer. That’s where layout and page composition can make a critical difference. Having the right words isn’t always enough; they need to be comprehended. Design really does matter.
Did you know, for example, that if it wasn’t for some inventive document design work by Irish scribes in the 7th century, wewouldntevenhavespacesbetweenwords?
Redesigning a knowledge base article
To best illustrate good information layouts, let’s start with a typical “knowledge lump” document. All the information on the page is accurate and useful, but the format is really letting it down.
It’s hard to scan and unappealing to look at, and it’s likely that even people who would benefit from the information it contains would give up before reading it all.
By taking this document step by step through the principles of visual communication, we can make simple, iterative improvements until we end up with a help page that’s vastly more readable.
Contrast
Contrast just means “difference,” and it’s a basic principle of design. For our sample document, that starts with giving the text a color that stands out from the background. We’ll use a plain background, avoiding textures or images that conflict with the text.
Already, it’s much easier to read, especially for the majority of people who don’t have perfect eyesight. We’ll use contrast again as we consider headings and callouts later on.
White space
White space refers to empty space around and between page elements (like text, page margins, and images), whether it is actually white or not.
A 2004 study by D.-Y.M. Lin found that the use of white space between paragraphs and in the left and right margins increased comprehension by almost 20 percent for older readers.
So let’s add some margins around our document, increase the line spacing, and separate our paragraphs a little.
Make your text larger
The all-time record holder for most common complaint about websites is “the text is too small!” Of course your wonderful young eyes probably have no trouble at all reading microscopic text, but the rest of us appreciate something a little larger.
A good minimum font size to shoot for is 16px, although it’s the combination of font face, size, and line height that make up the overall readability level.
Use headings for simpler scanning
Break up long blocks of text with headings so that readers can more easily find just the section they are after. A heading with sufficient contrast and white space is a nice landing place for the reader’s eyes, and it can help them decide whether to invest more time on the page.
In our sample document, adding a few headings makes the overall content of the page much more obvious at a glance.
Use bullets, lists, and anchors
Identify parts of your document that can be converted from prose into bullet points or numbered lists. If you have a set of steps that customers need to follow or a few critical pieces of information to impart, those are great candidates for a list.
If your page is fairly long, consider adding a table of contents at the top. A well-written table of contents helps readers quickly understand what the document covers and allows them to jump directly to the information they need.
Extract key quotes
For quotes or important nuggets of information that stand alone (and aren’t part of a list), pulling them out of the text flow into a pull quote will make them easy to spot. In our example, we’ve emphasized the key step in the process to switch on their auto-reply settings.
Use screenshots and GIFs
Wherever possible, using a screenshot to show what you mean rather than laboriously describing it in text makes help documents more effective. In our example, we can greatly simplify our explanation by referring to the screenshot.
A good help document screenshot should:
-
Be large enough to be easily readable. You may need to crop a screenshot to keep the key information at a reasonable size while fitting into your page.
-
Contain visual context so readers understand what they are looking at. Don’t crop too tightly!
-
Be annotated where appropriate (consider labeling items if you refer to them in your copy).
The same rules generally apply for animated GIFs and videos, too.
Implementing layout improvements
Depending on the knowledge base or CMS system you’re using, many of the visual styling improvements can be made through CSS changes that will apply across all of your documents.
For structural improvements like lists and headings or for screenshots and videos, you have a little more document-by-document work ahead of you.
Help Scout’s Docs editor includes quick access to formatting basics, like bold and italic, but it also allows for instant lists, tables, blockquotes, and callouts. A little work on your part will help countless future readers to quickly read and comprehend.
Judging a book by its cover
They always say not to judge a book by its cover, but a book’s cover often gives a browsing reader critical hints about the genre, style, and topic of the book. The design helps you contextualize the content. In the same way, the design of your knowledge base articles can really improve the ability of your customers to comprehend the content.
Remember that a good document is always in service to the reader; you’re not trying to amaze them with your beautiful document, you’re trying to help them find and understand exactly what they need as quickly as possible.
It’s worth investing some time and effort to ensure your customers are reading and receiving information in the best possible format. A well-designed knowledge base can elevate your customer experience while also reducing the size of your support queue — a win-win for everyone involved.
