6

How to optimize button microcopy

 2 years ago
source link: https://uxdesign.cc/how-to-optimize-button-microcopy-8f54455d311d
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

How to optimize button microcopy

modal prompting “user” to read the article or cancel the action

Microcopy is the small, informative, or instructional text on forms, fields, labels, pop-ups, buttons, search prompts, etc. It can inform and assist people as they are using a product.

In order to design effective microcopy, we need to take into consideration the way users process information and read text. According to NN/g:

  • Scanning text is typical behaviour for higher-literacy users.
  • Users read only about 20% of the text on an average page with 600 to 800 words.
  • Concise text, objective language, and scannable copy improve usability by 124%.

Effective UX microcopy is characterized by the following:

  • It is clear, concise, and easy to understand
  • It takes on the voice and tone of the brand
  • It fits in visually and feels like a part of the design
  • It fills a need, answers a question, or builds empathy (depending on the product)
  • It motivates users to take an action
  • It anticipates and addresses user issues

A number of practices that can help improving button microcopy are listed below:

1. Use action verbs

Action verbs should be used instead of generic words. Yes/No should be avoided as they can be ambiguous and confusing to users.

1*8hlTBtm6LynAZKfltMLmwA.png?q=20
how-to-optimize-button-microcopy-8f54455d311d

Users have to read the dialog before they can take action. As seen above most users scan the page for relevant information and don’t read all the information provided. If they skip or misread the dialog, they’ll press the wrong button. Passive labels not only make it riskier to take action, but it forces users to do more work. By confirming the action on the button text, we reduce the chances of errors and require less effort from the users.

This can be seen in the example below. When the dialog text is blocked so that only the buttons are visible, the button labels with action verbs allow users to take action, but the buttons that use “Yes/No” labels don’t. Action verb button labels are more task-efficient and prevent user errors.

On the left there is a bad example of an action button label (Yes/No) and on the right a good one (Discard/Save)
On the left there is a bad example of an action button label (Yes/No) and on the right a good one (Discard/Save)
Action verb button labels are more task-efficient and prevent user errors.

2. Use task-specific language

Button copy should match the action. The buttons we use should always clearly describe what action the user takes when they click them.

For example, the word “submit” is a technical term you can use for most buttons. When users read it, it’s unclear what happens because the label is not specific to the task. Users would question what happens when they click the form button. Avoid making them uncertain by using a button label that describes the result of the user’s task.

In contrast, using action-specific words makes the label clearer and gives users certainty to act. Remember, users usually scan the page for relevant information. To improve the UX, the form button should describe exactly what the user is doing in their task. For example, if they’re deleting a photo, a button that says ‘Delete’ tells users that clicking the action button will delete the photo. It’s clear and specific to their task.

two example dialogs: on the left the language is generic (“confirm”) and on the right the language used is task-specific (“delete”)
two example dialogs: on the left the language is generic (“confirm”) and on the right the language used is task-specific (“delete”)
Using task specific-language makes the label clearer (example on the right)

3. Consistency

When writing copy for buttons, it is important to keep consistency. Deciding on rules for microcopy can help with this. For example, you can:

  1. Choose amount of words: How many words on average should different components have? One, two, or more words per button.
  2. Choose case: Capitalization should be consistently used throughout the product. You can choose between sentence case, title case, upper case, or lower case (more on that later…)
  3. Label structure: You need to decide on a structure for labels. Are they including only a verb or a combination of verbs and nouns (e.g. ‘verb’ + ‘noun’, or ‘verb’, or ‘verb’ + a + ‘noun’)?

4. Use microcopy for transparency

Sometimes digital products can raise concerns for security and privacy reasons(e.g., users are asked for sensitive information). Microcopy can help us in these cases by building trust with the users and having a positive impact on the UX.

For example, if people feel insecure or suspicious while making a transaction, they can end up not completing their actions.

Bhatt provides some example scenarios:

  • Asking users for too much personal information
  • Unspecified details about guarantee/warranty/replacement of the product
  • Asking for credit card details for free trial subscriptions

Effective microcopy can inform the user why the information is being asked and how it will be used. A good example of this is shown below; Airbnb informing users that they won’t be charged by clicking reserve.

Airbn booking screen shows how microcopy can help users complete a transaction; under the reserve button, users can see microcopy telling them they won’t be charged yet.
Airbn booking screen shows how microcopy can help users complete a transaction; under the reserve button, users can see microcopy telling them they won’t be charged yet.
Screenshot from the Airbnb website.

5. Avoid Jargon

Small, straightforward words speak louder than big, important-sounding words, but jargon still manages to sneak into our interfaces. This is due to the familiarity we have with the products we work on and with specific terminology that we encounter on a daily basis. A way to combat this problem is by testing microcopy with users — do they understand the language we use?

1*eL-7fGQUd7XMqRJh5DcZDw.png?q=20
how-to-optimize-button-microcopy-8f54455d311d

6. Pay attention to capitalization

Capitalization is a tool in UX writing to improve comprehension and consistency of text elements and it needs to be given due importance. The most popular types of capitalization are the following: sentence-case (capitalize only the first letter of a sentence and the proper nouns), title-case (Capitalise the First Letter of Every Word in a Sentence Except the Articles, Conjunctions, and Propositions), and upper-case (CAPITALIZE EVERY LETTER). The appropriate style of capitalization depends on your product — you can read more about this here. In general, if you’re writing internationally-targeted content, use sentence case as it’s better for internationalization (unless the product is aimed at American audiences). Title case can be used for titles/subtitles/label texts (<4 words). In most cases (pun intended), it’s best to decide on a single format for consistency.

two examples of capitalization; title case on the left, sentence case on the right
two examples of capitalization; title case on the left, sentence case on the right
two examples of capitalization; title case on the left, sentence case on the right

7. Know your user

Good microcopy is supposed to inform and assist the users while they are using your product. To achieve this, it is important to know who they are and understand their needs. User-testing is necessary.

Sources

0*R3ZP9BaQwwjCJlhg.png?q=20
how-to-optimize-button-microcopy-8f54455d311d
The UX Collective donates US$1 for each article we publish. This story contributed to World-Class Designer School: a college-level, tuition-free design school focused on preparing young and talented African designers for the local and international digital product market. Build the design community you believe in.

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK