Naming Elements

Suggest Edit

Text is an interface element, like a button or an input box. It helps solve an interface problem: it explains what you don’t understand and convinces you to perform the desired action.

The user has no time and is focused on solving a task. As a result, they skip long and complex chunks of text. Use the minimum number of words necessary.

Naming Screen

Screen names are a vital and essential part of the user experience. Not only do they play an important practical role in communicating what an app does, but they also establish app identity and character.

A good screen name should:

  • Consist of one or two simple nouns.
  • Be related to the app’s domain (for example: “Source” for a links news)
  • Be short (less than 15–50 characters).
  • Be easy to pronounce.
  • Be easily paired with a good app icon, such as by referencing a physical object.
  • Use header capitalization (for example: “Icon Preview” instead of “Icon preview”).

Likewise, a good name should avoid:

  • Overly complicated names and/or acronyms.
  • Puns and inside jokes.
  • Non-standard punctuation or whitespace (for example: SuperWriter).
  • Made-up words or word combinations.

As we work on various documents and collaborate in teams, we may encounter some uncertainties regarding the proper use of Title Case or the formatting of arguments. To help with these issues, try the service titlecaseconverter.com.

For a practical example, consider the product preview screen of an online store:

❌ This image shows an illustrative example of a bad name and description for a screen.

Initially, the product name is set by the user, which can often contain many words for marketing purposes or to improve search engine optimization. This can result in an untidy and cluttered display.

To address this issue, we can look at the context in which the product name is used. In practice, many team members are not familiar with all product names and instead use a stock keeping unit (SKU) for efficiency.

By replacing the marketing name with the SKU, we can simplify the display and provide a clearer understanding of the context. For instance, we could use a truncated version of the SKU in the description:

✅ This image shows an illustrative example of a short and clear name and description for a screen.

This approach enhances the overall readability and usability of the product preview screen, making it more efficient and effective for the intended audience.

Lorem Ipsum

When writing text for prototypes, it’s important to keep it realistic. Avoid using names and addresses that are too short or that only just fit in the available fields. Use real messages and errors, rather than placeholder text like “Here is the error text.”

It’s also important to avoid using “cool” or rude names, especially in prototypes that will be used for testing. Making factual or logical errors can also be problematic, as an expert in the field (such as an accountant) will immediately notice any inconsistencies. These kinds of errors can lead to discussions with the usability specialist and may interfere with the overall user experience.

Naming Menu Items

Menu items should have names that are either actions or locations, never descriptions. Make sure menu items are concise, but also fully describe the action that will be performed when they are clicked.

“Settings” is acceptable as it clearly describes the action that will be performed when the item is clicked. “Software Up to Date” is not acceptable. The destination and result are unclear, so the outcome is uncertain.

Terms

Use the same words for objects and actions on them. If the user reads “certificate” in one window, “electronic signature” in another, and “key” in a third, he will not make the connection between these words, he will not understand that they are the same thing.

Although a term may be commonly used within your business circle, it’s important to recognize that not everyone may be familiar with it. As such, it’s recommended to include a small footnote alongside the term to provide an explanation:

✅ This image shows an illustrative example of an auxiliary hint for abbreviations.

Our Friends