{"componentChunkName":"component---src-components-templates-articles-index-js","path":"/articles/2018/the-danger-and-pitfalls-of-uniformity-in-design-systems/","result":{"data":{"mdx":{"id":"6db650e8-89f4-5e1f-acca-0ab69cebfec5","timeToRead":4,"frontmatter":{"author":{"id":"David Aragonés","links":null},"featuredImage":"/images/articles/dangers-and-pitfalls/dangers-hero.jpg","canonicalLink":null,"title":"The Danger and Pitfalls of Uniformity in Design Systems","date":"2018-06-11","tags":null,"contributors":null},"excerpt":"In 2008, I came across design systems for the first time. Back then, we didn’t know (nor did we care) what a design system was. We didn’t…","body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"author\": \"David Aragonés\",\n  \"date\": \"2018-06-11\",\n  \"title\": \"The Danger and Pitfalls of Uniformity in Design Systems\",\n  \"featuredImage\": \"/images/articles/dangers-and-pitfalls/dangers-hero.jpg\",\n  \"publish\": true\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"In 2008, I came across design systems for the first time. Back then, we didn\\u2019t know (nor did we care) what a design system was. We didn\\u2019t have design principles, nor a grid, nor did we follow established patterns. The only thing we care about was being as pixel perfect as possible with the final product.\\nTo achieve pixel perfection we had a resource dictionary with basic UI controls. Within these style series, we had resources: colors, measures and sizes, which we applied to our UI elements. This helped us to maintain consistency in the application. A change in the dictionary was transmitted to all the controls and styles where they were applied. It was simply marvellous. Does this sound familiar?\"), mdx(\"h2\", {\n    \"id\": \"design-systems\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#design-systems\",\n    \"aria-label\": \"design systems permalink\",\n    \"className\": \"nice-anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Design Systems\"), mdx(\"p\", null, \"Nowadays that\\u2019s a \\u201Cthing of the past\\u201D. What we now call design systems have become a trend. This progression towards design system is now a common practice.\\nThis means that what we had for desktop applications 10 years ago is being applied now to all digital products.\\nMostly, we have better tools and technologies for designers and developers that make things easier, specially with web design. I would like to talk a bit about that complex world that goes beyond traditional webs such as product intranets, app site, which can make an intensive use of design systems.\\nFrom my experience, a design system is more than that. A design system is a group of elements, instructions, design rules and interaction patterns that can be applied to more than one product to achieve a common identity without losing each product\\u2019s own characteristics. This is the key: without losing each product\\u2019s own characteristics.\"), mdx(\"aside\", null, \" Without losing each product\\u2019s own characteristics \"), mdx(\"h2\", {\n    \"id\": \"identity-and-consistency\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#identity-and-consistency\",\n    \"aria-label\": \"identity and consistency permalink\",\n    \"className\": \"nice-anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Identity and Consistency\"), mdx(\"p\", null, \"A common practice in interface design to know if the visual relationships and hierarchies are working, is to make a Squint Test. This is, you close an eye and partially close the other one to see which items stand out, are blurry or look like they go together. Basically, a change of perspective that helps us become aware if something is not working as it should or as we would like it to work visually.\"), mdx(\"p\", null, \"Following this idea of change of perspective and having a wider vision of a product, we observe that a design system could be used with other products which have more features and different goals. All of this means users can make use of various products that must keep their own identity and use the same design system.\"), mdx(\"p\", null, \"Let\\u2019s compare two Google products: Drive and Calendar. Different products using the same design system: material design.\"), mdx(Image, {\n    src: \"images/articles/dangers-and-pitfalls/google-drive.png\",\n    caption: \"Google Drive\",\n    mdxType: \"Image\"\n  }), mdx(Image, {\n    src: \"images/articles/dangers-and-pitfalls/google-calendar.png\",\n    caption: \"Google Calendar\",\n    mdxType: \"Image\"\n  }), mdx(\"p\", null, \"If we take a more careful look at the most basic elements of these two products, we can observe that both of them have a series of components that are shared: such as the notification area, the user sticker and the application menu, just to name a few.\"), mdx(Image, {\n    src: \"images/articles/dangers-and-pitfalls/google-menu.png\",\n    caption: \"The application menu, notifications and user sticker\",\n    mdxType: \"Image\"\n  }), mdx(\"p\", null, \"However, if we focus on the functional part, both examples require a search feature. Drive has a visually clear search box with a shaded background but on Calendar you must click on the magnifying glass to activate the search box. Why have they solved the search in a different way?\"), mdx(Image, {\n    src: \"images/articles/dangers-and-pitfalls/drive-menu.png\",\n    caption: \"Drive\\u2019s search box\",\n    mdxType: \"Image\"\n  }), mdx(Image, {\n    src: \"images/articles/dangers-and-pitfalls/calendar-menu.png\",\n    caption: \"Calendar\\u2019s search box\",\n    mdxType: \"Image\"\n  }), mdx(\"p\", null, \"Knowing the reasoning behind this, it makes sense. The Calendar search weighs less and it\\u2019s not considered the most important task for their users, but it is important on Google Drive. This is a good example where the consistency principle is not put above the real needs of the users. In addition, it contributes to the characterization of each product.\\nConsistency is easier said than done because when you design using pieces that are part of a design system you can easily fall into the mistake of uniformity. Unfortunately, in the end, the system has the solution established and the designer can just follow the rules without asking themselves if they really make sense. It\\u2019s a way for designers to avoid responsibility and blame everything on the design system.\"), mdx(\"aside\", null, ' ', \"It\\u2019s a way for designers to avoid responsibility and blame everything on the design system\"), mdx(\"h2\", {\n    \"id\": \"bend-without-breaking\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#bend-without-breaking\",\n    \"aria-label\": \"bend without breaking permalink\",\n    \"className\": \"nice-anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Bend without breaking\"), mdx(\"p\", null, \"When talking about reusing, developers have a lot to say. Their expectation is that if a code they have created works well, it can and should be reused as much as possible. Of course, this makes sense. This reasoning works in a similar way for designers, if we can be consistent, why not be so? The natural reasoning is that consistency comes from our need to save time and energy by reusing the same solution when we have similar needs to cover of design or interaction.\\nHowever, applying a rule or a component indiscriminately, without thinking about the context or the users\\u2019 needs, doesn\\u2019t sound like it\\u2019s user centric design but system centric design.\"), mdx(\"aside\", null, \" Doesn\\u2019t sound like it\\u2019s user centric design but system centric design \"), mdx(\"p\", null, \"Let\\u2019s look at an example:\\nWe have decided that all the forms of our desktop application will follow the float label pattern, must all the scenarios with inputs follow the same pattern? The login screen? In an inline edition of a table? In an info panel? And what if the information of the panel is editable?\\nWe have to be flexible when making decisions, not only when applying rules but also with the atomic elements. It\\u2019s preferable to have several decisions in the system that permit variations than to have strict decisions that are not customizable. A flexible system that allows exceptions without causing chaos. This would help the system grow better.\\nAllow exceptions supported on: user research, validated hypothesis and contrasted scenarios. And obviously, these exceptions are needed because there are users and business needs that the systems can not cover in specific situations.\"), mdx(\"h2\", {\n    \"id\": \"conclusion\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#conclusion\",\n    \"aria-label\": \"conclusion permalink\",\n    \"className\": \"nice-anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Conclusion\"), mdx(\"p\", null, \"Uniformity produces bland and easily forgettable experiences that do not create the bond of our brands and products with the users. Because after all, our goal must be to provide the best and most memorable user experience.\\nThe challenge for design teams is to find the balance between consistency and flexibility when applying a design system to an ecosystem of products.\\nWith the increasing popularity of design systems, it seems as if we\\u2019ve found the philosopher\\u2019s stone of the interface design. Although said design systems can provide a solution to difficulties and problems, it\\u2019s essential that we analyze in depth the application of the solution to each problem keeping in mind the end user. So here again, the key is, the user.\"), mdx(\"p\", null, \"PS. The UX Liferay Team released a design system called \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://design.liferay.com/lexicon\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"Lexicon\"), \", have a look. We love feedback! You can talk with us \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://twitter.com/Liferay_Lexicon\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"via twitter\"), \".\"), mdx(\"p\", null, \"Ah! and I also wrote this article \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.linkedin.com/pulse/los-peligros-de-la-uniformidad-aplicando-sistemas-aragon%C3%A9s-otero\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"in Spanish\"), \" a couple of months ago.\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"/articles/2018/the-danger-and-pitfalls-of-uniformity-in-design-systems/"}},"staticQueryHashes":["1103494199","1103494199","1394963066","1394963066","1564808922","1564808922","2410546144","2410546144","2684635362","2684635362","3081742206","3081742206","3081742206","3081742206","3781963344","3781963344","3945011116","3945011116"]}