{"id":6188,"date":"2016-10-04T08:59:03","date_gmt":"2016-10-04T06:59:03","guid":{"rendered":"https:\/\/usersnap.com\/?p=6188"},"modified":"2026-04-13T13:32:09","modified_gmt":"2026-04-13T11:32:09","slug":"error-messages-best-practices","status":"publish","type":"post","link":"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/","title":{"rendered":"Best practices in mobile UX design: Creating error messages!"},"content":{"rendered":"\n<p><em>\u2018Errors\u2019 happen<\/em>. They happen in our apps and they happen in our life. Sometimes they happen because we made mistakes. Sometimes because a system failed. Whatever the cause, these errors \u2014 and how they are handled \u2014 can have a huge impact on the way a user experiences your app.<\/p>\n\n\n\n<p>Often overlooked, a lazy error handling and ill-constructed error messages can fill users with frustration, and make them stop using your app. A well-crafted error handling, on the other hand, can turn a moment of failure into a moment of delight.<\/p>\n\n\n\n<p>In this article, we\u2019ll examine how the design of apps can be optimized to prevent excessive user errors and how to create good error messages.<br>\n<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">What is an Error?<\/h2>\n\n\n\n<p>Errors (or error condition) occur when an app fails to complete an expected action, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The application does not understand <em>user input<\/em><\/li>\n\n\n\n<li>The application&nbsp;<em>fails<\/em><\/li>\n\n\n\n<li>A user intends to <em>run incompatible operations concurrently<\/em><\/li>\n<\/ul>\n\n\n\n<p>Every error, regardless of who is to blame, becomes a point <em>of friction<\/em> for your users. Luckily, a well-designed error handling can help reduce that friction.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Preventing User Errors<\/h2>\n\n\n\n<p>If you&#8217;re a web or app designer, you should be familiar with constraints. For example, it\u2019s hard to fill out a certain form or it\u2019s impossible to properly sync a data if a device has a poor network connection. You should take these constraints into account in order to minimize errors by <a href=\"https:\/\/usersnap.com\/blog\/in-app-feedback\/\">designing an app<\/a> that makes it easy for users to use it. In other words, it\u2019s better to prevent users from making errors in the first place by offering suggestions, utilizing constraints, and being flexible.<\/p>\n\n\n\n<p>Twitter famously has a strict character limit for tweets&nbsp;and warns users before they exceed that limit with a remaining character count.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/twitter-error-message.png\"><img decoding=\"async\" width=\"581\" height=\"303\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/twitter-error-message.png\" alt=\"twitter error message best practice\" class=\"wp-image-6189\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/twitter-error-message.png 581w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/twitter-error-message-300x156.png 300w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/twitter-error-message-140x73.png 140w\" sizes=\"(max-width: 581px) 100vw, 581px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Make Error Message Informative and Consistent<\/h2>\n\n\n\n<p>One of the <a href=\"http:\/\/babich.biz\/golden-rules-of-user-interface-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">10 Usability Heuristics<\/a> advises that it\u2019s important to communicate errors to users gracefully and clearly. An effective error message provides following information:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Communicate what is happening<\/li>\n\n\n\n<li>Describe how a user can resolve it<\/li>\n\n\n\n<li>Preserve as much user-entered input as possible<\/li>\n<\/ul>\n\n\n\n<p>By providing explanation and <a href=\"https:\/\/usersnap.com\/blog\/customer-feedback\/\">feedback<\/a>, you can decrease the potential friction of <a href=\"https:\/\/usersnap.com\/blog\/positive-user-experience\/\">user experience<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">User Input Errors<\/h2>\n\n\n\n<p>User input validations are meant to have conversations with users and guide them through the difficult times of errors and uncertainty. The output of this process is emotional rather than technical.<\/p>\n\n\n\n<p>The primary principle of input validation is this: \u201cTalk to the users! Tell when them what is wrong!\u201d Generally speaking, there are three important elements that good form validation consists of:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Right time and place<\/strong> for informing about errors<\/li>\n\n\n\n<li><strong>Right color<\/strong> for the message<\/li>\n\n\n\n<li><strong>Clear language<\/strong> for your message<\/li>\n<\/ul>\n\n\n\n<p>And all these moments have one major goal \u2014 <em>avoid confusion<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Right Time and Place (Inline Validation)<\/h2>\n\n\n\n<p>Users dislike when they go through the process of filling out a form only to find out at submission, that they\u2019ve made an error. The right time to inform about the success\/failure of provided data is right after the user has submitted the information. And it\u2019s a time when real-time validation comes into play.<\/p>\n\n\n\n<p>Real-time inline validation immediately informs users about the correctness of provided data. If you are performing inline form validation, and the field with the error is clearly marked, the submit button may be disabled until the error is corrected. It allows users to correct the errors they make faster without having to wait until they press the submit button to see the errors.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/google-error-message.png\"><img decoding=\"async\" width=\"550\" height=\"600\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/google-error-message.png\" alt=\"Google Error Messages\" class=\"wp-image-6190\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/google-error-message.png 550w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/google-error-message-275x300.png 275w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/google-error-message-128x140.png 128w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/a><figcaption class=\"wp-element-caption\"><em>Image credit: Google<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Below are a few examples of inline validation:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Incompatible values<\/strong><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/incompatible-values-error.png\"><img decoding=\"async\" width=\"442\" height=\"439\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/incompatible-values-error.png\" alt=\"incompatible values error messages\" class=\"wp-image-6191\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/incompatible-values-error.png 442w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/incompatible-values-error-150x150.png 150w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/incompatible-values-error-300x298.png 300w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/incompatible-values-error-140x140.png 140w\" sizes=\"(max-width: 442px) 100vw, 442px\" \/><\/a><figcaption class=\"wp-element-caption\"><em>An example of errors detected before form submission. Image credit: Material Design<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Over\/under character or word count<\/strong><\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/limitations-error-mobile.png\"><img decoding=\"async\" width=\"442\" height=\"317\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/limitations-error-mobile.png\" alt=\"input field error messages\" class=\"wp-image-6192\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/limitations-error-mobile.png 442w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/limitations-error-mobile-300x215.png 300w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/limitations-error-mobile-140x100.png 140w\" sizes=\"(max-width: 442px) 100vw, 442px\" \/><\/a><figcaption class=\"wp-element-caption\">An example<em> of an input field with character counter and error text. Image credit: Material Design<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Right Color (Intuitive Design)<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Color is one of the best tools to use when designing validation.<\/p>\n<\/blockquote>\n\n\n\n<p>Because it works on an instinctual level, adding red to error messages and yellow to warning messages is incredibly powerful. Error text should be legible, with noticeable contrast against its background color. But make sure that colors in your digital interface are accessible for your users, it\u2019s a really important aspect of a <a href=\"https:\/\/usersnap.com\/blog\/ui-ux-design-our-own-experience\/\">well-executed visual design<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/color-error-message.png\"><img decoding=\"async\" width=\"573\" height=\"500\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/color-error-message.png\" alt=\"color error message\" class=\"wp-image-6193\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/color-error-message.png 573w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/color-error-message-300x262.png 300w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/color-error-message-140x122.png 140w\" sizes=\"(max-width: 573px) 100vw, 573px\" \/><\/a><figcaption class=\"wp-element-caption\"><em>Make people notice the message. Image credit: Material Design<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Clear Message (What Happened)<\/h2>\n\n\n\n<p>Make sure your error messages sound like they\u2019ve been written for humans. In order to achieve this you should speak the same language as your users, avoid using technical jargon, express everything in the user\u2019s vocabulary. Your validation message should clearly state:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What went wrong and possibly why.<\/li>\n\n\n\n<li>What\u2019s the next step the user should take to fix the error.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/messages-error-mobile.png\"><img decoding=\"async\" width=\"757\" height=\"500\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/messages-error-mobile.png\" alt=\"mobile error messages\" class=\"wp-image-6194\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/messages-error-mobile.png 757w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/messages-error-mobile-300x198.png 300w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/messages-error-mobile-140x92.png 140w\" sizes=\"(max-width: 757px) 100vw, 757px\" \/><\/a><figcaption class=\"wp-element-caption\"><em>A typical error might state that \u201cthe data is invalid\u201d without telling the user why it\u2019s invalid (Is it a typo? Is it occupied?). Make sure the message is clear. Image credit: Material Design<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">App Errors<\/h2>\n\n\n\n<p>App errors occur independently of user input. It is an example of a situation where the user is getting something other than their desired state. When showing errors, explain why user cannot see anything, and how to solve this.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sync Error\/Failure To Load<\/h2>\n\n\n\n<p>When sync or connectivity is down or content has failed to load, the user should know that. Tell them upfront. Since you don\u2019t have a data, you can use empty states to fill this gap. Sad fact that most empty states often look\u2026 empty. In the example below, error screen only states \u201cAn error occurred\u201d and doesn\u2019t provide any helpful information.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/spotify-error-state.png\"><img decoding=\"async\" width=\"338\" height=\"600\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/spotify-error-state.png\" alt=\"spotify error message\" class=\"wp-image-6195\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/spotify-error-state.png 338w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/spotify-error-state-169x300.png 169w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/spotify-error-state-79x140.png 79w\" sizes=\"(max-width: 338px) 100vw, 338px\" \/><\/a><figcaption class=\"wp-element-caption\"><em>Dead-end empty state. Image credit: Spotify<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<p>And when these errors do slip through to users, having a <a href=\"https:\/\/usersnap.com\/free-visual-feedback-tool\">visual bug reporting tool<\/a> in place means your team can see exactly what went wrong, annotated screenshots and screen recordings beat a vague error description every time.<\/p>\n\n\n\n<p>Think of your error message as a conversation with your user. Use friendly and helpful empty states in a moment of failure. Assist users by providing the basic required information, and encourage users to solve the problem.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/mobile-screen-error-message.png\"><img decoding=\"async\" width=\"337\" height=\"600\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/mobile-screen-error-message.png\" alt=\"mobile error message\" class=\"wp-image-6196\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/mobile-screen-error-message.png 337w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/mobile-screen-error-message-169x300.png 169w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/mobile-screen-error-message-79x140.png 79w\" sizes=\"(max-width: 337px) 100vw, 337px\" \/><\/a><figcaption class=\"wp-element-caption\"><em>Feel lost and unconnected, like you are on a deserted island? Follow the advice, keep calm, light a fire, and keep refreshing. Image credit: Azendoo<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<p>If appropriate, present a link (or button) to help a user accomplish their task. But you should only offer options that you can actually support. For example, don\u2019t offer an option like \u201cTry again\u201d in cases where you can detect that the operation will fail.<\/p>\n\n\n\n<p>Or if the case is a loading time issue, make sure you have a <a href=\"https:\/\/usersnap.com\/blog\/progress-indicators\/\">progress indicator<\/a> in place.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Never Show The Raw Error Message<\/h2>\n\n\n\n<p>Messages like the example below are cryptic and scary.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/photos-error-message-ios.png\"><img decoding=\"async\" width=\"282\" height=\"500\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/photos-error-message-ios.png\" alt=\"mobile error messages developer\" class=\"wp-image-6197\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/photos-error-message-ios.png 282w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/photos-error-message-ios-169x300.png 169w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/photos-error-message-ios-79x140.png 79w\" sizes=\"(max-width: 282px) 100vw, 282px\" \/><\/a><figcaption class=\"wp-element-caption\"><em>This error message was written by a developer for a developer.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Don\u2019t assume people know about the context of a message or they are tech-savvy, tell people what\u2019s wrong in simple words. How would you explain the error to them, in human speak? Write those words down. That\u2019s your error message.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Incompatible State Errors<\/h2>\n\n\n\n<p>Incompatible state errors occur when users attempt to run operations that conflict, such as making a call while in airplane mode or trying to play online video while being offline. You should help prevent users from putting themselves into these situations by clearly communicating the states they are selecting. Simply, don\u2019t let people start something they can\u2019t finish.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/material-design-error-message.png\"><img decoding=\"async\" width=\"281\" height=\"500\" src=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/material-design-error-message.png\" alt=\"mobile error messages\" class=\"wp-image-6198\" srcset=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/material-design-error-message.png 281w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/material-design-error-message-169x300.png 169w, https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/09\/material-design-error-message-79x140.png 79w\" sizes=\"(max-width: 281px) 100vw, 281px\" \/><\/a><figcaption class=\"wp-element-caption\"><em>Clarify the reason for and origination of the error. Image credit: Material Design<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Designing the best error messages<\/h2>\n\n\n\n<p>The best error message is the one that never shows up. It is always best to prevent errors from happening in the first place by guiding users in the right direction ahead of time. But when errors do arise, a well-designed error handling not only help teach users how to use the app as you intended, but they also prevent users from feeling ignorant.<\/p>\n\n\n\n<p><em><strong>About the author:<\/strong><\/em><\/p>\n\n\n\n<p>This post originally appeared on <a href=\"http:\/\/babich.biz\/mobile-ux-design-user-errors\/\" target=\"_blank\" rel=\"noopener noreferrer\">babich.biz<\/a>, written by Nick Babich. Nick is a software developer who\u2019s passionate about user experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u2018Errors\u2019 happen. They happen in our apps and they happen in our life. Sometimes they happen because we made mistakes. Sometimes because a system failed. Whatever the cause, these errors \u2014 and how they are handled \u2014 can have a huge impact on the way a user experiences your app. Often overlooked, a lazy error [&hellip;]<\/p>\n","protected":false},"author":29,"featured_media":16133,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ub_ctt_via":"","footnotes":""},"categories":[8],"tags":[],"class_list":["post-6188","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development-blog"],"acf":[],"featured_image_src":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Best-practices-in-mobile-UX-design_-Creating-error-messages@1x.png","author_info":{"display_name":"Nick Babich","author_link":"https:\/\/usersnap.com\/blog\/author\/nick-babich\/"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Error Messages Designing and UX 101 - Usersnap Blog<\/title>\n<meta name=\"description\" content=\"Creating error messages for your website or app offers great user experience value. Keep your customers engaged even if something goes wrong.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Error Messages Designing and UX 101 - Usersnap Blog\" \/>\n<meta property=\"og:description\" content=\"Creating error messages for your website or app offers great user experience value. Keep your customers engaged even if something goes wrong.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/\" \/>\n<meta property=\"og:site_name\" content=\"Usersnap Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/usersnap\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-04T06:59:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-13T11:32:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Best-practices-in-mobile-UX-design_-Creating-error-messages@1x.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nick Babich\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@usersnap\" \/>\n<meta name=\"twitter:site\" content=\"@usersnap\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nick Babich\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/\"},\"author\":{\"name\":\"Nick Babich\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/86b885e12e4d50fa8984b59b545426ee\"},\"headline\":\"Best practices in mobile UX design: Creating error messages!\",\"datePublished\":\"2016-10-04T06:59:03+00:00\",\"dateModified\":\"2026-04-13T11:32:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/\"},\"wordCount\":1336,\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Best-practices-in-mobile-UX-design_-Creating-error-messages@1x.png\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/\",\"url\":\"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/\",\"name\":\"Error Messages Designing and UX 101 - Usersnap Blog\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Best-practices-in-mobile-UX-design_-Creating-error-messages@1x.png\",\"datePublished\":\"2016-10-04T06:59:03+00:00\",\"dateModified\":\"2026-04-13T11:32:09+00:00\",\"description\":\"Creating error messages for your website or app offers great user experience value. Keep your customers engaged even if something goes wrong.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/#primaryimage\",\"url\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Best-practices-in-mobile-UX-design_-Creating-error-messages@1x.png\",\"contentUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Best-practices-in-mobile-UX-design_-Creating-error-messages@1x.png\",\"width\":1200,\"height\":630},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/usersnap.com\/blog\/#website\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"name\":\"Usersnap Blog\",\"description\":\"Learn more about how to collect user feedback and build better products with the magic power of feedback.\",\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/usersnap.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\",\"name\":\"Usersnap\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"contentUrl\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"width\":136,\"height\":26,\"caption\":\"Usersnap\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/usersnap\",\"https:\/\/x.com\/usersnap\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/86b885e12e4d50fa8984b59b545426ee\",\"name\":\"Nick Babich\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g\",\"caption\":\"Nick Babich\"},\"sameAs\":[\"http:\/\/babich.biz\"],\"url\":\"https:\/\/usersnap.com\/blog\/author\/nick-babich\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Error Messages Designing and UX 101 - Usersnap Blog","description":"Creating error messages for your website or app offers great user experience value. Keep your customers engaged even if something goes wrong.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/","og_locale":"en_US","og_type":"article","og_title":"Error Messages Designing and UX 101 - Usersnap Blog","og_description":"Creating error messages for your website or app offers great user experience value. Keep your customers engaged even if something goes wrong.","og_url":"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/","og_site_name":"Usersnap Blog","article_publisher":"https:\/\/www.facebook.com\/usersnap","article_published_time":"2016-10-04T06:59:03+00:00","article_modified_time":"2026-04-13T11:32:09+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Best-practices-in-mobile-UX-design_-Creating-error-messages@1x.png","type":"image\/png"}],"author":"Nick Babich","twitter_card":"summary_large_image","twitter_creator":"@usersnap","twitter_site":"@usersnap","twitter_misc":{"Written by":"Nick Babich","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/#article","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/"},"author":{"name":"Nick Babich","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/86b885e12e4d50fa8984b59b545426ee"},"headline":"Best practices in mobile UX design: Creating error messages!","datePublished":"2016-10-04T06:59:03+00:00","dateModified":"2026-04-13T11:32:09+00:00","mainEntityOfPage":{"@id":"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/"},"wordCount":1336,"publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"image":{"@id":"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Best-practices-in-mobile-UX-design_-Creating-error-messages@1x.png","articleSection":["Web Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/","url":"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/","name":"Error Messages Designing and UX 101 - Usersnap Blog","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/#primaryimage"},"image":{"@id":"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Best-practices-in-mobile-UX-design_-Creating-error-messages@1x.png","datePublished":"2016-10-04T06:59:03+00:00","dateModified":"2026-04-13T11:32:09+00:00","description":"Creating error messages for your website or app offers great user experience value. Keep your customers engaged even if something goes wrong.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/usersnap.com\/blog\/error-messages-best-practices\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/error-messages-best-practices\/#primaryimage","url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Best-practices-in-mobile-UX-design_-Creating-error-messages@1x.png","contentUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2021\/03\/Best-practices-in-mobile-UX-design_-Creating-error-messages@1x.png","width":1200,"height":630},{"@type":"WebSite","@id":"https:\/\/usersnap.com\/blog\/#website","url":"https:\/\/usersnap.com\/blog\/","name":"Usersnap Blog","description":"Learn more about how to collect user feedback and build better products with the magic power of feedback.","publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/usersnap.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/usersnap.com\/blog\/#organization","name":"Usersnap","url":"https:\/\/usersnap.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","contentUrl":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","width":136,"height":26,"caption":"Usersnap"},"image":{"@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/usersnap","https:\/\/x.com\/usersnap"]},{"@type":"Person","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/86b885e12e4d50fa8984b59b545426ee","name":"Nick Babich","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf17df90d27d14aa08d8bb92295fbff69c27a2ac583088d7e57fdc06d54ade5?s=96&d=mm&r=g","caption":"Nick Babich"},"sameAs":["http:\/\/babich.biz"],"url":"https:\/\/usersnap.com\/blog\/author\/nick-babich\/"}]}},"_links":{"self":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/6188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/comments?post=6188"}],"version-history":[{"count":1,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/6188\/revisions"}],"predecessor-version":[{"id":22512,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/6188\/revisions\/22512"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media\/16133"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media?parent=6188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/categories?post=6188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/tags?post=6188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}