{"id":13650,"date":"2023-03-21T07:23:29","date_gmt":"2023-03-21T14:23:29","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=13650"},"modified":"2023-03-22T02:35:12","modified_gmt":"2023-03-22T09:35:12","slug":"ux-best-practices-designing-the-overlooked-empty-states","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/","title":{"rendered":"Designing the Overlooked Empty States \u2013 UX Best Practices"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/Qh-X8LJeBjD63qmxfQeHF_c-M73Dp8dIqEg5dF8xUOM_-eK5qrGRVmBmQ-zyPqRafHIzmkqSa_zoFr3cMLG5uv6lMpDUYCOQtlaOyp02WKnHmxT0L6NteNeWuxiel9Hp71TSTzelvwzbzd5TjYoSh1Q\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Empty states are a pause, not a dead end. Whether a user stumbles across an empty state due to first-use, accomplishment, or error, your product needs to guide them to the next logical step.&nbsp;&nbsp;<\/p>\n\n\n\n<p>This article explores empty states and their vital importance for UX design. We also offer some tips with real-world examples from leading product developers.<\/p>\n\n\n\n<p><em>Have you ever tried interactive prototyping?<\/em> Interactive prototypes enhance testing so designers deliver meaningful product experiences to their users. Design your first interactive prototype with UXPin. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-are-empty-states\">What are Empty States?<\/h2>\n\n\n\n<p>An empty state is a UI design pattern telling users the system has no content to display. Some empty states instruct users on how to find, create, or add content to the screen.<\/p>\n\n\n\n<p>Designers also use empty states to communicate a screen\/feature&#8217;s purpose with tips and instructions. For example, Gmail&#8217;s empty state tells users how to customize the inbox&#8217;s tabs.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/JAg1J7TASxPMJKqf-qYq2uWruoCDZMGL2N22-E_FuGVMZRNZb8iDZX2AB7DlYUAwJ9bX9rCajjy4-eFUHIWpq27Zgj8zpiHzYVFKVyjtu11iM2YQ7c4ZCRR9Ok9eVvWSiIZSgYGVCME8TrvmtlkVm38\" alt=\"empty state ui design example\" width=\"750\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-types-of-empty-states\">Types of Empty States<\/h2>\n\n\n\n<p>Empty states represent a pivotal point in the user journey. Each is an opportunity to build rapport, drive engagement, educate, entertain, or delight users.<\/p>\n\n\n\n<p>There are four primary empty states users encounter in product design:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>First use:<\/strong> When new users first interact with a digital product.<\/li>\n\n\n\n<li><strong>User cleared: <\/strong>The user has just completed a task or cleared all content associated with the app or site.<\/li>\n\n\n\n<li><strong>Error state: <\/strong>The user has encountered a roadblock during the interaction.<\/li>\n\n\n\n<li><strong>No data:<\/strong> The system has no data to display or no results from a search query.<\/li>\n<\/ol>\n\n\n\n<p>Many designers overlook the opportunities for empty states to engage users. They tend to focus more on the associated tasks and features rather than optimizing empty states for engagement.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-empty-state-examples\">Empty State Examples<\/h2>\n\n\n\n<p>Here are four user interface design examples of when and how to use the types of empty states mentioned above.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-first-use-onboarding\">First use\/onboarding<\/h3>\n\n\n\n<p>Onboarding or first use empty states, present users with a blank canvas with instructions to get started. These screens must invoke action, typically with a primary call to action button.<\/p>\n\n\n\n<p>Facebook Messenger&#8217;s empty state install screen has a lot going on in a small space, but the primary CTA is prominent using plain language.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/facebook-empty-state-576x1024.png\" alt=\"facebook empty state\" class=\"wp-image-43853\" width=\"288\" height=\"512\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/facebook-empty-state-576x1024.png 576w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/facebook-empty-state-169x300.png 169w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/facebook-empty-state.png 750w\" sizes=\"auto, (max-width: 288px) 100vw, 288px\" \/><\/figure>\n\n\n\n<p>Let&#8217;s explore what users can do on this empty state screen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lets you know that you can take pictures or record videos in-app<\/li>\n\n\n\n<li>Exerts social pressure by telling you how many of your Facebook friends are using the app<\/li>\n\n\n\n<li>Allows you to look up additional information about the app before installing<\/li>\n\n\n\n<li>An adorable graphic to create rapport and encourage engagement<\/li>\n<\/ul>\n\n\n\n<p>Facebook Messenger&#8217;s install screen is a fantastic example of how designers can use empty states to encourage and educate first-time users.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-completing-tasks-user-cleared\">Completing tasks\/user cleared<\/h3>\n\n\n\n<p>Empty states are an opportunity to prompt users toward new interactions or congratulate them on completing tasks. This feedback acts as a placeholder and reward, helping to develop <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/hook-users-habit-forming-ux-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">habit-forming products<\/a>.<\/p>\n\n\n\n<p>These &#8220;user-cleared&#8221; empty states are essential for encouraging further engagement. Here are three things to incorporate in task completion empty states:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Step 1: First, inform the user they have completed the task<\/li>\n\n\n\n<li>Step 2: Reward the user\u2013i.e., congratulate them<\/li>\n\n\n\n<li>Step 3: Steer them toward the next step<\/li>\n<\/ol>\n\n\n\n<p>We&#8217;ll use the <a href=\"http:\/\/www.writeupp.com\/?utm_expid=71803742-7.iadyWTHTQ0ecyUnDfiS7fA.0&amp;utm_referrer=https%3A%2F%2Fwww.google.com%2F\">WritekUpp<\/a> app for iOS as an example:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image03-4-169x300.png\" alt=\"image03\" class=\"wp-image-13653\" width=\"169\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image03-4-169x300.png 169w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image03-4-577x1024.png 577w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image03-4.png 640w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Step 1: &#8220;You&#8217;ve got no more tasks&#8221;<\/li>\n\n\n\n<li>Step 2: &#8220;Well done you!&#8221;<\/li>\n\n\n\n<li>Step 3: &#8220;To create another task, simply tap below.&#8221; followed by the CTA: &#8220;Create New Task&#8221;<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-error-states\">Error states<\/h3>\n\n\n\n<p>Errors are inevitable and can happen on both ends\u2013<em>from the user and the system<\/em>. What&#8217;s important is telling the user what went wrong, why it happened (to avoid future occurrences), and what to do next.<\/p>\n\n\n\n<p>This example from the iOS App Store shows what happens when users follow a link to an app unavailable in their region. The App Store informs the user what went wrong &#8220;Item Not Available&#8221; and why &#8220;The item you&#8217;ve requested is not currently available in the UK Store.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"169\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image01-5-169x300.png\" alt=\"image01\" class=\"wp-image-13656\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image01-5-169x300.png 169w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image01-5.png 491w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/figure>\n\n\n\n<p>What&#8217;s missing from the App Store in this example is what to do next\u2013<em>which likely causes frustration<\/em>. A good option would be &#8220;Search for similar apps available in your region.&#8221;<\/p>\n\n\n\n<p>Humor can help people feel better about errors but must not confuse or create added friction. This error screen from Piccsy is an excellent example of subtle humor. Here, Piccsy presents users with an illustration linking to the artist and a CTA to return to the app.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"453\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image05-1-453x300.png\" alt=\"image05\" class=\"wp-image-13657\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image05-1-453x300.png 453w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image05-1-768x508.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image05-1-1024x678.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image05-1.png 1369w\" sizes=\"auto, (max-width: 453px) 100vw, 453px\" \/><\/figure>\n\n\n\n<p>IMDB uses a similar humorous strategy with its 404 page. The page informs the user that the URL &#8220;was not found&#8221; with a link to return to the homepage. IMDB also includes a 404-altered quote from a movie, linking to the film&#8217;s IMDB page.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image02-5-700x292.png\" alt=\"image02\" class=\"wp-image-13658\" width=\"525\" height=\"219\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image02-5-700x292.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image02-5-768x320.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image02-5.png 928w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><\/figure>\n\n\n\n<p>What&#8217;s clever about the IMDB <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/404-page-examples\/\">404 error page<\/a> is that it educates and entertains. Users might discover a new movie while being amused by a humorous quote.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-no-data\">No data<\/h3>\n\n\n\n<p>Empty states must help users find content when the system doesn&#8217;t have answers. This example from DuckDuckGo shows what happens when there are no results for a query\u2013<em>rare with the sheer volume of content on search engines<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/ZY1zHn6-Kj-6MiLPpRp6AbIZNPFG_ud6mGqfRjdACam6xdO_HcwBecMsIBPX3jdQYlAhR1TgUb5XRaJgApL_8ORwsGZSu2xcZSSv-Ed3OiavNUsbCGPeNHLIhEB059s4NhbLtaxDOWuoV2Cpzp-zzow\" alt=\"\" width=\"750\"\/><\/figure>\n\n\n\n<p>First, DuckDuckGo displays the user&#8217;s query, &#8220;No results found for [QUERY].&#8221; This prompts the user to check their keyword for errors. Next, the search engine offers suggestions to fix the problem:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Make sure all words are spelled correctly.<\/li>\n\n\n\n<li>Try different keywords.<\/li>\n\n\n\n<li>Try more general keywords.<\/li>\n\n\n\n<li>Try fewer keywords.<\/li>\n<\/ul>\n\n\n\n<p>These &#8220;no data&#8221; empty states can frustrate users because the system doesn&#8217;t have an answer. Keeping user interfaces clean with actionable advice can help them solve the problem\u2013<em>as DuckDuckGo does above<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-empty-state-design-tips\">Empty State Design Tips<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-use-visual-cues\">Use visual cues<\/h3>\n\n\n\n<p>Visual cues through empty-state illustrations or GIFs help users understand what to do next. These must be relevant to the action while offering encouragement. Most importantly, the graphics mustn&#8217;t distract users.<\/p>\n\n\n\n<p>For example, Google uses a document illustration to accompany the CTA, &#8220;Drop files here or use the &#8216;New&#8217; button.&#8221; The simple image is relevant to the task, doesn&#8217;t distract the user, and draws attention to the instruction.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/kqbAwIjcclljipKXybe0ydLHfxlNRwwAIPUn23C9oK8XFqiz7t2EBlT303UW1lsFaDH9D3eHrAuATWPaq6VAGyei5tBH-Ib_X2BPVisBRfzcyaLf47uCza05JqCMhPdKNR0nU4Glisrg6m_VoyrfI1k\" alt=\"\" width=\"750\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-offer-suggestions\">Offer suggestions<\/h3>\n\n\n\n<p>Suggestions help guide users with directions and ideas to get started. For example, Spotify&#8217;s new playlist empty state includes a CTA to add songs but also offers &#8220;Recommended songs&#8221; based on the playlist&#8217;s name\u2013<em>meaning if the user renamed the playlist to something more descriptive, &#8220;90s rap playlist,&#8221; they might get better recommendations<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/avfga69oOE1Eq8jym3GKLegDpRVpWsdulUiL1j3TTwZoMx8j0RZqDsVnfrFRHEPCHtvCRhoPOkUf3xiXeGYA5HOftvTJgDBkE5GLlG5ozl8yAJYucA1OPLbCeei9DFSbAoQQfjtwXVVaqXZ9WEUtFsE\" alt=\"\" width=\"185\" height=\"400\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-personalize-empty-states\">Personalize empty states<\/h3>\n\n\n\n<p>Personalizing empty states with user data (i.e., their name) or personalized content creates a more meaningful experience, increasing engagement and product satisfaction. For example, Facebook Messager&#8217;s install screen shows the user&#8217;s friends also using the service.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-make-empty-state-copy-meaningful\">Make empty-state copy meaningful<\/h3>\n\n\n\n<p>Microcopy expert and UX writer Kinneret Yifrah, argues that empty-state <a href=\"https:\/\/uxdesign.cc\/7-types-of-empty-states-and-how-to-use-them-717006dfaa8a\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">copy must be meaningful<\/a>. She structures copy with three key elements:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Heading: <\/strong>describes the state<\/li>\n\n\n\n<li><strong>Motivation:<\/strong> how will it benefit the user or how to do it<\/li>\n\n\n\n<li><strong>CTA:<\/strong> descriptive call-to-action button<\/li>\n<\/ul>\n\n\n\n<p>Using this structure, we can create an empty state for an example alert:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Heading: <\/strong>You haven&#8217;t set up any alerts yet.<\/li>\n\n\n\n<li><strong>Motivation:<\/strong> Alerts will keep you updated, so you won&#8217;t have to worry about missing out on something important.<\/li>\n\n\n\n<li><strong>CTA:<\/strong> Create alert<\/li>\n<\/ul>\n\n\n\n<p>Following Kinneret&#8217;s user-focused strategy will help create meaningful copy that motivates users to take action.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-prototype-and-test-empty-states-with-uxpin\">Prototype and Test Empty States With UXPin<\/h2>\n\n\n\n<p>With UXPin&#8217;s advanced features, designers can create empty-state prototypes that replicate the final product user experience accurately. UXPin prototypes are fully interactive with immersive code-like functionality, giving design teams actionable feedback to test and iterate for higher-quality outcomes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-interactive-prototyping\">Interactive prototyping<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interactive-prototype-setting-user-interactions-without-coding\/\" target=\"_blank\" rel=\"noreferrer noopener\">Interactive prototypes<\/a> respond to user engagement like clicks\/taps, swipes, scrolls, etc. Additionally, UXPin&#8217;s prototypes allow designers to capture data from user inputs and use them elsewhere in the application. These prototypes include navigation, transitions, animations, popups, and other interaction design characteristics that accurately replicate the final product experience.<\/p>\n\n\n\n<p>For example, our <a href=\"https:\/\/www.uxpin.com\/examples\/auction\" target=\"_blank\" rel=\"noreferrer noopener\">example Auction app<\/a> allows users to select an item and place a bid.<\/p>\n\n\n\n<p>The confirmation screen tells the user their bid is live and when the auction ends. A prominent CTA takes the user back to the auction&#8217;s homepage.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/rjtos1umFuK6NTFXwP6dsXPNzQPEtGiX0QE1o97u-CGGEGDWX3FBkZozk1iA_N5pGw6nIiBdQ9aXwHf3yKhN61VGgvL3Jjnaa8ChzxdxSBtqClxdVolQJzM947bopmu_65WfeHsjTbSIifmbkLM0JNU\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p>With UXPin, you can make this screen more personalized using <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/variables\" target=\"_blank\" rel=\"noreferrer noopener\">Variables<\/a>, including the user&#8217;s name and their bid captured from the previous screen.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/5TpMlK1N1h3-egm93ReAH4D75tJf5FDr0UlgtrbuA_8Jr3aNapFWGe8ln2kMfVAurN6C7y2pL0nirc9bF7jsZ9mFaC3TnetGvKcLPhL0aLhJF0rzVlC4QWeoxkniJE9RZVqvSf3y6gFNQRgwg1TgxCU\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p>While the auction app doesn&#8217;t have an empty state, it demonstrates the powerful functionality UXPin offers designers for accurate prototyping and testing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-actionable-feedback\">Actionable feedback<\/h3>\n\n\n\n<p>Better prototypes result in meaningful, actionable feedback from usability participants and stakeholders. Designers can solve more problems while identifying valuable business opportunities during the design process.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-smooth-design-handoffs\">Smooth design handoffs<\/h3>\n\n\n\n<p>These prototypes also streamline design handoffs because front-end developers can visualize exactly what the product must do. UXPin prototypes require less explanation and documentation, allowing product teams to release products faster with less friction between design and development.<\/p>\n\n\n\n<p>Design, prototype, and test at higher fidelity with code-like functionality in UXPin. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to build your first interactive prototype with the world&#8217;s most advanced UX design tool.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Know best practices for designing delightful empty states.<\/p>\n","protected":false},"author":3,"featured_media":43858,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,6],"tags":[],"class_list":["post-13650","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ux-design"],"yoast_title":"","yoast_metadesc":"Learn the UX best practices of designing empty states, a crucial, but often overlooked screen to design that prompts users to take action.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Designing the Overlooked Empty States \u2013 UX Best Practices | UXPin<\/title>\n<meta name=\"description\" content=\"Learn the UX best practices of designing empty states, a crucial, but often overlooked screen to design that prompts users to take action.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing the Overlooked Empty States \u2013 UX Best Practices\" \/>\n<meta property=\"og:description\" content=\"Learn the UX best practices of designing empty states, a crucial, but often overlooked screen to design that prompts users to take action.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-21T14:23:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-22T09:35:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/empty-states.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-best-practices-designing-the-overlooked-empty-states\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-best-practices-designing-the-overlooked-empty-states\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Designing the Overlooked Empty States \u2013 UX Best Practices\",\"datePublished\":\"2023-03-21T14:23:29+00:00\",\"dateModified\":\"2023-03-22T09:35:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-best-practices-designing-the-overlooked-empty-states\\\/\"},\"wordCount\":1506,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-best-practices-designing-the-overlooked-empty-states\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/empty-states.png\",\"articleSection\":[\"Blog\",\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-best-practices-designing-the-overlooked-empty-states\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-best-practices-designing-the-overlooked-empty-states\\\/\",\"name\":\"Designing the Overlooked Empty States \u2013 UX Best Practices | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-best-practices-designing-the-overlooked-empty-states\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-best-practices-designing-the-overlooked-empty-states\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/empty-states.png\",\"datePublished\":\"2023-03-21T14:23:29+00:00\",\"dateModified\":\"2023-03-22T09:35:12+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Learn the UX best practices of designing empty states, a crucial, but often overlooked screen to design that prompts users to take action.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-best-practices-designing-the-overlooked-empty-states\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-best-practices-designing-the-overlooked-empty-states\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-best-practices-designing-the-overlooked-empty-states\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/empty-states.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/empty-states.png\",\"width\":1200,\"height\":600,\"caption\":\"empty states\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ux-best-practices-designing-the-overlooked-empty-states\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Designing the Overlooked Empty States \u2013 UX Best Practices\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Designing the Overlooked Empty States \u2013 UX Best Practices | UXPin","description":"Learn the UX best practices of designing empty states, a crucial, but often overlooked screen to design that prompts users to take action.","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:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/","og_locale":"en_US","og_type":"article","og_title":"Designing the Overlooked Empty States \u2013 UX Best Practices","og_description":"Learn the UX best practices of designing empty states, a crucial, but often overlooked screen to design that prompts users to take action.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/","og_site_name":"Studio by UXPin","article_published_time":"2023-03-21T14:23:29+00:00","article_modified_time":"2023-03-22T09:35:12+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/empty-states.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Designing the Overlooked Empty States \u2013 UX Best Practices","datePublished":"2023-03-21T14:23:29+00:00","dateModified":"2023-03-22T09:35:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/"},"wordCount":1506,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/empty-states.png","articleSection":["Blog","UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/","name":"Designing the Overlooked Empty States \u2013 UX Best Practices | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/empty-states.png","datePublished":"2023-03-21T14:23:29+00:00","dateModified":"2023-03-22T09:35:12+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Learn the UX best practices of designing empty states, a crucial, but often overlooked screen to design that prompts users to take action.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/empty-states.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/03\/empty-states.png","width":1200,"height":600,"caption":"empty states"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ux-best-practices-designing-the-overlooked-empty-states\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Designing the Overlooked Empty States \u2013 UX Best Practices"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/13650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=13650"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/13650\/revisions"}],"predecessor-version":[{"id":43856,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/13650\/revisions\/43856"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/43858"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=13650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=13650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=13650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}