{"id":16096,"date":"2017-12-11T17:35:02","date_gmt":"2017-12-12T01:35:02","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=16096"},"modified":"2024-06-12T20:38:53","modified_gmt":"2024-06-13T03:38:53","slug":"guide-mobile-app-design-best-practices-2018-beyond","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/guide-mobile-app-design-best-practices-2018-beyond\/","title":{"rendered":"The Guide to Mobile App Design: Best Practices for 2018 and Beyond"},"content":{"rendered":"<p>Mobile apps are mainstream now &#8211; a popular way of delivering content and services.\u00a0<\/p>\n<p>But according to <a href=\"http:\/\/fortune.com\/2016\/05\/19\/app-economy\/\">Fortune<\/a>, more than 75% of users open an app once and never come back. Today, mobile users expect a lot from the app &#8211; fast loading time, ease of use and delight during the interaction. Adapting to the context of use, while keeping the interaction levels as low as possible (limit the number of actions required to complete a task) is quickly becoming a standard for many apps. <\/p>\n<p>So what exactly can be considered as \u201cgood experience\u201d? Let\u2019s explore the six fundamentals of mobile app design.\u00a0<\/p>\n<h2>Minimize Cognitive Load<\/h2>\n<p>The less friction and confusion users have when interacting with an app (e.g. the cognitive load), the better the chance that app stays around. <\/p>\n<h2>Optimized User Flow<\/h2>\n<p>Understanding <i>how <\/i>users interact with an app is essential for optimization. As designers and developers, we should understand the user\u2019s goals in the context of the entire user flow. This knowledge will help us identify the most common friction points during task completion. <\/p>\n<p>Here are few popular ways of optimizing user flow:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><i>Chunking for big tasks.<\/i> If a task contains a lot of steps and actions required from the user\u2019s side, it\u2019s better to divide such task into the number of subtasks. One good example is progressive checkout flow in e-commerce apps. You can separate a checkout process in the number of steps each of them requires a user action.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16111\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image6.png\" alt=\"limit the number of actions in UX design\" width=\"647\" height=\"485\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image6.png 800w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image6-400x300.png 400w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image6-768x576.png 768w\" sizes=\"auto, (max-width: 647px) 100vw, 647px\" \/><br \/>\n<i>By limiting the number of actions required from the user\u2019s side you\u2019ll improve comprehension. Image credits: <\/i><a href=\"https:\/\/dribbble.com\/shots\/953454-Mobile-Checkout-Card-Payment-Screen\"><i>Dribbble<\/i><\/a><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><i>Use the information you already have about your users. <\/i>You probably already have a lot of information about your users \u2014 you just need to use it properly. Consider Uber in the example below \u2014 the app doesn\u2019t ask the user about his\/her location, it automatically detects the location based on geographic data. At that point, the user only needs to select a pickup location.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16130\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image25.jpg\" alt=\"how Uber uses the user data\" width=\"656\" height=\"369\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image25.jpg 1318w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image25-534x300.jpg 534w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image25-768x432.jpg 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image25-1024x576.jpg 1024w\" sizes=\"auto, (max-width: 656px) 100vw, 656px\" \/><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><i>Provide a natural next step<\/i>. When the task requires users to complete a number of steps, maintain momentum by clearly showing what\u2019s next.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16106\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image1.gif\" alt=\"provide nest steps in application design\" width=\"699\" height=\"524\" \/><\/p>\n<p><i><br \/>\n<\/i><i>The interface guides the user by providing the next step after each interaction. Image credits: <\/i><a href=\"https:\/\/dribbble.com\/shots\/2121350-Delivery-Card-UX-UI-App-Interface\"><i>Dribbble<\/i><\/a><\/p>\n<ul>\n<li><i>Prioritize one primary action per one screen. <\/i>By following this simple rule, you\u2019ll make the interface both easier to learn and easier to use. Use visual weight to prioritize important elements (such as contrasting color for primary call-to-action button).<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16108\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image3.png\" alt=\"prioritize actions per screens\" width=\"701\" height=\"568\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image3.png 701w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image3-370x300.png 370w\" sizes=\"auto, (max-width: 701px) 100vw, 701px\" \/><\/p>\n<p><i>Airbnb highlights primary call to action buttons using color<\/i><br \/>\n<section class=\"uxpin-trial-widget\"><h2>Join the world's best designers who&nbsp;use UXPin.<\/h2><span class=\"white-info\">Sign up for a free trial.<\/span><a href=\"https:\/\/www.uxpin.com\/sign-up\" class=\"btn btn-flat sign-up-btn white\">Try it for free!<\/a><\/section><\/p>\n<h2>Cut Out The Clutter<\/h2>\n<p>Good UI design is all about delivering relevant information (signal) and avoiding irrelevant information (noise). <\/p>\n<p>By cluttering your interface, you overload users with too much information: every added button, image, icon makes the screen more complicated. Clutter is terrible on a desktop, but it\u2019s even worse on mobile devices where we don\u2019t have too much free screen space to play with.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16115\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image10.png\" alt=\"Apple UX minimalism\" width=\"711\" height=\"375\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image10.png 1255w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image10-569x300.png 569w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image10-768x405.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image10-1024x540.png 1024w\" sizes=\"auto, (max-width: 711px) 100vw, 711px\" \/><\/p>\n<p><i>The clear tab bar (right) is much better than cluttered one (left). Image credits: Apple<\/i><\/p>\n<p><b>Tip:<\/b> If you want to reduce clutter on a screen which represents a part of the user flow \u2014 show only what is necessary on the current step of the flow. For example, when a user is making a choice, reveal enough information to allow them the choice, then dive into details on the next screen(s).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16124\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image19.png\" alt=\"Progressive disclosure at UX Duolingo\" width=\"845\" height=\"469\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image19.png 901w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image19-541x300.png 541w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image19-768x426.png 768w\" sizes=\"auto, (max-width: 845px) 100vw, 845px\" \/><\/p>\n<p><i>Progressive disclosure (step-by-step revealing information) in Duolingo app for iOS<\/i><\/p>\n<h2>Make Navigation Self-Evident<\/h2>\n<p>All the cool features and compelling content in the world won\u2019t matter if people can\u2019t find it.<\/p>\n<p>Here are a few rules for navigation:<\/p>\n<ul>\n<li><i>Don\u2019t hide it<\/i>. Avoid hidden navigation such as gesture-driven because most users will have a hard time finding it.<\/li>\n<li><i>Consistent navigation.<\/i> Mobile app developers often hide menus on individual pages. Don\u2019t do that because it might confuse or disorient your users.<\/li>\n<li><i>Communicate the current location.<\/i> Failing to indicate the current location is the common problem for many mobile apps.\u201cWhere am I?\u201d is one of the most fundamental questions users need to answer to navigate successfully.<\/li>\n<\/ul>\n<p><b>Tip:<\/b> It\u2019s better to use standard navigation patterns \u2014 such as <a href=\"https:\/\/developer.apple.com\/ios\/human-interface-guidelines\/bars\/tab-bars\/\">Tab bar<\/a> (for iOS) and <a href=\"https:\/\/material.io\/guidelines\/patterns\/navigation-drawer.html\">Navigation drawer <\/a>(for Android). The majority of users are familiar with both navigation patterns. No need to get clever if a simple solution works. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16107\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image2.png\" alt=\"iOS vs Android design tips by UXPin\" width=\"813\" height=\"549\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image2.png 1600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image2-444x300.png 444w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image2-768x518.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image2-1024x691.png 1024w\" sizes=\"auto, (max-width: 813px) 100vw, 813px\" \/><\/p>\n<p><i>Image credits: <\/i><a href=\"https:\/\/design.google\/library\/design-ios-android-and-back-again\/\"><i>Google Design<\/i><\/a><\/p>\n<h2>Optimize Interactions For the Medium<\/h2>\n<p>Mobile phones aren\u2019t smaller version of desktops \u2014 they come with their own nuances and constraints. <\/p>\n<h2>Designed Elements Should Look Like How They Behave <\/h2>\n<p>A mobile UI needs to clearly communicate what elements are \u00a0interactive and what elements are static. <\/p>\n<p>Unlike desktop where users can use hover effects to understand whether something is interactive or not, on mobile users can check interactivity only by tapping on an element. Users should be able to correctly predict how an interface element will behave just by looking at it. <\/p>\n<h2>Design Finger-friendly Tap-targets<\/h2>\n<p>When you\u2019re designing actionable elements in mobile interfaces, it\u2019s vital to make targets big enough so that they\u2019re easy for users to tap. As a rule of thumb, design controls that have touch area of 7\u201310 mm so they can be accurately tapped with a finger. Such tap target makes the edges of the target visible for the users when they touch it. Users will be able to understand whether or not they\u2019re hitting the target accurately.<\/p>\n<p>Also, ensure that elements aren\u2019t located too close to each other &#8211; there should be a proper amount of spacing between tap targets to prevent false input.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16126\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image21.png\" alt=\"finger-friendly tap tagets\" width=\"570\" height=\"313\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image21.png 721w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image21-546x300.png 546w\" sizes=\"auto, (max-width: 570px) 100vw, 570px\" \/><\/p>\n<p><i>Image credits: Apple<\/i><\/p>\n<h2>Consider the Thumb Zone<\/h2>\n<p>Designing for thumbs isn\u2019t only about making targets big enough, it\u2019s also about considering the way we hold our devices. <\/p>\n<p>While a thumb can sweep most of the screen on most mobile screens, only a third of the screen is a genuinely effortless territory. This territory is called the natural thumb zone. Other zones require finger stretching or even changing the grip to reach them. Based on hand placement (left, right, or combined), we can see how the safe zone looks like on the modern mobile device (see a green area on the following image).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16114\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image9.png\" alt=\"UX design for lefties\" width=\"747\" height=\"482\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image9.png 957w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image9-465x300.png 465w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image9-768x496.png 768w\" sizes=\"auto, (max-width: 747px) 100vw, 747px\" \/><\/p>\n<p><i>Image credits: <\/i><a href=\"https:\/\/www.smashingmagazine.com\/2016\/09\/the-thumb-zone-designing-for-mobile-users\/\"><i>Smashing Magazine<\/i><\/a><\/p>\n<p> The bigger the display is, the more of the screen is less easily accessible.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16131\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image26.png\" alt=\"thumb zones for mobile UX design\" width=\"719\" height=\"365\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image26.png 800w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image26-591x300.png 591w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image26-768x390.png 768w\" sizes=\"auto, (max-width: 719px) 100vw, 719px\" \/><\/p>\n<p><i>Thumb zones for a right-handed person, according to <\/i><i>research by Scott Hurff<\/i><\/p>\n<p>Consider all the different zones when designing for mobile:<\/p>\n<ul>\n<li>Green zone is the best place for navigation options or frequent interactive actions (such as call-to-action button).<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16113\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image8.png\" alt=\"locating the share button on the design\" width=\"366\" height=\"600\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image8.png 366w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image8-183x300.png 183w\" sizes=\"auto, (max-width: 366px) 100vw, 366px\" \/><\/p>\n<p><em>\u201cShare\u201d button is located in green thumb zone area.<\/em><\/p>\n<ul>\n<li>Red zone is the best place for potential danger options (such as Delete or Erase). Users are less likely to trigger this option accidentally.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16128\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image23.png\" alt=\"Destructive actions in UX design\" width=\"420\" height=\"747\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image23.png 780w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image23-169x300.png 169w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image23-768x1366.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image23-576x1024.png 576w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/p>\n<p><i>Place destructive actions (such as delete and erase) in the hard-to-reach red zone, because you don\u2019t want users to accidentally tap them.<\/i><\/p>\n<h2>Design For Interruption<\/h2>\n<p>We live in a world of interruption. Something is constantly trying to distract us and direct our attention elsewhere. <\/p>\n<p>For example, users might use your app while waiting for the train. It\u2019s critical to design for mobile mindset. Make it easier for users to re-engage with an app when they return to it after the interruption.<\/p>\n<p>Twitter is one good example of design for interruption. The app\u2019s notification screen shows all recent notifications. As long as the user stays on this screen, the app doesn\u2019t update the list automatically &#8211; it simply shows a status \u201cX new notification\u201d at the top of the list. This allows users not to lose their current position when they re-engage with the app after some period of time.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16122\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image17.jpg\" alt=\"design for interruption\" width=\"370\" height=\"646\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image17.jpg 541w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image17-172x300.jpg 172w\" sizes=\"auto, (max-width: 370px) 100vw, 370px\" \/><\/p>\n<h2>Strive To Create Multichannel Experience<\/h2>\n<p>Mobile apps don\u2019t live in a vacuum.<\/p>\n<p>For example, mobile users usually browse an e-commerce website on mobile, then switch to desktop to purchase. That transition needs to feel invisible.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16110\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image5.png\" alt=\"multichannel experience in webdesign\" width=\"650\" height=\"430\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image5.png 650w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image5-453x300.png 453w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/p>\n<p><i>Spotify allows for a seamless multichannel experience. You can set up a playlist on your Mac and it\u2019ll be instantly available on your iPhone. When you switch between devices, the app remembers where you stop.<\/i><br \/>\n<section class=\"uxpin-trial-widget\"><h2>Join the world's best designers who&nbsp;use UXPin.<\/h2><span class=\"white-info\">Sign up for a free trial.<\/span><a href=\"https:\/\/www.uxpin.com\/sign-up\" class=\"btn btn-flat sign-up-btn white\">Try it for free!<\/a><\/section><\/p>\n<h2>Intuitive Gestures<\/h2>\n<p>Only use gestures that are most natural for the app from your category. <\/p>\n<p>Why? Because gestures are <i>hidden controls<\/i>.<\/p>\n<p> As Thomas Joos <a href=\"https:\/\/www.smashingmagazine.com\/2013\/05\/gesture-driven-interface\/#the-learning-curve\">points out<\/a> in his article \u201cBeyond The Button: Embracing The Gesture-Driven Interface\u201d, the biggest downside of using gestures in a user interface is the learning curve. Every time a visible control is replaced with a gesture, the app\u2019s learning curve goes up. This happens because gestures have a lower discoverability \u2014 they are always hidden and people need to be able to identify these options first. That\u2019s why it\u2019s essential to use only widely-accepted gestures (the ones that users expect to have in your app). <\/p>\n<p>One good example of a category-appropriate gesture is pull-to-refresh for feed-like apps.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16121\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image16.gif\" alt=\"intuitive UX tips by UXPin\" width=\"490\" height=\"367\" \/><\/p>\n<p><i>Image credits: <\/i><a href=\"https:\/\/dribbble.com\/shots\/1797373-Pull-Down-To-Refresh\"><i>Ramotion<\/i><\/a><\/p>\n<h2>Make the app appear fast with skeleton screens<\/h2>\n<p>Your app should be fast and responsive &#8211; but you\u2019ll inevitably face situations where that\u2019s not always possible.<\/p>\n<p>For example, the internet connection might be too slow. If you can\u2019t shorten the line, you should at least try to make the wait more pleasant. That can be the perfect time for skeleton screens (a.k.a temporary information containers). <\/p>\n<p>A skeleton screen is a blank version of a page into which information is gradually loaded. Unlike animated loading spinners that focus user attention on the fact of data loading, skeleton screens focus user attention on progress instead of wait times.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16132\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image27.png\" alt=\"skeleton screens example\" width=\"419\" height=\"745\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image27.png 576w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image27-169x300.png 169w\" sizes=\"auto, (max-width: 419px) 100vw, 419px\" \/><\/p>\n<p><em>Skeleton screen in Slack for iOS<\/em><\/p>\n<h2>Focus On First Time Experience<\/h2>\n<p>Just like a person, your mobile app doesn\u2019t get a second chance to make a good first impression. If you don\u2019t, \u00a0you can bet (with <a href=\"https:\/\/www.linkedin.com\/pulse\/losing-80-mobile-users-normal-why-best-apps-do-better-andrew-chen\">80% confidence<\/a>) they won\u2019t be back.<\/p>\n<h2>Good onboarding is a must<\/h2>\n<p>Perhaps the most important rule for creating onboarding &#8211; it shouldn\u2019t be generic, it should be <i>beneficial <\/i>to the people who\u2019ll use the app. <\/p>\n<p>Designers should consider onboarding as an opportunity to create an entry ramp for the first-time users. At the same time, onboarding should only be employed if it\u2019s really <i>essential <\/i>for first use.<\/p>\n<\/section><section class=\"related-books-section\"><h3>Grab design ebooks created by best designers<\/h3><p class=\"section-desc\">All for free<\/p><ul class=\"related-books-list\"><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-trends-2017\/\" class=\"action-get-ebook\" data-name=\"Web Design Trends 2017\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/01\/the-book-262x375.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"the book\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/01\/the-book-262x375.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/01\/the-book-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-trends-2017\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Web Design Trends 2017\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/futureproof-responsive-web-design-ebook-bundle\/\" class=\"action-get-ebook\" data-name=\"The Futureproof Responsive Web Design Bundle\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/the-book_bundle.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"the book bundle\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/the-book_bundle.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/the-book_bundle-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/futureproof-responsive-web-design-ebook-bundle\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"The Futureproof Responsive Web Design Bundle\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/agile-ux-best-practices-ebook-bundle\/\" class=\"action-get-ebook\" data-name=\"The Agile UX Best Practices Bundle\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/the-book_bundle-1.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"the book bundle 1\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/the-book_bundle-1.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/08\/the-book_bundle-1-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/agile-ux-best-practices-ebook-bundle\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"The Agile UX Best Practices Bundle\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/create-design-system-uxpin\/\" class=\"action-get-ebook\" data-name=\"Creating a Design System Quickly With UXPin\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/01\/not-facebook-the-book-262x375.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"not facebook the book\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/01\/not-facebook-the-book-262x375.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/01\/not-facebook-the-book-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/create-design-system-uxpin\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Creating a Design System Quickly With UXPin\">Download<\/a><\/li><\/ul><\/section><section class=\"related-books-section-single\"><section class=\"post-content-wrapper\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/01\/not-facebook-the-book-262x375.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"not facebook the book\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/01\/not-facebook-the-book-262x375.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/01\/not-facebook-the-book-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/figure><article><h3>Do you want to know more about UI Design?<\/h3><p>Download 'Creating a Design System Quickly With UXPin' <span>FOR FREE!<\/span><\/p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/create-design-system-uxpin\/\" class=\"btn btn-flat btn-darker action-get-ebook\">Download e-book for free<\/a><\/article><\/section><a href=\"#closeEbookPanel\" class=\"icon-close action-close-ebook-panel\">Close<\/a><\/section><section class=\"post-content-wrapper\">\n<h2>Design Zero State<\/h2>\n<p>An empty state (or zero state) is the state in which nothing has yet occurred. This state shouldn&#8217;t be a blank canvas (or dead-end as many designers call it), it should provide direction and guidance for getting up and running with the app.<\/p>\n<p>Take an error-state screen from Spotify as an example. It doesn\u2019t help users understand the context and doesn\u2019t help them find the answer to the question: \u201cWhat can I do about it?\u201d<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16118\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image13.png\" alt=\"deadend design example\" width=\"338\" height=\"600\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image13.png 338w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image13-169x300.png 169w\" sizes=\"auto, (max-width: 338px) 100vw, 338px\" \/><\/p>\n<p><i>Nothing in your app should be a dead end.<\/i><\/p>\n<p>Now compare it to the empty state from NFL Fantasy. This zero state makes an error message both readable and helpful. Concise, polite, and instructive copy clearly states: <\/p>\n<ul>\n<li>What went wrong and possibly why.<\/li>\n<li>What\u2019s the next step the user should take to fix the error.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16116\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image11.png\" alt=\"next steps in UX design\" width=\"413\" height=\"735\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image11.png 1080w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image11-169x300.png 169w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image11-768x1365.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image11-576x1024.png 576w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/p>\n<p><i>NFL Fantasy explains why a user cannot see anything, and how to solve it. Image credits: <\/i><a href=\"http:\/\/emptystat.es\/image\/162198623343\"><i>Emptystates<\/i><\/a><\/p>\n<h2>Use Functional Animation To Improve Interaction<\/h2>\n<p>Animation solves a lot of functional problems within interfaces while making them \u00a0feel alive and genuinely responsive.<\/p>\n<h2>Show system status<\/h2>\n<p>When an app is busy doing something, you should let a user know that the app isn\u2019t frozen by surfacing system status. Visual signs of progress give users a sense of control over the app.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16125\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image20.gif\" alt=\"using animation to notify users\" width=\"598\" height=\"511\" \/><\/p>\n<p><i>This app using animation to notify users that it\u2019s loading content now. Credits: <\/i><a href=\"https:\/\/ramotion.com\/\"><i>Ramotion<\/i><\/a><\/p>\n<h2>Navigational transition<\/h2>\n<p>Animation is the best tool to describe state transitions. It helps users comprehend the change in the page\u2019s layout, what has triggered the change,and how to initiate the change again when needed.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16123\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image18.gif\" alt=\"Functional animation prototyping in UXPin\" width=\"607\" height=\"455\" \/><\/p>\n<p><i>Functional animation can efficiently guide the user\u2019s attention and make complex transitions easy to understand. Credits: <\/i><i>Jae-seong, Jeong<\/i><\/p>\n<h2>Visual feedback<\/h2>\n<p>In the physical world, objects respond to our interactions. People expect a similar level of responsiveness from the digital UI controls. <\/p>\n<p>Good visual feedback makes interaction comfortable for users. All interactive elements (such as buttons) should provide perfect visual feedback. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16112\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image7.gif\" alt=\"visual feedback in UXPin design tool\" width=\"631\" height=\"473\" \/><\/p>\n<p><i>A button is responding to the user\u2019s tap. Credits: <\/i><a href=\"https:\/\/dribbble.com\/shakuro\"><i>Shakuro<\/i><\/a><\/p>\n<h2>Humanize Digital Experience<\/h2>\n<h2>Personalization<\/h2>\n<p>Personalization is one of the most critical aspects of mobile apps today. It\u2019s an opportunity to connect with users and provide the information they need in a way that feels genuine. <\/p>\n<p>One good example is Starbucks. The app uses information provided by users (for example, the type of coffee they usually order) to craft special offers.<\/p>\n<h2>Delightful animation<\/h2>\n<p>Unlike functional animation that is used to improve the clarity of user interface, delightful animation is used to make the interface feel human. This type of animation makes it clear that people who crafted the app care about users. Using delightful details is an opportunity to create an emotional connection with your users.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16119\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image14.gif\" alt=\"emotional connection with users through animation\" width=\"800\" height=\"600\" \/><\/p>\n<p><i>Image credits: <\/i><a href=\"https:\/\/dribbble.com\/Tubik\"><i>Dribbble<\/i><\/a><\/p>\n<h2>Push The Value<\/h2>\n<p>Annoying notifications is the #1 reason people uninstall mobile apps (71% of respondents).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16109\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image4.png\" alt=\"why people uninstall mobile apps\" width=\"485\" height=\"303\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image4.png 485w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image4-480x300.png 480w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image4-290x180.png 290w\" sizes=\"auto, (max-width: 485px) 100vw, 485px\" \/><\/p>\n<p><i>Source: Appiterate Survey<\/i><\/p>\n<p>Don\u2019t send push notification just because you can \u2014 each notification should be <i>valuable<\/i> and <i>well-timed<\/i>. Here are a few things to take into account when design push notifications:<\/p>\n<h2>Avoid sending too many notifications in a short period<\/h2>\n<p>Too many notifications delivered in a short period of time can lead to situation known as notification overkill &#8211; when a user can\u2019t proceed the information and simply skip it. Try to combine different messages together to limit the total number notifications.<\/p>\n<h2>Time your notification<\/h2>\n<p>Not only what you want to say is important, but also <i>when<\/i> you want to say it. Don\u2019t send push notification in weird hours (such as in the middle of the night). The best time for push notification is mobile usage peak hours \u2014 from 6 pm till 10 pm.<\/p>\n<h2>Consider other channels to deliver your message<\/h2>\n<p>Push notification isn\u2019t the only way to deliver a message to your users. Use email, in-app notifications, and news feed messaging to notify users about important events based on the level of urgency and type of content you would like to share.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16127\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image22.jpg\" alt=\"notofication types for your UX design\" width=\"564\" height=\"484\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image22.jpg 564w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image22-350x300.jpg 350w\" sizes=\"auto, (max-width: 564px) 100vw, 564px\" \/><\/p>\n<p><i>Select proper notification type based on urgency and content. Source: <\/i><a href=\"https:\/\/www.appboy.com\/\"><i>Appboy<\/i><\/a><\/p>\n<h2>Conclusion<\/h2>\n<p>Designers often say that great design is invisible, people who use it focus on their own goals and not the interface. As a designer, you should strive to create invisible interface because such interfaces satisfy users needs and deliver great user experience.<\/p>\n<p>Just like with any other guide, tips specified above are just a place to get started. Make sure to mix and match them with your own ideas for the best results.<\/p>\n<p>For more advice, download the 100+ page guide <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/mobile-design-patterns\/\">Mobile UI Patterns<\/a>, featuring deconstructions of 46 examples.<br \/>\n<section class=\"uxpin-trial-widget\"><h2>Join the world's best designers who&nbsp;use UXPin.<\/h2><span class=\"white-info\">Sign up for a free trial.<\/span><a href=\"https:\/\/www.uxpin.com\/sign-up\" class=\"btn btn-flat sign-up-btn white\">Try it for free!<\/a><\/section><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A comprehensive guide full of examples. <\/p>\n","protected":false},"author":127,"featured_media":16111,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,205,4,6],"tags":[],"class_list":["post-16096","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-mobile-design","category-ui-design","category-ux-design"],"yoast_title":"","yoast_metadesc":"Examples of most loved mobile app design and a free ebook by UXPin with mobile UX tips and tricks.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The Guide to Mobile App Design: Best Practices for 2018 and Beyond | UXPin<\/title>\n<meta name=\"description\" content=\"Examples of most loved mobile app design and a free ebook by UXPin with mobile UX tips and tricks.\" \/>\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\/guide-mobile-app-design-best-practices-2018-beyond\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Guide to Mobile App Design: Best Practices for 2018 and Beyond\" \/>\n<meta property=\"og:description\" content=\"Examples of most loved mobile app design and a free ebook by UXPin with mobile UX tips and tricks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/guide-mobile-app-design-best-practices-2018-beyond\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-12T01:35:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-13T03:38:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image6.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nick Babich\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nick Babich\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 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\\\/guide-mobile-app-design-best-practices-2018-beyond\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/guide-mobile-app-design-best-practices-2018-beyond\\\/\"},\"author\":{\"name\":\"Nick Babich\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/539443c514e83531a99fab67bf0ccff5\"},\"headline\":\"The Guide to Mobile App Design: Best Practices for 2018 and Beyond\",\"datePublished\":\"2017-12-12T01:35:02+00:00\",\"dateModified\":\"2024-06-13T03:38:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/guide-mobile-app-design-best-practices-2018-beyond\\\/\"},\"wordCount\":2459,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/guide-mobile-app-design-best-practices-2018-beyond\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/image6.png\",\"articleSection\":[\"Blog\",\"Mobile Design\",\"UI Design\",\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/guide-mobile-app-design-best-practices-2018-beyond\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/guide-mobile-app-design-best-practices-2018-beyond\\\/\",\"name\":\"The Guide to Mobile App Design: Best Practices for 2018 and Beyond | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/guide-mobile-app-design-best-practices-2018-beyond\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/guide-mobile-app-design-best-practices-2018-beyond\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/image6.png\",\"datePublished\":\"2017-12-12T01:35:02+00:00\",\"dateModified\":\"2024-06-13T03:38:53+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/539443c514e83531a99fab67bf0ccff5\"},\"description\":\"Examples of most loved mobile app design and a free ebook by UXPin with mobile UX tips and tricks.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/guide-mobile-app-design-best-practices-2018-beyond\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/guide-mobile-app-design-best-practices-2018-beyond\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/guide-mobile-app-design-best-practices-2018-beyond\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/image6.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/image6.png\",\"width\":800,\"height\":600,\"caption\":\"image6\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/guide-mobile-app-design-best-practices-2018-beyond\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Guide to Mobile App Design: Best Practices for 2018 and Beyond\"}]},{\"@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\\\/539443c514e83531a99fab67bf0ccff5\",\"name\":\"Nick Babich\",\"description\":\"Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/nick-babich\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The Guide to Mobile App Design: Best Practices for 2018 and Beyond | UXPin","description":"Examples of most loved mobile app design and a free ebook by UXPin with mobile UX tips and tricks.","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\/guide-mobile-app-design-best-practices-2018-beyond\/","og_locale":"en_US","og_type":"article","og_title":"The Guide to Mobile App Design: Best Practices for 2018 and Beyond","og_description":"Examples of most loved mobile app design and a free ebook by UXPin with mobile UX tips and tricks.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/guide-mobile-app-design-best-practices-2018-beyond\/","og_site_name":"Studio by UXPin","article_published_time":"2017-12-12T01:35:02+00:00","article_modified_time":"2024-06-13T03:38:53+00:00","og_image":[{"width":800,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image6.png","type":"image\/png"}],"author":"Nick Babich","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Nick Babich","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/guide-mobile-app-design-best-practices-2018-beyond\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/guide-mobile-app-design-best-practices-2018-beyond\/"},"author":{"name":"Nick Babich","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/539443c514e83531a99fab67bf0ccff5"},"headline":"The Guide to Mobile App Design: Best Practices for 2018 and Beyond","datePublished":"2017-12-12T01:35:02+00:00","dateModified":"2024-06-13T03:38:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/guide-mobile-app-design-best-practices-2018-beyond\/"},"wordCount":2459,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/guide-mobile-app-design-best-practices-2018-beyond\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image6.png","articleSection":["Blog","Mobile Design","UI Design","UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/guide-mobile-app-design-best-practices-2018-beyond\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/guide-mobile-app-design-best-practices-2018-beyond\/","name":"The Guide to Mobile App Design: Best Practices for 2018 and Beyond | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/guide-mobile-app-design-best-practices-2018-beyond\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/guide-mobile-app-design-best-practices-2018-beyond\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image6.png","datePublished":"2017-12-12T01:35:02+00:00","dateModified":"2024-06-13T03:38:53+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/539443c514e83531a99fab67bf0ccff5"},"description":"Examples of most loved mobile app design and a free ebook by UXPin with mobile UX tips and tricks.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/guide-mobile-app-design-best-practices-2018-beyond\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/guide-mobile-app-design-best-practices-2018-beyond\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/guide-mobile-app-design-best-practices-2018-beyond\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image6.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/12\/image6.png","width":800,"height":600,"caption":"image6"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/guide-mobile-app-design-best-practices-2018-beyond\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"The Guide to Mobile App Design: Best Practices for 2018 and Beyond"}]},{"@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\/539443c514e83531a99fab67bf0ccff5","name":"Nick Babich","description":"Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.","url":"https:\/\/www.uxpin.com\/studio\/author\/nick-babich\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16096","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\/127"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=16096"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16096\/revisions"}],"predecessor-version":[{"id":53484,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16096\/revisions\/53484"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/16111"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=16096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=16096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=16096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}