Comprehensive guide on button text copywriting. It emphasizes clarity, and accessibility for an optimal user experience. Tips include using clear and actionable language, consistency, avoiding ambiguity, providing context, and considering the user's perspective.
Button texts, also known as button labels or button text labels, refer to the visible text on a button in a user interface. These texts provide users with information about the action or function that will be performed when the button is activated or clicked. Button texts are microcopy.
Clear and meaningful button texts save users time by providing a quick understanding of the action associated with a button without confusion. Users can efficiently navigate and perform tasks without unnecessary guesswork.
Accessibility is crucial for ensuring all users, including those with disabilities, can navigate and interact with a website or application. Clear and descriptive button text enables screen readers to convey the purpose of the button to users who may have visual impairments. It enhances the overall user experience by providing concise information about the action the button will perform.
In HTML, there are two elements, which can be used to create buttons, which contain button text:
buttoninputbutton element #The <button> tag provides greater flexibility for styling and content, as it allows the inclusion of inline elements between the button opening and closing tags. It is often preferred over <input>, as it offers more semantic meaning.
input element #The <input> tag with the type="button" attribute is a more straightforward button. It doesn’t support nested content like the <button> tag and is commonly used when a basic button is sufficient for the task at hand.
The best practices for button text copywriting, are quite similar to the link text copywriting best practices:
A button needs to have a so called accessible name, the text between the start <button> and closing </button> tags. Make sure that not a value attribute alone does contain information on the action or function the button performs.
<button type="button" value="submit">Submit</button>
Use clear and concise language that directly communicates the action or function the button performs. Avoid unnecessary words, abbreviations, or jargon. Get straight to the point. Use “Connect your account” instead of “Authorize OAuth token”.
<button>Connect your account</button>
Keep button texts consistent across the application or website to create a predictable user experience. Use the same or similar labels for similar actions.
<button name="update-name">Update profile</button>
<button name="update-email">Update profile</button>
Ensure that button texts are unambiguous and leave no room for interpretation. Ambiguous labels can lead to confusion and errors. “Search” is not the same like “Filter”, “Save” is not the same as “Submit”.
<button>Apply filter</button>
When necessary, include additional context within the button text to clarify the action. However, strive to keep the text concise while providing sufficient information.
<button>Add to Cart - $19.99</button>
Choose action-oriented verbs that convey precisely what will happen when the button is clicked. For example, use “Submit”, “Save”, or “Download” instead of vague terms like “OK” or “cancel”.
<button>Submit form</button>
Frame button texts from the user’s perspective, focusing on the benefit or outcome of the action. For example, instead of “Process Payment,” use “Complete Purchase.”
<button>Complete purchase</button>
Ensure that buttons featuring only icons have an accessible name, as this information is crucial for assistive technologies like screen readers to comprehend and interact with page content. To achieve this, succinctly describe the button’s functionality by incorporating text within the <button> element.
<button name="search">🔍 Search</button>
Consistent capitalization enhances the readability of button texts. It creates a uniform visual consistency and appearance that is easier for users to scan and understand quickly. Using sentence case or title case is best practice.
<button>Sign up</button>
Bad practices for button text copywriting on Web pages include:
If a button has no text between the opening <button> tag and closing </button> tag, it has no accessible name. The value attribute does not provide an accessible name for button elements.
<button type="button" value="read more"></button>
Do not use jargon, slang, or abbreviations on button texts. For example use “Update Customer Information” instead of “Sync CRM Data”.
<button>Sync CRM Data</button>
Not maintaining consistency in button texts can lead to user confusion and a lack of predictability, as users may struggle to understand the intended actions associated with different buttons.
<button name="update-name">Save</button>
<button name="update-email">Submit</button>
Ambiguous labels can lead to confusion and uncertainty for users. They fail to clearly convey the action or outcome associated with the button, hindering user understanding and potentially causing them to make unintended or incorrect choices.
<button>Go</button>
Not giving context leaves users in the dark about the specific action or outcome associated with clicking the button. Without sufficient information, users may hesitate or make unintended choices, leading to a less intuitive or even frustrating user experience.
<button>Add</button>
Do not use generic language over considering the benefit or outcome for the user. Prefer user-centric alternatives like “Complete Purchase” over e.g. “Process Payment”.
<button>Process Payment</button>
Buttons that only display an icon do not have an accessible name. Always add an accessible name, text in the <button> element, that succinctly describes the button’s functionality.
<button name="search">🔍</button>
Eliminate redundant words or phrases in button texts. Focus on conveying the essential information to avoid overwhelming users with unnecessary details. Use “Submit order” instead of “Confirm and submit order now”.
<button>Confirm and submit order now</button>
Phrases like “Click here” or “Click to read” are outdated and unnecessary. Users know how to interact with buttons. Focus on what will happen when the button is clicked instead.
<button>Click here</button>
Avoid inconsistent capitalization in button texts. Stick to a specific style, such as sentence case or title case, for a polished appearance.
<button>SIGN Up</button>
Writing good button texts is a fundamental aspect of creating a user-friendly and accessible interface. They play a pivotal role in saving users time, ensuring accessibility for all, and enhancing the overall user experience.
By following best practices such as maintaining consistency, using actionable language, providing context, and considering the user’s perspective, designers and developers can create buttons that are not only visually appealing but also contribute to a seamless and intuitive interaction with the application or website.
The distinction between HTML button elements, the flexibility of the <button> tag, and the simplicity of the <input> tag provide designers and developers with options to choose based on the specific requirements of the job. Regardless of the chosen element, adhering to accessibility guidelines, including the provision of accessible names (button text), remains paramount.
Avoiding the use of jargon/slang, inconsistent or ambiguous labels, and insufficient context, is essential for preventing user confusion and frustration. Maintaining consistent capitalization throughout button texts contributes to visual harmony and readability.
Adherence to best practices not only ensures a positive user experience but also reflects a commitment to professionalism and attention to detail. Conversely, neglecting these principles can lead to a suboptimal user interface, hindered accessibility, and a diminished overall perception of the product or service.
Designers and developers are encouraged to incorporate these guidelines into their workflow to create button texts that effectively guide users and contribute to a delightful and inclusive digital experience.
Most common questions and brief, easy-to-understand answers on the topic:
Generally, jargon refers to the technical language used in a particular profession or field. Using jargon in UX copywriting has several disadvantages: it can be exclusive and leave people out, it can cause suspicion if used excessively, and it can be confusing to non-native speakers.
Button text should be a balance between brevity and descriptiveness. It should convey the action the button performs in a concise manner, avoiding unnecessary words. It should also be descriptive enough to clearly communicate the purpose of the button without ambiguity.
Use simple and familiar language in button text. Avoid jargon or complex terminology. For example, use "Invitation" instead of "invite". Consistency in labeling similar actions helps users with cognitive disabilities understand the functionality of buttons more easily. Additionally, consider providing visual cues such as icons to reinforce the meaning of the button text.
A/B testing involves comparing different versions of button text to determine which performs better in terms of user engagement and conversion. Test variations in wording, length, and tone to understand what resonates best with your target audience. Consider accessibility metrics, such as increased readability and comprehension, when analyzing the results.
Use culturally neutral and universally understood language in button text. Avoid idioms or expressions that may not translate well. For example, use "Repository" instead of "repo". Use symbols and icons that convey meaning across different cultures. Ensure that translations maintain the clarity and intent of the original text.
Sources and recommended, further resources on the topic:
License: Button text copywriting tips by Jonas Jared Jacek is licensed under CC BY-SA 4.0.
This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. To give credit, provide a link back to the original source, the author, and the license e.g. like this:
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.uxgem.com/articles/button-text-copywriting-tips">Button text copywriting tips</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>For more information see the UXgem legal page.
“Obey standards unless you've a darn good reason.”
