Error message examples: How to craft clear, effective UX messaging

Making mistakes is all part of being human. But when users stumble on your site, it’s your job as a UX designer to ensure those missteps don’t turn into dead ends. Instead, with the right error messages and helpful guidance, you can quickly steer users back on track.

Error messages aren’t just a functional necessity — they’re a key part of the user experience that can build trust, reduce frustration, and even strengthen your brand’s connection with its audience.

In this article, we’re going to look at why getting error messages right is so important to a site’s UX design and how you can create error messages that enhance rather than detract from the user’s experience with your brand. Jump ahead to explore some great examples of real-world error messages done right and how to fix common mistakes!

Editor’s note: This post was updated on 31 January 2025 to include additional examples of effective error messages, before-and-after comparisons of poorly written vs. well-crafted messages, and best practices for improving accessibility and industry-specific messaging. We’ve also expanded the section on common mistakes to avoid, with a focus on clarity, timeliness, and user-friendly design.

For a visual guide to designing error messages the right way, check out our YouTube tutorial here:

The importance of clear error messages in UX

Error messages might seem like minor details in the grand scheme of a site’s design, but they’re much more impactful than you’d think. The way your site communicates errors can either solve problems effectively or frustrate users enough to leave. It also says a lot about your brand’s approach to the user experience as a whole.

Let’s take a look at some other important reasons why clear error messages should be a UX design priority:

Reduces user frustration

Clear, friendly, and instructive error messages can help reduce user frustration by leading users to a solution that helps them reach their goals.

For instance, if a user enters a search term that yields no results, an unhelpful message like “No results found. Try again.” only adds to their frustration. Instead, use something like this — “We couldn’t find anything for ‘[search term]’. Check your spelling or try a different keyword.”

This small change acknowledges the issue while giving users actionable next steps, reducing their likelihood of abandoning your site.

Builds user trust

Error messages that are transparent and empathetic reassure users that the system is working as intended, even when something goes wrong.

For example, if a login attempt fails, compare “Login failed. Invalid credentials.” to something more helpful like “We couldn’t log you in. Please double-check your login details or reset your password if you’re stuck.”

This not only reduces user anxiety but fosters trust in your platform. A clear, actionable message shows users that you care about their experience — even when things go wrong.

Enhances task completion

Good error messages keep users from hitting dead ends. They offer clear guidance, prevent unnecessary drop-offs, and open alternate paths when the main flow is blocked.

I’m thinking here of links to reset passwords, help articles, or even direct contact with support. These small touches ensure users can quickly recover and stay engaged with your product.

Improves accessibility

Accessible error messages aren’t just a nice-to-have — they’re essential. For visually impaired users who rely on screen readers, a well-crafted message can make or break their experience.

Providing links to helpful resources, such as password reset pages, help articles, or contact information, allows all users to navigate quickly to the next step without additional frustration.

Accessibility-focused design ensures no one gets left behind.

Supports branding

Error messages are opportunities to reinforce your brand, even in moments of user frustration and confusion. While you shouldn’t distract from solving the issue at hand, injecting some on-brand playfulness or humorous tone of voice can work well in these instances to diffuse tension and keep the mood light while the user is on the error page.

Done well, these messages can leave users thinking, “Hey, this brand gets me.”

Turns user frustration into delight

Clever UX designers will use an error message to soften the blow.

Instead of a generic 404 page, why not use a playful message like “Looks like we’ve lost our way — just like you! Let’s get back on track.” This can turn an otherwise frustrating moment into one that feels human and even enjoyable.

Retains users and potential customers

A poorly crafted error message can send users running to your competitors, even if everything else on your site has been great. But when users encounter clear, kind, and actionable messages, they’re more likely to stick around — and maybe even turn into loyal customers.

Indicates overall UX approach

Error messages are a great indicator of how much thought and care a brand puts into its design.

Companies that prioritize clear, compassionate messaging in their error handling likely extend the same attention to other touchpoints. Users notice these details, and it builds confidence in the brand’s overall experience.

