Rules to Better Content Design - 18 Rules

In today's fast-paced world, lengthy emails, web content, and instant messages can be overwhelming and difficult to navigate.

Less is more

To ensure effective written communication, it's crucial to embrace the principle of "less is more". By being concise and focusing on relevant information only, we can capture the reader's attention and prevent important messages from being overlooked or postponed due to time constraints. So, let's keep it short, direct, and to the point, ensuring our messages are accessible and impactful, even for busy individuals on the go.

"I didn't have time to write a short letter, so I wrote a long one instead."
Mark Twain

When writing any content it is vital you cut unnecessary words to keep the reader interested and focused. This is especially important for dense or technical documentation.Your writing can be less wordy and still get the message across.

Improve your content and ask - how many words don't provide value or clarity?

People rarely read word by word. Instead they scan the page, picking out individual words and sentences that seem more relevant.

Keep it simple! It is important to break up information, not show it all at once. The visual organization of information is vital to legibility. When displaying information or controls, designers need to visually convey:

1. Information structure
2. Relation between elements
3. Importance and relevance of elements

The F-shape is a behavioral pattern describing the way users consume web content.Understanding common reading habits is essential for anyone writing content on the web.We can intentionally organize information to create friendly products aligned with natural user behavior.

The F-shaped pattern

The term was popularized in 2006 by the Nielsen Norman Group. These world leaders in user experience research have conducted eye-tracking studies that found:

1. Users read only the first few lines of content on a page
2. Users skim down the left side of the page primarily

The desire for quick efficiency drives this behaviour. Users seek to avoid the information overload today’s internet throws at them.

Applying the principle

By placing important information along the user’s likely path we can ensure the user’s journey is an easy one. Some simple ways to achieve this include:

• No walls of text (Be concise).
• Front-loading key content (Don’t bury the lead)
• Bulleted or numbered lists are ideal for blocks of content that are still easy to skim
• Clear headings should be succinct and establish an understandable page structure
• Simple imagery is more consumable than text (A picture speaks a thousand words)
• Icons aligned to the left of text allow for quick scanning and pattern recognition (if they’re not overused)

Secondary reading patterns

The F-shape is the most common way users read content, but other reading patterns exist. Keep in mind these secondary patterns and their respective niches.

• Z-shaped pattern - Where users scan the corners in a zig-zag from top left to bottom right. Typical on pages that are image-based or less text heavy.
• Layer-cake pattern – Where users skim headings and subheadings only, in horizontal lines. Common on dense text-heavy pages.
• Spotted pattern – Where user focus jumps between key elements as if looking for something specific (e.g. reading only the hyperlinks on a page).
• Bypassing pattern – Where users intentionally skip over the first word(s) of the content. Common when many lines or headings begin with the same words.

Remember, understanding how users interact with content is key. Place important landmarks along the user's natural pathway to facilitate comprehension and engagement.

Write in a way that is compelling, engaging, and direct to get the most out of your content. The secret to this is using an active voice.

What is active voice?

Active voice follows the pattern subject -> action -> object. It shows the subject is actively performing an action. This is the opposite of passive voice, where the subject recieves the action instead: object -> action -> subject.

Below are some examples:

An easy way to tell if you're using the passive voice is to add "by zombies" after the verb (i.e. the action). If your sentence still makes sense, you're using passive voice. 

Why avoid passive voice?

• It uses more words. In the figures above, the "Bad examples" are notably longer than the "Good examples"
• It's less impactful. Instead of having the subject make an action, the subject recieves the action
• It obscures the subject. In the bad examples above, you don't know who or what you're reading about until the end of the sentence. With active voice, you know immediately
• It's formal and detached. Passive voice makes your writing feel detached and objective. This can be a useful tool but leads to less engaging content.

One is not inherently better than the other. But if you want to create clear, direct, and punchy content - active voice is the answer.In conclusion:

Do you (subject) write (action) content (object) using active voice?

Web content should be written in 3rd person language, as if read by a newsreader. It is objective and describes its content professionally. A good example of this is Wikipedia.

