10 Minimalist Principles for Good Technical Writing

Principle Seven: Communicate Visually

This article is part of a series of articles entitled 10 Minimalist Principles for Good Technical Writing.

Broadly speaking, minimalism is any style or technique that is characterized by an extreme reduction to necessities and radical simplification. A minimalist is a person who strives to restrict the means and ends required to achieve a goal to a minimum. Applying minimalist principles to writing can support the key objective of technical communication: to enable users to learn and accomplish as much as possible, on their own, in as short a time as possible.

Principle Seven: Communicate Visually

The primary task of technical writers is to write. However, technical communication encompasses many fields of expertise. One field that technical writers should be familiar with is visual design, also referred to as visual communication design.

Visual design

Visual design is the use of imagery, color, shapes, typography, and form to enhance usability and improve the user experience. Visual design as a field has grown out of both UI design and graphic design.”

uxbooth.com

Writers need to understand human perception.

The effective and meaningful use of visuals and typography – no matter what the form of communication – requires a general understanding of how people see, interpret, and try to comprehend the world and also a knowledge of the target users and their information needs. Graphic designers are well versed in visual design principles and have the talent and skills for creating appealing visuals. However, graphic designers cannot be expected to have the same depth of knowledge about users and the purpose of information as writers because they are often brought into the information design process too late or too early.

Few people working in technical communications have the necessary training and skills to produce high-quality, user-focused visuals, largely due to time constraints and a lack of training in good visual design and an awareness of how the visual design of information adds value to the overall user experience. Ideally, writers and designers would always work together on the overall information design and content strategy for technical communications. In practice, the task of creating visuals is usually left to the writers. Therefore, it helps when technical writers have at least a basic understanding of how people consume information visually and how they retain knowledge. Applying different aspects of the psychology of design can enhance the visual design of information and thereby help communicate with users more effectively and improve the user experience.

Structured and balanced visual communication

The brain processes information.

A great deal of research has been conducted on the way people see and read and how the brain processes information. In fact, it is not the eyes that see, but the brain, and the brain has an enormous capacity for recognizing patterns. Patterns help people establish connections, understand information, and retain knowledge. Even when chaos prevails, people try to make sense of the world by detecting patterns and will even go as far to create their own sense of order, that is, patterns.

For example, consider the following sequence of numbers:

Number Sequence

In the sequence of numbers above, the first number and every second number thereafter (1,3,5,7,9) has a larger font than the other numbers (2,4,6,8). Can you see the pattern? Have you perhaps detected that all odd numbers have a larger font and that all even numbers have a smaller font?

Now consider this sequence of numbers:

Number Sequence

Can you also see the pattern this time round? Maybe you noticed that the prime numbers in the sequence (1,3,5,7) have a larger font. Or did someone just forget to give the last number (9) a larger font? But hang on, isn’t 2 also a prime number? So why does 2 have a small font when it’s also divisible by only itself and 1?

It is not necessary to seek answers to these questions; this sequence of numbers serves only to exemplify the types of questions that the brain asks itself in rapid succession each time it is confronted with new information. The brain will always try to detect a pattern, even if no pattern is intended.

Good visual design aids and doesn’t distract.

Whether a user guide, online help, or the UI of an app or website, good technical writing makes users curious to learn more about the subject matter, for example, a function, a process, or even a product. We want users to ask questions such as “What does this do?”, “How does this work?”, or “Where can I find this?”. And of course, we want users to be able to find the information that answers those questions. However, poorly considered visual design leads to “bad questions”, such as “Where do I find this information?”, because design elements distract and don’t aid users.

Consider the purpose of an online shop: to sell products. The most important question we want visitors to ask about a product is “Where can I buy this?”. Galleries, videos, and blog posts used to promote products and support SEO are all very well; however, these elements need to be implemented with a strategy in mind because they can take users away from where you want them to be; in this case on a product page with a “Buy” button. We’ll look closer at how to keep users’ attention in Principle Eight: Aid Navigation and Principle Ten: Focus on What Is Important.

Good technical writing minimizes the number of questions that users ask themselves that are not related to the purpose of the information nor what users want to do. To make writing more effective, technical writers can apply best practices in visual design to speed up pattern recognition and avoid elements that hinder the brain in processing information.

Patterns enhance visual design.

Principle Two: Use Parallelism and Principle Six: Organize Information Logically both look at how technical writing can be structured and balanced to achieve symmetry and simplicity. These two principles complement each other especially well; furthermore, they can also be used to enhance the visual design of information through the patterns that are inherent to them. The examples of unstructured and structured text given in Principle Six: Organize Information Logically show that the use of simple structuring elements such as titles and bulleted list items can transform the look and feel of text and make information more accessible for users. By applying these principles in combination with appropriate typographical conventions and images, further improvements can be achieved with regard to the visual design of information.

Choosing a font

Technical writers communicate through what they write and often have limited influence on the look and feel of the information they produce, even on the fonts. For example, writers either have no access to the underlying style sheets or they are not allowed to change them because another department is responsible for corporate design. On the other hand, for visual designers, style elements such as fonts and formatting are the nuts and bolts of their work; they use these elements to design an experience that evokes an association or an emotion. Some fonts are neutral and seem more conservative, fonts such as Arial, Calibri, DejaVu Sans, and Tahoma. These fonts are sans serif fonts.