Why users encounter errors

Users might encounter error warnings or error pages for various reasons. Something as simple as a typo in a URL can lead to the dreaded 404 page. However, most error messages stem from one of these three situations:

1. User intervention is needed by the systemExample — A required field in a form hasn’t been filled out correctly.Template — “The [field name] field is required. Please fill it in.”
2. A requested operation has been unsuccessfulExample — A failed login attempt due to incorrect credentials.Template — “We couldn’t sign you in. Please check your [field] or reset your password.”
3. An important warning needs to be communicated to the userExample — A system issue temporarily prevents the user from completing their task.Template — “Something went wrong on our end. Try again later or contact support.”

Error pages and HTTP status codes

Error pages go beyond simple messages or warnings — they’re HTTP status indicators that reflect the server’s response to the user’s in-browser request. Common error page examples are 401, 403, 404, 500, 502, 503, and 504 errors.

These errors can be divided, depending on the root cause of the issue, into two categories:

Server-side issues

• The server encountered a problem and couldn’t complete the user’s request
• Network connectivity problems disrupted the request
• The server failed to respond within the allowed time period

Client-side issues

• The user lacks authorization credentials (e.g., a misspelled username)
• The user doesn’t have the necessary permissions to access the requested page
• The server couldn’t find the page the user requested

By understanding the root causes of errors and providing clear, actionable messages, you can prevent user frustration and keep them moving toward their goals.

Mistakes vs. slips

When users encounter errors, it’s important to recognize that not all mistakes are the same. Errors typically fall into two categories:

Slips

A slip occurs when a user unintentionally performs the wrong action, often due to inattention or a lapse in focus. For example, when filling out a form, a user might accidentally select the wrong option or misclick a button. Since the user’s goal hasn’t changed, slips are usually easy to resolve and typically involve a minor adjustment.

Handling slips:

• Limit input options — Narrow the choices available to users to prevent errors, such as limiting character lengths or providing dropdown options
• Offer suggestions for correction — Suggest auto-completion or provide alternative inputs when an error occurs
• Design for flexibility — Use forgiving formats that accept various user inputs, making it easier for users to recover from small errors
• Pre-fill where possible — Use reasonable default values to minimize the chances of an error

Mistakes

A mistake, on the other hand, happens when the user’s understanding of how the system works doesn’t align with the system’s design. For example, a user might attempt to upload a file that exceeds the maximum allowed size because they weren’t made aware of the limit.

Mistakes are trickier to resolve because they involve a fundamental misunderstanding of the system’s requirements.

Preventing mistakes:

• Ask for confirmation — If an action is irreversible, such as deleting an account, make sure users confirm the action before proceeding
• Clarify requirements upfront — Communicate expectations early in the process (e.g., password requirements or upload limits) so users can avoid mistakes
• Allow users to make changes — Give users the flexibility to alter inputs (e.g., email addresses, payment methods) during the process
• Provide a clear escape route — Always ensure there’s a way for users to undo their actions or return to the previous screen without losing progress

How to craft effective error messages?

A well-designed error message doesn’t just tell users something went wrong — it helps them fix it quickly and with minimal frustration. Follow these best practices to keep error messages clear, solution-focused, and user-friendly:

Use simple, clear language

What to do — Write error messages in plain language and a conversational tone that anyone can understand.

Avoid — Jargon, technical terms, or vague statements that leave users confused.

Example — Instead of “Authentication failed due to invalid credentials,” say, “Oops! That password doesn’t match. Try again or reset it.”

Keep it short and to the point

What to do — Get to the issue quickly. Users should grasp the error and how to fix it within seconds.

Avoid — Lengthy explanations or unnecessary details.

Example — Instead of “We encountered an unexpected issue while processing your request,” say, “Something went wrong. Try refreshing the page.”

Stay focused on solutions

What to do — Guide users toward fixing the issue. Offer actionable next steps or multiple solutions if needed.