Quotes

When quoting a testimonial, it is OK to use 1st person writing. Of course, the sentence should be in quotes. Think of it like a newsreader crossing over to an eyewitness for a personal view of the topic.

How you or your product speaks to users is integral to their experience and has notable impact.Tone dictates how your content feels in digital spaces that lack face-to-face communication.

Tone of voice is everywhere in UX and content design, from hero banners to button text and error messages.A casual tone on a corporate website may come across as unprofessional, while a formal voice on a social media can feel detached and unengaging.

Know your audience

Knowing your audience is key to good design.Who are your users? What are their expectations? How can you align with them?

Consider the following:

• Demographics - Analyze the demographics of your audience. E.g. age, gender, location, and cultural background
• Psychographics - Understand the values, beliefs, and preferences of your audience. Tailor your tone accordingly
• Preferred channels - Identify the spaces and tools your audience prefers and adapt to suit them

Find the right voice

Think of your product or brand as a person. How does that person talk and act?

• Formal vs Casual - Official correspondence, or talking to a friend?
• Serious vs Funny - Solemn and stern, or fun and silly?
• Respectful vs Irreverent - Dictionary words, or cultural references and made-up phrases?
• Matter-of-fact vs Enthusiastic - Informative statements, or drama and hyperbole?

Figure: Example - Casual, fun, irreverent, and enthusiastic

Figure: Example - Formal, serious, respectful, and matter-of-fact

Why tone matters

In a UX study by the Nielsen Norman Group users gave feedback on 4 websites. They saw 2 versions of each site, where the only difference was tone of voice.
Users displayed clear preferences for each product. The right tone felt more credible and trustworthy - key measures of desirability.

The tone of voice that creates that feeling of trust will differ based on your specific audience and their concerns.

The Hemmingway Editor is a tool that analyzes content and highlights problematic areas. This process reveals common writing issues that impact readers. Lean on this tool to internalize good writing practices.

Why use Hemmingway?

This is a tool that analyzes text for readability. It's particularly useful for longer pieces, like articles or blog posts.

It highlights:

• Use of passive voice
• Simple alternatives to complex phrases
• Overuse of adverbs
• Long and hard to read sentences

The editor also reports a grade-level readability score. Grade 9 reading level or below indicates the most understandable content.

How to use it

Copy and paste content into the editor for immediate feedback. Action as many suggestions as possible, and try to achieve that grade 9 readability or better.

Historically, it’s been the convention to refer to users as ‘he’ in technical documentation. This is obviously outdated and sexist – users may not be a "he". It’s more common now to see "he/she" used, but this is clunky and could also still be considered as misgendering non-binary people.

The best pronoun to use is "they". It’s simple and elegant and doesn't exclude anyone.

It's important to use correct capitalization when writing titles/headings for web content. For main titles, you should capitalize the first word, all nouns, all verbs (even short ones, like "is"), all adjectives, and all proper nouns. Leave subtitles in normal sentence form.

You can find more rules & tips on capitalizing here:

How to Capitalize Titles and Headings Correctly

It's best to only do this on main titles, and leave subtitles in normal sentence form - only capitalize the first word and proper nouns. Basically, it saves hassles... English is a confusing language, and there are too many variations that cause too many arguments.

Attention to detail plays a vital role to effective communication. Grammar, spelling, and/or syntax mistakes, though seemingly minor, can significantly affect the clarity and professionalism of your writing.

Common language pitfalls

Embracing the modern standard not only keeps your writing current but also ensures consistency in your communication.

• Use "email" not "e-mail" or "EMail"
• Use "cannot" not "can not"
• Use "website" not "web site"
• Use "username" not "user name"
• Use "taskbar" not "task bar"
• Use "OK" not "Ok" or "okay/Okay"
• Use "aka" not "AKA" or "a.k.a"

Syntax changes the meaning of certain words

Often when writing technical documents, you will instruct the reader to 'set up' his PC or run a 'setup' file.

