User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I have come across lot of designs on internet where buttons are labelled with two or three words. While I did my research on various design systems i found the guidelines talking about meaningful labels.
I want to know from the community if there are resources on this that can give more reliable approaches to it both design wise and accessibility wise.
Unfortunately, I don't think you're going to find a definitive guide.
Context is everything.
If you have a dialogue that says "Are you sure you want to add a subscription?" - the buttons can happily say Yes and Cancel.
However, if your dialogue says "Are you sure you want to cancel your subscription?" - then Yes and Cancel becomes confusing: "If I click cancel does that cancel my subscription?"
While it's a good idea to keep your button texts as short and concise as possible, it's also important to make sure your users understand exactly what's going to happen when they click them.
Sometimes you're going to need to be very explicit about what your button does so that users don't get confused. That may require a few words.
A good rule of thumb is to make sure you can understand what will happen using only the context of the screen you're looking at and disregarding how you got there.
You should also test it with people who have little experience with the rest of the system. Ask them to complete tasks that require clicking the buttons and see how they get on - That will tell you if you need to change the text on the buttons.
Basically, it's usually a good idea to
For each purpose, do what is needed, it should not be about the count of words or the length of the label, it's all about your buttons being clear and understood as fast as possible.
Here's what different design systems say about button labels, hope it helps:
To use text, create a short label that succinctly describes what the button does. Using title-style capitalization, consider starting the label with a verb to help convey the button’s action — for example, a button that lets people add items to their shopping cart might use the label “Add to Cart.”
A button’s text label is the most important element on a button, as it communicates the action that will be performed when the user interacts with it. Buttons need to be clear and predictable.
Button labels should clearly indicate the action of the button. To provide enough context, use the {verb} + {noun} content formula on buttons except in the case of common actions like “Done”, “Close”, “Cancel”, “Add”, or “Delete”.
There are exceptions to this rule for situations in which button length could cause problems in compact UIs or negatively impact translation, but the {verb} + {noun} formula is still best practice.
Here are some suggestions for action label texts
They don't talk too much about the length of the labels, but there's this "don't" part:
Avoid text labels that are too long. They should be concise. Note that in Material Design version 3 aka Material 3 they don't recommend using all-caps labels anymore.
Clarity over brevity.
But that doesn’t mean brevity isn’t important.
You also want to retain the button’s integrity - super long buttons don’t look like buttons anymore.
"...meaningful labels."
Reading that reminded me of Quicksprout's Psychology of a Consumer guide. It had a section describing how making a CTA more personal to the user can lead to more click throughs.
The whole article is focused on marketing, but I believe, given the right context, making button text more personal (a.k.a. meaningful to the user) can lead to way more click throughs. "Start My Free Trial" vs "Start Free Trial", the former will almost always have higher click through rates.
I'll link to the older version if you want to read it. I see far to
