Did you ever visit a website and eventually found yourself having trouble navigating it because certain elements weren’t placed where you expected them or didn’t look like you were used to? For example, there was no logo in the top left corner to help you return to home or menu items were greyed out and seemed inactive? Trouble with navigating such sites is not an error on the user’s side – it’s because the site does not comply with what we have come to expect from other websites. And thus, it is unfamiliar to us, and we cannot rely on past experience to navigate it. Similar rules apply not just to the general layout of a website or app, but also to the content. We expect certain elements to look and work certain ways. And if they don’t, we have a harder time consuming the content. While some publication tools for knowledge articles offer barely any options for styling of content, others give you a wide palette of customization options. Today’s article is aimed specifically at the latter. If you have some control over the way your content displays, these tips will help you make more confident decisions on which styling choices to go with. Keep things familiar for your readers and you will help them consume your content more easily.
Why conventions matterHaving bold new ideas to best present information to your users is a good thing, of course. But there’s a reason you should also stick to conventions. Jakob Nielsen from UX researchers NN/g sums it up perfectly in Jakob’s law of internet user experience: “Users spend most of their time on other websites than your website.” No matter how much time your readers spend consuming your content, the vast number of other sites or application they consume will always outweigh it. And that is where users build up their mental pictures of how certain elements are supposed to look and function. So, sticking to what they are used to will help them navigate your content more intuitively. Now, let’s look at a few conventions you can stick to to keep things familiar and help your readers confidently and easily interact with your content.
IconsIcons are a great visual shortcut or addition to text. And if you use them a lot, it can be tempting to come up with icons for all sorts of concepts. But try not to stray from the typical association between a specific icon and concept.
- Stick to well-known icons, such as an envelope for email or messages and the shopping cart for – well – the shopping cart. But avoid icons that are very individual to your own content, as they are not intuitive to your readers.
- When you’re unsure what the most universally understood icon for a concept might be, just take a look at what other content on the web uses most commonly.
ColorsAlthough sticking to a company color scheme makes for a nice and clean look, some colors are widely associated with specific things and should not be used for other elements:
- Red and closely adjacent colors stand for errors. As such, they should especially not be used for interactable elements, as they will look broken. But other elements, too, might look like warnings or wrong information if you use red. Therefore, it’s best to only use it for warnings, errors and the like.
- Yellow, while not as severe as red, is also a warning color. It is best used for context that requires caution. Additionally, coming from the traffic light system, you can use it to symbolize things that are paused or in between states.
- Green stands for active / usable elements as well as recommendations or correct ways to handle things and other positive associations. So, try to limit usage to these purposes.
- Grey is more subtle than black or more colorful options, so it usually stands out less. It is therefore often used for inactive or less relevant elements. That’s why you should not use it for interactable elements like links or important text like headings.
FontsFor the main fonts you use, you will want to stick to something that is easy to read and fits the design of your tool. But you might look for some highlight fonts for some elements. As you do, keep in mind that certain font types carry certain associations. Try not to use them out of that context to keep things familiar for your readers.
- For example, monotype font is reminiscent of typewriters and the early computer age, but also of programming editors and we therefore recommend it as a good way to highlight code.
- Although already a bit out of the comfort zone of a knowledge article, you can use handwritten font for drafts or user ideas, as they are reminiscent of handwritten notes.
- On the other hand, cursive fonts symbolize elegance and bring an old-timey, romanticized flavor, making them inappropriate for knowledge articles.
Font styleIn addition to the font itself, the font styling also has certain connotations:
- Bold styling is the most versatile but is generally used to draw attention. Don’t use it for elements that are not very important.
- Italics are typically used for titles of works or names of objects. Additionally, they are sometimes used to emphasize specific words. Due to this loose definition and uncertainty on whether or not it’s worth italicizing ever name of every application or just forego it entirely, italicization can be a bit confusing. So, consider carefully if its usage is clear to your readers.
- The use of underline is also not too closely defined, but aside from general emphasis, it can denote links in combination with a highlight color. Make sure you do not style any non-link elements to look like a link, as this can lead to reader confusion on whether this is a broken link.
LinksSpeaking of links: To make them apparent as such in text blocks, they should pop out from the surrounding text. But not all styling choices say “I’m a link” as clearly as others.
- Stick to the color recommendations from above. If it works with your color scheme, blue and adjacent colors are great candidates, as blue is the most traditional link color.
- If the color highlight alone does not make the links pop enough, try underlined or bold
- To further help clarify that these are interactable elements, make sure the link and cursor change appearance at hover (typically, the link gets underlined, and the cursor turns to the pointing hand).
- Consider whether it helps your users know which links they already clicked – often, the answer is yes. If so, make sure that visited links change color. (For blue links, the traditional color change is to purple.)
ButtonsUser expectations for buttons share some similarities to those for links. If you have control over how buttons appear in your content, here’s a few tips:
- Again, be careful of the color. Red buttons usually stand for Delete, Stop, etc. Green ones for Start or Agree. Grey buttons are perceived as inactive.
- Just like a link, a button should change appearance at hover. A good typical indicator is the color going a bit darker (simulating the pressing down of the button) but other changes of color or border and shadow can also work. Remember that the mouse should also change from cursor to pointing hand.