{"id":1171,"date":"2015-09-22T08:00:45","date_gmt":"2015-09-22T07:00:45","guid":{"rendered":"https:\/\/uxstudioteam.com\/website\/?p=1171"},"modified":"2023-03-10T13:59:42","modified_gmt":"2023-03-10T12:59:42","slug":"4-principles-for-designing-mobile-interfaces","status":"publish","type":"post","link":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/","title":{"rendered":"4 Principles For Designing Mobile Interfaces"},"content":{"rendered":"

\"\"With the ever-growing number\u00a0of mobile apps out there, your application has to catch the users’ attention immediately. Here are the\u00a04 core principles for designing mobile interfaces.\u00a0<\/strong><\/p>\n

<\/p>\n

1. Ratios<\/h2>\n

Less object fit into one screen on mobile than e.g. on a web interface. Therefore, we must prioritize contents and functions; we may think in a simpler layout or in dividing it into more screens.<\/p>\n

When designing mobile interfaces, we choose the font-size so that it will be readable in smaller displays as well. In practice, this means a larger font-size, because mobile screens have a higher pixel density than monitors. It is useful to experiment with this, so that there won\u2019t be any unpleasant surprises later on.<\/p>\n

Simple layout and easily readable font-sizes were chosen for these mobile app designs.<\/strong><\/p>\n

\"taasky's<\/strong><\/strong>
\n\"preview\"<\/a>2. Individual Design Language<\/h2>\n

Normally, we create an own design language for the applications; this means considering the operating system for which we do the design (iOS, Android, etc.), and as much as possible sticking to its principles, although with slight skepticism. While it might be easier to realize an application with native elements, it might not be the most user-friendly solution.<\/p>\n

This alarm clock application has quite a unique design.<\/p>\n

\"alarmclock<\/p>\n

In our shoka.me project, we as well design a unique visual for the app.<\/p>\n

\"30-buzzdrive_screen_previews-02\"<\/a>3. Various Kinds of Display Sizes<\/h2>\n

While designing mobile interfaces, we have to consider resolutions other than mobile, so that our app remains not only useful but aesthetic as well. In order to optimize we must prognosticate the most common cases. Different kinds of devices and different kinds of resolutions of those devices, landscape vs. portrait forms etc. might arise.<\/p>\n

Good example for responsive webdesign is the blog sketch of medium.<\/p>\n

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

4.\u00a0Tactile and Available Spots<\/h2>\n

Seeing that with mobile applications we use our fingers to choose from the functions, the size of the interactive spots has great significance. If there are too many small functions or icons next to each other, we cannot comfortably use these. When we are designing mobile interfaces, we must prioritize the functions and only use the most important or most common ones. So make sure to use\u00a0appropriate icons for your app<\/a>\u2014the bigger they are, the easier it will be for users to tap them with their fingers.<\/p>\n

In the iOS Design Guideline there is a confirmed minimal size for the icons and a recommendation for how many to use in the bottom line (picture on the left). Using too many small icons in one line is not recommended (picture on the right).\u00a0\u00a0\"designing<\/a><\/strong><\/strong>\u00a0<\/strong><\/strong>\u00a0<\/strong><\/strong><\/p>\n

People hold their phones in different ways; most commonly, they hold it in one hand and use their thumb to tap the screen. According to this mode, there are easily and less easily available points on the screen.<\/p>\n

When designing mobile interfaces, we are creating an experience specifically for human hands. Therefore, it is best to put the most important functions to the bottom of the screen.<\/p>\n

\"HoldPhones_Figure-2\"<\/a><\/p>\n

On the example below, the functions are easily available and the size of the icons grants easy tapping.<\/p>\n

\"toolbar\"<\/p>\n

Do you have experience\u00a0designing mobile interfaces? Tell us all about it, and leave a comment below!<\/p>\n

If you would like to read more about our mobile projects, check out Katica’s case study about mobile UX design<\/a>, and we also wrote a checklist on mobile-first design<\/a>!<\/p>\n

Are you a Product Manager just starting to learn about user experience design? We have something special for you!\u00a0Check our free e-book on how you can implement UX in your product:\u00a0<\/b>Product Manager\u2019s Guide to UX Design<\/b><\/span><\/a>.<\/b><\/p>\n

Want to learn more about UX in general?\u00a0We wrote\u00a0Product Design book<\/a>\u00a0introducing all the basics, and more! You can order it with free worldwide shipping now!<\/strong><\/b><\/p>\n","protected":false},"excerpt":{"rendered":"

With the ever-growing number\u00a0of mobile apps out there, your application has to catch the users’ attention immediately. Here are the\u00a04 core principles for designing mobile interfaces.\u00a0<\/p>\n","protected":false},"author":53,"featured_media":6195,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[25,28],"tags":[],"table_tags":[],"coauthors":[119],"yoast_head":"\n4 Principles For Designing Mobile Interfaces<\/title>\n<meta name=\"description\" content=\"The 4 core principles for designing mobile interfaces and catcing the users' attention immediately.\" \/>\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\/4-principles-for-designing-mobile-interfaces\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Four Principles For Designing Mobile Interfaces\" \/>\n<meta property=\"og:description\" content=\"The 4 core principles for designing mobile interfaces and catcing the users' attention immediately.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/\" \/>\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-22T07:00:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-10T12:59:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/12\/toolbar.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=\"Bence Vass\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Four Principles For Designing Mobile Interfaces\" \/>\n<meta name=\"twitter:description\" content=\"The 4 core principles for designing mobile interfaces and catcing the users' attention immediately.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/uxstudioteam.com\/website\/wp-content\/uploads\/2014\/12\/toolbar.png\" \/>\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=\"Bence Vass\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/\"},\"author\":{\"name\":\"Bence Vass\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/cae0fc84cd6e15b484c78ce0902027e2\"},\"headline\":\"4 Principles For Designing Mobile Interfaces\",\"datePublished\":\"2015-09-22T07:00:45+00:00\",\"dateModified\":\"2023-03-10T12:59:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/\"},\"wordCount\":627,\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"articleSection\":[\"Mobile UX\",\"UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/\",\"url\":\"https:\/\/uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/\",\"name\":\"4 Principles For Designing Mobile Interfaces\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\"},\"datePublished\":\"2015-09-22T07:00:45+00:00\",\"dateModified\":\"2023-03-10T12:59:42+00:00\",\"description\":\"The 4 core principles for designing mobile interfaces and catcing the users' attention immediately.\",\"breadcrumb\":{\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"4 Principles For Designing Mobile Interfaces\"}]},{\"@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\/cae0fc84cd6e15b484c78ce0902027e2\",\"name\":\"Bence Vass\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/50e85014de2e51ec79abe419cd0588da\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/DSC03409-e1519222927819-150x150.jpg\",\"contentUrl\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/DSC03409-e1519222927819-150x150.jpg\",\"caption\":\"Bence Vass\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"4 Principles For Designing Mobile Interfaces","description":"The 4 core principles for designing mobile interfaces and catcing the users' attention immediately.","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\/4-principles-for-designing-mobile-interfaces\/","og_locale":"en_US","og_type":"article","og_title":"Four Principles For Designing Mobile Interfaces","og_description":"The 4 core principles for designing mobile interfaces and catcing the users' attention immediately.","og_url":"https:\/\/uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/","og_site_name":"UX Studio","article_publisher":"https:\/\/www.facebook.com\/uxstudio.hu\/","article_published_time":"2015-09-22T07:00:45+00:00","article_modified_time":"2023-03-10T12:59:42+00:00","og_image":[{"width":800,"height":600,"url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/12\/toolbar.png","type":"image\/png"}],"author":"Bence Vass","twitter_card":"summary_large_image","twitter_title":"Four Principles For Designing Mobile Interfaces","twitter_description":"The 4 core principles for designing mobile interfaces and catcing the users' attention immediately.","twitter_image":"https:\/\/uxstudioteam.com\/website\/wp-content\/uploads\/2014\/12\/toolbar.png","twitter_creator":"@UXstudio","twitter_site":"@UXstudio","twitter_misc":{"Written by":"Bence Vass","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/#article","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/"},"author":{"name":"Bence Vass","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/cae0fc84cd6e15b484c78ce0902027e2"},"headline":"4 Principles For Designing Mobile Interfaces","datePublished":"2015-09-22T07:00:45+00:00","dateModified":"2023-03-10T12:59:42+00:00","mainEntityOfPage":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/"},"wordCount":627,"publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"articleSection":["Mobile UX","UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/","url":"https:\/\/uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/","name":"4 Principles For Designing Mobile Interfaces","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website"},"datePublished":"2015-09-22T07:00:45+00:00","dateModified":"2023-03-10T12:59:42+00:00","description":"The 4 core principles for designing mobile interfaces and catcing the users' attention immediately.","breadcrumb":{"@id":"https:\/\/uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/uxstudioteam.com\/ux-blog\/4-principles-for-designing-mobile-interfaces\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/"},{"@type":"ListItem","position":2,"name":"4 Principles For Designing Mobile Interfaces"}]},{"@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\/cae0fc84cd6e15b484c78ce0902027e2","name":"Bence Vass","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/50e85014de2e51ec79abe419cd0588da","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/DSC03409-e1519222927819-150x150.jpg","contentUrl":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/DSC03409-e1519222927819-150x150.jpg","caption":"Bence Vass"}}]}},"_links":{"self":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/1171"}],"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\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/comments?post=1171"}],"version-history":[{"count":11,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/1171\/revisions"}],"predecessor-version":[{"id":15520,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/1171\/revisions\/15520"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media\/6195"}],"wp:attachment":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media?parent=1171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/categories?post=1171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/tags?post=1171"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/table_tags?post=1171"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/coauthors?post=1171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}