{"id":1204,"date":"2015-09-15T21:00:22","date_gmt":"2015-09-15T20:00:22","guid":{"rendered":"https:\/\/uxstudioteam.com\/website\/?p=1204"},"modified":"2022-05-19T14:35:00","modified_gmt":"2022-05-19T13:35:00","slug":"empty-state-design","status":"publish","type":"post","link":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/empty-state-design\/","title":{"rendered":"Empty State Design – What You Need to Know"},"content":{"rendered":"

\"\"One of the first design elements users meet with in an application is the so-called \u201cempty state\u201d. When we first open a CRM software, the list of our customers is yet empty. When we open a new document for editing, the document is plain. Traditionally, in case of a desktop\/offline application, blankness is an indicator that content can be filled in there.<\/strong><\/p>\n

<\/p>\n

Still, this heuristics is not necessarily applicable on the web, because on the web a blank page often means something else. We had been working on Protopmail, an e-mail marketing software; its central element is the e-mail editor. On occasion of a user testing, a user opened the e-mail editor and was waiting\u2026 and waiting\u2026<\/p>\n

\u201cI guess it\u2019s still opening\u2026 I don\u2019t know. I don\u2019t see anything.\u201d<\/em><\/p>\n

\"empty<\/a><\/p>\n

Well yes, this is exactly the moment when a user closes a web app \u2013 if \u201cnot even the main page loads properly\u201d, what could the user expect. The thing with web apps is that the user can never be sure why the screen is empty: is it because it is designed to be so, or because it\u2019s not loading properly?<\/p>\n

What\u2019s the solution? We want to leave the screen blank, so that the editing option is obvious, but we still want to put something there, so that the user doesn\u2019t think that the page is still loading. Riddle: what is there but still not there? Solution: the watermark!<\/p>\n

\"protopmail_dragndrop_illustration_v4\"<\/a><\/p>\n

The punchline is that by using the watermark we kill two birds with one stone: we indicate that the loading of the page is done, but also give instructions to the user.<\/p>\n

Empty State Design Examples<\/h2>\n

Before the era of flat design, the typical indicator was depth, as if a piece of puzzle was missing from the screen.<\/p>\n

\"tumblr_mi9cglFdJN1rdf37to1_1280\"<\/a><\/p>\n

With the arrival of the era of flat design, depth was gone and was replaced by a light-grey watermark. Regarding text, in most of the cases the application affirms that this is the empty state and the user should follow the instructions in order to proceed.<\/p>\n

\"tumblr-first-step\"<\/a><\/p>\n

What\u2019s even better: placing directly a link\/button for proceeding in the empty state.<\/p>\n

\"empty+action\"<\/a>The initial stage for proceeding also might be shown with an arrow.<\/p>\n

\"ampty+arrow\"<\/a><\/p>\n

If the target audience of the software allows it, the empty state is a good place for humor or a little extra surprise for the users.<\/p>\n

We are constantly sharing our thoughts and design tricks on this blog that help developers in creating applications. You will hear about our next article on our Facebook page.<\/strong><\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

One of the first design elements users meet with in an application is the so-called \u201cempty state\u201d. When we first open a CRM software, the list of our customers is yet empty. When we open a new document for editing, the document is plain. Traditionally, in case of a desktop\/offline application, blankness is an indicator…<\/p>\n","protected":false},"author":5,"featured_media":6199,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[26],"tags":[],"table_tags":[],"coauthors":[67],"yoast_head":"\nEmpty State Design - What You Need to Know<\/title>\n<meta name=\"description\" content=\"One of the first design elements users meet with in an application is the so-called \u201cempty state\u201d.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/uxstudioteam.com\/ux-blog\/empty-state-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Empty State Design - What You Need to Know\" \/>\n<meta property=\"og:description\" content=\"One of the first design elements users meet with in an application is the so-called \u201cempty state\u201d.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uxstudioteam.com\/ux-blog\/empty-state-design\/\" \/>\n<meta property=\"og:site_name\" content=\"UX Studio\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/uxstudio.hu\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-15T20:00:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-19T13:35:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2015\/09\/empty_state_design_what_you_need_to_know.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"5184\" \/>\n\t<meta property=\"og:image:height\" content=\"3456\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Zsombor V\u00e1rnagy-T\u00f3th\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:site\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zsombor V\u00e1rnagy-T\u00f3th\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/empty-state-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/empty-state-design\/\"},\"author\":{\"name\":\"Zsombor V\u00e1rnagy-T\u00f3th\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/54c337ee75ff468581bc5dc18e837e3b\"},\"headline\":\"Empty State Design – What You Need to Know\",\"datePublished\":\"2015-09-15T20:00:22+00:00\",\"dateModified\":\"2022-05-19T13:35:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/empty-state-design\/\"},\"wordCount\":439,\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"articleSection\":[\"Web App UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/empty-state-design\/\",\"url\":\"https:\/\/uxstudioteam.com\/ux-blog\/empty-state-design\/\",\"name\":\"Empty State Design - What You Need to Know\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\"},\"datePublished\":\"2015-09-15T20:00:22+00:00\",\"dateModified\":\"2022-05-19T13:35:00+00:00\",\"description\":\"One of the first design elements users meet with in an application is the so-called \u201cempty state\u201d.\",\"breadcrumb\":{\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/empty-state-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/uxstudioteam.com\/ux-blog\/empty-state-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/empty-state-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Empty State Design – What You Need to Know\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\",\"name\":\"UX Studio\",\"description\":\"UX design blog about designing user experience for web and mobile apps with UX research and focus on usability and ergonomics\",\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\",\"name\":\"UX studio\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png\",\"contentUrl\":\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png\",\"width\":1000,\"height\":1000,\"caption\":\"UX studio\"},\"image\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/uxstudio.hu\/\",\"https:\/\/twitter.com\/UXstudio\",\"https:\/\/www.instagram.com\/uxstudioteam\/\",\"https:\/\/www.linkedin.com\/company\/uxstudio\/\",\"https:\/\/nl.pinterest.com\/uxstudiohu\/pins\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/54c337ee75ff468581bc5dc18e837e3b\",\"name\":\"Zsombor V\u00e1rnagy-T\u00f3th\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/d851e0be19be0c2bdab444ef5fc7e122\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/11021263_10204504590628807_3924672066736644399_n-150x150.jpg\",\"contentUrl\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/11021263_10204504590628807_3924672066736644399_n-150x150.jpg\",\"caption\":\"Zsombor V\u00e1rnagy-T\u00f3th\"},\"sameAs\":[\"http:\/\/uxstudioteam.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Empty State Design - What You Need to Know","description":"One of the first design elements users meet with in an application is the so-called \u201cempty state\u201d.","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:\/\/uxstudioteam.com\/ux-blog\/empty-state-design\/","og_locale":"en_US","og_type":"article","og_title":"Empty State Design - What You Need to Know","og_description":"One of the first design elements users meet with in an application is the so-called \u201cempty state\u201d.","og_url":"https:\/\/uxstudioteam.com\/ux-blog\/empty-state-design\/","og_site_name":"UX Studio","article_publisher":"https:\/\/www.facebook.com\/uxstudio.hu\/","article_published_time":"2015-09-15T20:00:22+00:00","article_modified_time":"2022-05-19T13:35:00+00:00","og_image":[{"width":5184,"height":3456,"url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2015\/09\/empty_state_design_what_you_need_to_know.jpg","type":"image\/jpeg"}],"author":"Zsombor V\u00e1rnagy-T\u00f3th","twitter_card":"summary_large_image","twitter_creator":"@UXstudio","twitter_site":"@UXstudio","twitter_misc":{"Written by":"Zsombor V\u00e1rnagy-T\u00f3th","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uxstudioteam.com\/ux-blog\/empty-state-design\/#article","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/empty-state-design\/"},"author":{"name":"Zsombor V\u00e1rnagy-T\u00f3th","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/54c337ee75ff468581bc5dc18e837e3b"},"headline":"Empty State Design – What You Need to Know","datePublished":"2015-09-15T20:00:22+00:00","dateModified":"2022-05-19T13:35:00+00:00","mainEntityOfPage":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/empty-state-design\/"},"wordCount":439,"publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"articleSection":["Web App UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/empty-state-design\/","url":"https:\/\/uxstudioteam.com\/ux-blog\/empty-state-design\/","name":"Empty State Design - What You Need to Know","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website"},"datePublished":"2015-09-15T20:00:22+00:00","dateModified":"2022-05-19T13:35:00+00:00","description":"One of the first design elements users meet with in an application is the so-called \u201cempty state\u201d.","breadcrumb":{"@id":"https:\/\/uxstudioteam.com\/ux-blog\/empty-state-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uxstudioteam.com\/ux-blog\/empty-state-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/uxstudioteam.com\/ux-blog\/empty-state-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/"},{"@type":"ListItem","position":2,"name":"Empty State Design – What You Need to Know"}]},{"@type":"WebSite","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/","name":"UX Studio","description":"UX design blog about designing user experience for web and mobile apps with UX research and focus on usability and ergonomics","publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization","name":"UX studio","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/","url":"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png","contentUrl":"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png","width":1000,"height":1000,"caption":"UX studio"},"image":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/uxstudio.hu\/","https:\/\/twitter.com\/UXstudio","https:\/\/www.instagram.com\/uxstudioteam\/","https:\/\/www.linkedin.com\/company\/uxstudio\/","https:\/\/nl.pinterest.com\/uxstudiohu\/pins\/"]},{"@type":"Person","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/54c337ee75ff468581bc5dc18e837e3b","name":"Zsombor V\u00e1rnagy-T\u00f3th","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/d851e0be19be0c2bdab444ef5fc7e122","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/11021263_10204504590628807_3924672066736644399_n-150x150.jpg","contentUrl":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/11021263_10204504590628807_3924672066736644399_n-150x150.jpg","caption":"Zsombor V\u00e1rnagy-T\u00f3th"},"sameAs":["http:\/\/uxstudioteam.com"]}]}},"_links":{"self":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/1204"}],"collection":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/comments?post=1204"}],"version-history":[{"count":1,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/1204\/revisions"}],"predecessor-version":[{"id":6685,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/1204\/revisions\/6685"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media\/6199"}],"wp:attachment":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media?parent=1204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/categories?post=1204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/tags?post=1204"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/table_tags?post=1204"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/coauthors?post=1204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}