In this chapter, we'll explore various content types and interface components that you'll encounter in your UX localization career. Apps and digital products come in various shapes and sizes. Examples include eCommerce sites, complex systems, consumer applications, business applications, social media apps, and educational software. And as you work on localization projects, you'll often find overlaps between categories.

For example, Duolingo is an app that helps users learn languages through a fun, gamified approach. It falls under both consumer application and educational software categories. When localizing for Duolingo, it's essential to address the considerations of each category.

Discord, on the other hand, serves as a consumer application and social media platform. It demonstrates how categories can intersect, requiring localization professionals to adapt their approach accordingly.

Despite the diversity of apps and digital products, you'll notice repeating patterns and components. As a UX writer, your goal is to create a unique version of these patterns that aligns with the brand voice, strikes the right tone, and serves the product's objectives.

By understanding different content types and interface components, you'll be better prepared to tackle a wide range of UX localization projects. Remember to be mindful of each product's unique considerations, and always adapt your approach to ensure the most effective localization.

What are UX/UI patterns?

Keep in mind that some brands create entirely different copy for the same component, while others may use identical copy for specific patterns across all apps.

Consider the example of a loading screen. Clubhouse wrote "cross checking our files," Honk used "Finding something great," Carrot penned "Feeding Zoltar a quarter," and Reddit seized the opportunity to tell users they're happy they're there. In this case, the voice and messaging change based on context, the type of app, and the brand's voice.

On the other hand, these same apps use almost identical copy for their onboarding flows, such as "Next" or "Continue" on buttons.

That's because there's a time and place for creativity.

Going back to our first lesson, we talked about usability and making our apps user-friendly. Often, we want the copy to be transparent and easily understandable, so users don't even notice it's there. Using common copy that everyone else uses, like "Next" on a button or "Welcome" when opening an app, helps users quickly scan the screen and understand what the button does.

Throughout this chapter and the next, you'll see numerous examples of patterns with either very straightforward copy or more creative copy to enhance the user experience. We'll delve into several recurring UX and UI patterns found in many products. We'll explore CTAs, error messages, forms, success messages, empty states, waiting and loading screens, password flows, and onboarding.

Bear in mind, these patterns are just a fraction of the hundreds that exist. To illustrate the sheer variety, here's a screenshot from Design Vault, a massive collection of screenshots from leading apps and software products. The image is intentionally small, but it's meant to give you an idea of the vast number of patterns out there.

If you're eager to dive deeper, I recommend visiting sites like Design Vault or others that showcase different patterns and screenshots. These resources offer valuable learning opportunities, even if they're only in English. You can also explore localized versions of the apps to see what localizers did with the copy.

The questions that guide us

While we examine specific content components, remember that they're just examples. The goal is to teach you how to critically assess every component you encounter during localization work. Always ask yourself these questions:

• What is this used for?

• What do my users want or need to see here?

• What kind of copy is needed to achieve that?

Answering these questions will help you craft the best UX copy in your language.

CTAs

CTA stands for Call To Action.

These are interactive elements that users can click on or interact with to take action. While CTAs are used in marketing to engage and convert users, in UX, they often serve the primary purpose of helping users take action. CTAs can be buttons, links, or even images, but their main goal is to assist users in performing a specific action.

There's a virtually endless array of ways to phrase CTAs. Sometimes you might want to get super creative and innovative, like the example "Let's get weird." Other times, it's better to keep things simple, such as with "link account" or "continue with Apple." Regardless of the approach you choose, there are a few fundamental rules you should follow:

1. Keep things short

As we've mentioned, concise copy is crucial in UX, but it's especially important for CTAs. Their primary goal is to encourage users to take action, so they need to be easily scannable. Users should be able to glance at a CTA and immediately understand what will happen when they click it.

If users don't understand the CTA's purpose, they won't click on it, defeating its purpose. By keeping CTAs short, you help users scan and comprehend them more quickly.

Many of the CTAs we've seen are two or three words long. While you can go beyond that if necessary, try not to exceed it by much. Remember that mobile screens have limited space for buttons, so fitting in more than three words can be challenging.

This limitation can pose a particular challenge for certain languages with longer words that require more space than English. If you're unsure whether your CTA copy will fit within the available space, it's best to confirm the character count with the team to avoid rewriting it later. Ideally, you should also review the mockup before it goes live to ensure that nothing is cut off or truncated.

2. Use active verbs

Active verbs inspire action and provide a sense of momentum. Words like "Click," "Buy," "Read," or "Download" clearly communicate what will happen when users take action and encourage them to follow through.

Active verbs not only drive users to act but also adhere to the UX writing principle of placing the most important information first, as we discussed in Lesson #3.

