{"id":37112,"date":"2023-04-18T07:30:35","date_gmt":"2023-04-18T07:30:35","guid":{"rendered":"https:\/\/uxwritinghub.com\/?p=37112"},"modified":"2023-04-18T12:02:23","modified_gmt":"2023-04-18T12:02:23","slug":"empty-state-examples","status":"publish","type":"post","link":"https:\/\/uxwritinghub.com\/empty-state-examples\/","title":{"rendered":"Top 10 Examples and Guidelines for Empty States"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"37112\" class=\"elementor elementor-37112\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2a54e4c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2a54e4c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1443f92\" data-id=\"1443f92\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fb2cdda elementor-toc--minimized-on-tablet elementor-widget elementor-widget-table-of-contents\" data-id=\"fb2cdda\" data-element_type=\"widget\" data-settings=\"{&quot;exclude_headings_by_selector&quot;:[],&quot;headings_by_tags&quot;:[&quot;h2&quot;,&quot;h3&quot;,&quot;h4&quot;,&quot;h5&quot;,&quot;h6&quot;],&quot;marker_view&quot;:&quot;numbers&quot;,&quot;minimize_box&quot;:&quot;yes&quot;,&quot;minimized_on&quot;:&quot;tablet&quot;,&quot;hierarchical_view&quot;:&quot;yes&quot;,&quot;min_height&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;min_height_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;min_height_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"table-of-contents.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-toc__header\">\n\t\t\t<h4 class=\"elementor-toc__header-title\">\n\t\t\t\tTable of Contents\t\t\t<\/h4>\n\t\t\t\t\t\t\t<div class=\"elementor-toc__toggle-button elementor-toc__toggle-button--expand\"><svg class=\"e-font-icon-svg e-fas-chevron-down\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\"><\/path><\/svg><\/div>\n\t\t\t\t<div class=\"elementor-toc__toggle-button elementor-toc__toggle-button--collapse\"><svg class=\"e-font-icon-svg e-fas-chevron-up\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\"><\/path><\/svg><\/div>\n\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-toc__body\">\n\t\t\t<div class=\"elementor-toc__spinner-container\">\n\t\t\t\t<svg class=\"elementor-toc__spinner eicon-animation-spin e-font-icon-svg e-eicon-loading\" aria-hidden=\"true\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M500 975V858C696 858 858 696 858 500S696 142 500 142 142 304 142 500H25C25 237 238 25 500 25S975 237 975 500 763 975 500 975Z\"><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5db39cc elementor-widget elementor-widget-text-editor\" data-id=\"5db39cc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Introduction<\/h2><p>According to the IBM Carbon Design system, <b>empty states are \u201cmoments in an app where there is no data to display to the user.\u201d <\/b>They are most commonly seen the first time a user interacts with a product or page but can also occur when data has been deleted or is unavailable.\u00a0<\/p><p>But as we will see, they occur in a variety of instances.<\/p><p>As <a href=\"https:\/\/uxwritinghub.com\/what-is-ux-writing\/\" target=\"_blank\" rel=\"noopener\">UX writers<\/a>, we are heavily involved when it comes to designing these \u201cin-between\u201d moments in digital products. Above anything else, they provide opportunities to <b>improve the user experience and add more value to the business<\/b>.<\/p><p>In this article, we&#8217;ll look at some good examples of empty states and consider what we can learn from them.<\/p><h2>Example 1: First use<\/h2><p>Typically, an empty state occurs when a user signs up for a product or a service, and there&#8217;s nothing to show.\u00a0<\/p><p>Here is a good example by <a href=\"https:\/\/www.dropbox.com\/home\" target=\"_blank\" rel=\"noopener\">Dropbox<\/a> Paper (who are known for their strong UX writing). Dropbox has done a good job condensing the core value of its service into a compelling headline. More than that, they encourage the user to take action. When it comes to empty states, this is the absolute best thing you can do.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1ee79bd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1ee79bd\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b3c1dd5\" data-id=\"b3c1dd5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c10dced elementor-widget elementor-widget-image\" data-id=\"c10dced\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img width=\"800\" height=\"428\" src=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic1-1-1024x548.png\" class=\"attachment-large size-large wp-image-37115\" alt=\"Dropbox paper empty state\" srcset=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic1-1-1024x548.png 1024w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic1-1-300x161.png 300w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic1-1-768x411.png 768w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic1-1-400x214.png 400w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic1-1-150x80.png 150w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic1-1.png 1250w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Dropbox Paper empty state example<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7d29e0e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7d29e0e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-95ba41c\" data-id=\"95ba41c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1bf59fc elementor-widget elementor-widget-image\" data-id=\"1bf59fc\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img width=\"800\" height=\"317\" src=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-13.57.44-1024x406.png\" class=\"attachment-large size-large wp-image-37158\" alt=\"Dropbox Paper after empty state is filled\" srcset=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-13.57.44-1024x406.png 1024w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-13.57.44-300x119.png 300w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-13.57.44-768x305.png 768w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-13.57.44-1536x610.png 1536w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-13.57.44.png 2048w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-13.57.44-400x159.png 400w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-13.57.44-150x60.png 150w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Dropbox paper once the empty state is populated with data<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7b17197 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7b17197\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-df311ca\" data-id=\"df311ca\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0f40cf5 elementor-widget elementor-widget-text-editor\" data-id=\"0f40cf5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Example 2: User cleared<\/h2><p>The second use case for empty states is when the user has cleared their inbox or task list and there&#8217;s nothing <em>left<\/em> to show.\u00a0<\/p><p>An example can be found in <a href=\"https:\/\/feedly.com\/\" target=\"_blank\" rel=\"noopener\">Feedly<\/a>, an aggregating service that compiles news feeds from a variety of online sources and customizes them to the user&#8217;s needs. Their on-brand illustration reassures the user, but more importantly, it encourages them to take action.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7ce3910 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7ce3910\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4e0f613\" data-id=\"4e0f613\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4a374af elementor-widget elementor-widget-image\" data-id=\"4a374af\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/elementor\/thumbs\/Pic2-q56lh1i296jhmmuiijbm45j7qfx1hf926pq7x5g0v4.png\" title=\"Feedly empty state\" alt=\"Feedly empty state\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Feedly's \"user cleared\" empty state<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-186c521 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"186c521\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d0f4958\" data-id=\"d0f4958\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1c7997a elementor-widget elementor-widget-text-editor\" data-id=\"1c7997a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Example 3: Errors<\/h2><p>The UX writing community has a debate over whether some errors should be treated as empty states. Some errors result in empty states because they are moments when there is no data to display (see example 4).\u00a0<\/p><p>Depending on what the error is, UX Writers can use it as an opportunity to demonstrate their creativity and get users to take action.\u00a0<\/p><p>Below is an example of a successful error state in <a href=\"https:\/\/www.skype.com\/en\/get-skype\/skype-for-mobile\/\" target=\"_blank\" rel=\"noopener\">Skype for Android<\/a> that is both simple and effective. There&#8217;s no confusion as to where the problem is. By simply tapping the button, the user can refresh the page easily.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-66ad78c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"66ad78c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3e021eb\" data-id=\"3e021eb\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-17f9fc9 elementor-widget elementor-widget-image\" data-id=\"17f9fc9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/elementor\/thumbs\/pic3-q56livarjl1k7c6xubrhyoxhbewqg8i9rre7iiqgg6.jpeg\" title=\"Skype empty state error message combo\" alt=\"Skype empty state error message combo\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Empty state\/error message combo<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8e2db02 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8e2db02\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c3e3809\" data-id=\"c3e3809\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b4268df elementor-widget elementor-widget-text-editor\" data-id=\"b4268df\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Example 4: No data to show<\/h2><p>The user can also see an empty state when searching for something, but there are no results. In this scenario, it may be nobody\u2019s fault \u2014 there are simply no results to show. Again, this provides an opportunity for UX writers to reassure and guide users to further actions.\u00a0<\/p><p>Here is an example from an app called <a href=\"https:\/\/www.instacart.com\/\" target=\"_blank\" rel=\"noopener\">Instacart<\/a>,\u00a0a grocery delivery service that employs personal shoppers to shop for you and then deliver the groceries to your home.\u00a0<\/p><p>This is a positive, encouraging, and clear example. Notice what they do in three steps: (1) they tell the user what happened, (2) they suggest what the user can do, and (3) knowing it might not help, they inform the user what they do to solve their problem in the future. Their copy creates a good user experience by bringing value to the user while saving their time.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-64704a6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"64704a6\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-39aacf8\" data-id=\"39aacf8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-933f4f9 elementor-widget elementor-widget-image\" data-id=\"933f4f9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img width=\"473\" height=\"1024\" src=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic4-473x1024.png\" class=\"attachment-large size-large wp-image-37124\" alt=\"No results empty state by Instacart\" srcset=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic4-473x1024.png 473w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic4-139x300.png 139w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic4-400x866.png 400w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic4-150x325.png 150w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic4.png 670w\" sizes=\"(max-width: 473px) 100vw, 473px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">No results empty state by Instacart<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b5965b0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b5965b0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ca44933\" data-id=\"ca44933\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-41e0e67 elementor-widget elementor-widget-text-editor\" data-id=\"41e0e67\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Example 5: Helpful whenever possible<\/h2><p>Check out this example of genuine helpfulness at an airport gate. Because there&#8217;s no data to show, the screen would normally be empty, perhaps displaying some generic commercial advertisement.\u00a0<\/p><p>The UX writer, however, saw this empty screen as an opportunity. They empathized with a very common airport struggle \u2014 not enough outlets to charge devices before the flight. By using casual, human, and witty language, they speak <em><strong>with<\/strong><\/em> the user and create a positive customer experience.\u00a0<\/p><p>When we empathise well with our users, we improve their experience as customers. In turn, we gain greater customer loyalty. This is what it looks like in action.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f2be42e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f2be42e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-28d14e3\" data-id=\"28d14e3\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c445c23 elementor-widget elementor-widget-image\" data-id=\"c445c23\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-18-14.14.01.png\" title=\"Helpful, funny empty state at an airport. The screen reads, &#8220;This gate&#8217;s empty. So many open plugs.&#8221;\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Funny, helpful empty state from Southwest airlines<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-abb8706 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"abb8706\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-500c67a\" data-id=\"500c67a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7e05c50 elementor-widget elementor-widget-text-editor\" data-id=\"7e05c50\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Example 6: 404 page<\/h2><p>Most UX professionals don\u2019t necessarly view 404 pages as empty states, but there are reasons to approach them as such. After all, the data that was supposed to be displayed isn&#8217;t there.\u00a0<\/p><p>Copy on 404 pages can be (and should be) functional, playful, and goal-oriented. Medium, an online social publishing platform, does a great job here. Most users are familiar with what 404 means, so it is only appropriate that it is displayed prominently on the page along with a clear headline.\u00a0<\/p><p>Right below the 404, Medium provides a way out by searching for something else (notice the helpful <a href=\"https:\/\/uxwritinghub.com\/what-is-microcopy\/\" target=\"_blank\" rel=\"noopener\">microcopy<\/a> below the search field). Further down, the thumbnail provides suggestions based on the user&#8217;s previous readings if he or she is still lost. The structure and minimalism of this 404 page really appeal to me. Sometimes less is enough<span style=\"color: var( --e-global-color-text ); font-weight: var( --e-global-typography-text-font-weight );\">.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5339f47 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5339f47\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-174508a\" data-id=\"174508a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0af0de9 elementor-widget elementor-widget-image\" data-id=\"0af0de9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img width=\"800\" height=\"609\" src=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic6-1024x780.png\" class=\"attachment-large size-large wp-image-37126\" alt=\"Medium 404 page\" srcset=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic6-1024x780.png 1024w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic6-300x229.png 300w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic6-768x585.png 768w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic6-400x305.png 400w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic6-150x114.png 150w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic6.png 1340w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Medium's 404 page, which we could consider an empty state<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b94d2d2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b94d2d2\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d6b0500\" data-id=\"d6b0500\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-049aacd elementor-widget elementor-widget-text-editor\" data-id=\"049aacd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Example 7: Showing a tutorial at the start<\/h2><p>As mentioned, empty states often occur when the user signs up for the product or service for the first time.\u00a0<span style=\"color: var( --e-global-color-text ); font-weight: var( --e-global-typography-text-font-weight );\">This example is another approach to the empty state that appears when the user interacts with a product for the first time. It presents an interesting opportunity to show the user around and introduce some of the features of the product.\u00a0<\/span><\/p><p><span style=\"color: var( --e-global-color-text ); font-weight: var( --e-global-typography-text-font-weight );\">In this example by <\/span><a style=\"font-weight: var( --e-global-typography-text-font-weight ); background-color: #ffffff;\" href=\"https:\/\/www.xero.com\/\" target=\"_blank\" rel=\"noopener\">Xero<\/a><span style=\"color: var( --e-global-color-text ); font-weight: var( --e-global-typography-text-font-weight );\">, an accounting SaaS platform, the empty state does just that. While the user may be unsure where to click first, the welcome video is prominently displayed at the top of the page, along with a few suggestions.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a682d97 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a682d97\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c5525af\" data-id=\"c5525af\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-37d688a elementor-widget elementor-widget-image\" data-id=\"37d688a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img src=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic7.png\" title=\"Empty state with tutorial by Xero\" alt=\"Empty state with tutorial by Xero\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Empty state with tutorial by Xero<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-53d64dd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"53d64dd\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a36d3e6\" data-id=\"a36d3e6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-27bac1a elementor-widget elementor-widget-text-editor\" data-id=\"27bac1a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Example 8: Dashboard filled with default data<\/h2><p>This example doesn\u2019t look like an empty state at first, but in a way, it is.<\/p><p>After signing in for the first time, the user sees a pre-filled dashboard that presents the app&#8217;s features. Rather than allowing the user to take action on their own, the app acts preemptively on their behalf.\u00a0<\/p><p>This is what\u2019s been done in <a href=\"https:\/\/fr-fr.acuityscheduling.com\/\" target=\"_blank\" rel=\"noopener\">Acuity Scheduling<\/a>. Your work week gets organized automatically with the software&#8217;s schedule, so you immediately get an idea of how the SaaS platform works.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c0dc9a3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c0dc9a3\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7808c48\" data-id=\"7808c48\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b1a85e1 elementor-widget elementor-widget-image\" data-id=\"b1a85e1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img width=\"800\" height=\"327\" src=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic8-1024x418.png\" class=\"attachment-large size-large wp-image-37131\" alt=\"Default data in a dashboard empty state\" srcset=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic8-1024x418.png 1024w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic8-300x123.png 300w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic8-768x314.png 768w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic8-1536x627.png 1536w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic8-400x163.png 400w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic8-150x61.png 150w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic8.png 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Defualt data in a dashboard empty state<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7f89b49 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7f89b49\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-84a96b8\" data-id=\"84a96b8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-91289cd elementor-widget elementor-widget-text-editor\" data-id=\"91289cd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Example 9: Dashboard filled with sample data<\/h2><p>On a similar note, empty states can be used to pre-fill the dashboard with sample data.\u00a0<\/p><p>In order to help you understand how <a href=\"https:\/\/trello.com\/\" target=\"_blank\" rel=\"noopener\">Trello<\/a>&#8216;s task management system works, they created a welcome board for you which is pre-filled with cards and past activities. You can delete the whole board and create a new one from scratch.\u00a0<\/p><p>In any case, you get a good understanding of what the platform works like.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0f85d77 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0f85d77\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6987d03\" data-id=\"6987d03\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-ae0dc99 elementor-widget elementor-widget-image\" data-id=\"ae0dc99\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img width=\"800\" height=\"488\" src=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic9-1024x624.png\" class=\"attachment-large size-large wp-image-37132\" alt=\"Trello dashboard with example data\" srcset=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic9-1024x624.png 1024w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic9-300x183.png 300w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic9-768x468.png 768w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic9-1536x935.png 1536w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic9-400x244.png 400w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic9-150x91.png 150w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic9.png 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Trello dashboard with example data<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a5da8c3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a5da8c3\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-80b40ef\" data-id=\"80b40ef\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-21d3c80 elementor-widget elementor-widget-text-editor\" data-id=\"21d3c80\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Example 10: Including a gamification element<\/h2><p>Empty states can provide an opportunity to include a gamification element, such as here in <a href=\"https:\/\/www.carwow.co.uk\/#gref\" target=\"_blank\" rel=\"noopener\">Carwow<\/a>.\u00a0<\/p><p>When you go off course on this car-buying comparison site, its 404 page helps you stay on track (no pun intended). Visitors are presented with an 8-bit game-style screen, and you just need to hit the start to play this simple horizontal-scrolling game.\u00a0<\/p><p>Another good thing about this empty state is that they do a good job of not blaming the user for going off track. They take the blame themselves.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d2eccea elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d2eccea\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b1c4811\" data-id=\"b1c4811\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fb8b3f3 elementor-widget elementor-widget-image\" data-id=\"fb8b3f3\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img width=\"800\" height=\"415\" src=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic10-1024x531.png\" class=\"attachment-large size-large wp-image-37136\" alt=\"404 page empty state with 8-bit style game\" srcset=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic10-1024x531.png 1024w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic10-300x156.png 300w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic10-768x399.png 768w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic10-1536x797.png 1536w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic10-400x208.png 400w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic10-150x78.png 150w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/pic10.png 2000w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">404 page with 8-bit style game<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5d68136 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5d68136\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ec9d761\" data-id=\"ec9d761\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d0264cc elementor-widget elementor-widget-text-editor\" data-id=\"d0264cc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Conclusion<\/h2><p>Designing well-thought-out and useful empty-state screens can help drive product engagement, delight users, and reduce churn rate. Empty states also create an opportunity to express your voice brand, prod users to further action, and help them stay on site.\u00a0<\/p><p><b>Look out for unobvious situations where empty states occur, such as in examples 8 and 9 and see if you can pre-fill them with helpful data<\/b>.<\/p><p>Make empty states helpful and delightful whenever possible. In return, you will reduce the chance of losing users to your competitors and improve customer loyalty.<\/p><p>Create empty states that invite further action. Use them to show your brand voice. Keep them useful, helpful, and delightful. Your users will be pleased.<\/p><h2>Further reading<\/h2><p><a href=\"https:\/\/uxwritinghub.com\/error-message-examples\/\" target=\"_blank\" rel=\"noopener\">Best 10 Examples And Guidelines For Error Messages<\/a><\/p><p><a href=\"https:\/\/uxwritinghub.com\/ux-writing-examples\/\" target=\"_blank\" rel=\"noopener\">35 Examples of Great UX Writing To Spark Inspiration<\/a><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In this article, we&#8217;ll look at some good examples of empty states and consider what we can learn from them. <\/p>\n","protected":false},"author":79,"featured_media":37155,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"tpgb_global_settings":"","_eb_attr":"","content-type":"","_mi_skip_tracking":false},"categories":[59,56],"tags":[],"acf":{"descriptions":null},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Top 10 Examples and Guidelines for Empty States - UX WRITING HUB<\/title>\n<meta name=\"description\" content=\"Best examples of empty states in UX writing. A new way of thinking about them and the lessons we can learn.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/uxwritinghub.com\/empty-state-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Top 10 Examples and Guidelines for Empty States - UX WRITING HUB\" \/>\n<meta property=\"og:description\" content=\"Best examples of empty states in UX writing. A new way of thinking about them and the lessons we can learn.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uxwritinghub.com\/empty-state-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"UX WRITING HUB\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-18T07:30:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-18T12:02:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/543.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1293\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Boris Slesar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Boris Slesar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/uxwritinghub.com\/#website\",\"url\":\"https:\/\/uxwritinghub.com\/\",\"name\":\"UX WRITING HUB\",\"description\":\"Learn to write user experience\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/uxwritinghub.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/uxwritinghub.com\/empty-state-examples\/#primaryimage\",\"url\":\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/543.png\",\"contentUrl\":\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/543.png\",\"width\":1293,\"height\":720,\"caption\":\"Empty states examples and guidelines\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/uxwritinghub.com\/empty-state-examples\/#webpage\",\"url\":\"https:\/\/uxwritinghub.com\/empty-state-examples\/\",\"name\":\"Top 10 Examples and Guidelines for Empty States - UX WRITING HUB\",\"isPartOf\":{\"@id\":\"https:\/\/uxwritinghub.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/uxwritinghub.com\/empty-state-examples\/#primaryimage\"},\"datePublished\":\"2023-04-18T07:30:35+00:00\",\"dateModified\":\"2023-04-18T12:02:23+00:00\",\"author\":{\"@id\":\"https:\/\/uxwritinghub.com\/#\/schema\/person\/c4b86c6949c9ed65382f61268182b598\"},\"description\":\"Best examples of empty states in UX writing. A new way of thinking about them and the lessons we can learn.\",\"breadcrumb\":{\"@id\":\"https:\/\/uxwritinghub.com\/empty-state-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/uxwritinghub.com\/empty-state-examples\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/uxwritinghub.com\/empty-state-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/uxwritinghub.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Top 10 Examples and Guidelines for Empty States\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/uxwritinghub.com\/#\/schema\/person\/c4b86c6949c9ed65382f61268182b598\",\"name\":\"Boris Slesar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/uxwritinghub.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/01\/Boris-Slesar-96x96.jpg\",\"contentUrl\":\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/01\/Boris-Slesar-96x96.jpg\",\"caption\":\"Boris Slesar\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Top 10 Examples and Guidelines for Empty States - UX WRITING HUB","description":"Best examples of empty states in UX writing. A new way of thinking about them and the lessons we can learn.","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:\/\/uxwritinghub.com\/empty-state-examples\/","og_locale":"en_US","og_type":"article","og_title":"Top 10 Examples and Guidelines for Empty States - UX WRITING HUB","og_description":"Best examples of empty states in UX writing. A new way of thinking about them and the lessons we can learn.","og_url":"https:\/\/uxwritinghub.com\/empty-state-examples\/","og_site_name":"UX WRITING HUB","article_published_time":"2023-04-18T07:30:35+00:00","article_modified_time":"2023-04-18T12:02:23+00:00","og_image":[{"width":1293,"height":720,"url":"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/543.png","type":"image\/png"}],"author":"Boris Slesar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Boris Slesar","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/uxwritinghub.com\/#website","url":"https:\/\/uxwritinghub.com\/","name":"UX WRITING HUB","description":"Learn to write user experience","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/uxwritinghub.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uxwritinghub.com\/empty-state-examples\/#primaryimage","url":"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/543.png","contentUrl":"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/543.png","width":1293,"height":720,"caption":"Empty states examples and guidelines"},{"@type":"WebPage","@id":"https:\/\/uxwritinghub.com\/empty-state-examples\/#webpage","url":"https:\/\/uxwritinghub.com\/empty-state-examples\/","name":"Top 10 Examples and Guidelines for Empty States - UX WRITING HUB","isPartOf":{"@id":"https:\/\/uxwritinghub.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/uxwritinghub.com\/empty-state-examples\/#primaryimage"},"datePublished":"2023-04-18T07:30:35+00:00","dateModified":"2023-04-18T12:02:23+00:00","author":{"@id":"https:\/\/uxwritinghub.com\/#\/schema\/person\/c4b86c6949c9ed65382f61268182b598"},"description":"Best examples of empty states in UX writing. A new way of thinking about them and the lessons we can learn.","breadcrumb":{"@id":"https:\/\/uxwritinghub.com\/empty-state-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uxwritinghub.com\/empty-state-examples\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/uxwritinghub.com\/empty-state-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/uxwritinghub.com\/"},{"@type":"ListItem","position":2,"name":"Top 10 Examples and Guidelines for Empty States"}]},{"@type":"Person","@id":"https:\/\/uxwritinghub.com\/#\/schema\/person\/c4b86c6949c9ed65382f61268182b598","name":"Boris Slesar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/uxwritinghub.com\/#\/schema\/person\/image\/","url":"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/01\/Boris-Slesar-96x96.jpg","contentUrl":"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/01\/Boris-Slesar-96x96.jpg","caption":"Boris Slesar"}}]}},"tpgb_featured_images":{"full":["https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/543.png",1293,720,false],"tp-image-grid":["https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/543.png",700,390,false],"thumbnail":["https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/543-150x150.png",150,150,true],"medium":["https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/543-300x167.png",300,167,true],"medium_large":["https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/543-768x428.png",768,428,true],"large":["https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/04\/543-1024x570.png",800,445,true],"default":"https:\/\/uxwritinghub.com\/wp-content\/plugins\/the-plus-addons-for-block-editor\/assets\/images\/tpgb-placeholder.jpg"},"tpgb_post_meta_info":{"get_date":"April 18, 2023","category_list":{"category":[{"term_id":59,"name":"Best practices","slug":"content-strategy","term_group":0,"term_taxonomy_id":59,"taxonomy":"category","description":"","parent":0,"count":122,"filter":"raw"},{"term_id":56,"name":"Resources","slug":"resources","term_group":0,"term_taxonomy_id":56,"taxonomy":"category","description":"","parent":0,"count":61,"filter":"raw"}],"post_tag":false},"author_name":"Boris Slesar","author_url":"https:\/\/uxwritinghub.com\/author\/boris-slesar\/","author_email":"boris.slesar@gmail.com","author_website":"","author_description":"","author_facebook":"","author_twitter":"","author_instagram":"","author_role":["author"],"author_firstname":"","author_lastname":"","user_login":"Boris Slesar","author_avatar":"<img width=\"200\" height=\"200\" src=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/01\/Boris-Slesar-300x300.jpg\" class=\"avatar avatar-200 photo\" alt=\"\" srcset=\"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/01\/Boris-Slesar-300x300.jpg 300w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/01\/Boris-Slesar-150x150.jpg 150w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/01\/Boris-Slesar-24x24.jpg 24w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/01\/Boris-Slesar-48x48.jpg 48w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/01\/Boris-Slesar-96x96.jpg 96w, https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/01\/Boris-Slesar.jpg 400w\" sizes=\"(max-width: 200px) 100vw, 200px\" \/>","author_avatar_url":"https:\/\/uxwritinghub.com\/wp-content\/uploads\/2023\/01\/Boris-Slesar-96x96.jpg","comment_count":0,"post_likes":0,"post_views":0},"tpgb_post_category":{"category":"<a href=\"https:\/\/uxwritinghub.com\/category\/content-strategy\/\" alt=\"Best practices\" class=\"category-content-strategy\">Best practices<\/a> <a href=\"https:\/\/uxwritinghub.com\/category\/resources\/\" alt=\"Resources\" class=\"category-resources\">Resources<\/a> "},"_links":{"self":[{"href":"https:\/\/uxwritinghub.com\/wp-json\/wp\/v2\/posts\/37112"}],"collection":[{"href":"https:\/\/uxwritinghub.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uxwritinghub.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uxwritinghub.com\/wp-json\/wp\/v2\/users\/79"}],"replies":[{"embeddable":true,"href":"https:\/\/uxwritinghub.com\/wp-json\/wp\/v2\/comments?post=37112"}],"version-history":[{"count":3,"href":"https:\/\/uxwritinghub.com\/wp-json\/wp\/v2\/posts\/37112\/revisions"}],"predecessor-version":[{"id":37178,"href":"https:\/\/uxwritinghub.com\/wp-json\/wp\/v2\/posts\/37112\/revisions\/37178"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uxwritinghub.com\/wp-json\/wp\/v2\/media\/37155"}],"wp:attachment":[{"href":"https:\/\/uxwritinghub.com\/wp-json\/wp\/v2\/media?parent=37112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uxwritinghub.com\/wp-json\/wp\/v2\/categories?post=37112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uxwritinghub.com\/wp-json\/wp\/v2\/tags?post=37112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}