Joanna Hofer

Button Text Guidelines

Case Study – Button Text Design System Writing Guidelines

Button label text should clearly and concisely tell users what will happen when they interact with the button. Be concise. Ideally, use fewer than 15 characters and no more than 4 words.

Overview

Button text was inconsistent throughout our user interface in terms of content, length, and grammatical structure. Some buttons began with nouns and others with verbs. Sometimes it wasn’t clear where the user would go after following a button. My goal was to create writing guidance that would help our team write user-centered button text.

RequestCreate guidance to help team write clear, consistent, and effective button text
My RoleWriter
Timeline3 weeks
ResultIntegrated into Design System

Process

  1. Review notes from UX Content Collective Microcopy course
  2. Review online design systems (DS): Google Material Design, Adobe React Spectrum, Salesforce Lightning, Microsoft Ignite, Apple Developer
  3. Distill guidance; tailor to org
  4. Review existing DS button section
  5. Integrate text guidelines
  6. Use to create template for other component text guidelines

Highlights

Begin button text with an imperative verb when you need to clearly indicate the action a user should take next.
Only begin button text with a noun when there is a good reason not to use a verb.
Begin button text with an adjective or interjection when it's clear what will happen next, using a verb would be redundant, and you have limited space in the design.
Omit punctuation. Don't use periods, exclamation points, question marks, etc.
Be clear. Let users know what will happen after they select the button, such as where they will go in the application and what action will happen next. Capitalize only the first letter of the line. Capitalize proper nouns.
Alt text for a button image should describe what the image does, not what it looks like.
Back to content strategy