<http://schema.org/articleBody>
"Hamish McNeill is the QA Manager at Realmac Software, a small, award-winning independent iOS and OS X development studio behind Clear, Ember and Rapidweaver.\u00A0The original version of this article was published on the\u00A0Realmac Software blog.\r\n\r\n\r\n\r\n\r\nOne of my favourite things to do with new apps is to check out and screenshot the first-run experience. After navigating any initial welcome screens, I go in search of empty states; views within the app typically devoid of content or data.\r\n\r\nEssentially a blank slate, an empty state can be used to form the first impression made on a user. It\u2019s the importance of these views that I find so interesting as they can often be a good indicator as to the level detail put in to building the app.\r\n\r\nAs you\u2019ll see, empty views can often be far from empty.\r\nWarm welcome\r\nIt may just be the nature of a QA engineer, but I\u2019ll openly admit that when using an app for the first time I\u2019m incredibly skeptical of its quality until soundly proven otherwise. A good first impression goes a long way to pacify such doubts.\r\n\u201CFirst impressions are crucial. If you fail to design a thoughtful blank slate, you'll create a negative (and false) impression of your application or service.\u201D\r\n\r\n-\u00A0The Blank Slate, Getting Real by 37signals\r\nIt\u2019s common courtesy to greet new users upon arrival, even a simple \u201CWelcome to [App Name]\u201D can help show a user they\u2019re valued. However, it\u2019s as important to decide what to say next:\r\n\r\nDo any gestures which perform key functions in the app need to be introduced?\r\n\r\nIs there \u2018dummy\u2019 content designed to be manipulated by the user?\r\n\r\nDoes the user need to be shown how to add content of their own?\r\n\r\nEnsure the tone of the copy used in such first-run or welcome views is helpful and friendly, also take care not to appear condescending.\r\n\r\nWhen showing helpful information to assist users in getting up and running, avoid overwhelming them with too much information on the first run. Don\u2019t even think about pointing an arrow at a new feature just for the sake of highlighting the new.\r\n\r\nWould new (or existing) users find this feature easily themselves? If so, then there might not be a need to annotate it.\r\n\r\nApple provide a good point of reference for gauging how much useful information should be shown to new users. Both iBooks and iTunes use similar first-run experiences on the Mac.\r\n\r\n[caption id=&amp;quot;attachment_737192&amp;quot; align=&amp;quot;aligncenter&amp;quot; width=&amp;quot;730&amp;quot;] Do you think Apple want users to go to the iBooks Store?[/caption]\r\n\r\niBooks tells the user what\u2019s missing from this view, boldly stating that they\u2019ve no books in their library while clearly directing them how to add content. Users are directed to the iBooks Store not only by showing an arrow that highlights the Store button but also by having a dedicated call to action button within the empty view itself.\r\n\r\nWhile iTunes similarly channels users into adding (or purchasing) content, Apple also show the user an iTunes product-shot, filled with content, essentially showing the regular state of the app.\r\n\r\n[caption id=&amp;quot;attachment_737193&amp;quot; align=&amp;quot;aligncenter&amp;quot; width=&amp;quot;730&amp;quot;] iTunes shows users what their library could look like.[/caption]\r\n\r\nWhat\u2019s presented here is actually an uncluttered, ideal, view of how their library may look, set upon a backdrop of what is probably a clean install of OS X.\r\n\r\nBeing able to make a potentially complex app like iTunes appear both beautiful and simple within the first-run experience only serves to encourage users to follow the suggested steps and begin using the app in earnest.\r\nInbox Zero\r\nWhile many empty states guide users in performing actions to create and add content, this isn\u2019t suitable for every scenario.\r\n\r\nA great example of this is Inbox Zero, perhaps the most well known of empty states. Inbox Zero is essentially a view from which a user has removed, cleared or dealt with all previous content (email being the usual suspect here).\r\n\r\nSuch views are often designed to be rewarding and rightly so for users may aim (and often struggle) to reach this point within the app on a regular basis.\r\n\r\nFor example, the user of a fitness app has just completed a list comprising of their daily exercise routine. What should the fitness app do or suggest within the empty list-view now?\r\n\r\nIt\u2019s probably not a good idea to suggest adding more (or creating new) exercises here. A more helpful suggestion would be to congratulate the user on their impressive workout while showing an option to add a reminder, encouraging the user to plan their next training session.\r\n\r\nThis behaviour may help the user get on with another task while encouraging use of the app in the longer term, instead of being a plea for constant, prolonged use in the immediate-term.\r\n\r\nWhile I\u2019ll leave covering regular Inbox Zero type views in more detail for a future post, it\u2019s worth keeping in mind areas on an app that may not be viewed quite so often.\r\nDiscover\r\nLike with first-runs I enjoy exploring apps for other empty, explanatory views or features that I might not know in detail. Again, Apple allows users to discover even more apps via the \u2018Near Me\u2019 section within the App Store that also features a great empty state.\r\n\r\n[caption id=&amp;quot;attachment_737195&amp;quot; align=&amp;quot;aligncenter&amp;quot; width=&amp;quot;730&amp;quot;] Apple introduces the \u2018Popular Near Me\u2019 section of the App Store to new users.[/caption]\r\n\r\nThe initial Near Me view is not only visually appealing, with a clean graphic that illustrates its obvious use, but also displays a concise description, an unobtrusive call to action button, and finally a privacy note to the user that using this feature will send information to Apple about their location. All this information is shown clearly within a single view.\r\n\r\nAgain, another great example is set for concisely display potentially complex information to the user in a friendly, personal manner.\r\nNo dead ends\r\nTaking time to help users discover new features within an app is great but it\u2019s also worth ensuring users aren\u2019t led to a point at which they appear to hit a dead end.\r\n\r\nDead ends may not only be a completely empty view but another part of the UI that perhaps doesn\u2019t perform an appropriate function. Some examples of this may be a blank list view with no suggestion as to add content, or even a button that has no effect within the current view that should really be disabled instead.\r\n\r\nError views are an example of where many users may expect to hit a dead end. Errors are actually great opportunity to create positive experience within an app out of a potentially negative situation. Any error is probably shown as a result of something going wrong.\r\n\r\nI like to see apps clearly disclose to the user easy to understand information as to what went wrong and how they get back on track.\r\n\r\nPro Tip: Look at tracking the error pages (such as 404s) on your site. Being able to see what a user was requesting when they were greeted with an error allows you to redirect common URL typos and searches to help reduce the number of avoidable error pages being served.\r\n\r\nThe error view on the webpage below not only reassures the user that their data is safe, but also clearly directs the user to the appropriate channels should the wish to seek further help. This page is far from being a dead end.\r\n\r\n[caption id=&amp;quot;attachment_737196&amp;quot; align=&amp;quot;aligncenter&amp;quot; width=&amp;quot;730&amp;quot;] Dropbox reassure users while providing links to find help.[/caption]\r\n\r\nEven if \u201CDropbox\u201D wasn\u2019t mentioned anywhere in the image above, the error is still instantly recognizable as its own.\r\n\r\nDropbox consistently show similar illustrations in views across its products, helping to create a relaxed and friendly experience that\u2019s particularly important when dealing with an error or scenario requiring further support.\r\nPersonality\r\nWhile using a consistent approach in empty views across devices or platforms can help develop an app\u2019s brand or personality, consider whether an empty view needs to be the same on different devices.\r\n\r\nIn Ember for Mac we show some beautiful illustrations within our empty views but when building Ember for iOS, we chose not to include any illustrations, similar or otherwise, as we were building an app specifically for iOS 7 which places a great emphasis on simplicity and text, in particular.\r\n\r\nDon\u2019t be afraid to be different. Empty views are a blank canvas after all and provide a great opportunity to do something fun or inspiring. Be unique.\r\n\r\n[caption id=&amp;quot;attachment_737197&amp;quot; align=&amp;quot;aligncenter&amp;quot; width=&amp;quot;730&amp;quot;] Quotes shown within Clear.[/caption]\r\n\r\nClear takes the opportunity to show users inspirational quotes. The typical use-case when an empty list-view is shown is where a user has cleared some aspirational to-dos or completed some work-related tasks.\r\n\r\nA quote is then shown after all tasks have been cleared that aims to inspire user to do more, not necessarily within the app itself but in the users daily life.\r\n\r\nLastly, it\u2019s worth allowing additional time to test these empty views before shipping, especially if an empty view was added as an after-through or late in the project.\r\n\r\nEnsure localised copy is displayed consistently throughout while handling all appropriate cases where pluralisations occur, particularly in error strings that may be presented to the user.\r\n\r\nThe areas I\u2019ve touched upon in this post are all contributing factors towards the perceived quality and user experience of an app. Hopefully, you\u2019ve already given careful consideration to such areas or have been reminded to do so now.\r\n\r\nIf you\u2019d like to check out what other apps are doing in their empty states be sure to check out both the Empty States and Little Big Details blogs. If you\u2019ve any questions or comments relating to this post, I\u2019d love to hear them. Feel free to reach me on Twitter.\r\n\r\nImage credit: Shutterstock/ronstik"^^<http://www.w3.org/2001/XMLSchema#string>
<http://thenextweb.com/dd/2014/02/18/designing-details-empty-states/>