Avoid — Error messages that simply state the problem without suggesting what to do next.

Example — Instead of “Invalid credit card number,” say, “That card number doesn’t look right. Check for typos or try another card.”

Use a friendly, empathetic tone

What to do — Assume the user made an honest mistake and offer help in a reassuring way.

Avoid — Blaming or condescending language.

Example — Instead of “You entered your email incorrectly,” say, “That email doesn’t look right. Want to try again?”

Make error messages visually clear

What to do — Use color, icons, and text hierarchy to ensure errors stand out but aren’t overwhelming.

Avoid — Relying solely on red text (colorblind users may not notice it).

Example — Highlight form fields with a red border and provide a short inline error message like “Password must be at least 8 characters.”

Display errors in the right place

What to do — Position error messages as close as possible to the source of the problem.

Avoid — Placing all errors at the top of the page, forcing users to search for the issue.

Example — In a form, show an inline error next to the specific field instead of displaying a generic message at the top.

Offer real-time validation

What to do — Provide instant feedback in the form of validation before users submit a form to prevent frustration.

Avoid — Letting users complete an entire form only to show multiple errors after submission.

Example — While typing a password, indicate “Weak password” in real time instead of waiting until they submit.

Allow errors to be easily dismissed

What to do — Let users clear error states once they correct the issue.

Avoid — Keeping red error indicators even after a user fixes the problem.

Example — If a user updates their email address correctly, remove the error highlight automatically.

Adapt to industry-specific needs

What to do — Tailor error messages to your industry and user expectations.

Example — In e-commerce, suggest alternative payment methods if a card is declined. In healthcare apps, use reassuring wording like “Looks like some details are missing. Let’s get them sorted!”

Prioritize accessibility

What to do — Ensure all users can understand and interact with error messages.

Avoid — Relying only on color cues.

Example — Use both color and an icon or bold text to indicate errors. Screen reader users should hear helpful instructions, like “Please enter a valid phone number in the format (123) 456-7890.”

Examples of effective error messages

1. Spotify’s failed payment error message

When a user’s payment fails, frustration is almost inevitable — especially if they’re at risk of losing access to their favorite playlists. Spotify’s error message is a great example of how to handle this smoothly while keeping users engaged:

Why it works:

• Immediately eye-catching due to the red banner, ensuring visibility
• Empathetic, non-alarmist language — “We have a little problem” softens the impact
• Concise explanation — “Your payment has failed” — straight to the point
• Clear next steps — “Please make sure we’ve got your details right” guides the user
• Avoids blame — Uses “we” instead of “you” to prevent frustration

2. Slack’s “photo is too big” error message

Uploading images should be seamless, but when there’s an issue, the error message shouldn’t feel like a roadblock. Slack keeps things lighthearted and easy to fix:

Why it works:

• Emoji use — On-brand, eye-catching, and injects personality
• Relatable, friendly tone — “That’s a very nice photo” softens the rejection
• Clear problem description — “It’s a bit too big” keeps it digestible
• Actionable fix — The “Try a Different Image” button makes it easy to resolve

3. Network error message

Network failures are frustrating, but this error messaging ensures users aren’t met with overly technical jargon or confusing instructions:

Why it works:

• Simple, jargon-free language — “The network connection is lost” avoids confusion
• Visually distinct — A clear icon and contrast make it accessible for users with visual impairments
• Immediate solutions — Offers retry/cancel buttons, allowing users to act quickly

If I had to suggest an improvement here, I’d say we could allow an auto-retry after a few seconds to reduce manual effort.

4. Dropbox’s login error message

When users mistype their email, a vague error message like “Invalid credentials” can be frustrating. Dropbox’s approach removes ambiguity and makes it clear how to fix the issue:

Why it works:

• Uses a standout color (orange) that contrasts with the brand palette for visibility
• Precise fix instructions — “Double-check your email address format”
• Example formatting — Shows “[email protected]” so users know what’s expected

