{"id":25181,"date":"2015-12-02T23:01:48","date_gmt":"2015-12-02T15:01:48","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25181"},"modified":"2021-10-01T17:25:14","modified_gmt":"2021-10-01T09:25:14","slug":"flat-20","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/flat-20\/","title":{"rendered":"Flat 2.0 &#038; How It Solves Flat Design&#8217;s Usability Problems"},"content":{"rendered":"<p><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/\" rel=\"noopener\">Flat design<\/a> has been around since as early as the 1950s when the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/International_Typographic_Style\">International Typographic Style<\/a> was developed. In recent times it has gained wide popularity since the launch of Microsoft\u2019s new <strong>geometry- and typography-focused Metro design<\/strong> language, at first in the new Windows Phone in 2010, then in Windows 8 in 2012.<\/p>\n<p>Flat design is characterized by the <strong>lack of three dimensional effects and glossy visual elements<\/strong> in order to achieving <strong>cleanness, minimalism<\/strong>, and<strong> clarity<\/strong>. It goes against the previously predominant design style, <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/skeuomorphic-to-flat-plugin\/\" rel=\"noopener\">skeuomorphism<\/a> that makes use of shiny buttons and illustrations imitating real-life 3D objects.<\/p>\n<p>Flat design essentially aims to streamline websites, raise focus on content, offer more intuitive interactions, and provide a faster and more functional user experience. It\u2019s also easy to use its simple, box-like elements, and grid-based layouts for responsive design.<\/p>\n<h2>Usability Problems of Flat Design<\/h2>\n<p>While flat design gives us tremendous help and a great toolkit to provide our users with fast and clutter-free websites, it can cause certain usability problems, especially when it\u2019s overused.<\/p>\n<h3>No Visual Signifiers of Clickability<\/h3>\n<p>If we use three dimensional effects, it naturally gives an illusion of depth to our designs. This helps users quickly <strong>find interactive elements<\/strong>, those that either can be clicked on (like buttons and icons), or filled in (like form fields). One of the main concerns about flat design is that it makes it hard for users to <strong>recognize clickable elements<\/strong>.<\/p>\n<p>Before the flat era, web designers usually indicated clickability by using visual solutions such as <strong>gradients, textures, raised edges, or drop shadows<\/strong> to make buttons and other clickable objects look like they can be pressed on.<\/p>\n<p>Flat design lacks these visual signifiers, and has to solve the same task with a much smaller toolset: <strong>colours, shapes, proximity<\/strong>, and<strong> contextual elements<\/strong>.<\/p>\n<p>Why it this a problem? Let\u2019s try an experiment.<\/p>\n<p>Look at this screenshot below. Try to guess which elements are clickable based on this screenshot. It\u2019s not those that you would first think of. We can find many other similar usability problems all over the web.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.fitbit.com\/global\/uk\/home#\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-20\/clickability-issues.jpg\" alt=\"Clickability Issues\" width=\"700\" height=\"363\"><\/a><\/figure>\n<h3>Reduced Discoverability Because of No Z-Axis<\/h3>\n<p>People in real life find objects and move along in three dimensions: the x-, y-, and z-axis. When they run into a minimalistically designed, flat website without 3D effects, they get an experience that is different from what they are used to, what they are primarily familar with.<\/p>\n<p>This means that they need to <strong>use more effort to discover relationships between objects<\/strong>, and <strong>understand the visual hierarchy<\/strong> of the site. For example we need to spend more time on the home page of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-gb\/\">Microsoft\u2019s Developer Network<\/a> to visually decode the information, and the purpose of the different elements on the site.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-gb\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-20\/reduced-discoverability.jpg\" alt=\"Reduced Discoverability\" width=\"700\" height=\"431\"><\/a>The rule of thumb in UX design is to always try to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.nngroup.com\/\/articles\/minimize-cognitive-load\/\">minimize cognitive load<\/a> on the user in order to maximize usability. As we can see it in many cases, this doesn\u2019t always happen with flat design.<\/p>\n<h3>Low Information Density<\/h3>\n<p>Flat design has also been criticized for risking low information density by the UX expert <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.nngroup.com\/\">Nielsen-Norman Group<\/a>.<\/p>\n<p>In their <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.nngroup.com\/\/articles\/windows-8-disappointing-usability\/\">criticism on Windows 8\u2019s usability<\/a>, they used examples of Windows Store apps, and the website of the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.latimes.com\/\">Los Angeles Times<\/a> to show the issues that <strong>low information density<\/strong> (having few stories on the initial screen, headlines without summaries, barely recognizable grouping, etc.) can cause from the point of view of usability.<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-20\/low-information-density.jpg\" alt=\"Windows Store Apps - Low Information Density\"><\/figure>\n<p>From another aspect, less information can also be seen as removing distractions, enabling users to focus only on important things, but if minimalism is overdone it can easily sacrifice the primary goal of a site, i.e. transforming information to the viewers.<\/p>\n<h2>The Rise of Flat 2.0<\/h2>\n<p>As more and more designers recognize the usability flaws of flat design, a new, more mature version of it has sprung up, called \u201cFlat 2.0\u201d or \u201cAlmost Flat\u201d design. While the change from skeuomorphism to flat was radical, the evolution of flat design is much more elusive.<\/p>\n<p>The new style is still flat, but it <strong>adds a little three dimensionality back to the designs<\/strong> in the form of <strong>subtle shadows, highlights<\/strong>, and <strong>layers<\/strong>. Flat 2.0 \u2013 if it\u2019s used well \u2013 can fix the aforementioned usability problems by bringing back a little realism (skeuomorphism), and adding some depth and details, while keeping the advantages of minimalism such as streamlined websites, clarity, and faster page loading time.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-20\/flat1-vs-flat2.jpg\" alt=\"Flat 1.0 vs. Flat 2.0\" width=\"700\" height=\"394\"><\/figure>\n<h2>Material Design<\/h2>\n<p>Google\u2019s new design language, called <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/material.io\/design\">Material Design<\/a> is probably the most notable example of the Flat 2.0 style. Google released Material Design with Android L in 2014. While Material Design retains the main characteristics of flat design, it uses certain metaphors from physics to help users quickly find analogies between the real world and the digital world.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/material.io\/design\/style\/color.html#\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-20\/material-design-color.jpg\" alt=\"Material Design Color\"><\/a><\/figure>\n<p>Material Design uses the z-axis, gives <strong>subtle depth<\/strong> to the design, and smartly makes use of layers by <strong>separating them with drop shadows <\/strong>and<strong> animations<\/strong>. Google has a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/material.io\/design\">supercool description<\/a> about how it works, and it\u2019s really worth to read through it to understand its main principles and rules.<\/p>\n<figure><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/material.io\/design\/what-is-material\/elevation-shadows.html#elevation-shadows-shadows\"><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/flat-20\/material-design-dialog.jpg\" alt=\"Material Design Dialog\"><\/a><\/figure>\n<h2>Conclusion<\/h2>\n<p>As good designers always aim to improve the experience of their users, the web design industry is constantly changing. Flat design has replaced skeuomorphism quickly, resulting in <strong>grid-based, minimalistic layouts and simplistic elements<\/strong> that lately have overrun the web (this has generated some talk about web design <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/the-day-web-design-gets-boring\/\" rel=\"noopener\">becoming boring<\/a> or even dying, but it couldn\u2019t be further from the truth).<\/p>\n<p><strong>Flat 2.0 gives answers to the perceived problems of flat design<\/strong>. It\u2019s a smart compromise between functionality, aesthetics, and usability. Of course, we don\u2019t need to use the <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/material-design-resources\/\" rel=\"noopener\">Material UI kits<\/a> <em>everywhere<\/em>, but understanding the philosophy behind it can give us a solid background about <strong>how to develop our own style<\/strong> in accordance with the latest findings in user experience design.<\/p>","protected":false},"excerpt":{"rendered":"<p>Flat design has been around since as early as the 1950s when the International Typographic Style was developed. In recent times it has gained wide popularity since the launch of Microsoft\u2019s new geometry- and typography-focused Metro design language, at first in the new Windows Phone in 2010, then in Windows 8 in 2012. Flat design&hellip;<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[2372],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Flat 2.0 &amp; How It Solves Flat Design&#039;s Usability Problems - Hongkiat<\/title>\n<meta name=\"description\" content=\"Flat design has been around since as early as the 1950s when the International Typographic Style was developed. In recent times it has gained wide\" \/>\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.hongkiat.com\/blog\/flat-20\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flat 2.0 &amp; How It Solves Flat Design&#039;s Usability Problems\" \/>\n<meta property=\"og:description\" content=\"Flat design has been around since as early as the 1950s when the International Typographic Style was developed. In recent times it has gained wide\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/flat-20\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-02T15:01:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-01T09:25:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/flat-20\/clickability-issues.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\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:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-20\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-20\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"Flat 2.0 &#038; How It Solves Flat Design&#8217;s Usability Problems\",\"datePublished\":\"2015-12-02T15:01:48+00:00\",\"dateModified\":\"2021-10-01T09:25:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-20\\\/\"},\"wordCount\":952,\"commentCount\":23,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-20\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/flat-20\\\/clickability-issues.jpg\",\"keywords\":[\"Flat Design\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-20\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-20\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-20\\\/\",\"name\":\"Flat 2.0 & How It Solves Flat Design's Usability Problems - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-20\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-20\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/flat-20\\\/clickability-issues.jpg\",\"datePublished\":\"2015-12-02T15:01:48+00:00\",\"dateModified\":\"2021-10-01T09:25:14+00:00\",\"description\":\"Flat design has been around since as early as the 1950s when the International Typographic Style was developed. In recent times it has gained wide\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-20\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-20\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-20\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/flat-20\\\/clickability-issues.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/flat-20\\\/clickability-issues.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/flat-20\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flat 2.0 &#038; How It Solves Flat Design&#8217;s Usability Problems\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Flat 2.0 & How It Solves Flat Design's Usability Problems - Hongkiat","description":"Flat design has been around since as early as the 1950s when the International Typographic Style was developed. In recent times it has gained wide","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.hongkiat.com\/blog\/flat-20\/","og_locale":"en_US","og_type":"article","og_title":"Flat 2.0 & How It Solves Flat Design's Usability Problems","og_description":"Flat design has been around since as early as the 1950s when the International Typographic Style was developed. In recent times it has gained wide","og_url":"https:\/\/www.hongkiat.com\/blog\/flat-20\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-12-02T15:01:48+00:00","article_modified_time":"2021-10-01T09:25:14+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/flat-20\/clickability-issues.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/flat-20\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/flat-20\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"Flat 2.0 &#038; How It Solves Flat Design&#8217;s Usability Problems","datePublished":"2015-12-02T15:01:48+00:00","dateModified":"2021-10-01T09:25:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/flat-20\/"},"wordCount":952,"commentCount":23,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/flat-20\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/flat-20\/clickability-issues.jpg","keywords":["Flat Design"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/flat-20\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/flat-20\/","url":"https:\/\/www.hongkiat.com\/blog\/flat-20\/","name":"Flat 2.0 & How It Solves Flat Design's Usability Problems - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/flat-20\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/flat-20\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/flat-20\/clickability-issues.jpg","datePublished":"2015-12-02T15:01:48+00:00","dateModified":"2021-10-01T09:25:14+00:00","description":"Flat design has been around since as early as the 1950s when the International Typographic Style was developed. In recent times it has gained wide","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/flat-20\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/flat-20\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/flat-20\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/flat-20\/clickability-issues.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/flat-20\/clickability-issues.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/flat-20\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Flat 2.0 &#038; How It Solves Flat Design&#8217;s Usability Problems"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6y9","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=25181"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25181\/revisions"}],"predecessor-version":[{"id":57698,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25181\/revisions\/57698"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=25181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=25181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=25181"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=25181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}