1. Text links

Text links help users navigate through linked content webpages. The following is a list of best practices.

Have only one link per paragraph

Links scattered throughout the text cause clutter, reduce focus, and make the text difficult to read. It is good if there is only one link in one paragraph.

A block of links after the text

If you need more than one link in the text, the best solution may be to put them in a separate block below the text. For example, as a list.

[EXAMPLE]

“Learn more” links

Avoid using just “learn more” text and similarly non-specific text in links and buttons because it does not tell users what they will “learn more” about.

Often, people simply scan a page looking for a link that takes them where they want to go, and “learn more,” repeated many times on the same webpage, does not help. This is especially true for users of screen readers.

“Click here” link

Using “click here” is not considered descriptive, and is ineffective for a screen reader user. Simply avoid this accessibility issue.

Give your links unique and descriptive names.

For example, if you are pointing visitors to a page called “About Us”:

• Try not to say: “Click here to read about the organization.”
• Instead, say: “To learn more about the organization, read About Us.”

2. Navigation menu copy

Navigation is probably one of the most important design elements of your website. Below there are some simple rules:

• Make your navigation bar simple, easy to understand, and scan
• Phrase each word (item) of the menu with 1 single word (only 2 if necessary)
• Build your menu with few items (better no more than 7)

The copy of the menu should be based on preferences and expectations of your audience and the type of navigation.

• Write each word of the menu as your users would do when searching for the sections of your site

• For menus organized as a table of contents, categorized topics, or sections of your layout, use copy that includes nouns only

• For marketing landing pages where users have an action in mind, use action oriented menus with verbs

3. Copy for buttons

The copy of button is a command that tells users what action they will take if they click the button.

Consistency for button labelling

When writing copy for buttons, make sure that you keep consistency. Choose a few guidelines to be set at the beginning of your project. For example:

• Chose amount of words: 1 or 2 per button, or 2 to 4 for call-to-actions (CTAs)
• Choose consistent case: sentence case, upper case, or title case
• Label structure: e.g. ‘verb’ + ‘noun’, or ‘verb’

Use of verbs

Most buttons indicate an action with verbs. However, in the context of an interface, some buttons do not use verbs but they work in the same way, e.g., ‘Back’, and ‘Next’.

• write in present tense
• use an actionable verb
• only for strong and direct instructions, use imperative mood, and uppercase text

Follow a label structure when writing button labels:

• You can keep the ‘verb’ + ‘noun’ structure , e.g. ‘Save post’, ‘Next step’, etc
• Avoid the ‘verb’ only structure, e.g., ‘Save’, ‘Next’

Make verbs specific:

• Use specific verbs whenever possible
• Specific verbs (such as connect or save) are more meaningful to users than generic ones (such as configure or manage).

Use of pronouns

See some tips to address your users:

• avoid the pronoun “we” in order to focus on the user
• use the words “you” or “yours” to make users feel like you care about them
• use the words “me” or “my” when you want to make users feel that your service already belongs to them
• specify the gender when possible and use the pronouns depending on the user

Letter casing

To decide on what font case to use, the following are some general guidelines:

• Use sentence case as a general rule, it is more conversational (.e.g. ‘Go next’)

• Only use all caps for strong and direct instructions (‘GO NEXT')

• Only use title case for marketing call-to-actions to highlight keywords, for example when selling a product (‘Go Next')

• Avoid lower case as it does not read well and looks too casual (‘go next’)

Button copy and expectations

• Choose labels that clearly communicate and differentiate what the button does (e.g., ‘Subscribe’)

• Label buttons with action verbs, such as ‘Connect,’ ‘Send,’ or ‘Subscribe’ instead of vague ‘Okay’ or ‘Submit’

• If users make an error, include the ability to undo their actions by using clear UI copy to recognize ‘Undo’ or ‘Cancel’ actions

• For actions with irreversible consequences, like permanently deleting something, it makes sense to ask people if they are sure about that

Other best practices:

• avoid branded terms (users unfamiliar with it will not understand the meaning)
• do not add a full stop after the button label
• do not use articles (‘a’, ‘an’, ’the’)
• do not use exclamations
• do not use idioms
• use 1 or 2 words

4. Writing for command text

Fewer words

Use as few words as possible without losing the meaning.

• Keep text very short: 2–4 words, but use enough text to explain context
• Avoid over explaining text: remove articles “a”, “an”, and “the”
• Do not: You must log in before you can write a comment
• Do: Log in to comment

Limit the use of branded terms. Users who aren’t familiar with a task flow or application could not understand what they mean.

Include ellipses (“…”) in command text to indicate when more information will be required.

Begin with the objective

When a sentence describes an objective and the action needed to achieve it, start the sentence with the objective.

• Do not: Tap on item to see it is properties
• Do: To see itemis properties, tap on it

Synonyms

Do not replace a word with a synonym in a different part of the UI. For example, if you decide to call the process of arranging something “Scheduling” in one part of UI do not call it a “Booking” in other parts of your UI.

First and second person form of address

Another common pitfall is combining forms of address. Do not refer to the user in both the second person and the first person within the same phrase.

• Do not: Change your preferences in My Account
• Do: Change your preferences in Your Account
• Avoid mixing ‘me’/‘my’ with ‘you’/‘your’ in the same context (e.g., “Change your preferences in My Account”)

Double negatives

Double negatives make users spend extra time decoding the message.

• Do not: I do not want to unsubscribe

Write in present tense

Avoid using the future tense to describe the action.

• Do not: Video has been downloaded
• Do: Video downloaded

Write in the active voice

The passive voice makes readers yawn. Compare this sentence in both voices:

• Do not: The Search button should be clicked when you are ready to search for an item.

• Do: Click the Search button to search for an article.

Use numerals

Use numerals in place of words for numbers.

• Do not: You have two missed calls
• Do: You have 2 missed calls

Avoid showing all details up front

Too much information upfront can overwhelm users. Some practices you can implete are:

• just reveal details as needed
• use a mechanism of progressive disclosure to show more details. For example, as a type of ‘Read more’ link

Progressive disclosure is especially good for mobile UI (where designers have a limited screen space to work with).

Avoid jargon

Remove the technical terms and use familiar, understandable words and phrases instead. It is especially important to avoid jargon in error messages.

• Do not: System error (code #2234): An authentication error has occurred
• Do: Sign-in error: You entered an incorrect password

Dates

People do not use the date when they refer to the day before the present day. They say ‘yesterday.’ The same principle can be applied to UIs.

• Use ‘today,’ ‘yesterday’ or ‘tomorrow’ instead of a date

Keep in mind that the terms indicated above can be confusing or inaccurate if you do not account for the current locale.

Graphics

Use graphics if they will help you communicate. Sometimes the ability for interpreting visual information is hard-wired into your users’ brains.

In some cases, it might be nearly impossible to say something in words. That is where imagery can help and make text comprehensible.

[EXAMPLE]