If I were asked, though, I’d suggest an improvement — Could highlight the incorrect part of the input (e.g., missing “@” or domain name).

5. Forrst Search & Rescue’s 404 “Not Found” page

Hitting a 404 page is never ideal, but a well-designed error message can turn it into a positive experience. Forrst’s Search & Rescue page makes the best out of a frustrating situation:

Why it works:

• Light humor eases frustration — “We sent a search party, but no luck!” keeps it friendly
• Clear navigation — Users are redirected back to where they need to be
• Brand consistency — Keeps the tone, visuals, and humor aligned with the company’s personality

Common mistakes to avoid when writing error messages

We’ve all seen them — those confusing, long, and jargon-heavy error messages that make things worse instead of better.

Here’s what not to do and how to fix it with clear, user-friendly messaging:

Being too technical

A common mistake is using jargon-heavy language that assumes users have technical expertise. Instead, keep it simple and accessible.

Before (too technical) ❌	After (user-friendly) ✅
“Error 0x800704CF: The network location cannot be reached. Please check the network connection and try again.”	“You’re not connected to the internet. Check your Wi-Fi or try reconnecting to your network, then refresh the page.”

Blaming the user

Error messages should guide, not scold. Avoid language that makes users feel at fault.

Before (blaming the user) ❌	After (supportive and clear) ✅
“You entered an invalid password. You should have followed the password requirements.”	“Oops! Your password doesn’t meet the requirements. It must include at least 8 characters, one uppercase letter, and one special character.”

Using generic messages

Vague errors leave users stuck. Provide specific guidance on how to fix the issue.

Before (too generic) ❌	After (specific and actionable) ✅
“Something went wrong. Please try again.”	“We couldn’t process your request because the file format isn’t supported. Try uploading a .jpg or .png instead.”

Ambiguity (not addressing the root cause)

Ambiguous error messages confuse users. Tell them why something is wrong and how to fix it.

Before (unclear) ❌	After (addresses root cause) ✅
“You can’t use that password.”	“Your password must include at least 8 characters, one uppercase letter, and one special character.”

Inappropriate use of humor

Humor can work in error messages, but timing matters. If a user is frustrated, jokes might push them to abandon the task.

Before (inappropriate humor in a serious context) ❌	After (addresses root cause) ✅
“Oopsie! Looks like you really messed this one up. Try again, champ!”	“We couldn’t process your request. Double-check your details and try again, or contact support if you need help.”

Not making errors dismissible

Users should be able to clear resolved errors without refreshing the page.

Before (persistent and annoying) ❌	After (dismissible and responsive) ✅
“Error: Incorrect email format. Please enter a valid email.” (Error stays even after correction.)	(Error disappears automatically once the user enters a correctly formatted email.)

Conclusion

A well-crafted error message is more than just a notification — it’s an opportunity to support users, reduce friction, and reinforce trust in your product.

In this guide, we’ve covered the essential elements of clear, effective error messaging, common pitfalls to avoid, and real-world examples of what works. Here’s what you should take away:

• Use clear, specific, and concise language — Avoid jargon and technical terms that might confuse users
• Provide actionable solutions — Tell users exactly how to fix the issue, not just that something went wrong
• Be empathetic, not accusatory — Remove blame from the message and use a reassuring, helpful tone
• Make errors visually clear — Use color, typography, and iconography to ensure users can quickly spot and understand the issue
• Ensure timeliness — Implement real-time validation to catch errors early (e.g., inline form validation)
• Make error messages dismissible — Allow users to clear resolved errors without refreshing the page
• Test and track performance — Monitor these KPIs to evaluate the effectiveness of your error messages:
• Error frequency — How often do users encounter errors?
• Time to recover — How long does it take users to correct mistakes?
• Completion rates — Do users successfully complete tasks after encountering errors?
• Time to completion — Does resolving an error significantly delay the user’s journey?

By refining your approach to error messages, you’re not just preventing user frustration — you’re enhancing user experience, improving conversions, and building trust in your product.