Great work!

XP to next level

BugEater
EN

UI Text and UX Writing

🎯 Learning Objectives

By the end of this lesson, you will:

  • Audit UI copy for the three most common text problems
  • Distinguish between a typo bug and a UX writing issue
  • Apply the "Mom Test" to evaluate error message quality
  • Know the difference between "Error 404" and good error copy

📝 Words Are Part of the Product

Here's something most QAs overlook: the text in the UI is as much a product artifact as the code.

And it has bugs too:

  • Inconsistent terminology (the same concept has three different names)
  • Unhelpful error messages ("Something went wrong")
  • Placeholder text that was never replaced ("Lorem ipsum" in the help tooltip)
  • Typos in critical screens

When was the last time you saw a "Lorem ipsum" in a production app? We all have. That's a text bug. You can find it in static testing — before it ships.

🔍 Area 1: Terminology Consistency

The problem: The same concept is called different things in different parts of the interface.

Classic examples:

  • "Sign In" on the home page, "Login" on the button, "Log In" in the header
  • "Order" in the dashboard, "Purchase" in the email, "Transaction" in the receipt
  • "Account" in the settings, "Profile" in the nav, "User" in the error messages

Why it matters: Users get confused. They start wondering: "Is 'Order' and 'Transaction' the same thing? Did something go wrong?"

How to check:

  1. List all key concepts in the product (authentication, order, account, etc.)
  2. Search the Figma file and spec for every variation of each term
  3. Pick the official term. Flag all deviations.

🔍 Area 2: Error Message Quality

The problem: Error messages that tell users something went wrong but not what or how to fix it.

The Error Message Quality Scale:

Level Example User's reaction
1 (worst) "Error." 😤 "What error?!"
2 "Something went wrong." 😤 "...thanks?"
3 "Error 500." 😕 "Is that bad?"
4 "Failed to save your changes." 😐 "Okay, but why?"
5 (good) "Failed to save. Check your internet connection and try again." 🙂 "Got it."
6 (great) "Failed to save. Your internet connection seems offline. [Retry] [Save draft]" 😊 "I know exactly what to do!"

The goal is Level 5 or 6.

The Mom Test 👩

Read the error message out loud. Imagine your non-technical mom reading it. Ask: Would she know what happened and what to do next?

If the answer is no — the error message needs work.

🔍 Area 3: Completeness and Placeholder Check

Specs and designs often use placeholder content that gets missed in the final product:

Things to check:

  • Any "Lorem ipsum" or "Placeholder text" visible to users?
  • Any "[Product Name]" that wasn't replaced with the real brand?
  • Any "TODO" or "TBD" in UI text?
  • Any truncated labels: "Save chan..." instead of "Save changes"?
  • Any ALL CAPS that should be sentence case? (Or vice versa?)

🌍 The Naming Consistency Audit

Here's a practical exercise:

  1. Open the Figma file
  2. Write down every word used for these concepts:
    • Authentication action (Sign In? Log In? Login?)
    • User's saved content (Favorites? Bookmarks? Saved items?)
    • The payment action (Purchase? Buy? Order? Checkout?)
  3. Pick one term per concept. Flag the rest as inconsistencies.

🌍 Real-World Example

Before review:

Location Text
Home page button "Sign Up"
Confirmation email "Registration complete!"
Welcome screen "Account created"
Settings nav item "Your Profile"
Error on login "Incorrect login details"
Success toast "You're logged in!"

Problems found:

  • 3 terms for account creation: "Sign Up", "Registration", "Account created"
  • 2 terms for the user entity: "Profile", "Account"
  • "Login details" vs "Sign In" inconsistency

Recommended standard terms:

  • Signing up → "Create account" / "Sign up"
  • The user's identity → "Account"
  • Logging in → "Sign in"

💡 Pro Tips

💡 Tip 1: Create a terminology glossary for your product. It takes 30 minutes and saves hours of contradictions. Add to it at the start of every project.

💡 Tip 2: Error messages should answer three questions: What happened? Why? What can the user do about it? If your error message answers all three — it's good copy.

💡 Tip 3: The most neglected place for UI text is empty states. "No results found." — ok. "No results found for 'flibbertigibbet'. Try a different search term or browse our categories." — great.

📋 Summary

  • Terminology consistency: one term per concept, everywhere in the product
  • Error message quality: tell the user what happened, why, and what to do
  • The Mom Test: would a non-technical person understand this?
  • Completeness check: no Lorem ipsum, placeholder text, or truncated labels

Module 3 complete! You can now review Figma files like a pro. Module 4 takes us to user-facing documentation — the stuff users actually read. 📚

Quiz

An app uses "Sign In" on the homepage, "Login" on the modal title, and "Log In" on the button. What type of UI text problem is this?

An error message reads: "Error 503." Applying the Error Message Quality Scale, what level is this and what should be improved?

What is the "Mom Test" in the context of UX writing?

A QA reviewer finds the text "TODO: replace with final copy" visible on the Settings page in a staging build. What type of issue is this?