• "Setup" is a noun, basically meaning an 'arrangement'(e.g. "The software setup")
• "Set up" is a phrasal verb, most commonly meaning 'to establish something.' (e.g. "To set up a computer")

How can you remember this? Mentally replace "setup" or "set up" with "setting up". If the sentence still basically makes sense, use two words. If it doesn't, use the single word. For example, the sentence "...he is setting up the shop" makes sense. "The setting up was all wrong" does not.

Be careful with homophones

Words like “verses” and “versus” are homophones, meaning they are pronounced the same but have different spelling and different meanings. Always ensure you are using the correct word. If you're not, it won’t be picked up by spell checkers.

• “Verses” refers to lines of poetry or bible passages (e.g. "Matthew 5:41 is one of my favourite bible verses")
• “Versus” refers to 2 or more parties in opposition to one another, especially in sports or legal situations (e.g. "Floyd versus Mayweather")

More examples

• "Their" shows possession (e.g. "It's their car")
• "There" indicates a place (e.g. "It's over there")
• "They're" is a contraction for "they are" (e.g. "They're going to the party")
• "Principal" can refer to a person who leads a school or organization or can mean the original sum of money (e.g. "The school principal is retiring" or "The principal amount of the loan")
• "Principle" refers to a fundamental truth, rule, or value (e.g. "Honesty is a guiding principle in their company")
• "Weather" relates to the state of the atmosphere (e.g. "The weather is sunny today")
• "Whether" is used to introduce choices or possibilities (e.g. "I'm uncertain whether to attend the meeting")

---

Language precision is a valuable skill and is essential for effective communication - they significantly impact how your writing is perceived.

By following these guidelines and staying current with language conventions, you can enhance the clarity, professionalism, and effectiveness of your communication.

Acronyms are a common way to shorten words or phrases, but using niche terms can lead to confusion and misunderstandings. It's important to avoid jargon, especially for those new to a particular field or industry. To ensure clear communication, avoid unfamiliar acronyms where possible and use the full term instead.

1. Avoid niche acronyms to avoid confusion.
2. Don't use acronyms in titles, headings, or other prominent places. This can make it hard for some readers to understand the content those headings describe.
3. If you must use an uncommon acronym, clearly define it the first time you use it.
4. Be consistent. If you use an acronym for a term or phrase, use it consistently throughout your content.

By avoiding unclear acronyms and using the full names of the terms or phrases, the message is easier to understand.

Well-known acronyms that we commonly see (FYI, URL, HTTPS, GIF, etc.) are more acceptable and safe to use.

Crafting content for the web means a keen focus on readability and accessibility.One common pitfall is the indiscriminate use of the ampersand (&) instead of the word "and."

There are cases where the ampersand hurts, and others where it helps.For certain brand names or UI elements the ampersand can be acceptable or even required.However, avoiding the ampersand leads to user-friendly and readable content in most cases.

Why you should write "and"

• Readability: The word "and" is universally recognized and aids reading comprehension.
• Scanning: The & symbol tends to stand out in the middle of other text. Since web users scan instead of reading, the & often draws the eye more than your actual content does.
• Accessibility: The ampersand can be harder to localize than the word "and". Sometimes an ampersand is part of a proper noun (e.g. H&M or Dolce & Gabbana) so it can't just be translated in a single way.

When to use "&"

• Space saving: Character count can quickly add up if you're using "and". An ampersand can be a great tool for making the most of limited space when needed (e.g. menu items or large headings).
• Note taking: Writing "&" is just quicker and easier!
• Informal tone: When it comes to intentional tone of voice, the ampersand can help create content with a more casual tone.

The "Oxford comma" (so-called because the Oxford University Press style guidelines require it) has the distinction of being one of the most hotly debated elements of the English language.

Knowing when to use the Oxford comma helps to create more consistent and easier to read documentation.

Also referred to as a series comma or serial comma, an Oxford comma is placed in a series of three or more items before the conjunction. It can be used in both "and" and "or" lists as the last comma separating a series of items. It works to help order these items and provide a distinction between the items on the list, particularly the last two items. An Oxford comma is often unnecessary, though.