Sans serif fonts

Characters in sans serif fonts generally have a simple and symmetrical appearance. Other fonts are more decorative and expressive, fonts such as Brush Script MT, Papyrus, Segoe Script, and Times New Roman. These fonts are serif fonts.

Serif fonts

Serif fonts are difficult to read because they have seemingly more irregularities, that is, are more akin to handwriting. Serif fonts can even be used with the explicit purpose of forcing readers to read text more slowly as opposed to skim reading.

In general, overly decorative fonts can interfere with pattern recognition and slow down reading. Anything that is difficult to read is usually perceived by users as more difficult to understand and more complex. For this reason, only sans serif fonts are suitable for technical writing. It is always wise to opt for more minimalist fonts.

Fonts have different heights, widths, and lengths.

Other factors that influence the readability of text are font height, size, and color. Sometimes serif fonts are perfectly readable in a larger font size and on a desktop. However, serif fonts like Papyrus, which some designers for the web consider the epitome of bad fonts, are impossible to read in all sizes and on all devices, and technical writers should produce information that is readable under all circumstances. In the interests of readability, the minimum recommended size for sans serif text is 15px and, if a serif font must be used, the minimum recommended size for serif text is 17px. If you go to Google fonts, you can play around with different fonts and font sizes and compare their readability, for example, serif fonts with 16px vs. sans serif fonts with 16px.

When text is displayed on the small screens of handheld devices where space is restricted (for example, user interface labels such as buttons) or on web pages (for example, text in boxes), the relevance of font length also becomes clear.

Consider the following sentences:

Fonts with different lengths

The wording is identical; however, the text in Courier New (1) is considerably longer than the text in Arial (2). Interestingly, a comparison of the same texts in sentence case and uppercase reveals that the uppercase version of the Courier New text adds no length to the text, whereas the Arial uppercase text is considerably longer than its sentence case version.

Example:

Fonts with different lengths

A comparison of text in Arial with text in Courier New may seem unusual; however, remember that Courier New and similar fonts such as Consolas and Monospace are standard fonts for code editors. Therefore, the text that a developer sees in the development environment is not how the text is rendered on the UI.

Users see things differently.

Sometimes the brain perceives text size and color differently depending on the font type, the font color, and also the color of the background. Furthermore, the same font can vary in appearance on different devices and depending on the operating system a device runs. Each web browser also renders fonts differently. For this reason, text rarely looks the same on all devices nor does it appear the same to all users; user perception also varies, for example, because people have different eye strength. Notice also that the uppercase version of the Arial text (2) gives the illusion of being darker in color than its sentence case version (1) and darker than both texts in Courier New (3 and 4); however, all texts have the same color, it is the way our brain perceives the text color that differs.

Usability and accessibility are important.

Usability and accessibility play an important role in the choice of fonts. The best approach to apply to choosing and using fonts is to imagine the worst possible circumstances under which your users will read your text, for example, on a smartphone while sunbathing on beach or while riding on a train that is going through a tunnel. If your users can read your text in worst-case conditions, then they will be able to read it anywhere and on any device.

Using fonts to enhance meaning

If a font is difficult to read, users will likely struggle to grasp the meaning of a text. Conversely, a font used to emphasize the type of information being conveyed or to call out something that is especially important can help users understand and retain the meaning of information. Information that has been organized logically and is structured and written with its purpose and the needs of users in mind implicitly suggests which typographical conventions need to be defined for which types of information.

Typography

“Typography is a fundamental principle of good design. Whether you’re designing for print or the web, good typography helps balance the visual structure of your design between the content and the visuals.”

crazyegg.com

Longer forms of technical communications that contain a great deal of text, such as a guide or user manual, will consist of multiple chapters, subchapters, and sections or hierarchically structured topics. Therefore, at the most basic level, you need a convention for headings and subheadings.

Take a look at the following example of a chapter in a user guide.

HP Documentation – English (US) – User Guide
Chapter in a user guide

The example contains three heading levels, of which only one heading level is numbered (Backing up, restoring, and recovering). The font type, case, and color of each heading level is the same; however, the lower the heading level, the smaller the font size.

Example:

Heading levels

Typographical conventions used for headings are frequently defined by level; however, you might want to draw users attention to information of a specific type and make that information easier to identify. Let’s say you are writing a guide that describes a set of closely related complex concepts that users need to understand in order to be able to perform a dozen or so important tasks, some regularly, some only occasionally. Initially, users will need to read through and familiarize themselves with the underlying workings of the product. They may need to refresh their knowledge every now and again, but they will not need to read the entire guide each time they perform a task. Therefore, you might decide to use a different typographical convention for procedure headings in your guide, so that users can find procedure information more easily and quickly.

Typographical conventions accentuate the meaning of information.

