Keep things familiar

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 matter

Having 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.

Icons

Icons 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.

But: Not every icon speaks for itself and not every concept has a unique matching icon. In these cases, consider if you can do without an icon to avoid confusion. And always put the name of the concept in your text in addition to the icon.

Colors

Although 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.

In our article on guiding the eye, we already mentioned the importance of good color contrast. That applies both to contrast between background and text, but also between different text elements that should be easily told apart. Keep that in mind while picking colors like yellow or light grey.

Fonts

For 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 style

In 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.

Buttons

User 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.

Don’t overthink, but check how others do it

These were just some of the elements you can style more intuitively for your users by keeping things familiar. Although depending on your content and publication tool, there might be many more. While sometimes you might find yourself mulling over the perfect styling for a specific element for a long time, try to check yourself: Overthinking can lead to very specialized styling choices that might match your content perfectly but no longer align with what users have come to expect from other sites or applications. Instead, if you are unsure of the best way to style an element, do some research. See if there is a popular recommendation or check a few other sites or applications and see how they handle such elements. That way your readers will immediately feel familiar with your content’s styling. Are there some other styling options your content requires and your publication tool offers? We’d love to learn how you applied them to keep things familiar for your readers.

Do you have any ideas or feedback? Tell us via mail to: marketing@avato.net Imprint Date: November 2021 Author: Kris Schmidt Contact: marketing@avato.net www.avato-consulting.com © 2021 avato consulting ag All Rights Reserved.