Did you know 70% of online shopping carts are abandoned, costing businesses $18 billion annually? One major culprit: poorly designed checkout error messages. These messages can either guide users to complete their purchase or frustrate them enough to leave. Here’s how to get it right:
- Write Clear Messages: Avoid vague phrases like "Invalid input." Instead, specify the issue and how to fix it (e.g., "ZIP code doesn't match the state entered").
- Provide Fixes: Include step-by-step instructions or suggestions to resolve errors. For example, suggest correcting email typos or formatting phone numbers.
- Place Messages Smartly: Show errors near the problematic fields, not as pop-ups, to minimize confusion.
- Make Messages Visible: Use red text, icons, and borders to highlight errors clearly without relying solely on color.
- Match Your Brand's Voice: Keep the tone friendly, helpful, and aligned with your brand, avoiding blame.
Why Generic Error Messages Drive Users Away (And How To Fix It)
Rule 1: Write Clear Messages
Clear error messages can make a big difference in reducing cart abandonment and creating a smoother checkout process. Let’s explore why generic messages miss the mark and how to write notifications that guide users effectively.
Avoid Generic Messages
Messages like "Something went wrong" or "Invalid input" leave users confused and unsure about what to do next. As one testing participant put it:
"But this message could mean anything. That systems error could be corruption on your phone line, problem at Currys, problem at the bank, problem at their bank, problem at your bank, your bank problem at MasterCard or Visa. It doesn't really say anything."
Instead of being vague, make your error notifications more useful by including:
- What caused the error
- How it impacts the transaction
- Clear instructions to resolve the issue
Add Specific Details
Only 2% of e-commerce sites use error messages that adapt to the exact issue at hand . Here’s how you can make your messages more precise:
| Instead of Saying | Better Message | Why It Works |
|---|---|---|
| "Invalid ZIP code" | "The state entered is not valid with the ZIP code entered" | Pinpoints the mismatch for easy correction |
| "Invalid phone number" | "Phone number can only contain numbers – please remove any special characters" | Explains the exact formatting needed |
| "Invalid email" | "Please enter an email including @" | Highlights the missing element |
This level of detail helps users understand the problem, its cause, and how to fix it - all while keeping the tone positive.
Jakob Nielsen, an expert in usability, points out that "effectively handling errors is crucial because it's one of the 5 quality components of usable experiences" .
Rosie Allabarton also emphasizes the potential of error messages to strengthen your brand:
"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."
For more complex input fields, consider creating 4–7 tailored error messages to cover different scenarios . This approach helps users quickly understand and fix problems, leading to fewer frustrations and more completed checkouts.
Rule 2: Tell Users How to Fix Errors
Identifying errors is just the first step. The next, and equally important, step is to guide users on how to resolve them. Once you've written clear error messages, focus on providing actionable solutions that users can follow.
Give Step-by-Step Fixes
To help users recover quickly, provide clear, actionable steps. Avoid leaving them confused or guessing. Research shows that error messages with detailed instructions improve recovery time and reduce checkout abandonment rates .
Here’s how some top e-commerce brands handle error corrections effectively:
| Company | Generic Message | Improved Message | Impact |
|---|---|---|---|
| Away | "Card number invalid" | "Your card number is incomplete" | Pinpoints exact issue |
| Sony | "Invalid phone number" | "Phone number can only contain numbers" | Provides clear formatting |
| B&H Photo | "Invalid phone" | "Phone number is too short" | Specifies length requirement |
A great example of helpful error handling comes from Doodle. When users try logging in with an email and password linked to a social media account, they receive this message:
"It seems like you usually log in with Facebook or Gmail with that email"
This message not only identifies the issue but also points users toward the correct login method, reducing frustration. Beyond step-by-step instructions, offering additional support can make error resolution even easier.
Add Help Options
For more complicated issues, include direct support options like links to help articles or customer support contact details. This can make a big difference in resolving user frustrations.
Casper showcases this approach well by addressing email typos. When users enter a common typo in their email address, the system suggests a correction, offering a simple "yes" option to update it . This proactive feature prevents users from abandoning the process and simplifies error correction.
To enhance support for users, consider these strategies:
- Track frequent validation errors to identify where help is needed most.
- Tailor messages for complex inputs to make them clearer.
- Provide easy access to support for technical issues.
- Regularly test error scenarios to ensure everything works smoothly .
These steps not only improve user experience but also build trust in your platform.
sbb-itb-d7fe25c
Rule 3: Put Messages in the Right Spot
Placing messages correctly can prevent checkout delays and improve conversions.
Show Errors Next to Fields
Place error messages directly next to or below the form fields causing the issue. This makes it easier for users to find and fix errors without scanning the entire page. It also reduces effort and frustration.
Using inline validation is a great approach. This method shows errors as soon as a field is completed, offering real-time feedback and making the process smoother.
Here’s how top e-commerce platforms manage error message placement:
| Company | Placement Strategy | User Impact |
|---|---|---|
| SurveyMonkey | Field-level messages with a form summary | Easier to spot issues |
| Hulu | Inline validation next to fields | Instant feedback |
Now, let’s look at what to avoid when placing error messages.
Don't Use Pop-ups
Pop-up error messages interrupt the checkout process, confuse users, and make fixing errors harder. Research shows that 98% of e-commerce sites still rely on generic pop-ups , which can lead to problems like:
- Users taking up to 5 minutes to resolve simple errors due to unclear messages .
- Accessibility challenges for screen reader users.
- Mobile users struggling to view both the error and the relevant field at the same time.
Instead, focus on these better practices:
- Place error messages close to the related fields.
- Use clear visual indicators and keep messages visible while users are making corrections.
- Ensure users don’t need to scroll or click to see error messages.
These adjustments can make the checkout experience much more user-friendly.
Rule 4: Make Messages Easy to See
How error messages look directly impacts how quickly users can fix mistakes, making the shopping experience smoother.
Use Clear Colors and Symbols
Error messages should grab attention right away. To do this effectively, combine multiple visual elements:
| Visual Element | Purpose | Best Practice |
|---|---|---|
| Color | Quick identification | Use red for errors; ensure high contrast with the background |
| Icons | Draw attention | Place a warning symbol on the left side of the message |
| Border | Highlight incorrect fields | Add a red outline around problematic fields |
| Text formatting | Boost readability | Use bold text for key details |
For example, Amazon uses red text, warning icons, and border highlights to make errors stand out .
"Error messages need to be easy to spot, but they also need to be helpful." - Vitaly Friedman, Author at Smashing Magazine
For broader issues affecting the whole system, use banner notifications at the top of the page. Keep the design consistent for clarity .
While visuals are important, error messages must also be accessible to everyone.
Design for All Users
Accessibility ensures your error messages work for all users, meeting both usability and legal standards. Here's how to make them inclusive:
- Screen Reader Compatibility: Use ARIA attributes like
aria-describedbyto link error messages to form fields, making them accessible for screen readers . - Beyond Color: Don't rely solely on color. Include clear text, recognizable icons (with alt text), strong borders, and high contrast ratios that meet WCAG guidelines.
- Placement Matters: Position error messages above the problem field, avoiding interference from mobile keyboards or autofill suggestions .
Gov.uk, for instance, uses a thick red vertical line alongside error messages for added clarity . CLEAR's checkout experience provides real-time feedback, helping users fix errors as they go .
Rule 5: Match Your Brand's Voice
Error messages are more than just functional - they're an opportunity to reflect your brand's personality while guiding customers effectively.
Keep Messages Helpful
Your error messages should do more than just inform - they should align with your brand's tone and make the user experience smoother. Here's how some well-known companies balance personality with clarity:
| Brand | Approach | Example Message |
|---|---|---|
| Slack | Light humor with clarity | "Hmm, that password doesn't look right. Double-check and try again." |
| HBOMax | Direct instruction | "Please enter your email as: [email protected]" |
| Microsoft Office | Solution-focused | "We couldn't save your changes. Here's what you can do next..." |
Clarity is key, but it doesn’t mean you have to sacrifice your brand voice. For example, Twitch incorporates a gaming-focused tone while staying clear and easy to understand . The goal is to help users without making them feel frustrated or alienated.
Avoid Blame in Messaging
When crafting error messages, focus on solutions rather than pointing fingers. Here's how you can do that:
- Use action-driven instructions instead of "you" statements.
- Be specific about how users can fix the issue.
- Maintain a positive and supportive tone.
For example, instead of saying, "You entered an invalid card number", try: "Please check the card number and ensure it matches the format: XXXX-XXXX-XXXX-XXXX."
"If you're unsure, keep a straight face." - Mailchimp's style guide
Conclusion
5 Main Rules Review
Crafting effective checkout error messages requires attention to detail and a focus on user experience. Research reveals that 98% of e-commerce sites still rely on generic error messages . This creates a chance to stand out by following these key guidelines:
| Rule | Key Implementation Points |
|---|---|
| Clear Writing | Replace vague messages with specific, actionable details. |
| Helpful Solutions | Offer step-by-step instructions to resolve the issue. |
| Strategic Placement | Position errors near the affected fields for clarity. |
| Visual Clarity | Use noticeable colors and symbols to highlight errors. |
| Brand Voice | Keep the tone friendly and avoid blaming the user. |
Consistently applying these rules ensures a smoother checkout experience for customers.
Test and Update Messages
Regular testing and updates are crucial to reduce checkout abandonment. With a global shopping cart abandonment rate averaging 70% , refining error handling can make a big difference.
Here are two practical steps retailers have taken to improve their error messaging:
1. Track and Analyze
Research from the Baymard Institute shows that using tailored error messages can significantly lower abandonment rates. For fields like card numbers or phone inputs, offering 4–7 specific error variations helps users correct mistakes more easily .
2. Roll Out Changes Gradually
A case study from Next UK highlighted how the generic message, "There was an error processing your card payment," confused users. It didn’t clarify whether the issue was with the bank, payment processor, or data entry . To avoid such confusion, preview all changes and test them thoroughly before rolling them out . Start by addressing the most common errors and those causing the highest abandonment rates .