The way information is presented should underscore its purpose and meaning. Random fonts and formatting used to “prettify” text just confuse users. At the beginning of this section about using fonts to enhance meaning, we said that information that is written with its purpose and the needs of users in mind implicitly suggests which typographical conventions need to be used. Now refer back to Principle Four: Choose Verbs with Care and look again at the user guide chapter above; do you notice the consistent use of the imperative mood in the procedures (numbered steps) and in the “important” information (connect, schedule, select)? Also take note of the use of “must” to indicate necessity in “the tablet battery must be at least 70% charged”. The text formatting and typographical conventions complement the imperative nature of the information.

Using imagery to complement text

As mentioned at the beginning of this article, the primary task of technical writers should be to write and not to design images. Nevertheless, information can benefit from the use of the most simple images, such as pictograms or geometric icons (also known as geons). The chapter in a user guide above uses two different icons: an icon to call out information that is important to for tablet users to know to recover and avoid losing information and an icon to draw users attention to information that is relevant for the recovery process being described (a “Note” icon).

Simple images are most effective.

The most effective images for complementing text are the simplest: two-dimensional abstract representations that evoke an association with a real-world object. For example, in the user guide chapter, a notepad and pen is used for the “Note” icon.

Through the ability of the brain to recognize patterns, users can usually identify the meaning of even the most basic shapes. Geons work like road signs; once the meaning of a sign is clear, the information the geon communicates is easy to remember; the same applies to any pictograms and icons. For example, if you have decided to use a different typographical convention for procedure headings in a guide, you might also decide to use a pictogram or icon to indicate that a topic or page describes a procedure. The image might depict some footprints, a stairway, the numbers 1,2, 3, or other rudimentary representation of a set of steps. You might choose a more abstract symbol for your procedures, such as three overlapping triangles or squares. Just remember that your images should not be too open to interpretation because different symbols mean different things for different people. For example, an abstract symbol might have a strong resemblance to a well-known corporate logo or the emblem on the shirt of a starship crew member!

SVG is a lightweight alternative.

If your company does not have its own set of pictograms or icons that were designed in line with corporate branding guidelines, you can also use freely available icons such as those available at iconcrafts.com. However, note also that online the use of pictograms and icons has decreased in recent years in favor of the use of SVG files. SVG is more lightweight by comparison with other formats such as JPEG and PNG because SVG images are rendered in the web browser just like a web browser renders fonts of different types, sizes, and colors.

Example:

checkmark svg

And here is the corresponding code for this checkmark:

checkmark svg code

One of the pitfalls of images, especially in technical writing, is that too many images or inappropriate images can distract users and prevent them from focusing their attention on pertinent information. Inept use of typographical conventions can also be detrimental to the user experience. The more minimalist the design of an image,the easier it is to recognize what it depicts, provided that appropriate images are used consistently for different information types.

Using white space to convey meaning

The use of many font types and colors, different types and styles of images, and different formatting overwhelms users. Therefore, as discussed in the previous section, technical writers are well advised to favor a minimalist approach to visual design. A simple way to reduce overcrowding and present information more effectively is to make use of white space.

“fear of emptiness”

In art and design, the expression Horror Vacui comes from the Latin “fear of emptiness” and explains the tendency of people to fill up empty space for fear of a void. We see this reflected in our homes and in our local supermarkets. And have you ever wondered, when you’re the first to park in an empty car park, why does everyone else park their cars right next to you?! In technical writing without any white space, that is, when the text has no room to breath, everything looks the same and nothing seems of any particular importance. Just one simple example:If you cram a page full, all users will see are blocks of text with no apparent meaning. However, if you add margins to your text and your text is in the middle of the page, you put more focus on the text itself. Just beware of using text justification because justified text can lead to irregular patches of white space which can be distracting. Similarly, white space can be used to draw attention to specific types of information and it also makes text easier to read and quicker to scan.

White space conveys simplicity and professionalism.

White space can be the spacing between lines, paragraphs, and list items, the proximity of headings and body text, the space between body text and accompanying images or tables and their captions. In the words of Jan Tschichold, “White space is to be regarded as an active element, not a passive background.” Obviously you do not want to leave too much white space in your writing so that users are not forced to scroll excessively or think that something is missing. However, white space within text can impact user perception in important ways. The proper use of white space as a visual design element communicates simplicity, clarity, and professionalism and helps users focus on the messages you want to convey with your information.

In technical communication, technical writing and visual design go hand in hand. Visual design complements the written word through its subtle yet highly effective communication of meaning. In particular, minimalist approaches to using typographical conventions and visual elements, based on an understanding of human perceptions and fundamental design principles, can significantly enhance technical writing in terms of style. Furthermore, good visual design minimizes the effort users require to grasp the meaning of information.

Next up:

Principle Eight: Aid Navigation

  1. Keep sentences simple
  2. Use parallelism
  3. Use active voice
  4. Choose verbs with care
  5. Negate with purpose
  6. Organize information logically
  7. Communicate visually
  8. Aid navigation
  9. Be consistent
  10. Focus on what is important

About Helen Fawcett:

In a nutshell, I optimize user interface text such as control labels and create on-screen instructions and help documentation for developers & customers. | Helen works as a user assistance lead at SAP SE.
More about me
Home Minimalist PrinciplesTechnical WritingWriting Style Principle Seven: Communicate Visually