{"id":4797,"date":"2018-04-20T09:55:41","date_gmt":"2018-04-20T08:55:41","guid":{"rendered":"https:\/\/uxstudioteam.com\/website\/?p=4797"},"modified":"2022-05-19T14:34:40","modified_gmt":"2022-05-19T13:34:40","slug":"material-design-on-desktop","status":"publish","type":"post","link":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/material-design-on-desktop\/","title":{"rendered":"Material Design On Desktop"},"content":{"rendered":"

We all love material design. The well-designed structure, the consistent visuals and the freakishly well-documented guideline. And yes, the guidelines are easy to use on mobile but parts of it fail on desktop applications.<\/strong><\/p>\n

\"Material<\/p>\n

<\/p>\n

Here\u00a0at our\u00a0UX company<\/a><\/span> we have some desktop\/web app projects where we use material design. After sketching we concentrate on visual hierarchy and interactions with wireframes<\/a>.<\/p>\n

So, way before the detailed UI design it becomes clear: the guidelines don’t cover desktop applications that well. So we have to be creative – invent new patterns or tweak the existing ones, yet stick to material design. Which eventually leads to inconsistent solutions in different products or even on different platform.<\/p>\n

Here are our solutions for the three main problems.<\/p>\n

1. Cards<\/strong><\/h2>\n

Oh, the good old cards! Nice shadows, great rounded corners – but what if not everything can be grouped on cards? Or I want to group blocks of cards? Or I have three actions but I can’t use the raised button because it would conflict with the Z-axis? Cards have great rules, such as: don’t overload the card with content or don’t use too many actions.<\/p>\n

Since desktop applications are wider and the content needs a container I often put every information on cards. When it comes to categorizing elements on cards I can’t use new cards – although that would be the easiest solution. Basically, the way Inbox puts cards on cards – even though you shouldn’t.<\/p>\n

\"Material<\/p>\n

On this search page we displayed the filters and the results on cards – but users got confused<\/a>. They couldn’t distinguish between the two elements. So we grabbed the contents of the filter and put it right below the header without a card.<\/p>\n

\"Material<\/p>\n

Here we have different modules for a desktop application. The easiest solution seemed like using cards for each module. Users could rearrange cards or close and open new ones. But the content of each card proved to be way too much to put on one card. Certain modules needed further navigation or complicated state changes.<\/p>\n

We couldn’t sacrifice the flexibility by building a left navigation and putting content on different pages, so we devided the screen instead. This way we are not sacrificing the flexibility and are not overcrowding the card with content that shouldn’t be there. Plus bonus: we could use cards to group smaller blocks instead.<\/p>\n

The takeaway<\/strong><\/h3>\n

The first thing I learnt from designing desktop material: forget about cards when it comes to the full layout. Whenever cards seem to be the easiest solution to divide up a huge space always think about the content first. Things to consider: number of actions, length of content, number of content blocks and even other elements outside the cards.<\/p>\n

2. Dialogs<\/strong><\/h2>\n

Let me start by saying dialog handling is amazing on mobile and small screen devices. It\u2019s a simple decision-making process: Will I have to open a new modal at some point? If the answer is yes then full-screen modal it is, if the answer is no a simple dialog box will do.<\/p>\n

On desktop, however, this simple thought process fails. Sometimes I have to use a new modal in the process but I can\u2019t open a whole new window. Because with a new window I don’t have enough content or the user would get lost in the process.<\/p>\n

\"Material<\/p>\n

Here the user can choose an item from a list. A drop-down menu was not an option because of two things. One: the items sometimes have long names and two: the list itself is a multiple level tree. Having all these in one dropdown would have been far from ideal. In this solution when the user clicks on the item the list appears and the previous content disappears. When they chose they hit done and are taken back to the previous \u2018state’.<\/p>\n

The takeaway<\/strong><\/h3>\n

Always keep the item the user clicked on and only change the other content. I found this more understandable than just using the item\u2019s label as the title for the next state. This way the two states are visually connected and the users will know exactly what to do.<\/p>\n

3. Floating Action Button<\/strong><\/h2>\n

If you mention material design to someone they\u2019ll be familiar with at least the FAB. It might be the most debated part of material design: some people hate it some people love it – you can\u2019t be \u2018meh\u2019 about it. While we at UXstudio love using them in different mobile products, on desktop we are not huge fans. On a small screen it\u2019s straightforward\u00a0because there is usually one main action. On desktop applications there are usually two main problems. First, there are more elements on one screen so the FAB becomes hard to notice. Users sometimes can\u2019t find it at all or are looking for a more traditional action button. Second, most of the desktop applications call for more actions on one screen. If there is more than one action with the same priority you can’t use a FAB. If you have different blocks with different actions the user won’t know what the FAB does.<\/p>\n

\"Material<\/p>\n

The solution here is simple: we avoid using a FAB on a desktop application when we can. We either use buttons where the user would look\u00a0for it or use button groups if we can’t highlight one single action.<\/p>\n

The takeaway<\/strong><\/h3>\n

If you have too much content or many actions stick to traditional buttons. If you have less actions and a simple page go for a FAB. The most important thing to remember is to always remain consistent.<\/p>\n

From what I\u2019ve learned from designing for desktop with material is that the rules which work on mobile are sometimes not the best on desktop. These can be because of visual noise or simply because users can\u2019t use the interface with ease if we follow the guideline too rigidly. But this is why it\u2019s called a guideline and not the Bible.<\/p>\n

Did you enjoy this article?<\/h2>\n

I really hope you did!I\u2019m curious what challenges you guys might have faced in your projects, let us know in the comments below. Do you feel we missed something important? Tell us.<\/p>\n

Download our\u00a0free ebook<\/a>\u00a0written specifically for Product Managers to help them learn more about our product design process.<\/p>\n

Do you feel like reading even more? Our CEO David Pasztor wrote a Product Design book<\/a> about our design philosophy. Order it today – with free shipping in Europe and the US!<\/p>\n","protected":false},"excerpt":{"rendered":"

We all love material design. The well-designed structure, the consistent visuals and the freakishly well-documented guideline. And yes, the guidelines are easy to use on mobile but parts of it fail on desktop applications.<\/p>\n","protected":false},"author":12,"featured_media":4812,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[28,26],"tags":[],"table_tags":[],"coauthors":[51],"yoast_head":"\nMaterial Design On Desktop<\/title>\n<meta name=\"description\" content=\"We all love material design and its well-documented guideline. And yes, it is easy to use on mobile but parts of it fail on desktop applications.\" \/>\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\/material-design-on-desktop\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Material Design On Desktop\" \/>\n<meta property=\"og:description\" content=\"We all love material design and its well-documented guideline. And yes, it is easy to use on mobile but parts of it fail on desktop applications.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uxstudioteam.com\/ux-blog\/material-design-on-desktop\/\" \/>\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=\"2018-04-20T08:55:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-19T13:34:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/04\/materialdesign_post.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Klaudia Simon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:site\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Klaudia Simon\" \/>\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\/material-design-on-desktop\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/material-design-on-desktop\/\"},\"author\":{\"name\":\"Klaudia Simon\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/5340398c86a9b6cd19cba4e1fc3e1900\"},\"headline\":\"Material Design On Desktop\",\"datePublished\":\"2018-04-20T08:55:41+00:00\",\"dateModified\":\"2022-05-19T13:34:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/material-design-on-desktop\/\"},\"wordCount\":1088,\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"articleSection\":[\"UX Design\",\"Web App UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/material-design-on-desktop\/\",\"url\":\"https:\/\/uxstudioteam.com\/ux-blog\/material-design-on-desktop\/\",\"name\":\"Material Design On Desktop\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\"},\"datePublished\":\"2018-04-20T08:55:41+00:00\",\"dateModified\":\"2022-05-19T13:34:40+00:00\",\"description\":\"We all love material design and its well-documented guideline. And yes, it is easy to use on mobile but parts of it fail on desktop applications.\",\"breadcrumb\":{\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/material-design-on-desktop\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/uxstudioteam.com\/ux-blog\/material-design-on-desktop\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/material-design-on-desktop\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Material Design On Desktop\"}]},{\"@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\/5340398c86a9b6cd19cba4e1fc3e1900\",\"name\":\"Klaudia Simon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/6a57393cb37881fb3fd62b88993eedbf\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4776cbe9bdaba623d0f4b47c9d3ad666?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4776cbe9bdaba623d0f4b47c9d3ad666?s=96&d=retro&r=g\",\"caption\":\"Klaudia Simon\"},\"description\":\"Designer. Probably getting way too absorbed in Axure prototypes and watching tv shows. Play icon expert.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Material Design On Desktop","description":"We all love material design and its well-documented guideline. And yes, it is easy to use on mobile but parts of it fail on desktop applications.","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\/material-design-on-desktop\/","og_locale":"en_US","og_type":"article","og_title":"Material Design On Desktop","og_description":"We all love material design and its well-documented guideline. And yes, it is easy to use on mobile but parts of it fail on desktop applications.","og_url":"https:\/\/uxstudioteam.com\/ux-blog\/material-design-on-desktop\/","og_site_name":"UX Studio","article_publisher":"https:\/\/www.facebook.com\/uxstudio.hu\/","article_published_time":"2018-04-20T08:55:41+00:00","article_modified_time":"2022-05-19T13:34:40+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2017\/04\/materialdesign_post.png","type":"image\/png"}],"author":"Klaudia Simon","twitter_card":"summary_large_image","twitter_creator":"@UXstudio","twitter_site":"@UXstudio","twitter_misc":{"Written by":"Klaudia Simon","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uxstudioteam.com\/ux-blog\/material-design-on-desktop\/#article","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/material-design-on-desktop\/"},"author":{"name":"Klaudia Simon","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/5340398c86a9b6cd19cba4e1fc3e1900"},"headline":"Material Design On Desktop","datePublished":"2018-04-20T08:55:41+00:00","dateModified":"2022-05-19T13:34:40+00:00","mainEntityOfPage":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/material-design-on-desktop\/"},"wordCount":1088,"publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"articleSection":["UX Design","Web App UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/material-design-on-desktop\/","url":"https:\/\/uxstudioteam.com\/ux-blog\/material-design-on-desktop\/","name":"Material Design On Desktop","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website"},"datePublished":"2018-04-20T08:55:41+00:00","dateModified":"2022-05-19T13:34:40+00:00","description":"We all love material design and its well-documented guideline. And yes, it is easy to use on mobile but parts of it fail on desktop applications.","breadcrumb":{"@id":"https:\/\/uxstudioteam.com\/ux-blog\/material-design-on-desktop\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uxstudioteam.com\/ux-blog\/material-design-on-desktop\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/uxstudioteam.com\/ux-blog\/material-design-on-desktop\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/"},{"@type":"ListItem","position":2,"name":"Material Design On Desktop"}]},{"@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\/5340398c86a9b6cd19cba4e1fc3e1900","name":"Klaudia Simon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/6a57393cb37881fb3fd62b88993eedbf","url":"https:\/\/secure.gravatar.com\/avatar\/4776cbe9bdaba623d0f4b47c9d3ad666?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4776cbe9bdaba623d0f4b47c9d3ad666?s=96&d=retro&r=g","caption":"Klaudia Simon"},"description":"Designer. Probably getting way too absorbed in Axure prototypes and watching tv shows. Play icon expert."}]}},"_links":{"self":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/4797"}],"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\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/comments?post=4797"}],"version-history":[{"count":6,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/4797\/revisions"}],"predecessor-version":[{"id":9713,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/4797\/revisions\/9713"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media\/4812"}],"wp:attachment":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media?parent=4797"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/categories?post=4797"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/tags?post=4797"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/table_tags?post=4797"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/coauthors?post=4797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}