In the previous chapter, we discussed three common UX patterns: CTAs, error messages, and forms. In this one, we'll explore five more patterns, complete with examples, and examine what to consider when localizing copy for these elements.
We'll start with success messages, then move on to empty states, waiting and loading screens, password and authentication flows, and finally, onboardings.
Remember, patterns are repeatable solutions to recurring design and usability issues. Although we're covering various content patterns, the main goal is to learn how to critically assess each component during localization.
Always ask yourself these questions:
What is this component used for?
What do my users want or need to see here?
What type of copy is needed to achieve that?
By answering these questions, you'll be able to craft the most effective UX copy in your language.
Success messages
These are the texts that pop up to confirm that something has been done. They let users know that an action has taken place, providing a sense of accomplishment.
Success messages can serve two main purposes: confirming a functional action or providing an experiential boost.
Confirmation success messages
First, let's look at functional success messages. For example, when using the Planta app, a user adds a plant, and the app confirms the action with the message:
Experiential success messages
These are designed to encourage, empower, or engage users. In a Basecamp example, a chatbox appears after using the app for a while, stating:
This message isn't confirming a functional action but encouraging users to continue.
Sometimes, success messages aim to reassure users that their desired outcome has occurred. These messages create a sense of calm and security. For instance, the email app Hey provides a clear success message:
By removing uncertainty and explaining what to expect, Hey offers predictability, contributing to a positive user experience.
Another example comes from ClickUp. After users input their information during sign-up, they receive this message:
This success message reassures users they're on the right track, adding predictability and creating a supportive user experience.
Success messages sometimes also serve as a way to celebrate with users when something has gone particularly well. These messages aim to make users smile, creating a shared sense of accomplishment.
Take this charming confirmation from Greg, for example:
The message celebrates the user's achievement and creates a sense of camaraderie.
Another example comes from Relive:
This message celebrates the user's accomplishment, recognizing that they've made progress toward their goals.
Localizers can truly excel when working with success messages. While certain aspects of UX copy, like forms, require simplicity and straightforwardness, success messages offer more room for creativity. Success is a happy, emotional experience, and each culture expresses and celebrates it differently.
Localizing success messages gives you the opportunity to greatly impact the user experience. A literal translation might be dull or uninspiring, but a well-crafted success message can evoke the intended emotions: happiness, excitement, confidence, or calm.
Success messages don't have to be brief. For instance, Withings, an app connected to health-monitoring smart devices, uses a longer message to encourage users:
This message uses data to motivate users to continue pursuing their health goals.
Stoic, an app promoting happiness and tranquility, adds an interactive component to its success screen:
Users can choose from "better than before," "same as before," and "worse than before." Despite the missing question mark, this example effectively involves the user in a joint celebration and introspective process.
Since success messages aim to influence users' emotions, it's crucial to consider who the users are and what their mindset might be when crafting these messages. This understanding will help you create messages that truly resonate with your audience.
Exercise: Finding the right success message
Now, let's consider a hypothetical scenario. Imagine you're localizing copy for a user flow that involves submitting a car insurance claim. The user's car may have been stolen or damaged in an accident.
Out of several options, what would be a suitable success message for this situation?
Keep in mind that users are not in a happy or excited state of mind, so congratulating them might not be appropriate. Instead, you want to offer some gentle encouragement to acknowledge their completion of a potentially long and frustrating process.
In this case, thanking the user could be an ideal approach. "We're on it," "Claim complete," and "We'll be in touch" are also viable options. The final choice should be based on the brand's voice, user research, and the context of the user flow.
For example, if research shows that users worry about their forms not being received, "we're on it" or "we'll be in touch" might be better options.
Now, let's consider a different context. Suppose a user has just won a round of trivia and earned 100 points. What would be the best success message in this case?
In a real-life example from Kahoot, an app for creating trivia games, the chosen success message was simply "thanks."
However, this might not be the most engaging choice. Instead, a more exciting and celebratory message, like "Great job!", could better acknowledge the user's achievement and motivate them for the next round.
As you can see, the context significantly influences the way you write a success message. Tailoring your message to the specific situation and emotions involved is essential for creating an effective and resonant user experience.
When localizing success messages, it's important to remember that writers originally design these messages. However, as localization experts, we have more freedom to suggest unique and special options for our target market since these messages are non-functional.
In this case, accuracy is not as important as fluency. The goal is to create a natural, emotional connection with the user. If you need to change the wording to achieve that, it's perfectly fine. Just remember to maintain the brand's voice, ensuring that any creative changes still reflect the brand's character.
When making significant changes, always check with your product team to confirm their approval. To build trust, explain why your suggestion is a better choice and demonstrate your understanding of the message's purpose. Providing back translations can help the team feel more confident in your decisions, especially since they may not speak the language.
Keep in mind that product teams might have concerns or considerations you're unaware of, so it's important to involve them in the decision-making process. This collaborative approach applies not only to success messages but also to any type of copy you're working on. By working closely with your product team, you can create localized content that resonates with users and aligns with the brand's goals.
Empty states
Like success messages, empty states offer more freedom and creativity for localization experts. Empty states are pieces of copy placed where content will appear later, similar to form placeholders but used in other areas of an app. Let's examine some examples to better understand the concept.
Turo, a car-sharing app, presents an empty state when users have no trips planned.
Users encounter this empty state before starting with Turo or after completing rides with no upcoming ones. It informs users about the screen's purpose.
However, empty states can serve multiple purposes, from conveying information and driving user action to delighting and engaging users. They are valuable for motivating users to interact with the app more.
If Turo uses the empty state to prompt users to book a ride or list a car, Starbucks uses its empty state in the inbox screen to encourage users to return later, highlighting what they'll receive, and essentially functioning as a marketing message:
Discord's empty state encourages users to add friends while showcasing their brand voice through a cute message: "Wumpus is waiting on friends. You don't have to though!" The "Add friend" button drives users to action.
Airmail's empty state appears when users achieve "inbox zero."
The primary goal is to congratulate users on their accomplishment. The app assumes users know the term "inbox zero" and that they'll likely have a smiling profile picture, creating a self-congratulatory moment.
Empty states transform unproductive space in an app into valuable real estate. These areas aren't mission-critical, and they often occupy a large part of the screen. This additional space grants more freedom to craft fluent, natural-sounding content.
Sometimes, empty states appear in groups, like on a profile page with separate empty states for an introduction, latest projects, and adding links:
The original writers decide the content and appearance of empty states, but localization experts can optimize the experience for local users. For example, the Airmail "inbox zero" empty state might not translate well into some languages, so alternative copy conveying the same meaning must be created.
To localize empty states, first determine their purpose. Are they meant to delight, inform, drive action, explain something, or motivate users? Analyzing the writers' word choice can provide insight.
Consider this empty state:
This message aims to delight users with its cute tone and encourage action by suggesting they add projects. Another example, from Remembear, a password manager, says:
This empty state primarily explains what the app does and adds a touch of delight by personifying the bear.
Another empty state prompts users to:
This message drives action and explains the next step. Finally, consider Reddit's empty state that simply states:
This message focuses on reinforcing the brand's sarcastic and dry language.
After identifying the goal, determine how to achieve it in your language. Ensure you maintain the product's brand voice and avoid straying too far from the original tone. As always, consult the product team when making significant changes to ensure they approve.
Empty states might seem low-stakes since they only appear when something is empty. However, they're often used to initiate user engagement, so they can also be high-stakes. Ensuring on-brand copy and product team satisfaction is crucial for successful empty state localization.
Waiting & loading screens
These screens balance both creative and functional elements. Waiting or loading screens appear when users need to wait, such as when an app is loading, a response is expected from another player in an online game, or a video is processing.
Waiting or loading screens serve several purposes:
1. Reassure users
Loading screens reassure users that something is happening, preventing them from thinking that the app is frozen or unresponsive. This reassurance can come in the form of text or a simple loading indicator, like a spinning wheel animation.
For example, Waze displays "connecting," Lightroom shows "Loading photos," and Notability presents only a logo and spinning wheel.
2. Fill the silence
Loading screens can also help users pass the waiting time by offering something to engage them or providing useful information.
Consider the app Anydistance, which displays "Generating your visuals" during the loading process:
Beneath this message, it suggests users tag @anydistance to get featured, both reassuring users and providing engagement during the waiting period.
Another example is the meditation app Breethe, which encourages users to "Take a breath while we find sessions you'll love."
By incorporating its core purpose into the waiting screen, Breethe enhances the user experience and helps users relax during the wait.
The main goal of these screens is to improve the user experience by keeping them engaged and informed. For that reason, they are phrased differently, depending on the length of expected waiting time.
Short waiting times
If users only need to wait a few seconds, it's best to keep the text concise or simply use a loading symbol. Lengthy text could either be ignored or lead to frustration if users feel like they missed something. Examples of brief loading screen text include Honk's "Finding something great," Nike's "Updating your settings," and Calm's "Take a deep breath."
Long waiting times
If users have a longer waiting period, investing in more engaging content is essential. Doing so can make users feel like their wait is shorter, keep them on the app, and improve their overall experience. Some ways to utilize this time include:
1. Creating an on-brand, delightful experience
Todoist, for example, displays:
which aligns with their brand and adds a touch of humor.
2. Providing valuable information
Noom, a weight loss app, shares:
This gives users confidence in the app's effectiveness.
3. Explaining the reason for waiting
Sunrise reassures users by stating:
This helps minimize frustration by clarifying the purpose of the wait.
When localizing loading screens, remember to:
Match the length of the source: The translation should maintain a similar length to the original content to respect the initial intent of the writers.
Consider the goal: Understand why the original copy was chosen for the loading screen and aim to achieve the same purpose with your translation.
Write fluently and avoid jargon: Keep the language simple and easy to understand, as users may not have the time or mindset to decipher complex terms during the waiting process.
By considering these factors, you'll create engaging and effective loading screens that enhance users' experiences regardless of the waiting time they encounter.
Password & authentication flows
These are essential and functional components of any app. Unlike success messages, empty states, and waiting screens, password and authentication flows are more rigid but crucial to the user experience.
These flows occur when users need to:
Set a password.
Confirm their account through email, phone, or other authentication methods.
Account confirmations are called two-factor authentication (2FA). This common and increasingly standard feature involves sending a code via text or an email link to verify a user's identity.
Password and authentication flows are fairly straightforward, but they have a lot of different components that need to be taken into account. The amount of complicated requirements makes these relatively high-stakes. Unlike other aspects of the user experience, password and authentication flows are critical to app access. If users can't complete these flows, they won't be able to use the app. This means that users can get very frustrated in case of errors or delays.
Given the high stakes and potential confusion involved in password and authentication flows, our copy for these flows should be as clear as can be. It's essential to invest time and effort into crafting clear, concise, and user-friendly copy. especially when communicating requirements and requests, such as:
Password requirements
When creating a password, users often face multiple rules, such as the number of characters, allowed or disallowed characters, and other specific requirements. This can be confusing for them.
Authentication codes
Users should be guided on how to switch tabs or devices and where to find the authentication code.
By taking the time to create clear copy, you'll ensure that users can successfully navigate these flows and enjoy a seamless app experience.
Examine this example from 1Password, which uses a dynamic approach. As users create their master password, the message at the bottom of the screen changes to provide helpful and friendly tips. This makes the process more engaging and easier to understand.
The primary goal for copy in password and authentication flows is to help users navigate these processes as quickly and easily as possible. To achieve this, follow these guidelines:
Keep copy clear and simple: Focus on providing instructions that are easy to understand for your target audience.
Prioritize clarity over creativity: Unlike other aspects of UX copy, the challenge here is to be clear and helpful, not necessarily fun or whimsical.
Consider the example from Stripe's authentication flow, which provides a straightforward instruction:
This sets the user up for success, removing uncertainty, and creating a sense of trust.
Another example from Voi divides the process into simple, easy-to-follow steps.
They use a concise line of instruction for each stage, avoiding confusion and focusing on need-to-know information.
Lastly, let's look at Bumble's approach.
They start with a conversational question, "What's your number?", which reflects real-life dating experiences. Then, they explain why they need the user's number, adding trust to the experience.
By following these guidelines, you can create clear and user-friendly copy for password and authentication flows, ensuring a seamless app experience for your users.
Onboarding
As the first flow that users encounter when joining an app, onboarding plays a critical role in introducing users to the app's features and gathering necessary information.
Onboarding is a high-stakes pattern since users have yet to commit to the app. With little time invested in personalization or signing up, it's easy for them to leave and delete the app. Therefore, crafting onboarding copy requires careful consideration and attention.
Onboarding flows can vary in length and complexity, incorporating other UX patterns such as success screens, error messages, loading screens, CTAs, and forms. For example, Phantom's onboarding flow consists of just five screens:
While Crypto.com's onboarding has 36 screens.
Some apps even have 40 or 50 screens for more complex processes or legal regulations.
The golden rule is to keep onboarding as short as possible. Lengthy onboarding processes increase the likelihood of users dropping out. However, if a long onboarding flow is unavoidable due to the app's complexity or legal requirements, it's essential to make the experience smooth, seamless, and easy for users.
In summary, onboarding copy plays a critical role in retaining users and ensuring a positive first impression of your app. By focusing on clarity, simplicity, and user-friendliness, you'll create a welcoming onboarding experience that keeps users engaged and invested in your app.
When crafting an onboarding flow, it's crucial to understand what users need or want. This way, we can create copy that promotes the product's goals and enhances user experience. As a rule of thumb, there are a few key characteristics UX copy should promote. This is true for 99% of the cases, though there are always exceptions.
1. Trust
This one is true especially when providing personal information. The language used should foster trust, which may vary depending on the user's cultural background and the app's purpose.
For instance, casual language might work well in the US or Israel, but not in Germany. Apps dealing with sensitive information, such as financial or healthcare apps, must establish trust for users to provide their information willingly.
Take Noom, a diet app, as an example. In its onboarding flow, users must complete a full demographic profile. Each question is phrased to provide the logic behind it before asking the personal question, building trust in the process.
Robin Hood, an investment app, uses formal language when requesting users' legal names, emphasizing the importance of providing accurate information. This approach helps establish trust because users know that their money will be managed professionally.
On the other hand, when copy doesn't encourage trust, it can be off-putting. Inappropriately casual, playful, or overly formal language can be problematic. For example, Hinge, a dating app, asks users about their sexuality during onboarding but fails to provide a convincing reason or a more empathetic approach.
Another example is Pinterest, which asks for users' gender but doesn't adequately explain why this information is necessary for a better experience. To foster trust, they could provide a more convincing reason for collecting this data.
2. Value
Another key aspect of a successful onboarding flow is demonstrating value to users. They want to be assured that investing their time and effort in the onboarding process will be worthwhile in the end.
Twitter's onboarding provides a simple yet effective example: "See what's happening in the world right now" followed by "create account." Though brief, this line communicates the value users will receive after creating an account.
Flipboard, on the other hand, tries to convey the value by saying, "Almost there... We are preparing something great for you!"
This message implies that something enjoyable awaits users after completing the onboarding process. However, it might not be convincing enough for some people, as it lacks specifics about the value they can expect.
3. Simplicity
Users appreciate a straightforward process that won't take up too much of their time. Here are some examples of how to incorporate simplicity into your onboarding flow.
Deezer sets the stage by saying, "We've got a couple of questions to help us build your Deezer and create your Flow. So, what are you into?" This message reassures users that the process won't be lengthy or complicated.
Astrology, on the other hand, opts for a numerical approach, displaying "1 out of 8" at the top of the screen. This method helps users understand their progress and how much onboarding remains.
Monese achieves simplicity through clarity and transparency. By outlining the steps and requirements, Monese helps users feel more confident and simplifies the process.
Lastly, Zova combines value, trust, and simplicity in their onboarding flow:
This brief message clearly communicates the value of creating a profile, establishes trust by explaining why the information is needed, and keeps the process simple by only asking for an email address.
When it comes to localizing onboarding copy, keep in mind that it's a high-stakes game. Your goal is to ensure that your product appears trustworthy, valuable, and user-friendly within the constraints of localization. Remember to consider the bigger picture and how your onboarding copy fits into the overall flow of the user journey.
As you craft your localized onboarding copy, ask yourself:
How can I make the product seem trustworthy? Users need to feel confident in sharing their personal information, so choose language and tone that builds trust and rapport.
How can I communicate the value of the product effectively? Showcase the benefits users will receive by completing the onboarding process. Make it clear what they'll gain by investing their time and effort.
How can I keep things simple for users? Minimize complexity by breaking down the process into manageable steps, and be transparent about what's required from users. This will help them feel more at ease and confident in moving forward.
Lastly, always be mindful of the larger user journey. Consider the onboarding steps that come before and after the ones you're working on, and make sure your localized copy complements and flows seamlessly with the rest of the onboarding experience. By focusing on trust, value, and simplicity, you'll create a smooth and engaging onboarding process that resonates with your target audience.
Where do you go from here?
We've discussed eight common UX/UI patterns, but it's important to note that these are just the tip of the iceberg. There are countless patterns out there, and it's not feasible to examine every single one.
The key takeaway here is that whenever you encounter a pattern or need to create copy, always start by asking the right questions. Reflect on the product you're writing for, the target audience, and their needs and expectations. These inquiries will guide you in crafting the most effective copy that aligns with the product's goals and user requirements.
In the upcoming chapter, we'll delve into translating interfaces, addressing those essential questions, and examining how we can analyze products we localize to create exceptional copy. So, stay tuned for a deeper exploration of localization and crafting the perfect user experience.
What not to do: Avoid evil UX
Before we wrap up, let's spend a few minutes discussing a type of pattern we haven't touched on yet: evil patterns. They are sometimes called "dark patterns," but we'll stick with "evil" to avoid any potentially insensitive terminology.
Evil patterns, in contrast to UX patterns that help and guide users, are designed to manipulate users for a company's benefit. They exploit psychological and user experience practices to achieve the company's goals at the user's expense, making them morally questionable.
To illustrate, let's look at some examples (without identifying the specific apps involved).
1. Confirshaming
This pattern tries to shame users who decline an offer or opt-out. For instance, an app might ask users to sign up for emails, but the only way to decline is by clicking a small link that reads, "No, I want to waste 1 day per week." It's a manipulative way to deter users from saying no.
2. Roach motel
This is when copy entices users with an attractive exterior, but makes it incredibly difficult to leave or cancel. For example, an app might require users to navigate four screens, answer multiple questions, and confirm repeatedly before they can cancel a subscription.
3. Misdirection
Misdirection is generally frowned upon, as it tricks users into making decisions they might not have made otherwise.
Like, in the case of this checkbox, users may assume that checking it means opting in to emails, as that's usually how things go. But in reality, it's the other way around.
4. FOMO
An app might use the fear of missing out (FOMO) to get users to opt-in for notifications, playing on their emotions.
On the other hand, some apps handle notifications more responsibly. Instead of triggering FOMO, they simply let users know they can stay updated with the app's content. This is a much more user-friendly approach.
5. Disguised ads
Some apps use deceptive tactics to sell products or subscriptions. They might start with a congratulatory message, only to reveal that the "gift" is actually a discounted premium plan. This manipulative technique is another example of evil UX.
It's not all bad
The good news is that increased awareness of evil UX patterns has led to a decline in their use. Nonetheless, it's crucial to recognize these patterns, both to avoid accidentally creating evil UX in your work and to make informed decisions about the projects you take on.
In the end, being aware of evil patterns helps ensure a better, more ethical user experience in the products we create and adapt.
UX/UI patterns (part 2)
Chapter 6