The rule is that a comma should only be used between the last two items of a list if it removes potential ambiguity, otherwise no comma is required.

Let's look at some examples to illustrate the rule in action.

This short TED Ed talk covers the topic well.

We've all missed a piece of a message and found out later that we'd got it wrong. This can lead to miscommunication, mistakes, and lost time. Even worse, when finding out later that someone has misread something, there can be a lot of work to fix! But, there are ways to prevent this. Do these things to always make your writing clear:

An important case - don't let anybody skim over negation and misinterpret your message:

When highlighting items (file names, user commands etc.) be sure to:

1. Distinguish the items from the rest of the surrounding text; and
2. Be consistent

Use the following rules to highlight items in your document:

Style	Use this style on	Example
Bold text	Menus, commands, dialog box options, file names and paths	To access the application, click Start | Programs | Accessories | System Tools | Disk Defragmenter
Initial Capitals + Bold	File paths and file names	Now open C:\My Documents\Invoice.doc.
Different colour styling	Web UI - Important words on headings	Want to build an Angular application?
UPPER CASE	Code keywords and database elements	Use the INNER JOIN clause in SQL Server to join one table to another.
Monospace (Courier New font)	Code samples, error messages	You will see the following error: error opening database: database is currently in use.

Clear communication is essential for success, and especially helpful in professional or technical contexts. You should make your content more visually interesting and easier to scan quickly. Lists and emojis are great tools to achieve that.

Lists are great to make texts easier to digest. Emojis makes it even easier to consume when a lot of information is present. By using them you can enhance the communication experience. But when repeated excessively, they can become a hindrance rather than a help.

This is especially valid for words in lists, but also applies to different types of content. You should keep only the part that is unique in each list item.

Emojis

When there are multiple items listed, it can be challenging to distinguish between them quickly, leading to confusion and miscommunication. If the same emoji is repeated multiple times within a list, it can create visual clutter and make the list more difficult to read.

When creating a list that includes emojis, avoid repeating the same emoji 3 or more times within a list. Instead, add the emoji to a "introductory sentence" or "lead-in sentence". This helps to keep the content concise, readable, and consistent. Thus making it easy to scan the list and understand the benefits and drawbacks of a particular situation.

Following the DRY principle by avoiding excessive repetition of words/emojis helps to create content that are visually interesting and easy to read, while also promoting efficient and maintainable content creation.

Excess punctuation without a purpose can make a document or web page look overly busy. This can add a surprising amount of visual clutter.

As a general rule, avoid full stops in lists and captions altogether.

Bullet points should be short and sharp, and should generally not require full stops at all.

If your bullet point has more than one sentence, consider separating it into two bullet points instead. Alternatively, consider a different separator - like a dash; you could also consider a semicolon instead.

However, if it is necessary for your bullet point to have more than one sentence (should be rare), you of course need the full stop. In this case, you must include the full stop at the end as well. And, for consistency, all the bullet points in that list should also end with a full stop.

Writing in large blocks of text is a common practice, but it can hinder readability. Incorporating line breaks and spacing significantly enhances content readability. This allows readers to navigate through the text more easily, absorb information more effectively, and stay engaged with the material.

Long paragraphs

Consider breaking lines/paragraphs when you have a long block of text. You should aim to separate the information by context.

Notes, Tips, PS

Content elements like Note, Tip, PS (and similar) should be on a new line to enable better readability. It is beneficial to bold those words.

URLs

Breaking a line is also recommended before URLs.

Headings

It's a good idea to have some space after headings.

Multiple items as lists

If you text has information that can be turned into multiple items, you should do so, by creating a list. For example, when sending PBIs for a Sprint.

Note: On the example above, see how changing from "Product Backlog Item" to "PBI" also helps with readability. However, you should only use acronyms when the recipient is familiar with the term.

Images and captions

It is also recommended to include spaces after an image or a figure description. These elements need breathing space to help users focus on them.