1- Consistency can’t be achieved by vague rules
Even the best are being inconsistent sometimes. Apple iOS 11 had many UI inconsistencies, there is an article that took a dive into the details of iOS 11 and found a good amount inconsistent UI elements.
A better example: Windows 10 at some point, had -at least- 6 different right-click menu styles…
I don’t know if it there were any rules to design right-click menu in Windows 10 at this point. but looking at these different menu styles, and in spite of how different they are, we can still assume that there *might* have been some rules for The right-click menu. and yet, all these different menu styles will still be adhering to the rules, for example:
- Only use Segoe font
- Do not mix more than one font size, style or colour
- Use 1 pixel line to separate menu items if necessary
- Don’t use gradients, patterns or emboss effects in the background
- The menu items should be either text only or text with an icon (the icon should always be to the right of the text)
- Use arrowhead symbol (>) on the left side to differentiate items with submenu
As you can see, the 6 rules I came up with *look* OK, they might get approved in many design systems teams. yet, we can see that they were not clear enough to achieve consistency. we are only talking about the visual part of it, let alone the interaction and animation.
In Arabic calligraphy, the consistency is amazing even on the level of lines that shape the letters. to the extent that you won’t have to learn to write the whole alphabet. because if you master specific lines and curves, you will learn all that is needed to create the letters. let me show you an example:
In Thuluth style, One curve (called Kassah, Arabic for Cup) is reused in -at least- 8 different letters. and for this one curve, there are at least 6 rules that guarantee the consistency of the Kassah:
Not only this makes the curve easier to learn and follow. but the result will always be consistent. and the fact that the curve is reused in different letters creates this visual harmony when you use the system for actual implementation of weaving the words together.
- Decide which elements of the design system will be reused the most and focus on creating clear and comprehensive rules for these elements. don’t think that a visual example or vague rules will be enough.
- Ask a colleague/try yourself to generate odd output without breaking the rules to test how inclusive they are. ’(Bonus: it is actually fun team exercise also to do watch this video as a reference)