By using active verbs, you're frontloading the CTA, meaning you're putting the most crucial information at the beginning. This approach informs users about where the CTA will lead them.

As a result, users know what to expect when they click on the CTA, eliminating any uncertainty about whether they should click and what will happen when they do. Providing this clarity helps keep users at ease and reduces stress during their experience.

3. Be consistent

In the context of user experience, consistency is always important. Here, we're not talking about consistency in terminology, but rather consistency in style. Consider the app Anchor, for example. The original CTA says, "Make your first episode."

This seems like a straightforward CTA, but it represents a choice.

You can choose to speak for the user, instead, using "my" instead of "your."

Or you can be more neutral:

Each has its pros and cons.

When you write CTAs that speak for the user, you create a conversation between the user and the app. This establishes an emotional connection and empowers users, giving them a sense of control and a personalized experience.

Research has shown that writing CTAs in the first person can increase click rates by up to 90%. Some brands, like Reflectly, take this conversational approach even further with CTAs like "Hi Reflectly!" and "Yes please."

However, a personal vibe might not be suitable for every brand or market. In some cases, it's better to use a more traditional second-person CTA or keep things simple and neutral.

Ultimately, the key is to maintain consistency throughout the app. When translating app copy, ensure that the CTAs align with the existing style, keeping the user experience cohesive and easy to follow.

4. Be clear

Take Reflectly's "Hi Reflectly!" CTA as an example. While it's a fun, casual approach, it doesn't clearly communicate that it's meant for users to sign up. Although creative, the CTA's lack of clarity makes it less usable, especially for a crucial task like signing up for the app. In this case, it's better to prioritize clarity over creativity.

Kitchen Stories, on the other hand, strikes a balance between creativity and clarity.

They use two CTAs: "I am new" and "I've been here." Users can easily understand that one CTA is for signing up and the other for signing in.

An example of a confusing CTA comes from an eCommerce site shared by Elisa Tripetti on LinkedIn:

The English CTA says "Go to product," which is clear and easy to understand. However, the Italian version translates to "surprise me." This translation created confusion and an underwhelming experience for users who expected something special or personalized.

5. Get specific

When designing CTAs, it's essential to consider which option is easier to understand and more specific. For instance, consider this screen shared by Greg that encourages users to invite friends to use the app.

One version of the CTA says "Continue," while the other says "Invite Friends." The latter is clearer and more specific, making it the better choice.

Keeping in mind the serial position effect, users tend to read the title and the CTA button first. Being specific with your CTAs ensures users immediately understand the intended action. For example, an app asking users to allow notifications should have a CTA that says "Enable Notifications" rather than a vague "Yes, please."

Being specific not only helps with clarity but also helps prevent CTA fatigue. If all the CTAs in your app have the same words, users will quickly become bored and tired of the repetition. Using rich, diverse CTAs makes the app experience more engaging and interesting, as long as the CTAs remain clear within the given context.

Tiimo, an app that takes users through a series of screens to explain its features, utilizes interesting and varied CTAs:

This approach maintains user engagement while providing clarity.

Can localizers impact this?

As localizers, you might wonder how much you can truly impact clarity and specificity when translating CTAs. After all, these aspects largely depend on the source copy. While it's true that your influence may seem limited, there are ways to make a difference.

The key lies in building a close relationship with the product team and being proactive in addressing concerns. Cultivating trust and open communication with your colleagues allows you to have more influence over the localization process. This rapport won't develop overnight, but investing time and effort in fostering these connections can be incredibly valuable.

Once you've established a strong relationship with the product team, don't hesitate to reach out and raise concerns when necessary. Remember, you're not criticizing their copy choices; you're seeking information to ensure your localization efforts cater to the needs of your target audience. As you continue to learn and grow in UX knowledge, you'll gain more confidence in discussing UX issues with your team.

When addressing concerns about CTAs or other UX elements, avoid making statements like, "I think this CTA is not clear enough," as this may put the product team on the defensive. Instead, frame your concerns in terms of your own domain of expertise and your responsibility to the users. For example, say, "I think Georgian users would need a bit more info," or, "I'm worried Afrikaans users won't understand this button. Can we tell them where it leads?"

By approaching concerns from the perspective of adapting copy for your users, you demonstrate that your focus is on fulfilling your localization responsibilities. This approach is more likely to yield positive results and may even inspire the product team to reconsider the source copy.

Error messages

Error messages are those notifications that appear when something isn't quite right with the app. Crafting effective error messages can have a significant impact on usability and overall user experience. Users may encounter error messages due to either their own actions or issues with the app. It's essential to remember that it's not always the user's fault or the app's fault when error messages appear.

