{"id":23209,"date":"2020-12-15T00:17:00","date_gmt":"2020-12-15T08:17:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=23209"},"modified":"2024-06-12T20:52:29","modified_gmt":"2024-06-13T03:52:29","slug":"ui-mobile-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mobile-design\/","title":{"rendered":"Master the Basics of UI Mobile Design"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Master-the-Basics-of-UI-Mobile-Design_1-1024x512.png\" alt=\"\" class=\"wp-image-23211\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Master-the-Basics-of-UI-Mobile-Design_1-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Master-the-Basics-of-UI-Mobile-Design_1-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Master-the-Basics-of-UI-Mobile-Design_1-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Master-the-Basics-of-UI-Mobile-Design_1.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>As a UI designer, you likely already know, understand, and are passionate about the core principles, tools, and purpose of fantastic user interfaces. You may even be a propionate of the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-hands-on-guide-to-mobile-first-design\/\">Mobile First<\/a> design approach. More and more, though, the app is the end solution, with no need for a responsive design.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>As far back as 2015, <a href=\"https:\/\/go.oracle.com\/LP=11236\/?elqCampaignID=20552\/?\">Oracle <\/a>published a study showing that most millennials take their app experience into account when selecting a company\u2019s goods and services and that their recommendations are similarly influenced. They reported that 65-75% of Millennials prefer to use apps for purchases, paying bills, and reporting issues.&nbsp;<\/li><li>More recently, COVID and other factors are changing app usage as well. According to Forbes, people are spending their money more and more on in-app purchases (within games) and subscriptions (non-game apps), staying within the ecosystem of their mobile device.<\/li><\/ul>\n\n\n\n<p>While a company\u2019s user experience should be consistent across their products and user touchpoints, there are special considerations for web and mobile app design as compared to web design. The overall process is the same, and a design system should cover all products for branding, patterns, and other components. Apps require more simplicity, less functionality, and a deeper understanding of the platform they are used on.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Simplicity<\/h2>\n\n\n\n<p>A simple user interface is always a good idea. But for mobile apps, it\u2019s the most crucial goal. An app should not replace a website, but enhance it and provide the absolute essential functionality for a user in their day to day activities. Additional functionality can be made available, but prioritization and clear signals to the user will help them prioritize as they interact with your app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Minimize Cognitive Load<\/h2>\n\n\n\n<p>Attention spans are short under perfect conditions. It\u2019s even more of an issue when you can\u2019t predict what environment your user will be in, and what other tasks they are attempting to do simultaneously. No one should be using their phone when driving, but many people do. They could be standing in line at a busy store, on a noisy bus, or trying to wrangle kids.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/02_2.png\" alt=\"02 2\" class=\"wp-image-23213\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/02_2.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/02_2-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Business apps are often used in challenging conditions such as low light, high noise, irregular temperatures, or any number of other distractions. Don\u2019t make your users think too much or focus too hard. Hide content and functionality that isn\u2019t core to the current task, but make it easy to find when they want or need it.<\/p>\n\n\n\n<p>This doesn\u2019t mean to hide options the user is likely to want or need though. Keeping options clear and obvious helps keep them on track and engaged with your app.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized is-style-default\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/_ThcyPqL5WlQKTLN65c9rO2TDjypd6sQL3ot15Hounr60VSmyOkQFX01RV4BtYCAe5brQD-uLoxGUaLgEZ5jEsLB8bfekTkfe1jKzJPDVv0Ghsnl2rdvJEeajK4iGXdQcoo_BKmq\" alt=\"\" width=\"455\" height=\"467\"\/><figcaption><a href=\"https:\/\/www.thinkwithgoogle.com\/marketing-strategies\/app-and-mobile\/chapter-1-app-navigation-and-exploration\/\">Think with Google, Chapter 1: App Navigation and Exploration<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Provide Minimal Functionality<\/h2>\n\n\n\n<p>Every component and element of your app needs to be an essential function for users to complete their tasks. Not every task or feature you provide on a web platform is needed for the app. Carefully consider the minimal viable product that will give your users exactly what they need for the purpose of the task or app as a whole. The more features you provide, the more complex the navigation and overall usability of the app becomes.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/01_2.png\" alt=\"01 2\" class=\"wp-image-23212\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/01_2.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/01_2-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>For example, if your app is for a delivery driver, prioritize or stick to the primary flow of receiving, picking up, and delivering the order. They don\u2019t need to access other data like on-time stats or wage information. Those items can be left in another tool or made available but de-prioritized in the user interface.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Chunk Content and Tasks<\/h2>\n\n\n\n<p>When complex patterns or detailed text can\u2019t be avoided, break them up into small digestible chunks. An overwhelmed user will abandon the task and your app.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Clear, simple language is essential for comprehension and to minimize clutter in the interface.&nbsp;<\/li><li>Forms and long flows should be broken into steps and only presented to the user when they complete the previous step.&nbsp;<\/li><li>Anticipate their needs by allowing them to get more information when needed, but keep it hidden and out of the way until then.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">User Input<\/h2>\n\n\n\n<p>First-time users are turned off by long sign-up and set-up processes. An obstacle on their first experience with your app could drive them away entirely before they\u2019ve really even gotten started. Whenever possible, collect and reuse data from other sources. You have the ability to leverage all the information housed on the phone and within other native apps if you know how to use it. This keeps the amount of information the user has to enter to a minimum. Designs can and should take advantage of the platform hosting them by tying into existing functionality on the phone or device.&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>If they\u2019ve already entered personal info somewhere else, pre-populate fields.\u00a0<\/li><li>Infer information when possible such as location from GPS data already on the phone, pre-select nearby locations.\u00a0<\/li><li>Features like logging in with Google or Facebook allow users to skip tedious onboarding tasks and eliminate yet another set of credentials to remember.\u00a0<\/li><li>Leverage the device\u2019s security protocols by allowing face recognition or fingerprint recognition authentication options.<\/li><\/ol>\n\n\n\n<p>For information that they must enter, tailor the input to help them out.&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Order picklists based on frequency of use.\u00a0<\/li><li>Offer the right keyboard layout for the task, such a calendar instead of a number pad. Include field hints and other tips throughout the form and whole interface whenever possible.\u00a0<\/li><li>If a piece of information isn\u2019t absolutely essential for the current task, leave it out of the form or flow and allow the user to provide the information at a later time.\u00a0<\/li><\/ol>\n\n\n\n<p>First time users aren\u2019t the only ones that can become frustrated with your task flows. The two screens below are taken from two different car shopping experiences which users will likely use over and over throughout their car buying journey. One app forces users to go out of the primary flow to make a single model year selection. <\/p>\n\n\n\n<figure class=\"wp-block-image is-resized is-style-default\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/xfIAY0aeJ7veRAaBvQ0BgtTcqqcEf9dXU_uuNS5BKGkwCD3wkD1v0CgZgj2hj2Bfto5H8jEZqHGMawb-_-RWM1IUdaSAIIFUSGKnu7E6aBtFTMX902CgZGpfLO7oVo82nJfkitne\" alt=\"\" width=\"378\" height=\"671\"\/><\/figure>\n\n\n\n<p>The user then has to bounce back and forth between filters to see all of the available options. The screen on the right however, allows more flexible access to a variety of filters, staying more within the flow of the task. It also allows a range of model years so the user doesn\u2019t have to go back and forth to view the results of each year individually.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized is-style-default\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/zdIGkm2f_CA9SwTAKVRl8crhQn4l2hTDNhgh57peG04_9beyJZfLdAzNuovTAmlxbYv-kLr8RLDaOyFVRsP8-ldjrvwPh0jRuOd0MVPsautHHNmxLwsdrt4kIZ3bYB00pNvhxW0o\" alt=\"\" width=\"374\" height=\"664\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Robust Design System<\/h2>\n\n\n\n<p>If you don\u2019t already have one, set up a design system that supports not just your mobile or web apps, but your whole suite of products and online presence. This will save you time, increase efficiency in your internal processes, reinforce brand identity, and help you stay consistent in providing a seamless user experience. Tools like <a href=\"https:\/\/www.uxpin.com\/studio\/design-systems\/\">UXPin<\/a> allow you to set up components, your visual language, annotate and explain design decisions, and much more for consistency and efficiency in your apps and other products.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"501\" height=\"401\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/20-\u2013-Build-your-visual-language_500x400.png\" alt=\"20 \u2013 Build your visual language 500x400\" class=\"wp-image-23210\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/20-\u2013-Build-your-visual-language_500x400.png 501w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/20-\u2013-Build-your-visual-language_500x400-375x300.png 375w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Familiar Components<\/h2>\n\n\n\n<p>Start with <a href=\"https:\/\/uxdesign.cc\/mobile-ui-13-basic-patterns-of-app-ui-design-to-know-about-d3f7c6176f13\">simple patterns people expect<\/a>. Remember, simple is always better to keep users engaged and on task without distractions. Even more so than on the web, don\u2019t try to get too creative with icons, navigation, or fancy interactions. You can introduce creativity and personality through rich graphics or innovative features, but the basics need to stay basic to support your goals of simplicity and keeping cognitive load to a minimum.&nbsp;<\/p>\n\n\n\n<p>Users expect certain components like a sign up screen, loading screens, and expandable hamburger menus. If you stick to these common conventions, they won\u2019t need to learn anything new about using your app and can focus on their task or your service offerings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Visual Hierarchy and Queues<\/h2>\n\n\n\n<p>Mobile offers a variety of interactions and visual elements that are harder to incorporate in a website or other software products. This could be the biggest difference in designing for mobile apps. Most interfaces do use color, typography, and placement to help guide users to the most important information or tasks, but in mobile it is both easier and more complex to do.<\/p>\n\n\n\n<p>Device platforms allow for more animation to indicate success, next steps, and other queues within the interface. These must be used carefully though to subtly guide the user, and not overwhelm them with too much visual stimulation.<\/p>\n\n\n\n<p>Placement is unique to the mobile device due to the size and touch interface. In computer based software or web use, reach is not an issue.<\/p>\n\n\n\n<figure class=\"wp-block-image is-style-default\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/b4iJZMCR448qns815TtBrpEZ-W9qmGRUARaeB7F45yXeHwmuP0F5bIWUVMiL1b9VOe7G7ecHcIpJ03w_hXlvYspA8j72axjXB7Fg0bmTNJ3zk-2SmkgljSiEtV5UMKThJ9IOC2Fb\" alt=\"\"\/><figcaption>Touch research by Scott Hurff<\/figcaption><\/figure>\n\n\n\n<p>Most people use their thumb to interact with the screen while holding the device in that same hand. Larger screens make it more difficult to reach more of the screen real estate. Placing the most important elements in the right location helps users perform critical tasks more quickly and easily.<\/p>\n\n\n\n<p>Accessibility should not be overlooked either.&nbsp; <a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-without-color.html\">W3C\u2019s guidelines<\/a><em> <\/em>on color for example explain how using color to indicate importance is not always the best due to disabilities like color blindness. Color can be great, but problems like glare and variations of screen quality can skew color, just like someone being color blind. SmartPhones offer many different accessibility settings and other settings that can impact your design. Keep in mind how your app will work, look, and gracefully degrade when these device features are enabled.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Learn More<\/h2>\n\n\n\n<p>If you are interested in learning more about mobile design or considering specializing in this area, there are a host of options for developing your skills.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Popular platforms like Coursera, Skillshare, and UX Design Institute offer a variety of UX and UI design courses, including some focused on mobile UI design. Skillshare offers a well reviewed course called \u201cMobile App Design from scratch with Sketch 1, 2, 3.\u201d&nbsp;<\/li><li>Alternatively you can check out literature, tutorials, and courses available from organizations like the <a href=\"https:\/\/www.interaction-design.org\/\">Interaction Design Foundation<\/a> or <a href=\"https:\/\/www.nngroup.com\/search\/?q=mobile+design\">Nielsen Norman Group<\/a>,&nbsp;<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Apps are constantly evolving as the devices and platforms change, and the user needs evolve with your product or business. Be sure to tackle any app design project with the mindset of continuous improvement. It should be simple, scalable, and involve frequent user testing and analytics to identify improvements over time. Providing your users with a beautiful app that helps them complete tasks quickly while on the go will earn brand loyalty and keep your app front and center in their minds.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As a UI designer, you likely already know, understand, and are passionate about the core principles, tools, and purpose of fantastic user interfaces. You may even be a propionate of the Mobile First design approach. More and more, though, the app is the end solution, with no need for a responsive design. As far back<\/p>\n","protected":false},"author":3,"featured_media":23211,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-23209","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"","yoast_metadesc":"A simple user interface is always a good idea. But for mobile apps, it\u2019s the most crucial goal. An app should not replace a website, but enhance it and provide the absolute essential functionality for a user in their day to day activities.","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>Master the Basics of UI Mobile Design | UXPin<\/title>\n<meta name=\"description\" content=\"A simple user interface is always a good idea. But for mobile apps, it\u2019s the most crucial goal. An app should not replace a website, but enhance it and provide the absolute essential functionality for a user in their day to day activities.\" \/>\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\/ui-mobile-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Master the Basics of UI Mobile Design\" \/>\n<meta property=\"og:description\" content=\"A simple user interface is always a good idea. But for mobile apps, it\u2019s the most crucial goal. An app should not replace a website, but enhance it and provide the absolute essential functionality for a user in their day to day activities.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-mobile-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-15T08:17:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-13T03:52:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Master-the-Basics-of-UI-Mobile-Design_1.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=\"10 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\\\/ui-mobile-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mobile-design\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Master the Basics of UI Mobile Design\",\"datePublished\":\"2020-12-15T08:17:00+00:00\",\"dateModified\":\"2024-06-13T03:52:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mobile-design\\\/\"},\"wordCount\":1720,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mobile-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/Master-the-Basics-of-UI-Mobile-Design_1.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mobile-design\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mobile-design\\\/\",\"name\":\"Master the Basics of UI Mobile Design | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mobile-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mobile-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/Master-the-Basics-of-UI-Mobile-Design_1.png\",\"datePublished\":\"2020-12-15T08:17:00+00:00\",\"dateModified\":\"2024-06-13T03:52:29+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"A simple user interface is always a good idea. But for mobile apps, it\u2019s the most crucial goal. An app should not replace a website, but enhance it and provide the absolute essential functionality for a user in their day to day activities.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mobile-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mobile-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mobile-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/Master-the-Basics-of-UI-Mobile-Design_1.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/Master-the-Basics-of-UI-Mobile-Design_1.png\",\"width\":1200,\"height\":600,\"caption\":\"Master the Basics of UI Mobile Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/ui-mobile-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Master the Basics of UI Mobile Design\"}]},{\"@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":"Master the Basics of UI Mobile Design | UXPin","description":"A simple user interface is always a good idea. But for mobile apps, it\u2019s the most crucial goal. An app should not replace a website, but enhance it and provide the absolute essential functionality for a user in their day to day activities.","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\/ui-mobile-design\/","og_locale":"en_US","og_type":"article","og_title":"Master the Basics of UI Mobile Design","og_description":"A simple user interface is always a good idea. But for mobile apps, it\u2019s the most crucial goal. An app should not replace a website, but enhance it and provide the absolute essential functionality for a user in their day to day activities.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mobile-design\/","og_site_name":"Studio by UXPin","article_published_time":"2020-12-15T08:17:00+00:00","article_modified_time":"2024-06-13T03:52:29+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Master-the-Basics-of-UI-Mobile-Design_1.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mobile-design\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mobile-design\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Master the Basics of UI Mobile Design","datePublished":"2020-12-15T08:17:00+00:00","dateModified":"2024-06-13T03:52:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mobile-design\/"},"wordCount":1720,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mobile-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Master-the-Basics-of-UI-Mobile-Design_1.png","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mobile-design\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mobile-design\/","name":"Master the Basics of UI Mobile Design | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mobile-design\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mobile-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Master-the-Basics-of-UI-Mobile-Design_1.png","datePublished":"2020-12-15T08:17:00+00:00","dateModified":"2024-06-13T03:52:29+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"A simple user interface is always a good idea. But for mobile apps, it\u2019s the most crucial goal. An app should not replace a website, but enhance it and provide the absolute essential functionality for a user in their day to day activities.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mobile-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/ui-mobile-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mobile-design\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Master-the-Basics-of-UI-Mobile-Design_1.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2020\/12\/Master-the-Basics-of-UI-Mobile-Design_1.png","width":1200,"height":600,"caption":"Master the Basics of UI Mobile Design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/ui-mobile-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Master the Basics of UI Mobile Design"}]},{"@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\/23209","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=23209"}],"version-history":[{"count":4,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/23209\/revisions"}],"predecessor-version":[{"id":53502,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/23209\/revisions\/53502"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/23211"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=23209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=23209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=23209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}