8 tips to improve your knowledge base design

If you’re building a knowledge base for your users then you’ll need to think about the design principles behind it. Your knowledge base is much more than just content and words on a page – the design consciously and unconsciously influences how users react to your knowledge base and contributes to the user experience. 

A well-thought out design can make the difference between users who casually visit your knowledge base and drift away without getting the help they need, and users who benefit from the design principles in their search for answers. 

1. Implement a responsive design

Users will be coming to your knowledge base on all sorts of devices, including smartphone and tablet. You need to allow your customers to self-serve from wherever they happen to be and that’s why you need to make sure your site displays correctly on different devices. 

A responsive knowledge base design offers a better user experience no matter whether a customer is accessing your site on their laptop at home or waiting in line on their smartphone. Search engines also rank sites with a responsive design more highly than those without.

2. Make your site accessible

When designing your site, make sure that is accessible to those who are using it with assistive technologies, as well as those with other cognitive needs. 

Make sure your site is keyboard-friendly and works without the aid of a mouse. Many assistive technologies rely on a keyboard for navigation so all of your site's major features should be accessible using only the "tab" key. 

When inserting images into your knowledge base ensure that they all have alt text – screen readers will read this text in place of the image so you need to write something descriptive in this field. Alt text will also help with SEO. 

Make sure you have enough contrast between the colors you are using on your knowledge base to help those who are visually impaired. You need to make sure your text stands out against the background. 

Also, don't forget to use descriptive headers in the body text of your content. Clear headers help screen readers to interpret the content more easily. 

3. Display your navigation prominently

Firstly, you should focus on designing your navigation well because this is your knowledge base users’ primary activity. When users hit your knowledge base, many of them are going head straight to the menu to browse through your content in search of answers. 

In KnowledgeOwl, we have a left-hand navigation menu and also display our categories in the main body of the page. Customers have a choice for how they search for information in our knowledge base. 

No matter what page a user visits in our knowledge base, the left-hand navigation is anchored to the page so the user can always return to the menu if they don’t find exactly what they’re looking for. 

4. Optimize for readability

Secondly, when designing the look of your knowledge base, make sure you optimize it for readability, to ensure your users can effortlessly absorb your content. 

Large amounts of text can be off-putting for users. This means using an appropriate font size, and breaking up your walls of text with bullet points, numbered lists, headings, call-outs, and more. 

Make sure you provide the right amount of space between lines of text so your words don’t look too condensed. Avoid using all capitals anywhere in your knowledge base because this is difficult for some people to read. Don’t underline text in your content – save underlining for links. 

5. Use color to guide your users

As we mentioned earlier, it’s good practice to use strongly contrasting colors for the text and background in order to increase readability. This means black or dark grey text on a very light background, such as white or pale grey. 

Brighter colors appear to be closer to the human eye, so you can use them to add depth to the design of your knowledge base interface. 

Choose a design with a paler background color and a bright, bold color for highlighting key elements such as buttons. Keep your use of color consistent throughout your design to reduce cognitive load for your users. 

Ideally you want to use complementary colors to make sure the design of your knowledge base is visually appealing. 

6. Prioritize the visual elements

A picture is worth a thousand words, and this is never more true than in a knowledge base. People process images 60,000 times faster than words, so if you have the budget and time you should invest in this crucial part of your design.

Design your knowledge base to make the best use of visual elements such as images, videos and screenshots, to support different types of learning styles. 

Visual hierarchy refers to how designers arrange visual elements on the page to draw attention to some aspects. Here’s a list of characteristics that designers can manipulate: 

• Size – users notice larger elements more easily.

• Color – bright colors attract more attention than muted ones.

• Contrast – strongly contrasted colors are more eye-catching. 

• Alignment – elements that aren’t aligned stand out more. 

• Repetition – repeating styles can suggest that content is related. 

• Proximity – elements that are close together seem related.

• Whitespace – more space around elements catches the eye. 

Pay attention to these rules when designing your knowledge base, and use them to draw attention to some aspects of the site. For example, make sure you have enough whitespace around your buttons and that your text has enough contrast. 

If you compare the spacing on a web page to a physical space, failing to pay attention to the positioning of the elements, and containing too many or too few elements, will confuse the user. 

If there are too many elements to your knowledge base pages, such as big menus and unnecessary buttons, this will cause more mental strain. Users will get confused and give up on using your site. 

If your knowledge base has too few elements, this will also be confusing as there will be nothing to signpost the user with what to do next. Your pages will end up looking seriously bare and users will wonder why you created the site in the first place. 

Try to balance your use of white space with your other visual elements to create a seamless experience for your users.

7. Have a prominent search bar

Search is one of the most important features of their knowledge base. While few would forget to include a search bar, you should think about making it a key part of your design. 

Take a look at Wistia’s knowledge base. You can’t miss their huge search bar as soon as you land on their homepage, and the user definitely knows what Wistia wants them to do. Notice the highly contrasting use of colour that we mentioned in tip one. 

The best knowledge base designs include a search bar front and center on the homepage, and ideally uses predictive search to guess what content a customer is looking for. 

8. Match your company branding

It’s important that your knowledge base branding matches your company’s brand so that your customers know it’s ‘official’. Don’t just rely on wording to tell your users that the knowledge base belongs to you, since most people don’t actually read much online. 

You should match your company colors and fonts in your knowledge base but also remember that a knowledge base is not a marketing site. Some companies opt for cooling greens and blues to calm down irate customers who visit the knowledge base, so bear this in mind when choosing the color for your site. 

Final remarks

Focus on making your knowledge base as easy to use as possible for your customers, and you’ll be on the right track. Emphasize usability and readability by thinking about contrasting colours, making it visual, having a prominent search bar and balancing your elements with white space. 

Remember to build your site with a responsive design and keep your site in line with your company branding.