Error messages can serve different purposes. In some cases, they inform users that something is wrong, while in others, they guide users on how to fix the issue at hand. Additionally, error messages may or may not provide a specific reason for the problem, depending on how the app is programmed. Developers might create distinct error messages for each issue, or there may be a single general error message. In the latter case, the message can only inform users that something isn't right, without offering further details.

Let's explore how to write helpful and empathetic error messages that enhance users' experiences, even when things don't go as planned.

1. Get actionable

When users encounter error messages, it's crucial to make these messages as specific as possible and provide guidance on how to fix the situation. Remember that users may feel frustrated when they encounter an error, especially if the message is vague or unhelpful. Simple error messages like these ones lack detail and might leave users feeling helpless.

An effective error message should inform the user what went wrong and provide them with a sense of control. For example, a message like this one from Hootsuite helps users understand the issue and encourages them to find a solution.

In some cases, offering additional guidance, even if the user can't fix the issue immediately, can alleviate frustration. For instance, an error message that suggests contacting customer support if the problem persists is better than providing no direction at all.

The best error messages not only identify the problem but also provide clear instructions on how to resolve it. Consider this message from Prebo:

The accompanying CTA, "change picture," tells users exactly what needs to be done. Similarly, Vinted goes beyond informing users that their desired username is taken by offering three alternative suggestions.

By providing actionable advice, you can significantly improve the user experience and minimize frustration.

Naturally, the quality of the information you provide depends on the details available. However, even with limited details, you can still improve user experience.

2. Replace commands with requests

You want to aim to be polite in your error messages. Avoid using commands, and instead, ask users to take action. Although we discussed how overusing "please" can harm fluency and become repetitive, error messages are an ideal opportunity to use it, as it softens the tone.

Consider the example from Brainly, where a user is asked to enter a nickname that is already taken.

Instead of commanding the user to choose a new one, Brainly gently offers a pre-filled suggestion. This approach feels much more pleasant for the user.

Spotify also demonstrates politeness in their error message:

By being polite and considerate in your error messages, you'll create a more positive user experience, even when things don't go as planned.

3. Leave blame out of it

Whether the issue lies with the app or the user, the primary goal is to assist them in overcoming the error with minimal frustration and the highest success rate possible.

Like that error message from Spotify we just mentioned. This message effectively takes responsibility for the issue without making the user feel guilty. By using "we," Spotify includes the user as part of the team working together to resolve the problem.

Moreover, the phrasing "make sure we've got your details right" subtly implies that the user may have entered incorrect information without directly accusing them. This tactful approach helps users feel supported rather than blamed.

ProductHunt offers another excellent example of empathetic error messaging:

Not only does this message assume responsibility for the bug, but it also praises the user for discovering it. This unique approach empowers users and makes them feel accomplished, further fostering a positive user experience.

4. Keep things jargon-free and simple

Technical terms and industry-specific vocabulary can be confusing and alienating to users, making it difficult for them to understand the issue and how to resolve it.

Consider the following example of an error message filled with jargon:

The term "restricted scopes" might be incomprehensible to most users, leaving them unsure of how to proceed. Additionally, the message does not provide a link to the documentation, exacerbating the user's frustration.

Compare that to a more straightforward message:

While this error message is less technical than the previous example, it still uses formal language with words like "valid" and "invalid," which can come across as judgmental and strict. A more user-friendly approach would be to explain the issue and suggest a solution, such as: "We can't find an account for this email address."

By offering clear guidance, users can easily understand what went wrong and how to fix it.

5. Ask for more information

Error messages are most effective when they provide users with a clear understanding of the issue and how to resolve it. To achieve this, it's crucial to ensure that error messages are detailed and specific.

If the original error message lacks sufficient information, don't hesitate to collaborate with the product team to gather more context. Explain why it's essential to provide users with clear and actionable guidance, and try to determine how specific the message can be.

In some cases, error messages might be intentionally generalized, as they apply to various situations. However, when possible, strive to incorporate more details to make a more significant impact on user experience.

Keep in mind that error messages are sometimes added to a project as an afterthought, with developers inserting generic placeholders without consulting the writing team. By respectfully flagging unclear or unhelpful error messages, you can help improve the source language and create a better experience for users across all languages.

Forms

As we discussed earlier, CTAs are like having a limited conversation with an app. The user responds by performing actions, like clicking "sign me up" to join. But CTAs can only offer predetermined options.

You've probably seen chatbots that ask questions and provide answer choices. Sometimes that's enough, but often you want more info from users—this is where forms shine.

Forms cover many ways to gather input. For instance, they can:

1. Let users pick a username.

2. Allow uploading content

like in the "I Am Sober" app where users save sobriety stories.

3. Update details

such as entering payment info for Apple Pay.

4. Track activity

like in the Breeze app where users log sleep and receive insights.

Forms are perfect for collecting functional or personal info, making user interaction more engaging and effective.

