Article No :1586 | March 9, 2016 | by Time Barrow
As senior UX writer for a leading Internet juggernaut, I largely produce in-application copy. Among various types of writing and deliverables, I create very short text items, such as field labels, section titles, and button names. While these items may not be lengthy, they’re extremely important and should not be created hastily. By incorporating these smaller items into your company style guide, you’ll promote consistency for readers and speed the creation process.
It’s not that simple
It’s common for some developers, designers, UI architects, and management to not quite understand what goes into the creation of Web content. (That’s fine—we writers don’t fully get their roles, either.) These folks are often under the impression that it takes mere moments to come up with a few logical words to label these text elements.
For example, I’m frequently contacted to label some new button or other element on the spot. But rarely can I immediately rattle off what they need. This is neither a lack of willingness to assist nor a shortcoming in my abilities—rather, the reality is that most seemingly simple labeling requires more information, explanation, and research than it might appear.
Granted, it’s understandable why one might assume that any decent UX writer could merely look at an element and just know what its label should be. After all, the visual element (button, field label, header, etc.) has a name that we’re calling it, and it serves a specific function. Why don’t we simply just use that?
The reason is that what may seem logical may not be correct and consistent with how we label similar elements. For example, while it seems fitting to label that menu item that users click to update personal information like their email and password as Account, your standards and similar uses might reveal it’s referred to by another name, such as My Account, Your Account, Personal Info, or even just Settings. So, it’s not always obvious, intuitive, or easy to determine what that text should be; it almost always takes some level of research. To create just the right copy requires an understanding of the:
- user interface
- element’s purpose
- company/departmental standards
- application standards
- industry standards
- management, marketing folks, product owners, etc. (who may need to weigh in on such seemingly miniscule text)
A lapse in this understanding, or the effective application of it, can make the interaction or interface confusing, inconsistent, or inaccurate, any of which can repel a user. So, it’s important to go through the steps necessary to present just the right label.
Begin with a little research
There’s a process to creating that just right label for a given purpose and instance. However, before you embark on that process, you should first determine if there’s already a precedent for the element in question. That is, there might be standards in place that determine how such an item should be labeled.
Therefore, first consult your departmental and company style guide, since you should use any established standards. If no such standard exists, look through other pages within the application or website to see how the same or similar elements are labeled. If your organization has other applications or websites, consult those sources as well.
Let’s say you’ve found nothing established and you’re creating this element anew. Nailing that spot-on text is not all that difficult, but it takes serious consideration of a few factors to not let the wrong message slip through.
For example, think about the process of creating a new account for an online application or site. Generally, users must complete a standard form requiring input of name, address, email address, username, password, etc. While it may seem that most of the labels that mark these fields are pretty standard, there can be variations and decisions to be made. Even the basic “name” entry may be one, two, three, or even more (if there is a prefix/suffix option) fields.
- If the name prompt is for a single field, the label could be any one of:
- First/Last Name:
- First and Last Name:
- If there are two separate fields for the name you might simply label the two:
- First Name:
- Last Name:
While there are some options for the single field example, the two-field example seems pretty obvious. But hang on, is the capitalization correct? Your department’s style guide may require them to be First name: and Last name:. Additionally, the colon that I have included in these examples may not be part of your style guide. Toss in the fact that some labels, like Username, can be written as either one or two words, and you can see that some of the most basic tiny elements require much consideration for consistency. Taking the time to ensure your labeling is correct and consistent helps avoid potential customer confusion and maintain your company’s credibility.
To continue with the account creation example, after entering the required information, the user clicks a button to submit the form and get access to the account. But what should that button be named? Some likely possibilities include: Get Started, Finished, Submit, OK, Next, or Continue. At the surface, any of those labels seem acceptable for this interaction. But situations can vary, so let’s whittle some of those down:
- The user has already begun the process of setting up the account by entering the information into the form, so Get Started may not be the most fitting.
- In most situations of such an initial account setup form being presented, there are additional steps to perform, such as setting up a product, building a website, or whatever the application does. Therefore, Finished is not accurate.
- This is a form that the user has completed, so Submit, which is a largely accepted standard as the completion button on a form, is a good possibility. However, as a user, Submit feels a bit terminal to me. That is, it’s for the sort of form that I complete and am done. In most cases, the form establishes the base information for the account, but there’s more one can do.
- Completing this form is a first step in achieving whatever the larger goal of getting the application going is. Therefore, something like Next or Continue is logical. However, if the entire procedure is not presented as a series of steps, Next is not correct. Continue is a better option.
- It’s pretty ambiguous to use just OK, but that non-specific nature of it could be good, since it doesn’t suffer from the issues raised on the previous possibilities.
So, we’re down to Continue and OK as logical possibilities. Before making a final decision, you also want to consider tone and audience. Something like OK is probably fine for the average application, such as a game, website designer, or text editor. However, as you get into more security/protection and financial-based applications, the audience is taking this experience a bit more seriously and OK may come across as too informal.
Back to the guides and considerations
For the sake of our example, you found no standard in place for how the button in this situation should be labeled, and you choose to go with OK. However, now you’re faced with how to display that message on the button. Is it OK, OKAY, or Ok? To answer this question, you can again look to the style guides that are in place. While there may not be a standard for this particular button label, there may be a precedent set for how this particular term is written when used for other elements, or there may be specific abbreviation and capitalization standards.
You also want to think about the length of the label you’ve created. Clearly, OK is sure to fit on any button; even the longer form OKAY is not likely to give you any trouble. However, you may have spatial constraints you need to consider if you’re dealing with longer text. For example, something like Welcome to WordPress may be the ideal text for a label in style and purpose, but it might not fit on a button that offers limited space. Therefore, to shorten the button text, you might be able to get away with Welcome if, in the context of the area in which the button is displayed, it is obvious that the text is referring to WordPress.
Finally, if this text will be translated for international delivery, you’ve also got both technical and cultural considerations. Is Welcome going to fit on that button once it is translated into a language that spells the word with twice as many characters? Is OK going to be understood by the international markets for whom you’re translating? If not, you might need an alternate term at the ready. Either way, it’s a good idea to consult with your translation and international teams to see what’s needed.
Put it all into action
As you can see, even the simplest content elements for very basic interactions can require extensive research and thought to determine the logical, accurate, and compliant labels. This, of course, also extends to other elements, such as error messages, pop-up messages, modals, and page-level help.
If your department or company does not have a style guide, make one. If you create a new element that is likely to be reused directly or can serve as an example for future use, add it to the guide. Thinking about these essential issues in content design and adhering to a style guide helps ensure your content is both correct and consistent. This keeps your customers clear on what to expect, what to do, and where to find what they need.