Despite the many types of forms, they all usually share the same components. In every form you use, you'll probably see:

1. Text fields

Places for users to type their own text. They can be long (multiple lines) or short (one line).

2. Dropdowns

Users choose from a predefined list, which can be quite long (e.g., countries). In some cases, like Hopper, you type and suggestions appear. This is helpful when there are too many options to scroll.

3. Select fields

Users pick from a list. There are single-select fields (aka radio buttons) where you choose one option, like in Tangerine or Kayak.

And multiple-select fields (aka checkboxes) that let users select more than one option.

Select fields can get creative, with icons or "chips" as options. Zero Journal's "I'm feeling happy and..." is a great example of this:

Some select fields are very imaginative, like Noom's weight loss speed selector (turtle to cheetah):

Or the sliding ruler for choosing weight loss goal:

These options enhance the user experience while still offering a limited set of choices.

4. Switches

These are perfect for yes/no questions. Do you want to allow replays? Do you confirm you agree to this disclaimer? Do you want to save credit card information?

Companies might use a switch, checkbox, or radio button, but the core idea remains the same: yes or no.

5. Buttons

Users click on these elements to perform actions within the form. They can move to the next form page, save or submit the form, open a new form, or upload external files.

While similar to CTAs, buttons in forms are highly functional. They're not meant to drive to action, but to facilitate it.

All those form components, like text fields, dropdowns, and select fields, are the building blocks of a form. But without text, they'd be pointless.

Texts in forms give users the guidance and info they need to fill out the form correctly. They show users what to do, explain what info to enter, and help clear up anything confusing:

1. Labels

These are like titles for each field that tell users what to put in or what to do with it.

For instance, you might see labels like "First name," "Surname," or "Street address." In another example, you might find "Campaign name," "Recipients," and "Email subject."

Labels are the visible "names" on fields, and they're what users see when they check out each field or component in a form.

But fields also have real names. It's essential to understand the difference, as names can sometimes find their way into localization tasks, even though they shouldn't.

2. Names

Names are like the technical identifiers for the field, used by developers to recognize each field.

Names and labels are not the same thing. Names are never visible to users, but labels are. So, when localizing a form, the name and label don't have to be identical; they just need to convey the same meaning.

Take a look at this example: the fields have names like "username," "password," and "description." But the labels shown to users say, "Pick a cool name," "choose a password," and "tell us about yourself." The idea is the same, but the wording is different.

3. Placeholders

These are little bits of text you see inside fields or components before you start typing or adding content.

For instance, in one example, the label says "email," while the placeholder says "your email."

Sometimes, they offer valuable information. In a Dropbox example, the placeholder is used to indicate that the password field is required.

At other times, placeholders work well with labels. In the Breethe example, the label reads, "Hello friend, what's your name?" and the placeholder simply says "Your name."

Placeholders can add some visual clutter, and when they're redundant, there's no reason to keep them on. So many companies opt to consolidate labels and placeholders, placing the label inside the field instead.

This can be problematic because the label disappears as you type. In a form with many fields, users might forget what they were supposed to enter.

A solution is to move the label above the field once the user starts typing, as demonstrated in a Peloton example.

The label is initially inside the field, but when the user begins typing their email, the label jumps above the text. This method keeps information clear and accessible.

4. Error and help texts

We've touched on error messages before, so let's dive into a few forms-specific examples that showcase how they assist users and guide them through each field.

In this Brainly example, the error message informs users when they've chosen a username that's already taken. What's more, it even suggests a new username that might be suitable.

In another example from 1form, the error message lets users know they must be at least 16 years old to register. This notification appears below the date field when users input their birthdate.

Lastly, let's look at a help text from Sleeper. This message provides valuable information about password requirements, such as what the password should, shouldn't, and must include. This kind of guidance is crucial in ensuring users create secure, compliant passwords.

What's the final goal?

Forms are critical aspects of any app because they facilitate user sign-ups, enable in-app actions, and collect valuable information. The last thing you want is for users to become frustrated and abandon the form or provide incomplete details due to a tedious or confusing process. So your primary objective when designing forms is to guide users through the process as smoothly as possible.

Since various content types make up a form, it's crucial to apply the core principles of writing for a positive user experience. Need a refresher? Good writing should be simple, clear, and fluent. You can find additional information in the chapter about Good Writing.

For further reading, you can also check out the New South Wales government document on writing useful forms.

Applying these principles to localization efforts will help make your forms more effective and user-friendly.

Keep in mind that forms often have limited space, so it's essential to be aware of any character limits. If you haven't received specific restrictions, don't hesitate to ask, as overflowing text can severely impact the user experience. In this context, it's not just about enjoying the app—overflowing text can render forms unreadable, preventing users from completing them.